fix error when clicking the stop button and optimize SSE logic

Author: WongSaang

components/MsgEditor.vue

@@ -8,6 +8,7 @@
       :disabled="disabled"
       :loading="loading"
       :hint="hint"
+      :hide-details="loading"
       append-inner-icon="send"
       @keyup.enter.exact="enterOnly"
       @click:appendInner="clickSendBtn"

package.json

@@ -18,6 +18,7 @@
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",
     "marked": "^4.2.12",
+    "nanoid": "^4.0.1",
     "vuetify": "^3.0.6"
   },
   "license": "MIT"

pages/index.vue

@@ -1,12 +1,20 @@
 <script setup>
-import { fetchEventSource } from '@microsoft/fetch-event-source'
+import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
 
 const runtimeConfig = useRuntimeConfig()
 const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
 const fetchingResponse = ref(false)
+
+let ctrl
+const abortFetch = () => {
+  if (ctrl) {
+    ctrl.abort()
+  }
+  fetchingResponse.value = false
+}
 const fetchReply = async (message, parentMessageId) => {
-  const ctrl = new AbortController()
+  ctrl = new AbortController()
   try {
     await fetchEventSource('/api/conversation', {
       signal: ctrl.signal,
@@ -22,43 +30,50 @@ const fetchReply = async (message, parentMessageId) => {
         conversationId: currentConversation.value.id
       }),
       onopen(response) {
-        if (response.status === 200) {
+        if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
           return;
         }
         throw new Error(`Failed to send message. HTTP ${response.status} - ${response.statusText}`);
       },
       onclose() {
+        if (ctrl.signal.aborted === true) {
+          return;
+        }
         throw new Error(`Failed to send message. Server closed the connection unexpectedly.`);
       },
       onerror(err) {
         throw err;
       },
       onmessage(message) {
-        if (message.event === 'error') {
-          throw new Error(JSON.parse(message.data).error);
+        const event = message.event
+        const data = JSON.parse(message.data)
+
+        if (event === 'error') {
+          throw new Error(data.error);
         }
-        const { type, data } = JSON.parse(message.data);
-        if (type === 'done') {
+
+        if (event === 'done') {
           if (currentConversation.value.id === null) {
             currentConversation.value.id = data.conversationId
           }
           currentConversation.value.messages[currentConversation.value.messages.length - 1].id = data.messageId
-          ctrl.abort();
-          fetchingResponse.value = false
+          abortFetch()
           return;
         }
+
         if (currentConversation.value.messages[currentConversation.value.messages.length - 1].from === 'ai') {
-          currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data
+          currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data.content
         } else {
-          currentConversation.value.messages.push({id: null, from: 'ai', message: data})
+          currentConversation.value.messages.push({id: null, from: 'ai', message: data.content})
         }
+
         scrollChatWindow()
       },
     })
   } catch (err) {
-    ctrl.abort()
+    console.log(err)
+    abortFetch()
     showSnackbar(err.message)
-    fetchingResponse.value = false
   }
 }
 
@@ -70,6 +85,9 @@ const currentConversation = ref({})
 
 const grab = ref(null)
 const scrollChatWindow = () => {
+  if (grab.value === null) {
+    return;
+  }
   grab.value.scrollIntoView({behavior: 'smooth'})
 }
 
@@ -91,8 +109,7 @@ const send = (message) => {
   scrollChatWindow()
 }
 const stop = () => {
-  ctrl.abort();
-  fetchingResponse.value = false
+  abortFetch()
 }
 
 const snackbar = ref(false)
@@ -125,7 +142,7 @@ createNewConversation()
       </v-container>
       <v-divider></v-divider>
     </v-card>
-    <div ref="grab" class="w-100" style="height: 150px;"></div>
+    <div ref="grab" class="w-100" style="height: 200px;"></div>
   </div>
   <Welcome v-else />
   <v-footer app class="d-flex flex-column">

server/api/conversation.post.js

@@ -1,49 +1,39 @@
 import ChatGPTClient from '@waylaidwanderer/chatgpt-api'
 import { PassThrough } from 'node:stream'
+import { nanoid } from 'nanoid'
 
-const serializeSSEEvent = (chunk) => {
-    let payload = "";
-    if (chunk.id) {
-        payload += `id: ${chunk.id}\n`;
-    }
-    if (chunk.event) {
-        payload += `event: ${chunk.event}\n`;
-    }
-    if (chunk.data) {
-        payload += `data: ${chunk.data}\n`;
-    }
-    if (chunk.retry) {
-        payload += `retry: ${chunk.retry}\n`;
-    }
-    if (!payload) {
-        return "";
-    }
-    payload += "\n";
-    return payload;
+const serializeSSEEvent = (event, data) => {
+    const id = nanoid();
+    const eventStr = event ? `event: ${event}\n` : '';
+    const dataStr = data ? `data: ${JSON.stringify(data)}\n` : '';
+
+    return `id: ${id}\n${eventStr}${dataStr}\n`;
 }
 
 export default defineEventHandler(async (event) => {
     const body = await readBody(event)
     const conversationId = body.conversationId ? body.conversationId.toString() : undefined
     const parentMessageId = body.parentMessageId ? body.parentMessageId.toString() : undefined
     const tunnel = new PassThrough()
-    const writeToTunnel = (data) => {
-        tunnel.write(serializeSSEEvent(data))
+    const writeToTunnel = (event, data) => {
+        tunnel.write(serializeSSEEvent(event, data))
+    }
+    const endTunnel = () => {
+        tunnel.end()
     }
+
     setResponseHeaders(event, {
         'Content-Type': 'text/event-stream',
         'Cache-Control': 'no-cache',
         'Connection': 'keep-alive'
     })
 
     if (!body.openaiApiKey) {
-        writeToTunnel({
-            event: 'error',
-            data: JSON.stringify({
-                code: 503,
-                error: 'You haven\'t set the api key of openai',
-            }),
+        writeToTunnel('error', {
+            code: 503,
+            error: 'You haven\'t set the api key of openai',
         })
+        endTunnel()
         return sendStream(event, tunnel)
     }
 
@@ -79,29 +69,19 @@ export default defineEventHandler(async (event) => {
             parentMessageId,
             onProgress: (token) => {
                 // console.log(token)
-                writeToTunnel({ data: JSON.stringify({
-                        type: 'token',
-                        data: token
-                    })
-                })
+                writeToTunnel('message',{content: token})
             }
         });
-        writeToTunnel({ data: JSON.stringify({
-                type: 'done',
-                data: response
-            }) })
-        console.log(response)
+        writeToTunnel('done',response)
+        console.info(response)
     } catch (e) {
         const code = e?.json?.data?.code || 503;
         const message = e?.json?.error?.message || 'There was an error communicating with ChatGPT.';
-        writeToTunnel({
-            event: 'error',
-            data: JSON.stringify({
-                code,
-                error: message,
-            }),
+        writeToTunnel('error', {
+            code,
+            error: message
         })
     }
-
+    tunnel.end()
     return sendStream(event, tunnel)
 })

yarn.lock

@@ -3266,7 +3266,7 @@ nanoid@^3.3.4:
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
-nanoid@^4.0.0:
+nanoid@^4.0.0, nanoid@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.1.tgz#398d7ccfdbf9faf2231b2ca7e8fff5dbca6a509b"
   integrity sha512-udKGtCCUafD3nQtJg9wBhRP3KMbPglUsgV5JVsXhvyBs/oefqb4sqMEhKBBgqZncYowu58p1prsZQBYvAj/Gww==