feat: add typing effect (Chanzhaoyu#1017)

* feat: add typing effect * fix: ts2339 xxx not exist on type 'never' --------- Co-authored-by: WangYi <wangyi@windimg.com>
Equim-chan · Mar 31, 2023 · c3f8b81 · c3f8b81
1 parent 71cef41
commit c3f8b81
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 39 deletions.
diff --git 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, temperature, topP } = req.body as RequestProps
     let firstChunk = true
-    await chatReplyProcess({
+    const finalResponse = await chatReplyProcess({
       message: prompt,
       lastContext: options,
       process: (chat: ChatMessage) => {
@@ -36,6 +36,7 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
       temperature,
       topP,
     })
+    res.write(firstChunk ? JSON.stringify(finalResponse) : `\n${JSON.stringify(finalResponse)}`)
   }
   catch (error) {
     res.json(error)

diff --git 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
@@ -106,38 +106,36 @@ defineExpose({ inputRef })
 
 <template>
   <div :class="wrapClass">
-    <template v-if="loading">
-      <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
-    </template>
-    <template v-else>
-      <div class="leading-relaxed break-words">
-        <template v-if="edit">
-          <div class="whitespace-pre-wrap">
-            <NInput
-              ref="inputRef"
-              :value="text"
-              type="textarea"
-              :autosize="{ minRows: 5 }"
-              @input="handleInput"
-              @keypress="handleKeypress"
-              @keydown="handleKeydown"
-            />
-            <div class="chat-edit-buttons">
-              <NButton type="primary" @click="handleSubmit">
-                {{ t('chat.saveAndSubmit') }}
-              </NButton>
-              <NButton @click="handleCancel">
-                {{ t('chat.cancel') }}
-              </NButton>
-            </div>
+    <div class="leading-relaxed break-words">
+      <template v-if="edit">
+        <div class="whitespace-pre-wrap">
+          <NInput
+            ref="inputRef"
+            :value="text"
+            type="textarea"
+            :autosize="{ minRows: 5 }"
+            @input="handleInput"
+            @keypress="handleKeypress"
+            @keydown="handleKeydown"
+          />
+          <div class="chat-edit-buttons">
+            <NButton type="primary" @click="handleSubmit">
+              {{ t('chat.saveAndSubmit') }}
+            </NButton>
+            <NButton @click="handleCancel">
+              {{ t('chat.cancel') }}
+            </NButton>
           </div>
+        </div>
+      </template>
+      <template v-else>
+        <div v-if="!asRawText && !edit" class="markdown-body" v-html="text" />
+        <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>
-        <template v-else>
-          <div v-if="!asRawText && !edit" class="markdown-body" v-html="text" />
-          <div v-else class="whitespace-pre-wrap" v-text="text" />
-        </template>
-      </div>
-    </template>
+      </template>
+    </div>
   </div>
 </template>
 

diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
@@ -110,7 +110,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,
@@ -132,7 +132,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 } },
               },
@@ -152,7 +152,20 @@ async function onConversation() {
           }
         },
       })
-			scrollToBottomIfAtBottom()
+      updateChat(
+        +uuid,
+        dataSources.value.length - 1,
+        {
+          dateTime: new Date().toLocaleString('zh-CN'),
+          text: lastText + data.text ?? '',
+          inversion: false,
+          error: false,
+          loading: false,
+          conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+          requestOptions: { prompt: message, options: { ...options } },
+        },
+      )
+      scrollToBottomIfAtBottom()
     }
 
     await fetchChatAPIOnce()
@@ -244,7 +257,7 @@ async function onEdit(text: string, index: number) {
   try {
     let lastText = ''
     const fetchChatAPIOnce = async () => {
-      await fetchChatAPIProcess<Chat.ConversationResponse>({
+      const { data } = await fetchChatAPIProcess<Chat.ConversationResponse>({
         prompt: message,
         options,
         signal: controller.signal,
@@ -266,7 +279,7 @@ async function onEdit(text: string, 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: { ...options } },
               },
@@ -286,7 +299,20 @@ async function onEdit(text: string, index: number) {
           }
         },
       })
-			scrollToBottomIfAtBottom()
+      updateChat(
+        +uuid,
+        dataSources.value.length - 1,
+        {
+          dateTime: new Date().toLocaleString('zh-CN'),
+          text: lastText + data.text ?? '',
+          inversion: false,
+          error: false,
+          loading: false,
+          conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+          requestOptions: { prompt: message, options: { ...options } },
+        },
+      )
+      scrollToBottomIfAtBottom()
     }
 
     await fetchChatAPIOnce()
@@ -376,7 +402,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,
@@ -398,7 +424,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: { ...options } },
               },
@@ -416,6 +442,19 @@ async function onRegenerate(index: number) {
           }
         },
       })
+      updateChat(
+        +uuid,
+        index,
+        {
+          dateTime: new Date().toLocaleString('zh-CN'),
+          text: lastText + data.text ?? '',
+          inversion: false,
+          error: false,
+          loading: false,
+          conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+          requestOptions: { prompt: message, ...options },
+        },
+      )
     }
     await fetchChatAPIOnce()
   }