🚸 (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,20 +8,20 @@ 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:
         return executeSetVariable(state, block)
       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)
     }
   }

packages/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -10,6 +10,8 @@ type Props = Pick<ChatReply, 'messages' | 'input'> & {
   settings: Settings
   inputIndex: number
   context: BotContext
+  isLoadingBubbleDisplayed: boolean
+  onNewBubbleDisplayed: (blockId: string) => Promise<void>
   onScrollToBottom: () => void
   onSubmit: (input: string) => void
   onSkip: () => void
@@ -26,7 +28,9 @@ export const ChatChunk = (props: Props) => {
     props.onScrollToBottom()
   })
 
-  const displayNextMessage = () => {
+  const displayNextMessage = async () => {
+    const lastBubbleBlockId = props.messages[displayedMessageIndex()].id
+    await props.onNewBubbleDisplayed(lastBubbleBlockId)
     setDisplayedMessageIndex(
       displayedMessageIndex() === props.messages.length
         ? displayedMessageIndex()

packages/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -1,10 +1,11 @@
 import type { ChatReply, Theme } from 'models'
-import { createEffect, createSignal, For } from 'solid-js'
+import { createEffect, createSignal, For, Show } from 'solid-js'
 import { sendMessageQuery } from '@/queries/sendMessageQuery'
 import { ChatChunk } from './ChatChunk'
 import { BotContext, InitialChatReply } from '@/types'
 import { isNotDefined } from 'utils'
 import { executeClientSideAction } from '@/utils/executeClientSideActions'
+import { LoadingChunk } from './LoadingChunk'
 
 const parseDynamicTheme = (
   initialTheme: Theme,
@@ -55,6 +56,7 @@ export const ConversationContainer = (props: Props) => {
     ChatReply['dynamicTheme']
   >(props.initialChatReply.dynamicTheme)
   const [theme, setTheme] = createSignal(props.initialChatReply.typebot.theme)
+  const [isSending, setIsSending] = createSignal(false)
 
   createEffect(() => {
     setTheme(
@@ -66,11 +68,16 @@ export const ConversationContainer = (props: Props) => {
     const currentBlockId = chatChunks().at(-1)?.input?.id
     if (currentBlockId && props.onAnswer)
       props.onAnswer({ message, blockId: currentBlockId })
+    const longRequest = setTimeout(() => {
+      setIsSending(true)
+    }, 1000)
     const data = await sendMessageQuery({
       apiHost: props.context.apiHost,
       sessionId: props.initialChatReply.sessionId,
       message,
     })
+    clearTimeout(longRequest)
+    setIsSending(false)
     if (!data) return
     if (data.logs) props.onNewLogs?.(data.logs)
     if (data.dynamicTheme) setDynamicTheme(data.dynamicTheme)
@@ -101,7 +108,10 @@ export const ConversationContainer = (props: Props) => {
     const lastChunk = chatChunks().at(-1)
     if (!lastChunk) return
     if (lastChunk.clientSideActions) {
-      for (const action of lastChunk.clientSideActions) {
+      const actionsToExecute = lastChunk.clientSideActions.filter((action) =>
+        isNotDefined(action.lastBubbleBlockId)
+      )
+      for (const action of actionsToExecute) {
         await executeClientSideAction(action)
       }
     }
@@ -110,6 +120,19 @@ export const ConversationContainer = (props: Props) => {
     }
   }
 
+  const handleNewBubbleDisplayed = async (blockId: string) => {
+    const lastChunk = chatChunks().at(-1)
+    if (!lastChunk) return
+    if (lastChunk.clientSideActions) {
+      const actionsToExecute = lastChunk.clientSideActions.filter(
+        (action) => action.lastBubbleBlockId === blockId
+      )
+      for (const action of actionsToExecute) {
+        await executeClientSideAction(action)
+      }
+    }
+  }
+
   return (
     <div
       ref={chatContainer}
@@ -123,6 +146,8 @@ export const ConversationContainer = (props: Props) => {
             input={chatChunk.input}
             theme={theme()}
             settings={props.initialChatReply.typebot.settings}
+            isLoadingBubbleDisplayed={isSending()}
+            onNewBubbleDisplayed={handleNewBubbleDisplayed}
             onAllBubblesDisplayed={handleAllBubblesDisplayed}
             onSubmit={sendMessage}
             onScrollToBottom={autoScrollToBottom}
@@ -133,6 +158,9 @@ export const ConversationContainer = (props: Props) => {
           />
         )}
       </For>
+      <Show when={isSending()}>
+        <LoadingChunk theme={theme()} />
+      </Show>
       <BottomSpacer ref={bottomSpacer} />
     </div>
   )

packages/js/src/components/ConversationContainer/LoadingChunk.tsx

@@ -0,0 +1,32 @@
+import { Theme } from 'models'
+import { Show } from 'solid-js'
+import { LoadingBubble } from '../bubbles/LoadingBubble'
+import { AvatarSideContainer } from './AvatarSideContainer'
+
+type Props = {
+  theme: Theme
+}
+
+export const LoadingChunk = (props: Props) => (
+  <div class="flex w-full">
+    <div class="flex flex-col w-full min-w-0">
+      <div class="flex">
+        <Show when={props.theme.chat.hostAvatar?.isEnabled}>
+          <AvatarSideContainer
+            hostAvatarSrc={props.theme.chat.hostAvatar?.url}
+          />
+        </Show>
+        <div
+          class="flex-1"
+          style={{
+            'margin-right': props.theme.chat.guestAvatar?.isEnabled
+              ? '50px'
+              : '0.5rem',
+          }}
+        >
+          <LoadingBubble />
+        </div>
+      </div>
+    </div>
+  </div>
+)

packages/js/src/components/bubbles/LoadingBubble.tsx

@@ -0,0 +1,25 @@
+import { TypingBubble } from '@/components'
+
+export const LoadingBubble = () => (
+  <div class="flex flex-col animate-fade-in">
+    <div class="flex mb-2 w-full items-center">
+      <div class={'flex relative items-start typebot-host-bubble'}>
+        <div
+          class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
+          style={{
+            width: '4rem',
+            height: '2rem',
+          }}
+          data-testid="host-bubble"
+        >
+          <TypingBubble />
+        </div>
+        <p
+          class={
+            'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative opacity-0 h-6 text-ellipsis'
+          }
+        />
+      </div>
+    </div>
+  </div>
+)

packages/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx

@@ -53,11 +53,8 @@ export const TextBubble = (props: Props) => {
             {isTyping() && <TypingBubble />}
           </div>
           <p
-            style={{
-              'text-overflow': 'ellipsis',
-            }}
             class={
-              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative ' +
+              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis ' +
               (isTyping() ? 'opacity-0 h-6' : 'opacity-100 h-full')
             }
             innerHTML={props.content.html}