feat: ✨ Add new onboarding flow

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

@@ -158,7 +158,7 @@ export const ChatBlock = ({
       if (currentStep?.outgoingEdgeId || processedSteps.length === steps.length)
         return onBlockEnd(currentStep.outgoingEdgeId)
     }
-    const nextStep = steps[processedSteps.length]
+    const nextStep = steps[processedSteps.length + startStepIndex]
     if (nextStep) insertStepInStack(nextStep)
   }
 

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

@@ -11,12 +11,14 @@ import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext'
 
 type Props = {
   theme: Theme
+  predefinedVariables?: { [key: string]: string | undefined }
   onNewBlockVisible: (edge: Edge) => void
   onCompleted: () => void
   onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
 }
 export const ConversationContainer = ({
   theme,
+  predefinedVariables,
   onNewBlockVisible,
   onCompleted,
   onVariablesPrefilled,
@@ -50,23 +52,28 @@ export const ConversationContainer = ({
   }
 
   useEffect(() => {
-    const prefilledVariables = injectUrlParamsIntoVariables()
-    if (onVariablesPrefilled) {
-      onVariablesPrefilled(prefilledVariables)
-      setPrefilledVariables(prefilledVariables)
+    if (predefinedVariables) {
+      const prefilledVariables = injectPredefinedVariables(predefinedVariables)
+      if (onVariablesPrefilled) {
+        onVariablesPrefilled(prefilledVariables)
+        setPrefilledVariables(prefilledVariables)
+      }
     }
     displayNextBlock(typebot.blocks[0].steps[0].outgoingEdgeId)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const injectUrlParamsIntoVariables = () => {
-    const urlParams = new URLSearchParams(location.search)
+  const injectPredefinedVariables = (predefinedVariables: {
+    [key: string]: string | undefined
+  }) => {
     const prefilledVariables: VariableWithValue[] = []
-    urlParams.forEach((value, key) => {
+    Object.keys(predefinedVariables).forEach((key) => {
       const matchingVariable = typebot.variables.find(
         (v) => v.name.toLowerCase() === key.toLowerCase()
       )
       if (isNotDefined(matchingVariable)) return
+      const value = predefinedVariables[key]
+      if (!value) return
       updateVariableValue(matchingVariable?.id, value)
       prefilledVariables.push({ ...matchingVariable, value })
     })

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

@@ -26,17 +26,20 @@ export type TypebotViewerProps = {
   isPreview?: boolean
   apiHost?: string
   style?: CSSProperties
+  predefinedVariables?: { [key: string]: string | undefined }
   onNewBlockVisible?: (edge: Edge) => void
   onNewAnswer?: (answer: Answer) => void
   onNewLog?: (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => void
   onCompleted?: () => void
   onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
 }
+
 export const TypebotViewer = ({
   typebot,
   apiHost = process.env.NEXT_PUBLIC_VIEWER_URL,
   isPreview = false,
   style,
+  predefinedVariables,
   onNewLog,
   onNewBlockVisible,
   onNewAnswer,
@@ -104,6 +107,7 @@ export const TypebotViewer = ({
                 theme={typebot.theme}
                 onNewBlockVisible={handleNewBlockVisible}
                 onCompleted={handleCompleted}
+                predefinedVariables={predefinedVariables}
                 onVariablesPrefilled={onVariablesPrefilled}
               />
             </div>