🐛 (openai) Fix 2 openai streaming back to back

packages/embeds/js/package.json

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

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

@@ -3,7 +3,6 @@ import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/enums
 import {
   createEffect,
   createSignal,
-  createUniqueId,
   For,
   onCleanup,
   onMount,
@@ -109,12 +108,11 @@ export const ConversationContainer = (props: Props) => {
     })()
   })
 
-  const streamMessage = (content: string) => {
+  const streamMessage = ({ id, message }: { id: string; message: string }) => {
     setIsSending(false)
     const lastChunk = [...chatChunks()].pop()
     if (!lastChunk) return
-    const id = lastChunk.streamingMessageId ?? createUniqueId()
-    if (!lastChunk.streamingMessageId)
+    if (lastChunk.streamingMessageId !== id)
       setChatChunks((displayedChunks) => [
         ...displayedChunks,
         {
@@ -122,7 +120,7 @@ export const ConversationContainer = (props: Props) => {
           streamingMessageId: id,
         },
       ])
-    setStreamingMessage({ id, content })
+    setStreamingMessage({ id, content: message })
   }
 
   createEffect(() => {
@@ -216,9 +214,7 @@ export const ConversationContainer = (props: Props) => {
       ...displayedChunks,
       {
         input: data.input,
-        messages: [...chatChunks()].pop()?.streamingMessageId
-          ? data.messages.slice(1)
-          : data.messages,
+        messages: data.messages,
         clientSideActions: data.clientSideActions,
       },
     ])

packages/embeds/js/src/features/blocks/integrations/openai/streamChat.ts

@@ -1,6 +1,7 @@
 import { ClientSideActionContext } from '@/types'
 import { guessApiHost } from '@/utils/guessApiHost'
 import { isNotEmpty } from '@typebot.io/lib/utils'
+import { createUniqueId } from 'solid-js'
 
 let abortController: AbortController | null = null
 const secondsToWaitBeforeRetries = 3
@@ -13,7 +14,9 @@ export const streamChat =
       content?: string | undefined
       role?: 'system' | 'user' | 'assistant' | undefined
     }[],
-    { onMessageStream }: { onMessageStream?: (message: string) => void }
+    {
+      onMessageStream,
+    }: { onMessageStream?: (props: { id: string; message: string }) => void }
   ): Promise<{ message?: string; error?: object }> => {
     try {
       abortController = new AbortController()
@@ -64,6 +67,8 @@ export const streamChat =
       const reader = res.body.getReader()
       const decoder = new TextDecoder()
 
+      const id = createUniqueId()
+
       // eslint-disable-next-line no-constant-condition
       while (true) {
         const { done, value } = await reader.read()
@@ -72,7 +77,7 @@ export const streamChat =
         }
         const chunk = decoder.decode(value)
         message += chunk
-        if (onMessageStream) onMessageStream(message)
+        if (onMessageStream) onMessageStream({ id, message })
         if (abortController === null) {
           reader.cancel()
           break

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

@@ -14,7 +14,7 @@ import { injectStartProps } from './injectStartProps'
 type Props = {
   clientSideAction: NonNullable<ChatReply['clientSideActions']>[0]
   context: ClientSideActionContext
-  onMessageStream?: (message: string) => void
+  onMessageStream?: (props: { id: string; message: string }) => void
 }
 
 export const executeClientSideAction = async ({

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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.5",
+  "version": "0.2.6",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",