🚸 (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/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)
     }
   }