fix error when clicking the stop button and optimize SSE logic

app.vue

@@ -10,6 +10,9 @@ const themes = ref([
 const setTheme = (theme) => {
   colorMode.preference = theme
 }
+const feedback = () => {
+  window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
+}
 </script>
 
 <template>
@@ -38,7 +41,9 @@ const setTheme = (theme) => {
                   title="Theme mode"
               ></v-list-item>
             </template>
-            <v-list>
+            <v-list
+                bg-color="white"
+            >
               <v-list-item
                   v-for="(theme, idx) in themes"
                   :key="idx"
@@ -48,6 +53,13 @@ const setTheme = (theme) => {
               </v-list-item>
             </v-list>
           </v-menu>
+
+          <v-list-item
+              rounded="xl"
+              prepend-icon="help_outline"
+              title="Feedback"
+              @click="feedback"
+          ></v-list-item>
         </v-list>
       </template>
     </v-navigation-drawer>
@@ -58,6 +70,27 @@ const setTheme = (theme) => {
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
       <v-toolbar-title>{{ runtimeConfig.public.appName }}</v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <v-menu
+      >
+        <template v-slot:activator="{ props }">
+          <v-btn
+              v-bind="props"
+              icon="help_outline"
+              title="Feedback"
+          ></v-btn>
+        </template>
+        <v-list
+        >
+          <v-list-item
+              @click="feedback"
+          >
+            <v-list-item-title>Feedback</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-app-bar>
 
     <v-main>

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"

components/Welcome.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <div class="text-center">
+          <h2 class="text-h2">Welcome to <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
+          <p class="text-caption mt-5">
+            {{ runtimeConfig.public.appName }} is an unofficial client for ChatGPT, but uses the official OpenAI API.
+            <br>
+            You will need an OpenAI API Key before you can use this client.
+          </p>
+        </div>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" md="10" offset-md="1">
+        <v-row>
+          <v-col
+              cols="12"
+              md="4"
+          >
+            <v-row>
+              <v-col>
+                <div class="d-flex flex-column align-center">
+                  <v-icon icon="sunny"></v-icon>
+                  <h3 class="text-h6">Examples</h3>
+                </div>
+              </v-col>
+            </v-row>
+            <WelcomeCard v-for="example in examples" :content="example" />
+          </v-col>
+          <v-col
+              cols="12"
+              md="4"
+          >
+            <v-row>
+              <v-col>
+                <div class="d-flex flex-column align-center">
+                  <v-icon icon="bolt"></v-icon>
+                  <h3 class="text-h6">Capabilities</h3>
+                </div>
+              </v-col>
+            </v-row>
+            <WelcomeCard v-for="capabilitie in capabilities" :content="capabilitie" />
+          </v-col>
+          <v-col
+              cols="12"
+              md="4"
+          >
+            <v-row>
+              <v-col>
+                <div class="d-flex flex-column align-center">
+                  <v-icon icon="warning_amber"></v-icon>
+                  <h3 class="text-h6">Limitations</h3>
+                </div>
+              </v-col>
+            </v-row>
+            <WelcomeCard v-for="limitation in limitations" :content="limitation" />
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+const runtimeConfig = useRuntimeConfig()
+const examples = ref([
+    '"Explain quantum computing in simple terms"',
+    '"Got any creative ideas for a 10 year old’s birthday?"',
+    '"How do I make an HTTP request in Javascript?"'
+])
+const capabilities = ref([
+    'Remembers what user said earlier in the conversation',
+    'Allows user to provide follow-up corrections',
+    'Trained to decline inappropriate requests'
+])
+const limitations = ref([
+    'May occasionally generate incorrect information',
+    'May occasionally produce harmful instructions or biased content',
+    'Limited knowledge of world and events after 2021'
+])
+</script>

components/WelcomeCard.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-row>
+    <v-col>
+      <v-hover
+          v-slot="{ isHovering, props }"
+          open-delay="100"
+      >
+        <v-card
+            :elevation="isHovering ? 3 : 0"
+            v-bind="props"
+            variant="tonal"
+        >
+          <v-card-text class="text-center">
+            {{ content }}
+          </v-card-text>
+        </v-card>
+      </v-hover>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+const props = defineProps(['content'])
+</script>

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') {
+        const event = message.event
-          throw new Error(JSON.parse(message.data).error);
+        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();
+          abortFetch()
-          fetchingResponse.value = false
           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();
+  abortFetch()
-  fetchingResponse.value = false
 }
 
 const snackbar = ref(false)
@@ -106,7 +123,10 @@ createNewConversation()
 </script>
 
 <template>
-  <div ref="chatWindow">
+  <div
+      v-if="currentConversation.messages.length > 0"
+      ref="chatWindow"
+  >
     <v-card
         rounded="0"
         elevation="0"
@@ -122,8 +142,9 @@ 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">
     <div class="px-md-16 w-100 d-flex align-center">
       <v-btn
@@ -137,12 +158,13 @@ createNewConversation()
     </div>
 
     <div class="px-4 py-2 text-disabled text-caption font-weight-light text-center w-100">
-      {{ new Date().getFullYear() }} — {{ runtimeConfig.public.appName }}
+      © {{ new Date().getFullYear() }} — {{ runtimeConfig.public.appName }}
     </div>
   </v-footer>
   <v-snackbar
       v-model="snackbar"
       multi-line
+      location="top"
   >
     {{ snackbarText }}
 

server/api/conversation.post.js

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