fix(results): 🐛 Collect prefilled variables in db

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

@@ -21,8 +21,18 @@ export const ChatStep = ({
 }) => {
   const { addAnswer } = useAnswers()
 
-  const handleInputSubmit = (content: string, isRetry: boolean) => {
-    if (!isRetry) addAnswer({ stepId: step.id, blockId: step.blockId, content })
+  const handleInputSubmit = (
+    content: string,
+    isRetry: boolean,
+    variableId?: string
+  ) => {
+    if (!isRetry)
+      addAnswer({
+        stepId: step.id,
+        blockId: step.blockId,
+        content,
+        variableId: variableId ?? null,
+      })
     onTransitionEnd(content, isRetry)
   }
 
@@ -38,7 +48,7 @@ const InputChatStep = ({
   onSubmit,
 }: {
   step: InputStep
-  onSubmit: (value: string, isRetry: boolean) => void
+  onSubmit: (value: string, isRetry: boolean, variableId?: string) => void
 }) => {
   const { typebot } = useTypebot()
   const { addNewAvatarOffset } = useHostAvatars()
@@ -54,7 +64,7 @@ const InputChatStep = ({
 
   const handleSubmit = (value: string) => {
     setAnswer(value)
-    onSubmit(value, !isInputValid(value, step.type))
+    onSubmit(value, !isInputValid(value, step.type), step.options.variableId)
   }
 
   if (answer) {

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

@@ -5,8 +5,8 @@ import { useFrame } from 'react-frame-component'
 import { setCssVariablesValue } from '../services/theme'
 import { useAnswers } from '../contexts/AnswersContext'
 import { deepEqual } from 'fast-equals'
-import { Answer, Edge, PublicBlock, Theme } from 'models'
-import { byId } from 'utils'
+import { Answer, Edge, PublicBlock, Theme, VariableWithValue } from 'models'
+import { byId, isNotDefined } from 'utils'
 import { animateScroll as scroll } from 'react-scroll'
 import { useTypebot } from 'contexts/TypebotContext'
 
@@ -15,12 +15,14 @@ type Props = {
   onNewBlockVisible: (edge: Edge) => void
   onNewAnswer: (answer: Answer) => void
   onCompleted: () => void
+  onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
 }
 export const ConversationContainer = ({
   theme,
   onNewBlockVisible,
   onNewAnswer,
   onCompleted,
+  onVariablesPrefilled,
 }: Props) => {
   const { typebot, updateVariableValue } = useTypebot()
   const { document: frameDocument } = useFrame()
@@ -48,19 +50,24 @@ export const ConversationContainer = ({
   }
 
   useEffect(() => {
-    injectUrlParamsIntoVariables()
+    const prefilledVariables = injectUrlParamsIntoVariables()
+    if (onVariablesPrefilled) onVariablesPrefilled(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 prefilledVariables: VariableWithValue[] = []
     urlParams.forEach((value, key) => {
       const matchingVariable = typebot.variables.find(
         (v) => v.name.toLowerCase() === key.toLowerCase()
       )
-      if (matchingVariable) updateVariableValue(matchingVariable?.id, value)
+      if (isNotDefined(matchingVariable)) return
+      updateVariableValue(matchingVariable?.id, value)
+      prefilledVariables.push({ ...matchingVariable, value })
     })
+    return prefilledVariables
   }
 
   useEffect(() => {

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

@@ -10,7 +10,13 @@ import phoneNumberInputStyle from 'react-phone-number-input/style.css'
 import phoneSyle from '../assets/phone.css'
 import { ConversationContainer } from './ConversationContainer'
 import { AnswersContext } from '../contexts/AnswersContext'
-import { Answer, BackgroundType, Edge, PublicTypebot } from 'models'
+import {
+  Answer,
+  BackgroundType,
+  Edge,
+  PublicTypebot,
+  VariableWithValue,
+} from 'models'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot
@@ -19,6 +25,7 @@ export type TypebotViewerProps = {
   onNewBlockVisible?: (edge: Edge) => void
   onNewAnswer?: (answer: Answer) => void
   onCompleted?: () => void
+  onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
 }
 export const TypebotViewer = ({
   typebot,
@@ -27,6 +34,7 @@ export const TypebotViewer = ({
   onNewBlockVisible,
   onNewAnswer,
   onCompleted,
+  onVariablesPrefilled,
 }: TypebotViewerProps) => {
   const containerBgColor = useMemo(
     () =>
@@ -84,6 +92,7 @@ export const TypebotViewer = ({
                 onNewBlockVisible={handleNewBlockVisible}
                 onNewAnswer={handleNewAnswer}
                 onCompleted={handleCompleted}
+                onVariablesPrefilled={onVariablesPrefilled}
               />
             </div>
             {typebot.settings.general.isBrandingEnabled && (