🚸 (openai) Improve streaming bubble sequence and visual

packages/bot-engine/blocks/integrations/openai/createChatCompletionOpenAI.ts

@@ -72,19 +72,23 @@ export const createChatCompletionOpenAI = async (
     options.advancedSettings?.temperature
   )
 
+  const assistantMessageVariableName = typebot.variables.find(
+    (variable) =>
+      options.responseMapping.find(
+        (m) => m.valueToExtract === 'Message content'
+      )?.variableId === variable.id
+  )?.name
+
   if (
     isPlaneteScale() &&
     isCredentialsV2(credentials) &&
     newSessionState.isStreamEnabled &&
-    !newSessionState.whatsApp
+    !newSessionState.whatsApp &&
+    isNextBubbleMessageWithAssistantMessage(typebot)(
+      blockId,
+      assistantMessageVariableName
+    )
   ) {
-    const assistantMessageVariableName = typebot.variables.find(
-      (variable) =>
-        options.responseMapping.find(
-          (m) => m.valueToExtract === 'Message content'
-        )?.variableId === variable.id
-    )?.name
-
     return {
       clientSideActions: [
         {
@@ -93,10 +97,6 @@ export const createChatCompletionOpenAI = async (
               content?: string
               role: (typeof chatCompletionMessageRoles)[number]
             }[],
-            displayStream: isNextBubbleMessageWithAssistantMessage(typebot)(
-              blockId,
-              assistantMessageVariableName
-            ),
           },
           expectsDedicatedReply: true,
         },

packages/embeds/js/package.json

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

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

@@ -117,7 +117,9 @@ export const ChatChunk = (props: Props) => {
             <div
               class="flex flex-col flex-1 gap-2"
               style={{
-                width: isMobile() ? 'calc(100% - 32px)' : 'calc(100% - 48px)',
+                'max-width': isMobile()
+                  ? 'calc(100% - 32px)'
+                  : 'calc(100% - 48px)',
                 'margin-right': props.theme.chat.guestAvatar?.isEnabled
                   ? isMobile()
                     ? '32px'

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

@@ -297,8 +297,9 @@ export const ConversationContainer = (props: Props) => {
             context={props.context}
             hideAvatar={
               !chatChunk.input &&
-              !chatChunk.streamingMessageId &&
-              index() < chatChunks().length - 1
+              ((chatChunks()[index() + 1]?.messages ?? 0).length > 0 ||
+                chatChunks()[index() + 1]?.streamingMessageId !== undefined ||
+                isSending())
             }
             hasError={hasError() && index() === chatChunks().length - 1}
             onNewBubbleDisplayed={handleNewBubbleDisplayed}

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

@@ -28,7 +28,7 @@ export const StreamingBubble = (props: Props) => {
   return (
     <div class="flex flex-col animate-fade-in">
       <div class="flex w-full items-center">
-        <div class="flex relative items-start typebot-host-bubble w-full">
+        <div class="flex relative items-start typebot-host-bubble max-w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing "
             style={{

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

@@ -39,7 +39,52 @@ export const PlateElement = (props: Props) => (
             </For>
           </a>
         </Match>
-        <Match when={props.element.type !== 'a'}>
+        <Match when={props.element.type === 'ol'}>
+          <ol>
+            <For each={props.element.children as TDescendant[]}>
+              {(child) => (
+                <PlateElement
+                  element={child}
+                  isUniqueChild={
+                    (props.element.children as TDescendant[])?.length === 1
+                  }
+                  inElement={true}
+                />
+              )}
+            </For>
+          </ol>
+        </Match>
+        <Match when={props.element.type === 'ul'}>
+          <ul>
+            <For each={props.element.children as TDescendant[]}>
+              {(child) => (
+                <PlateElement
+                  element={child}
+                  isUniqueChild={
+                    (props.element.children as TDescendant[])?.length === 1
+                  }
+                  inElement={true}
+                />
+              )}
+            </For>
+          </ul>
+        </Match>
+        <Match when={props.element.type === 'li'}>
+          <li>
+            <For each={props.element.children as TDescendant[]}>
+              {(child) => (
+                <PlateElement
+                  element={child}
+                  isUniqueChild={
+                    (props.element.children as TDescendant[])?.length === 1
+                  }
+                  inElement={true}
+                />
+              )}
+            </For>
+          </li>
+        </Match>
+        <Match when={true}>
           <ElementRoot
             element={props.element as TElement}
             inElement={props.inElement ?? false}

packages/embeds/js/src/utils/executeClientSideActions.ts

@@ -51,10 +51,7 @@ export const executeClientSideAction = async ({
     const { error, message } = await streamChat(context)(
       clientSideAction.streamOpenAiChatCompletion.messages,
       {
-        onMessageStream: clientSideAction.streamOpenAiChatCompletion
-          .displayStream
-          ? onMessageStream
-          : undefined,
+        onMessageStream,
       }
     )
     if (error)

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/schemas/features/chat/schema.ts

@@ -218,7 +218,6 @@ const clientSideActionSchema = z
             messages: z.array(
               chatCompletionMessageSchema.pick({ content: true, role: true })
             ),
-            displayStream: z.boolean().optional(),
           }),
         })
       )