pref: message output optimization (#935)

* Update index.ts

修改后端，让保留打字机效果的同时优化前后端之间传输的内容，节省流量和性能

* Update index.vue

修改前端，和之前修改的后端匹配，保留打字机效果同时优化性能和流量传输

* chore: lint fix

---------

Co-authored-by: ChenZhaoYu <790348264@qq.com>

service/src/index.ts

@@ -29,8 +29,16 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
       message: prompt,
       lastContext: options,
       process: (chat: ChatMessage) => {
-        res.write(firstChunk ? JSON.stringify(chat) : `\n${JSON.stringify(chat)}`)
+        if (firstChunk) {
-        firstChunk = false
+          res.write(`${JSON.stringify(chat)}t1h1i4s5i1s4a1s9i1l9l8y1s0plit`)
+          firstChunk = false
+        }
+        else {
+          let tmp = chat.delta
+          if (!(chat.delta))
+            tmp = ''
+          res.write(tmp)
+        }
       },
       systemMessage,
     })

src/views/chat/index.vue

@@ -107,7 +107,9 @@ async function onConversation() {
   scrollToBottom()
 
   try {
-    let lastText = ''
+    const magicSplit = 't1h1i4s5i1s4a1s9i1l9l8y1s0plit'
+    let renderText = ''
+    let firstTime = true
     const fetchChatAPIOnce = async () => {
       await fetchChatAPIProcess<Chat.ConversationResponse>({
         prompt: message,
@@ -117,42 +119,49 @@ async function onConversation() {
           const xhr = event.target
           const { responseText } = xhr
           // Always process the final line
-          const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
-          let chunk = responseText
-          if (lastIndex !== -1)
-            chunk = responseText.substring(lastIndex)
-          try {
-            const data = JSON.parse(chunk)
-            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 } },
-              },
-            )
 
-            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+          const splitIndexBegin = responseText.search(magicSplit)
-              options.parentMessageId = data.id
+          if (splitIndexBegin !== -1) {
-              lastText = data.text
+            const splitIndexEnd = splitIndexBegin + magicSplit.length
-              message = ''
+
-              return fetchChatAPIOnce()
+            const firstChunk = responseText.substring(0, splitIndexBegin)
+            const deltaText = responseText.substring(splitIndexEnd)
+            try {
+              const data = JSON.parse(firstChunk)
+              if (firstTime) {
+                firstTime = false
+                renderText = data.text ?? ''
+              }
+              else {
+                renderText = deltaText ?? ''
+              }
+              updateChat(
+                +uuid,
+                dataSources.value.length - 1,
+                {
+                  dateTime: new Date().toLocaleString(),
+                  text: renderText,
+                  inversion: false,
+                  error: false,
+                  loading: false,
+                  conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                  requestOptions: { prompt: message, ...options },
+                },
+              )
+
+              if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+                options.parentMessageId = data.id
+                message = ''
+                return fetchChatAPIOnce()
+              }
+            }
+            catch (error) {
+              //
             }
-
-            scrollToBottomIfAtBottom()
-          }
-          catch (error) {
-          //
           }
         },
       })
     }
-
     await fetchChatAPIOnce()
   }
   catch (error: any) {
@@ -237,7 +246,9 @@ async function onRegenerate(index: number) {
   )
 
   try {
-    let lastText = ''
+    const magicSplit = 't1h1i4s5i1s4a1s9i1l9l8y1s0plit'
+    let renderText = ''
+    let firstTime = true
     const fetchChatAPIOnce = async () => {
       await fetchChatAPIProcess<Chat.ConversationResponse>({
         prompt: message,
@@ -247,35 +258,45 @@ async function onRegenerate(index: number) {
           const xhr = event.target
           const { responseText } = xhr
           // Always process the final line
-          const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
-          let chunk = responseText
-          if (lastIndex !== -1)
-            chunk = responseText.substring(lastIndex)
-          try {
-            const data = JSON.parse(chunk)
-            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 },
-              },
-            )
 
-            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+          const splitIndexBegin = responseText.search(magicSplit)
-              options.parentMessageId = data.id
+          if (splitIndexBegin !== -1) {
-              lastText = data.text
+            const splitIndexEnd = splitIndexBegin + magicSplit.length
-              message = ''
+
-              return fetchChatAPIOnce()
+            const firstChunk = responseText.substring(0, splitIndexBegin)
+            const deltaText = responseText.substring(splitIndexEnd)
+            try {
+              const data = JSON.parse(firstChunk)
+              if (firstTime) {
+                firstTime = false
+                renderText = data.text ?? ''
+              }
+              else {
+                renderText = deltaText ?? ''
+              }
+              updateChat(
+                +uuid,
+                index,
+                {
+                  dateTime: new Date().toLocaleString(),
+                  text: renderText,
+                  inversion: false,
+                  error: false,
+                  loading: false,
+                  conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                  requestOptions: { prompt: message, ...options },
+                },
+              )
+
+              if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+                options.parentMessageId = data.id
+                message = ''
+                return fetchChatAPIOnce()
+              }
+            }
+            catch (error) {
+              //
             }
-          }
-          catch (error) {
-            //
           }
         },
       })
@@ -467,20 +488,13 @@ onUnmounted(() => {
 <template>
   <div class="flex flex-col w-full h-full">
     <HeaderComponent
-      v-if="isMobile"
+      v-if="isMobile" :using-context="usingContext" @export="handleExport"
-      :using-context="usingContext"
-      @export="handleExport"
       @toggle-using-context="toggleUsingContext"
     />
     <main class="flex-1 overflow-hidden">
-      <div
+      <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
-        id="scrollRef"
-        ref="scrollRef"
-        class="h-full overflow-hidden overflow-y-auto"
-      >
         <div
-          id="image-wrapper"
+          id="image-wrapper" class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
-          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
           :class="[isMobile ? 'p-2' : 'p-4']"
         >
           <template v-if="!dataSources.length">
@@ -492,14 +506,8 @@ onUnmounted(() => {
           <template v-else>
             <div>
               <Message
-                v-for="(item, index) of dataSources"
+                v-for="(item, index) of dataSources" :key="index" :date-time="item.dateTime" :text="item.text"
-                :key="index"
+                :inversion="item.inversion" :error="item.error" :loading="item.loading" @regenerate="onRegenerate(index)"
-                :date-time="item.dateTime"
-                :text="item.text"
-                :inversion="item.inversion"
-                :error="item.error"
-                :loading="item.loading"
-                @regenerate="onRegenerate(index)"
                 @delete="handleDelete(index)"
               />
               <div class="sticky bottom-0 left-0 flex justify-center">
@@ -536,15 +544,9 @@ onUnmounted(() => {
           <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
             <template #default="{ handleInput, handleBlur, handleFocus }">
               <NInput
-                ref="inputRef"
+                ref="inputRef" v-model:value="prompt" type="textarea" :placeholder="placeholder"
-                v-model:value="prompt"
+                :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }" @input="handleInput" @focus="handleFocus"
-                type="textarea"
+                @blur="handleBlur" @keypress="handleEnter"
-                :placeholder="placeholder"
-                :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
-                @input="handleInput"
-                @focus="handleFocus"
-                @blur="handleBlur"
-                @keypress="handleEnter"
               />
             </template>
           </NAutoComplete>