🚸 (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
+}

apps/viewer/src/features/chat/api/utils/continueBotFlow.ts

@@ -132,6 +132,7 @@ const parseRetryMessage = (
   return {
     messages: [
       {
+        id: block.id,
         type: BubbleBlockType.TEXT,
         content: {
           plainText: retryMessage,

apps/viewer/src/features/chat/api/utils/executeGroup.ts

@@ -29,6 +29,7 @@ export const executeGroup =
       currentReply?.clientSideActions
     let logs: ChatReply['logs'] = currentReply?.logs
     let nextEdgeId = null
+    let lastBubbleBlockId: string | undefined
 
     let newSessionState = state
 
@@ -39,6 +40,7 @@ export const executeGroup =
         messages.push(
           deepParseVariable(newSessionState.typebot.variables)(block)
         )
+        lastBubbleBlockId = block.id
         continue
       }
 
@@ -63,9 +65,9 @@ export const executeGroup =
           logs,
         }
       const executionResponse = isLogicBlock(block)
-        ? await executeLogic(newSessionState)(block)
+        ? await executeLogic(newSessionState, lastBubbleBlockId)(block)
         : isIntegrationBlock(block)
-        ? await executeIntegration(newSessionState)(block)
+        ? await executeIntegration(newSessionState, lastBubbleBlockId)(block)
         : null
 
       if (!executionResponse) continue

apps/viewer/src/features/chat/api/utils/executeIntegration.ts

@@ -7,15 +7,15 @@ import { IntegrationBlock, IntegrationBlockType, SessionState } from 'models'
 import { ExecuteIntegrationResponse } from '../../types'
 
 export const executeIntegration =
-  (state: SessionState) =>
+  (state: SessionState, lastBubbleBlockId?: string) =>
   async (block: IntegrationBlock): Promise<ExecuteIntegrationResponse> => {
     switch (block.type) {
       case IntegrationBlockType.GOOGLE_SHEETS:
         return executeGoogleSheetBlock(state, block)
       case IntegrationBlockType.CHATWOOT:
-        return executeChatwootBlock(state, block)
+        return executeChatwootBlock(state, block, lastBubbleBlockId)
       case IntegrationBlockType.GOOGLE_ANALYTICS:
-        return executeGoogleAnalyticsBlock(state, block)
+        return executeGoogleAnalyticsBlock(state, block, lastBubbleBlockId)
       case IntegrationBlockType.EMAIL:
         return executeSendEmailBlock(state, block)
       case IntegrationBlockType.WEBHOOK:

apps/viewer/src/features/chat/api/utils/executeLogic.ts

@@ -8,7 +8,7 @@ import { LogicBlock, LogicBlockType, SessionState } from 'models'
 import { ExecuteLogicResponse } from '../../types'
 
 export const executeLogic =
-  (state: SessionState) =>
+  (state: SessionState, lastBubbleBlockId?: string) =>
   async (block: LogicBlock): Promise<ExecuteLogicResponse> => {
     switch (block.type) {
       case LogicBlockType.SET_VARIABLE:
@@ -16,12 +16,12 @@ export const executeLogic =
       case LogicBlockType.CONDITION:
         return executeCondition(state, block)
       case LogicBlockType.REDIRECT:
-        return executeRedirect(state, block)
+        return executeRedirect(state, block, lastBubbleBlockId)
       case LogicBlockType.CODE:
-        return executeCode(state, block)
+        return executeCode(state, block, lastBubbleBlockId)
       case LogicBlockType.TYPEBOT_LINK:
         return executeTypebotLink(state, block)
       case LogicBlockType.WAIT:
-        return executeWait(state, block)
+        return executeWait(state, block, lastBubbleBlockId)
     }
   }