feat: 流式输出内容 (#93)

* feat: 流式输出内容

* fix: 修复异常状态

* feat: markdown 链接颜色

src/views/chat/components/Message/Text.vue

@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 const wrapClass = computed(() => {
   return [
     'text-wrap',
-    'p-2',
+    'p-3',
     'min-w-[20px]',
     'rounded-md',
     props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
@@ -51,6 +51,9 @@ const text = computed(() => {
     max-width: 100%;
     vertical-align: middle;
   }
+  a {
+    color: #2d5cf6
+  }
 }
 
 .hljs {

src/views/chat/index.vue

@@ -8,7 +8,7 @@ import { useChat } from './hooks/useChat'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore } from '@/store'
-import { fetchChatAPI } from '@/api'
+import { fetchChatAPIProcess } from '@/api'
 
 let controller = new AbortController()
 
@@ -80,22 +80,39 @@ async function onConversation() {
   )
   scrollToBottom()
 
+  let offset = 0
   try {
-    const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
-    updateChat(
-      +uuid,
-      dataSources.value.length - 1,
-      {
-        dateTime: new Date().toLocaleString(),
-        text: data.text ?? '',
-        inversion: false,
-        error: false,
-        loading: false,
-        conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-        requestOptions: { prompt: message, options: { ...options } },
+    await fetchChatAPIProcess<Chat.ConversationResponse>({
+      prompt: message,
+      options,
+      signal: controller.signal,
+      onDownloadProgress: ({ event }) => {
+        const xhr = event.target
+        const { responseText } = xhr
+        const chunk = responseText.substring(offset)
+        offset = responseText.length
+        try {
+          const data = JSON.parse(chunk)
+          updateChat(
+            +uuid,
+            dataSources.value.length - 1,
+            {
+              dateTime: new Date().toLocaleString(),
+              text: data.text ?? '',
+              inversion: false,
+              error: false,
+              loading: false,
+              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+              requestOptions: { prompt: message, options: { ...options } },
+            },
+          )
+          scrollToBottom()
+        }
+        catch (error) {
+          //
+        }
       },
-    )
-    scrollToBottom()
+    })
   }
   catch (error: any) {
     let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
@@ -119,6 +136,7 @@ async function onConversation() {
     scrollToBottom()
   }
   finally {
+    offset = 0
     loading.value = false
   }
 }
@@ -154,24 +172,41 @@ async function onRegenerate(index: number) {
     },
   )
 
+  let offset = 0
   try {
-    const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
-    updateChat(
-      +uuid,
-      index,
-      {
-        dateTime: new Date().toLocaleString(),
-        text: data.text ?? '',
-        inversion: false,
-        error: false,
-        loading: false,
-        conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-        requestOptions: { prompt: message, ...options },
+    await fetchChatAPIProcess<Chat.ConversationResponse>({
+      prompt: message,
+      options,
+      signal: controller.signal,
+      onDownloadProgress: ({ event }) => {
+        const xhr = event.target
+        const { responseText } = xhr
+        const chunk = responseText.substring(offset)
+        offset = responseText.length
+        try {
+          const data = JSON.parse(chunk)
+          updateChat(
+            +uuid,
+            index,
+            {
+              dateTime: new Date().toLocaleString(),
+              text: data.text ?? '',
+              inversion: false,
+              error: false,
+              loading: false,
+              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+              requestOptions: { prompt: message, ...options },
+            },
+          )
+        }
+        catch (error) {
+          //
+        }
       },
-    )
+    })
   }
   catch (error: any) {
-    let errorMessage = 'Something went wrong, please try again later.'
+    let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
 
     if (error.message === 'canceled')
       errorMessage = 'Request canceled. Please try again.'
@@ -192,6 +227,7 @@ async function onRegenerate(index: number) {
   }
   finally {
     loading.value = false
+    offset = 0
   }
 }