🪥 Consult submissions

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

@@ -11,18 +11,18 @@ import { deepEqual } from 'fast-equals'
 type Props = {
   typebot: PublicTypebot
   onNewBlockVisible: (blockId: string) => void
-  onAnswersUpdate: (answers: Answer[]) => void
+  onNewAnswer: (answer: Answer) => void
   onCompleted: () => void
 }
 export const ConversationContainer = ({
   typebot,
   onNewBlockVisible,
-  onAnswersUpdate,
+  onNewAnswer,
   onCompleted,
 }: Props) => {
   const { document: frameDocument } = useFrame()
   const [displayedBlocks, setDisplayedBlocks] = useState<Block[]>([])
-  const [localAnswers, setLocalAnswers] = useState<Answer[]>([])
+  const [localAnswer, setLocalAnswer] = useState<Answer | undefined>()
   const { answers } = useAnswers()
   const bottomAnchor = useRef<HTMLDivElement | null>(null)
 
@@ -44,9 +44,10 @@ export const ConversationContainer = ({
   }, [typebot.theme, frameDocument])
 
   useEffect(() => {
-    if (deepEqual(localAnswers, answers)) return
-    setLocalAnswers(answers)
-    onAnswersUpdate(answers)
+    const answer = [...answers].pop()
+    if (!answer || deepEqual(localAnswer, answer)) return
+    setLocalAnswer(answer)
+    onNewAnswer(answer)
   }, [answers])
 
   return (

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

@@ -10,13 +10,13 @@ import { AnswersContext } from '../contexts/AnswersContext'
 export type TypebotViewerProps = {
   typebot: PublicTypebot
   onNewBlockVisible?: (blockId: string) => void
-  onAnswersUpdate?: (answers: Answer[]) => void
+  onNewAnswer?: (answer: Answer) => void
   onCompleted?: () => void
 }
 export const TypebotViewer = ({
   typebot,
   onNewBlockVisible,
-  onAnswersUpdate,
+  onNewAnswer,
   onCompleted,
 }: TypebotViewerProps) => {
   const containerBgColor = useMemo(
@@ -29,8 +29,8 @@ export const TypebotViewer = ({
   const handleNewBlockVisible = (blockId: string) => {
     if (onNewBlockVisible) onNewBlockVisible(blockId)
   }
-  const handleAnswersUpdate = (answers: Answer[]) => {
-    if (onAnswersUpdate) onAnswersUpdate(answers)
+  const handleNewAnswer = (answer: Answer) => {
+    if (onNewAnswer) onNewAnswer(answer)
   }
   const handleCompleted = () => {
     if (onCompleted) onCompleted()
@@ -60,7 +60,7 @@ export const TypebotViewer = ({
               <ConversationContainer
                 typebot={typebot}
                 onNewBlockVisible={handleNewBlockVisible}
-                onAnswersUpdate={handleAnswersUpdate}
+                onNewAnswer={handleNewAnswer}
                 onCompleted={handleCompleted}
               />
             </div>