🚸 (engine) Improve engine v2 client loading and timings

Client actions are triggered after the correct bubble block. If the send message request is longer than 1s we show a loading chunk

Closes #276

apps/viewer/src/features/blocks/integrations/chatwoot/api/utils/executeChatwootBlock.ts

@@ -51,13 +51,15 @@ if (window.$chatwoot) {
 
 export const executeChatwootBlock = (
   { typebot: { variables }, isPreview }: SessionState,
-  block: ChatwootBlock
+  block: ChatwootBlock,
+  lastBubbleBlockId?: string
 ): ExecuteIntegrationResponse => {
   const chatwootCode = parseChatwootOpenCode(block.options)
   return {
     outgoingEdgeId: block.outgoingEdgeId,
     clientSideActions: [
       {
+        lastBubbleBlockId,
         chatwoot: {
           codeToExecute: {
             content: parseVariables(variables, { fieldToParse: 'id' })(

apps/viewer/src/features/blocks/integrations/googleAnalytics/api/utils/executeGoogleAnalyticsBlock.ts

@@ -4,12 +4,14 @@ import { GoogleAnalyticsBlock, SessionState } from 'models'
 
 export const executeGoogleAnalyticsBlock = (
   { typebot: { variables } }: SessionState,
-  block: GoogleAnalyticsBlock
+  block: GoogleAnalyticsBlock,
+  lastBubbleBlockId?: string
 ): ExecuteIntegrationResponse => ({
   outgoingEdgeId: block.outgoingEdgeId,
   clientSideActions: [
     {
       googleAnalytics: deepParseVariable(variables)(block.options),
+      lastBubbleBlockId,
     },
   ],
 })

apps/viewer/src/features/blocks/logic/code/api/utils/executeCode.ts

@@ -8,7 +8,8 @@ import { CodeBlock, SessionState } from 'models'
 
 export const executeCode = (
   { typebot: { variables } }: SessionState,
-  block: CodeBlock
+  block: CodeBlock,
+  lastBubbleBlockId?: string
 ): ExecuteLogicResponse => {
   if (!block.options.content) return { outgoingEdgeId: block.outgoingEdgeId }
 
@@ -30,6 +31,7 @@ export const executeCode = (
           content,
           args,
         },
+        lastBubbleBlockId,
       },
     ],
   }

apps/viewer/src/features/blocks/logic/redirect/api/utils/executeRedirect.ts

@@ -5,13 +5,15 @@ import { sanitizeUrl } from 'utils'
 
 export const executeRedirect = (
   { typebot: { variables } }: SessionState,
-  block: RedirectBlock
+  block: RedirectBlock,
+  lastBubbleBlockId?: string
 ): ExecuteLogicResponse => {
   if (!block.options?.url) return { outgoingEdgeId: block.outgoingEdgeId }
   const formattedUrl = sanitizeUrl(parseVariables(variables)(block.options.url))
   return {
     clientSideActions: [
       {
+        lastBubbleBlockId,
         redirect: { url: formattedUrl, isNewTab: block.options.isNewTab },
       },
     ],

apps/viewer/src/features/blocks/logic/wait/api/utils/executeWait.ts

@@ -4,19 +4,29 @@ import { SessionState, WaitBlock } from 'models'
 
 export const executeWait = async (
   { typebot: { variables } }: SessionState,
-  block: WaitBlock
+  block: WaitBlock,
+  lastBubbleBlockId?: string
 ): Promise<ExecuteLogicResponse> => {
   if (!block.options.secondsToWaitFor)
     return { outgoingEdgeId: block.outgoingEdgeId }
-  const parsedSecondsToWaitFor = parseVariables(variables)(
-    block.options.secondsToWaitFor
+  const parsedSecondsToWaitFor = safeParseInt(
+    parseVariables(variables)(block.options.secondsToWaitFor)
   )
 
   return {
     outgoingEdgeId: block.outgoingEdgeId,
-    // @ts-expect-error isNaN can be used with strings
-    clientSideActions: isNaN(parsedSecondsToWaitFor)
-      ? undefined
-      : [{ wait: { secondsToWaitFor: parsedSecondsToWaitFor } }],
+    clientSideActions: parsedSecondsToWaitFor
+      ? [
+          {
+            wait: { secondsToWaitFor: parsedSecondsToWaitFor },
+            lastBubbleBlockId,
+          },
+        ]
+      : undefined,
   }
 }
+
+const safeParseInt = (value: string) => {
+  const parsedValue = parseInt(value)
+  return isNaN(parsedValue) ? undefined : parsedValue
+}