fix(engine): 🐛 Save variables from webhooks in results

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

@@ -49,7 +49,7 @@ export const ChatBlock = ({
     injectLinkedTypebot,
     linkedTypebots,
   } = useTypebot()
-  const { resultValues } = useAnswers()
+  const { resultValues, updateVariables } = useAnswers()
   const [processedSteps, setProcessedSteps] = useState<Step[]>([])
   const [displayedChunks, setDisplayedChunks] = useState<ChatDisplayChunk[]>([])
 
@@ -104,6 +104,7 @@ export const ChatBlock = ({
         typebot,
         linkedTypebots,
         updateVariableValue,
+        updateVariables,
         injectLinkedTypebot,
         onNewLog,
         createEdge,
@@ -121,6 +122,7 @@ export const ChatBlock = ({
           variables: typebot.variables,
           isPreview,
           updateVariableValue,
+          updateVariables,
           resultValues,
           blocks: typebot.blocks,
           onNewLog,

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

@@ -14,21 +14,19 @@ type Props = {
   predefinedVariables?: { [key: string]: string | undefined }
   onNewBlockVisible: (edge: Edge) => void
   onCompleted: () => void
-  onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
 }
 export const ConversationContainer = ({
   theme,
   predefinedVariables,
   onNewBlockVisible,
   onCompleted,
-  onVariablesPrefilled,
 }: Props) => {
   const { typebot, updateVariableValue } = useTypebot()
   const { document: frameDocument } = useFrame()
   const [displayedBlocks, setDisplayedBlocks] = useState<
     { block: Block; startStepIndex: number }[]
   >([])
-  const { setPrefilledVariables } = useAnswers()
+  const { updateVariables } = useAnswers()
   const bottomAnchor = useRef<HTMLDivElement | null>(null)
   const scrollableContainer = useRef<HTMLDivElement | null>(null)
 
@@ -53,8 +51,7 @@ export const ConversationContainer = ({
 
   useEffect(() => {
     const prefilledVariables = injectPredefinedVariables(predefinedVariables)
-    if (onVariablesPrefilled) onVariablesPrefilled(prefilledVariables)
-    setPrefilledVariables(prefilledVariables)
+    updateVariables(prefilledVariables)
     displayNextBlock(typebot.blocks[0].steps[0].outgoingEdgeId)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

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

@@ -31,7 +31,7 @@ export type TypebotViewerProps = {
   onNewAnswer?: (answer: Answer) => void
   onNewLog?: (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => void
   onCompleted?: () => void
-  onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
+  onVariablesUpdated?: (variables: VariableWithValue[]) => void
 }
 
 export const TypebotViewer = ({
@@ -44,7 +44,7 @@ export const TypebotViewer = ({
   onNewBlockVisible,
   onNewAnswer,
   onCompleted,
-  onVariablesPrefilled,
+  onVariablesUpdated,
 }: TypebotViewerProps) => {
   const containerBgColor = useMemo(
     () =>
@@ -93,7 +93,10 @@ export const TypebotViewer = ({
         isPreview={isPreview}
         onNewLog={handleNewLog}
       >
-        <AnswersContext onNewAnswer={handleNewAnswer}>
+        <AnswersContext
+          onNewAnswer={handleNewAnswer}
+          onVariablesUpdated={onVariablesUpdated}
+        >
           <div
             className="flex text-base overflow-hidden bg-cover h-screen w-screen flex-col items-center typebot-container"
             style={{
@@ -108,7 +111,6 @@ export const TypebotViewer = ({
                 onNewBlockVisible={handleNewBlockVisible}
                 onCompleted={handleCompleted}
                 predefinedVariables={predefinedVariables}
-                onVariablesPrefilled={onVariablesPrefilled}
               />
             </div>
             {typebot.settings.general.isBrandingEnabled && (