feat(results): ✨ Add logs in results

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

@@ -31,8 +31,14 @@ export const ChatBlock = ({
   onScroll,
   onBlockEnd,
 }: ChatBlockProps) => {
-  const { typebot, updateVariableValue, createEdge, apiHost, isPreview } =
-    useTypebot()
+  const {
+    typebot,
+    updateVariableValue,
+    createEdge,
+    apiHost,
+    isPreview,
+    onNewLog,
+  } = useTypebot()
   const { resultValues } = useAnswers()
   const [displayedSteps, setDisplayedSteps] = useState<Step[]>([])
 
@@ -72,6 +78,7 @@ export const ChatBlock = ({
           updateVariableValue,
           resultValues,
           blocks: typebot.blocks,
+          onNewLog,
         },
       })
       nextEdgeId ? onBlockEnd(nextEdgeId) : displayNextStep()

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

@@ -4,8 +4,7 @@ import { ChatBlock } from './ChatBlock/ChatBlock'
 import { useFrame } from 'react-frame-component'
 import { setCssVariablesValue } from '../services/theme'
 import { useAnswers } from '../contexts/AnswersContext'
-import { deepEqual } from 'fast-equals'
-import { Answer, Block, Edge, Theme, VariableWithValue } from 'models'
+import { Block, Edge, Theme, VariableWithValue } from 'models'
 import { byId, isNotDefined } from 'utils'
 import { animateScroll as scroll } from 'react-scroll'
 import { useTypebot } from 'contexts/TypebotContext'
@@ -13,14 +12,12 @@ import { useTypebot } from 'contexts/TypebotContext'
 type Props = {
   theme: Theme
   onNewBlockVisible: (edge: Edge) => void
-  onNewAnswer: (answer: Answer) => void
   onCompleted: () => void
   onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
 }
 export const ConversationContainer = ({
   theme,
   onNewBlockVisible,
-  onNewAnswer,
   onCompleted,
   onVariablesPrefilled,
 }: Props) => {
@@ -29,11 +26,7 @@ export const ConversationContainer = ({
   const [displayedBlocks, setDisplayedBlocks] = useState<
     { block: Block; startStepIndex: number }[]
   >([])
-  const [localAnswer, setLocalAnswer] = useState<Answer | undefined>()
-  const {
-    resultValues: { answers },
-    setPrefilledVariables,
-  } = useAnswers()
+  const { setPrefilledVariables } = useAnswers()
   const bottomAnchor = useRef<HTMLDivElement | null>(null)
   const scrollableContainer = useRef<HTMLDivElement | null>(null)
 
@@ -80,14 +73,6 @@ export const ConversationContainer = ({
     setCssVariablesValue(theme, frameDocument.body.style)
   }, [theme, frameDocument])
 
-  useEffect(() => {
-    const answer = [...answers].pop()
-    if (!answer || deepEqual(localAnswer, answer)) return
-    setLocalAnswer(answer)
-    onNewAnswer(answer)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [answers])
-
   const autoScrollToBottom = () => {
     if (!scrollableContainer.current) return
     scroll.scrollToBottom({

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

@@ -17,6 +17,7 @@ import {
   PublicTypebot,
   VariableWithValue,
 } from 'models'
+import { Log } from 'db'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot
@@ -24,6 +25,7 @@ export type TypebotViewerProps = {
   apiHost?: string
   onNewBlockVisible?: (edge: Edge) => void
   onNewAnswer?: (answer: Answer) => void
+  onNewLog?: (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => void
   onCompleted?: () => void
   onVariablesPrefilled?: (prefilledVariables: VariableWithValue[]) => void
 }
@@ -31,6 +33,7 @@ export const TypebotViewer = ({
   typebot,
   apiHost = process.env.NEXT_PUBLIC_VIEWER_HOST,
   isPreview = false,
+  onNewLog,
   onNewBlockVisible,
   onNewAnswer,
   onCompleted,
@@ -43,15 +46,15 @@ export const TypebotViewer = ({
         : 'transparent',
     [typebot?.theme?.general?.background]
   )
-  const handleNewBlockVisible = (edge: Edge) => {
-    if (onNewBlockVisible) onNewBlockVisible(edge)
-  }
-  const handleNewAnswer = (answer: Answer) => {
-    if (onNewAnswer) onNewAnswer(answer)
-  }
-  const handleCompleted = () => {
-    if (onCompleted) onCompleted()
-  }
+  const handleNewBlockVisible = (edge: Edge) =>
+    onNewBlockVisible && onNewBlockVisible(edge)
+
+  const handleNewAnswer = (answer: Answer) => onNewAnswer && onNewAnswer(answer)
+
+  const handleNewLog = (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) =>
+    onNewLog && onNewLog(log)
+
+  const handleCompleted = () => onCompleted && onCompleted()
 
   if (!apiHost)
     return <p>process.env.NEXT_PUBLIC_VIEWER_HOST is missing in env</p>
@@ -76,8 +79,13 @@ export const TypebotViewer = ({
           }:wght@300;400;600&display=swap');`,
         }}
       />
-      <TypebotContext typebot={typebot} apiHost={apiHost} isPreview={isPreview}>
-        <AnswersContext>
+      <TypebotContext
+        typebot={typebot}
+        apiHost={apiHost}
+        isPreview={isPreview}
+        onNewLog={handleNewLog}
+      >
+        <AnswersContext onNewAnswer={handleNewAnswer}>
           <div
             className="flex text-base overflow-hidden bg-cover h-screen w-screen flex-col items-center typebot-container"
             style={{
@@ -90,7 +98,6 @@ export const TypebotViewer = ({
               <ConversationContainer
                 theme={typebot.theme}
                 onNewBlockVisible={handleNewBlockVisible}
-                onNewAnswer={handleNewAnswer}
                 onCompleted={handleCompleted}
                 onVariablesPrefilled={onVariablesPrefilled}
               />