feat: add typing effect (#1017)

* feat: add typing effect

* fix: ts2339 xxx not exist on type 'never'

---------

Co-authored-by: WangYi <wangyi@windimg.com>

service/src/index.ts

@@ -25,7 +25,7 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
   try {
     const { prompt, options = {}, systemMessage } = req.body as RequestProps
     let firstChunk = true
-    await chatReplyProcess({
+    const finalResponse = await chatReplyProcess({
       message: prompt,
       lastContext: options,
       process: (chat: ChatMessage) => {
@@ -34,6 +34,7 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
       },
       systemMessage,
     })
+    res.write(firstChunk ? JSON.stringify(finalResponse) : `\n${JSON.stringify(finalResponse)}`)
   }
   catch (error) {
     res.write(JSON.stringify(error))

src/utils/request/index.ts

@@ -25,6 +25,12 @@ function http<T = any>(
   const successHandler = (res: AxiosResponse<Response<T>>) => {
     const authStore = useAuthStore()
 
+    if (typeof res.data === 'string') {
+      const lastIndex = (res.data as string).lastIndexOf('\n')
+      if (lastIndex !== -1)
+        res.data = JSON.parse((res.data as string).substring(lastIndex))
+    }
+
     if (res.data.status === 'Success' || typeof res.data === 'string')
       return res.data
 

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

@@ -65,18 +65,16 @@ defineExpose({ textRef })
 
 <template>
   <div class="text-black" :class="wrapClass">
-    <template v-if="loading">
-      <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
-    </template>
-    <template v-else>
-      <div ref="textRef" class="leading-relaxed break-words">
-        <div v-if="!inversion">
-          <div v-if="!asRawText" class="markdown-body" v-html="text" />
-          <div v-else class="whitespace-pre-wrap" v-text="text" />
-        </div>
+    <div ref="textRef" class="leading-relaxed break-words">
+      <div v-if="!inversion">
+        <div v-if="!asRawText" class="markdown-body" v-html="text" />
         <div v-else class="whitespace-pre-wrap" v-text="text" />
       </div>
-    </template>
+      <div v-else class="whitespace-pre-wrap" v-text="text" />
+      <template v-if="loading">
+        <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
+      </template>
+    </div>
   </div>
 </template>
 

src/views/chat/index.vue

@@ -109,7 +109,7 @@ async function onConversation() {
   try {
     let lastText = ''
     const fetchChatAPIOnce = async () => {
-      await fetchChatAPIProcess<Chat.ConversationResponse>({
+      const { data } = await fetchChatAPIProcess<Chat.ConversationResponse>({
         prompt: message,
         options,
         signal: controller.signal,
@@ -131,7 +131,7 @@ async function onConversation() {
                 text: lastText + data.text ?? '',
                 inversion: false,
                 error: false,
-                loading: false,
+                loading: true,
                 conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
                 requestOptions: { prompt: message, options: { ...options } },
               },
@@ -151,6 +151,19 @@ async function onConversation() {
           }
         },
       })
+      updateChat(
+        +uuid,
+        dataSources.value.length - 1,
+        {
+          dateTime: new Date().toLocaleString(),
+          text: lastText + data.text ?? '',
+          inversion: false,
+          error: false,
+          loading: false,
+          conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+          requestOptions: { prompt: message, options: { ...options } },
+        },
+      )
     }
 
     await fetchChatAPIOnce()
@@ -239,7 +252,7 @@ async function onRegenerate(index: number) {
   try {
     let lastText = ''
     const fetchChatAPIOnce = async () => {
-      await fetchChatAPIProcess<Chat.ConversationResponse>({
+      const { data } = await fetchChatAPIProcess<Chat.ConversationResponse>({
         prompt: message,
         options,
         signal: controller.signal,
@@ -261,7 +274,7 @@ async function onRegenerate(index: number) {
                 text: lastText + data.text ?? '',
                 inversion: false,
                 error: false,
-                loading: false,
+                loading: true,
                 conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
                 requestOptions: { prompt: message, ...options },
               },
@@ -279,6 +292,19 @@ async function onRegenerate(index: number) {
           }
         },
       })
+      updateChat(
+        +uuid,
+        index,
+        {
+          dateTime: new Date().toLocaleString(),
+          text: lastText + data.text ?? '',
+          inversion: false,
+          error: false,
+          loading: false,
+          conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+          requestOptions: { prompt: message, ...options },
+        },
+      )
     }
     await fetchChatAPIOnce()
   }