chore(viewer): 🛂 Dynamically parse the viewer api host

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -31,7 +31,7 @@ export const ChatBlock = ({
   onScroll,
   onBlockEnd,
 }: ChatBlockProps) => {
-  const { typebot, updateVariableValue, createEdge } = useTypebot()
+  const { typebot, updateVariableValue, createEdge, apiHost } = useTypebot()
   const [displayedSteps, setDisplayedSteps] = useState<PublicStep[]>([])
 
   const currentStepIndex = displayedSteps.length - 1
@@ -60,13 +60,16 @@ export const ChatBlock = ({
       nextEdgeId ? onBlockEnd(nextEdgeId) : displayNextStep()
     }
     if (isIntegrationStep(currentStep)) {
-      const nextEdgeId = await executeIntegration(
-        typebot.typebotId,
-        currentStep,
-        typebot.variables,
-        { blockIndex, stepIndex: currentStepIndex },
-        updateVariableValue
-      )
+      const nextEdgeId = await executeIntegration({
+        step: currentStep,
+        context: {
+          apiHost,
+          typebotId: typebot.id,
+          indices: { blockIndex, stepIndex: currentStepIndex },
+          variables: typebot.variables,
+          updateVariableValue,
+        },
+      })
       nextEdgeId ? onBlockEnd(nextEdgeId) : displayNextStep()
     }
   }

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -14,12 +14,14 @@ import { Answer, BackgroundType, Edge, PublicTypebot } from 'models'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot
+  apiHost?: string
   onNewBlockVisible?: (edge: Edge) => void
   onNewAnswer?: (answer: Answer) => void
   onCompleted?: () => void
 }
 export const TypebotViewer = ({
   typebot,
+  apiHost = process.env.NEXT_PUBLIC_VIEWER_HOST,
   onNewBlockVisible,
   onNewAnswer,
   onCompleted,
@@ -41,6 +43,8 @@ export const TypebotViewer = ({
     if (onCompleted) onCompleted()
   }
 
+  if (!apiHost)
+    return <p>process.env.NEXT_PUBLIC_VIEWER_HOST is missing in env</p>
   return (
     <Frame
       id="typebot-iframe"
@@ -62,7 +66,7 @@ export const TypebotViewer = ({
           }:wght@300;400;600&display=swap');`,
         }}
       />
-      <TypebotContext typebot={typebot}>
+      <TypebotContext typebot={typebot} apiHost={apiHost}>
         <AnswersContext>
           <div
             className="flex text-base overflow-hidden bg-cover h-screen w-screen flex-col items-center typebot-container"