From c0f4af05e3b33c24c3bc81b414ba452e4301d2b1 Mon Sep 17 00:00:00 2001
From: puppywang <puppywang@gmail.com>
Date: Fri, 31 Mar 2023 11:50:32 +0800
Subject: [PATCH] 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                       |  3 +-
 src/utils/request/index.ts                 |  6 ++++
 src/views/chat/components/Message/Text.vue | 18 +++++-------
 src/views/chat/index.vue                   | 34 +++++++++++++++++++---
 4 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/service/src/index.ts b/service/src/index.ts
index 28041d1..3aa97c9 100644
--- a/service/src/index.ts
+++ b/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))
diff --git a/src/utils/request/index.ts b/src/utils/request/index.ts
index d651bba..354bf56 100644
--- a/src/utils/request/index.ts
+++ b/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
 
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index 0c46a0c..95f8f41 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/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>
 
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index c37466a..f2743ab 100644
--- a/src/views/chat/index.vue
+++ b/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()
   }