feat(results): ✨ Add logs in results

apps/builder/components/editor/preview/PreviewDrawer.tsx

@@ -7,6 +7,7 @@ import {
   FlexProps,
   useEventListener,
   useToast,
+  UseToastOptions,
   VStack,
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
@@ -14,7 +15,8 @@ import { headerHeight } from 'components/shared/TypebotHeader'
 import { useEditor } from 'contexts/EditorContext'
 import { useGraph } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import React, { useEffect, useMemo, useState } from 'react'
+import { Log } from 'db'
+import React, { useMemo, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 
 export const PreviewDrawer = () => {
@@ -57,20 +59,10 @@ export const PreviewDrawer = () => {
     setRightPanel(undefined)
   }
 
-  useEffect(() => {
-    const onMessageFromBot = (event: MessageEvent) => {
-      if (event.data.typebotInfo) {
-        toast({ description: event.data.typebotInfo })
-      }
-      if (event.data.typebotError) {
-        toast({ description: event.data.typebotError, status: 'error' })
-      }
-    }
-    window.addEventListener('message', onMessageFromBot)
-    return () => {
-      window.removeEventListener('message', onMessageFromBot)
-    }
-  })
+  const handleNewLog = (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => {
+    toast(log as UseToastOptions)
+    console.log(log.details)
+  }
 
   return (
     <Flex
@@ -113,6 +105,7 @@ export const PreviewDrawer = () => {
             <TypebotViewer
               typebot={publicTypebot}
               onNewBlockVisible={setPreviewingEdge}
+              onNewLog={handleNewLog}
               isPreview
             />
           </Flex>

apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/jsx-key */
-import { chakra, Checkbox, Flex } from '@chakra-ui/react'
+import { Button, chakra, Checkbox, Flex, HStack, Text } from '@chakra-ui/react'
+import { AlignLeftTextIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Hooks, useRowSelect, useTable } from 'react-table'
@@ -12,6 +13,7 @@ type SubmissionsTableProps = {
   hasMore?: boolean
   onNewSelection: (indices: number[]) => void
   onScrollToBottom: () => void
+  onLogOpenIndex: (index: number) => () => void
 }
 
 export const SubmissionsTable = ({
@@ -19,13 +21,13 @@ export const SubmissionsTable = ({
   hasMore,
   onNewSelection,
   onScrollToBottom,
+  onLogOpenIndex,
 }: SubmissionsTableProps) => {
   const { publishedTypebot } = useTypebot()
   const columns: any = useMemo(
     () => (publishedTypebot ? parseSubmissionsColumns(publishedTypebot) : []),
     [publishedTypebot]
   )
-
   const bottomElement = useRef<HTMLDivElement | null>(null)
   const tableWrapper = useRef<HTMLDivElement | null>(null)
 
@@ -87,6 +89,19 @@ export const SubmissionsTable = ({
                     </chakra.th>
                   )
                 })}
+                <chakra.th
+                  px="4"
+                  py="2"
+                  border="1px"
+                  borderColor="gray.200"
+                  fontWeight="normal"
+                  whiteSpace="nowrap"
+                >
+                  <HStack>
+                    <AlignLeftTextIcon />
+                    <Text>Logs</Text>
+                  </HStack>
+                </chakra.th>
               </tr>
             )
           })}
@@ -118,10 +133,17 @@ export const SubmissionsTable = ({
                     </chakra.td>
                   )
                 })}
+                <chakra.td px="4" py="2" border="1px" borderColor="gray.200">
+                  <Button size="sm" onClick={onLogOpenIndex(idx)}>
+                    See logs
+                  </Button>
+                </chakra.td>
               </tr>
             )
           })}
-          {hasMore === true && <LoadingRows totalColumns={columns.length} />}
+          {hasMore === true && (
+            <LoadingRows totalColumns={columns.length + 1} />
+          )}
         </tbody>
       </chakra.table>
     </Flex>