🐛 Fix streaming text selection (#1444)

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

@@ -154,6 +154,7 @@ export const ConversationContainer = (props: Props) => {
     const longRequest = setTimeout(() => {
       setIsSending(true)
     }, 1000)
+    autoScrollToBottom()
     const { data, error } = await continueChatQuery({
       apiHost: props.context.apiHost,
       sessionId: props.initialChatReply.sessionId,
@@ -205,6 +206,11 @@ export const ConversationContainer = (props: Props) => {
         isNotDefined(action.lastBubbleBlockId)
       )
       await processClientSideActions(actionsBeforeFirstBubble)
+      if (
+        data.clientSideActions.length === 1 &&
+        data.clientSideActions[0].type === 'stream'
+      )
+        return
     }
     setChatChunks((displayedChunks) => [
       ...displayedChunks,

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

@@ -1,5 +1,5 @@
 import { streamingMessage } from '@/utils/streamingMessageSignal'
-import { createEffect, createSignal } from 'solid-js'
+import { For, createEffect, createSignal } from 'solid-js'
 import { marked } from 'marked'
 import domPurify from 'dompurify'
 
@@ -8,7 +8,7 @@ type Props = {
 }
 
 export const StreamingBubble = (props: Props) => {
-  const [content, setContent] = createSignal<string>('')
+  const [content, setContent] = createSignal<string[]>([])
 
   marked.use({
     renderer: {
@@ -19,12 +19,16 @@ export const StreamingBubble = (props: Props) => {
   })
 
   createEffect(() => {
-    if (streamingMessage()?.id === props.streamingMessageId)
-      setContent(
-        domPurify.sanitize(marked.parse(streamingMessage()?.content ?? ''), {
-          ADD_ATTR: ['target'],
-        })
-      )
+    if (streamingMessage()?.id !== props.streamingMessageId) return []
+    setContent(
+      streamingMessage()
+        ?.content.split('\n\n')
+        .map((line) =>
+          domPurify.sanitize(marked.parse(line), {
+            ADD_ATTR: ['target'],
+          })
+        ) ?? []
+    )
   })
 
   return (
@@ -43,8 +47,9 @@ export const StreamingBubble = (props: Props) => {
             class={
               'flex flex-col overflow-hidden text-fade-in mx-4 my-2 relative text-ellipsis h-full gap-6'
             }
-            innerHTML={content()}
-          />
+          >
+            <For each={content()}>{(line) => <span innerHTML={line} />}</For>
+          </div>
         </div>
       </div>
     </div>