✨ (settings) Add delay between bubbles option and typing disabling on first message

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

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

@@ -40,6 +40,20 @@ export const ChatChunk = (props: Props) => {
   })
 
   const displayNextMessage = async (bubbleOffsetTop?: number) => {
+    if (
+      (props.settings.typingEmulation?.delayBetweenBubbles ??
+        defaultSettings.typingEmulation.delayBetweenBubbles) > 0 &&
+      displayedMessageIndex() < props.messages.length - 1
+    ) {
+      // eslint-disable-next-line solid/reactivity
+      await new Promise((resolve) =>
+        setTimeout(
+          resolve,
+          (props.settings.typingEmulation?.delayBetweenBubbles ??
+            defaultSettings.typingEmulation.delayBetweenBubbles) * 1000
+        )
+      )
+    }
     const lastBubbleBlockId = props.messages[displayedMessageIndex()].id
     await props.onNewBubbleDisplayed(lastBubbleBlockId)
     setDisplayedMessageIndex(
@@ -86,10 +100,17 @@ export const ChatChunk = (props: Props) => {
             }}
           >
             <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
-              {(message) => (
+              {(message, idx) => (
                 <HostBubble
                   message={message}
                   typingEmulation={props.settings.typingEmulation}
+                  isTypingSkipped={
+                    (props.settings.typingEmulation?.isDisabledOnFirstMessage ??
+                      defaultSettings.typingEmulation
+                        .isDisabledOnFirstMessage) &&
+                    props.inputIndex === 0 &&
+                    idx() === 0
+                  }
                   onTransitionEnd={displayNextMessage}
                   onCompleted={props.onSubmit}
                 />

packages/embeds/js/src/components/bubbles/HostBubble.tsx

@@ -20,6 +20,7 @@ import { Match, Switch } from 'solid-js'
 type Props = {
   message: ChatMessage
   typingEmulation: Settings['typingEmulation']
+  isTypingSkipped: boolean
   onTransitionEnd: (offsetTop?: number) => void
   onCompleted: (reply?: string) => void
 }
@@ -38,6 +39,7 @@ export const HostBubble = (props: Props) => {
       <Match when={props.message.type === BubbleBlockType.TEXT}>
         <TextBubble
           content={props.message.content as TextBubbleBlock['content']}
+          isTypingSkipped={props.isTypingSkipped}
           typingEmulation={props.typingEmulation}
           onTransitionEnd={onTransitionEnd}
         />

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

@@ -10,6 +10,7 @@ import { computeTypingDuration } from '@typebot.io/bot-engine/computeTypingDurat
 type Props = {
   content: TextBubbleBlock['content']
   typingEmulation: Settings['typingEmulation']
+  isTypingSkipped: boolean
   onTransitionEnd: (offsetTop?: number) => void
 }
 
@@ -35,7 +36,7 @@ export const TextBubble = (props: Props) => {
       ? computePlainText(props.content.richText)
       : ''
     const typingDuration =
-      props.typingEmulation?.enabled === false
+      props.typingEmulation?.enabled === false || props.isTypingSkipped
         ? 0
         : computeTypingDuration({
             bubbleContent: plainText,