feat: enable smooth markdown streaming

Author: Simon-He95

dashboard/package.json

@@ -28,14 +28,14 @@
     "katex": "^0.16.27",
     "lodash": "4.17.23",
     "markdown-it": "^14.1.1",
-    "markstream-vue": "^0.0.6",
+    "markstream-vue": "1.0.1-beta.1",
     "mermaid": "^11.12.2",
     "monaco-editor": "^0.52.2",
     "pinia": "2.1.6",
     "pinyin-pro": "^3.26.0",
     "qrcode": "^1.5.4",
     "shiki": "^3.20.0",
-    "stream-markdown": "^0.0.13",
+    "stream-markdown": "^0.0.15",
     "vee-validate": "4.11.3",
     "vite-plugin-vuetify": "2.1.3",
     "vue": "3.3.4",

dashboard/pnpm-lock.yaml

@@ -168,6 +168,7 @@
                         :refs="resolvedMessageRefs(msg)"
                         :is-dark="isDark"
                         :custom-html-tags="customMarkdownTags"
+                        :is-streaming="isMessageStreaming(msg, msgIndex)"
                         @open-thread="emit('openThread', $event)"
                       />
                     </div>
@@ -178,6 +179,7 @@
                       :refs="resolvedMessageRefs(msg)"
                       :is-dark="isDark"
                       :custom-html-tags="customMarkdownTags"
+                      :is-streaming="isMessageStreaming(msg, msgIndex)"
                     />
 
                     <button

dashboard/src/components/chat/ChatMessageList.vue

@@ -80,6 +80,7 @@
                       :refs="resolvedMessageRefs(msg)"
                       :is-dark="isDark"
                       :custom-html-tags="customMarkdownTags"
+                      :is-streaming="isMessageStreaming(msgIndex)"
                     />
 
                     <button

dashboard/src/components/chat/MessageList.vue

@@ -59,6 +59,7 @@
                         :refs="messageRefs(msg)"
                         :is-dark="isDark"
                         :custom-html-tags="customMarkdownTags"
+                        :is-streaming="isMessageStreaming(msg, msgIndex)"
                       />
 
                       <button

dashboard/src/components/chat/StandaloneChat.vue

@@ -4,6 +4,9 @@
     :content="threadedContent"
     :is-dark="isDark"
     :custom-html-tags="threadedCustomHtmlTags"
+    :final="!isStreaming"
+    :smooth-streaming="isStreaming ? 'auto' : false"
+    :fade="false"
     :typewriter="false"
     :max-live-nodes="0"
   />
@@ -20,6 +23,7 @@ const props = defineProps<{
   refs: { used?: Array<Record<string, unknown>> } | null;
   isDark: boolean;
   customHtmlTags: string[];
+  isStreaming?: boolean;
 }>();
 
 const emit = defineEmits<{

dashboard/src/components/chat/ThreadedMarkdownMessagePart.vue

@@ -5,6 +5,9 @@
       :content="content"
       :custom-html-tags="customHtmlTags"
       :is-dark="isDark"
+      :final="!isStreaming"
+      :smooth-streaming="isStreaming ? 'auto' : false"
+      :fade="false"
       :typewriter="false"
       :max-live-nodes="0"
     />
@@ -20,6 +23,7 @@ const props = defineProps<{
   refs: { used?: Array<Record<string, unknown>> } | null;
   isDark: boolean;
   customHtmlTags: string[];
+  isStreaming?: boolean;
 }>();
 
 const isDarkRef = computed(() => props.isDark);