update demo

Merge pull request #5 from WongSaang/dev
feat: i18n
2023-02-16 18:19:28 +08:00 · 2023-02-16 17:55:03 +08:00 · 2023-02-16 17:34:40 +08:00 · 2023-02-15 18:20:49 +08:00 · 2023-02-14 21:24:33 +08:00 · 2023-02-14 18:32:49 +08:00
15 changed files with 680 additions and 711 deletions
--- a/app.vue
+++ b/app.vue
@@ -1,15 +1,24 @@
 <script setup>
+const { $i18n } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const colorMode = useColorMode()
 const drawer = ref(null)
 const themes = ref([
-  { title: 'Light', value: 'light' },
-  { title: 'Dark', value: 'dark' },
-  { title: 'System', value: 'system'}
+  { title: $i18n.t('lightMode'), value: 'light' },
+  { title: $i18n.t('darkMode'), value: 'dark' },
+  { title: $i18n.t('followSystem'), value: 'system'}
 ])
 const setTheme = (theme) => {
  colorMode.preference = theme
 }
+const feedback = () => {
+  window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
+}
+
+const { locale, locales, setLocale } = useI18n()
+const setLang = (lang) => {
+  setLocale(lang)
+}
 </script>

 <template>
@@ -35,10 +44,12 @@ const setTheme = (theme) => {
                  v-bind="props"
                  rounded="xl"
                  :prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
-                  title="Theme mode"
+                  :title="$t('themeMode')"
              ></v-list-item>
            </template>
-            <v-list>
+            <v-list
+                bg-color="white"
+            >
              <v-list-item
                  v-for="(theme, idx) in themes"
                  :key="idx"
@@ -48,6 +59,15 @@ const setTheme = (theme) => {
              </v-list-item>
            </v-list>
          </v-menu>
+
+          <SettingsLanguages/>
+
+          <v-list-item
+              rounded="xl"
+              prepend-icon="help_outline"
+              :title="$t('feedback')"
+              @click="feedback"
+          ></v-list-item>
        </v-list>
      </template>
    </v-navigation-drawer>
@@ -58,6 +78,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>{{ $t('feedback') }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
    </v-app-bar>

    <v-main>
--- a/components/ApiKeyDialog.vue
+++ b/components/ApiKeyDialog.vue
@@ -10,17 +10,17 @@
          prepend-icon="vpn_key"
          color="primary"
      >
-        Set OpenAI Api Key
+        {{ $t('setApiKey') }}
      </v-list-item>
    </template>
    <v-card>
      <v-card-title>
-        <span class="text-h5">OpenAI Api Key</span>
+        <span class="text-h5">{{ $t('openAIApiKey') }}</span>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text>
        <div>
-          Get a key:
+          {{ $t('getAKey') }}:
          <a target="_blank" href="https://platform.openai.com/account/api-keys">https://platform.openai.com/account/api-keys</a>
        </div>
        <div
--- a/components/ModelDialog.vue
+++ b/components/ModelDialog.vue
@@ -17,12 +17,12 @@
    </template>
    <v-card>
      <v-card-title>
-        <span class="text-h5">OpenAI Models</span>
+        <span class="text-h5">{{ $t('openAIModels') }}</span>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text>
        <div>
-          About the models:
+          {{ $t('aboutTheModels') }}:
          <a target="_blank" href="https://platform.openai.com/docs/models/overview">https://platform.openai.com/docs/models/overview</a>
        </div>
        <div
@@ -77,7 +77,7 @@
            color="primary"
            @click="save"
        >
-          Save & Close
+          {{ $t('saveAndClose') }}
        </v-btn>
      </v-card-actions>
    </v-card>
@@ -85,6 +85,7 @@
 </template>

 <script setup>
+const { $i18n } = useNuxtApp()
 const dialog = ref(false)
 const models = useModels()
 const currentModel = useCurrentModel()
@@ -110,7 +111,7 @@ const removeModel = (index) => {
 }
 const save = async () => {
  if (!currentModel.value) {
-    showWarning('Please select at least one model.')
+    showWarning($i18n.t('pleaseSelectAtLeastOneModelDot'))
    return
  }
  setModels(models.value)
--- a/components/MsgEditor.vue
+++ b/components/MsgEditor.vue
@@ -1,13 +1,14 @@
 <template>
  <v-textarea
      v-model="message"
-      label="Write a message..."
-      placeholder="Write a message..."
+      :label="$t('writeAMessage')"
+      :placeholder="$t('writeAMessage') + '...'"
      rows="1"
      :auto-grow="autoGrow"
      :disabled="disabled"
      :loading="loading"
      :hint="hint"
+      :hide-details="loading"
      append-inner-icon="send"
      @keyup.enter.exact="enterOnly"
      @click:appendInner="clickSendBtn"
@@ -32,7 +33,7 @@ export default {
  },
  computed: {
    hint() {
-      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line.";
+      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line";
    },
  },
  watch: {
--- a/components/Welcome.vue
+++ b/components/Welcome.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <div class="text-center">
+          <h2 class="text-h2">{{ $t('welcomeTo') }} <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
+          <p class="text-caption mt-5">
+            {{ runtimeConfig.public.appName }} {{ $t('welcomeScreen.introduction1') }}
+            <br>
+            {{ $t('welcomeScreen.introduction2') }}
+          </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">{{ $t('welcomeScreen.examples.title') }}</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">{{ $t('welcomeScreen.capabilities.title') }}</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">{{ $t('welcomeScreen.limitations.title') }}</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 { $i18n } = useNuxtApp()
+const examples = ref([
+  $i18n.t('welcomeScreen.examples.item1'),
+  $i18n.t('welcomeScreen.examples.item2'),
+  $i18n.t('welcomeScreen.examples.item3')
+])
+const capabilities = ref([
+  $i18n.t('welcomeScreen.capabilities.item1'),
+  $i18n.t('welcomeScreen.capabilities.item2'),
+  $i18n.t('welcomeScreen.capabilities.item3')
+])
+const limitations = ref([
+  $i18n.t('welcomeScreen.limitations.item1'),
+  $i18n.t('welcomeScreen.limitations.item2'),
+  $i18n.t('welcomeScreen.limitations.item3')
+])
+</script>
--- a/components/WelcomeCard.vue
+++ b/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>
--- a/components/settings/Languages.vue
+++ b/components/settings/Languages.vue
@@ -0,0 +1,86 @@
+<template>
+  <v-dialog
+      v-model="dialog"
+      fullscreen
+      :scrim="false"
+      transition="dialog-bottom-transition"
+  >
+    <template v-slot:activator="{ props }">
+      <v-list-item
+          v-bind="props"
+          rounded="xl"
+          prepend-icon="language"
+          :title="$t('language')"
+      ></v-list-item>
+    </template>
+    <v-card>
+      <v-toolbar
+          dark
+          color="primary"
+      >
+        <v-btn
+            icon
+            dark
+            @click="dialog = false"
+        >
+          <v-icon>close</v-icon>
+        </v-btn>
+        <v-toolbar-title>{{ $t('language') }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <!--          <v-toolbar-items>-->
+        <!--            <v-btn-->
+        <!--                variant="text"-->
+        <!--                @click="dialog = false"-->
+        <!--            >-->
+        <!--              Save-->
+        <!--            </v-btn>-->
+        <!--          </v-toolbar-items>-->
+      </v-toolbar>
+      <v-list
+      >
+        <!--          <v-list-item-->
+        <!--              title="Use device language"-->
+        <!--              :append-icon="usingDeviceLanguage() ? 'radio_button_checked' : 'radio_button_unchecked'"-->
+        <!--              @click="useDeviceLanguage"-->
+        <!--          >-->
+        <!--          </v-list-item>-->
+        <v-list-item
+            v-for="l in locales"
+            :key="l.code"
+            :title="l.name"
+            :append-icon="radioIcon(l.code)"
+            @click="updateLocale(l.code)"
+        >
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+const dialog = ref(false)
+const { locale, locales, setLocale } = useI18n()
+const { $i18n } = useNuxtApp()
+
+// const usingDeviceLanguage = () => {
+//   return ($i18n.getLocaleCookie() === undefined || $i18n.getLocaleCookie() === 'undefined')
+// }
+
+const updateLocale = (lang) => {
+  setLocale(lang)
+}
+
+const radioIcon = (code) => {
+  return code === locale.value ? 'radio_button_checked' : 'radio_button_unchecked'
+}
+
+// const useDeviceLanguage = () => {
+//   setLocale($i18n.getBrowserLocale())
+//   $i18n.setLocaleCookie(undefined)
+// }
+
+</script>
+
+<style scoped>
+
+</style>
--- a/demos/demo.gif
+++ b/demos/demo.gif
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -0,0 +1,45 @@
+{
+  "welcomeTo": "Welcome to",
+  "language": "Language",
+  "setApiKey": "Set API Key",
+  "setOpenAIApiKey": "Set OpenAI API Key",
+  "openAIApiKey": "OpenAI API Key",
+  "getAKey": "Get a key",
+  "openAIModels": "OpenAI Models",
+  "aboutTheModels": "About the models",
+  "saveAndClose": "Save & Close",
+  "pleaseSelectAtLeastOneModelDot": "Please select at least one model.",
+  "writeAMessage": "Write a message",
+  "pressEnterToSendYourMessageOrShiftEnterToAddANewLine": "Press Enter to send your message or Shift+Enter to add a new line",
+  "lightMode": "Light Mode",
+  "darkMode": "Dark Mode",
+  "followSystem": "Follow system",
+  "themeMode": "Theme Mode",
+  "feedback": "Feedback",
+  "roles": {
+    "me": "Me",
+    "ai": "AI"
+  },
+  "welcomeScreen": {
+    "introduction1": "is an unofficial client for ChatGPT, but uses the official OpenAI API.",
+    "introduction2": "You will need an OpenAI API Key before you can use this client.",
+    "examples": {
+      "title": "Examples",
+      "item1": "\"Explain quantum computing in simple terms\"",
+      "item2": "\"Got any creative ideas for a 10 year old’s birthday?\"",
+      "item3": "\"How do I make an HTTP request in Javascript?\""
+    },
+    "capabilities": {
+      "title": "Capabilities",
+      "item1": "Remembers what user said earlier in the conversation",
+      "item2": "Allows user to provide follow-up corrections",
+      "item3": "Trained to decline inappropriate requests"
+    },
+    "limitations": {
+      "title": "Limitations",
+      "item1": "May occasionally generate incorrect information",
+      "item2": "May occasionally produce harmful instructions or biased content",
+      "item3": "Limited knowledge of world and events after 2021"
+    }
+  }
+}
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -0,0 +1,45 @@
+{
+  "welcomeTo": "欢迎来到",
+  "language": "语言",
+  "setApiKey": "设置API密钥",
+  "setOpenAIApiKey": "设置OpenAI的API密钥",
+  "openAIApiKey": "OpenAI的API密钥",
+  "getAKey": "获取钥匙",
+  "openAIModels": "OpenAI模型",
+  "aboutTheModels": "关于模型",
+  "saveAndClose": "保存并关闭",
+  "pleaseSelectAtLeastOneModelDot": "请至少选择一个模型",
+  "writeAMessage": "输入信息",
+  "pressEnterToSendYourMessageOrShiftEnterToAddANewLine": "按回车键发送您的信息，或按Shift+Enter键添加新行",
+  "lightMode": "明亮模式",
+  "darkMode": "暗色模式",
+  "followSystem": "跟随系统",
+  "themeMode": "主题模式",
+  "feedback": "反馈",
+  "roles": {
+    "me": "我",
+    "ai": "AI"
+  },
+  "welcomeScreen": {
+    "introduction1": "是一个非官方的ChatGPT客户端，但使用OpenAI的官方API",
+    "introduction2": "在使用本客户端之前，您需要一个OpenAI API密钥。",
+    "examples": {
+      "title": "例子",
+      "item1": "\"用简单的语言解释量子计算\"",
+      "item2": "\"为10岁的孩子过生日，有什么创造性的想法吗？\"",
+      "item3": "\"我如何在Javascript中进行HTTP请求？\""
+    },
+    "capabilities": {
+      "title": "能力",
+      "item1": "记得用户在谈话中早先说过的话",
+      "item2": "允许用户提供后续更正",
+      "item3": "经过培训，可以拒绝不适当的请求"
+    },
+    "limitations": {
+      "title": "局限",
+      "item1": "偶尔可能会产生不正确的信息",
+      "item2": "可能偶尔会产生有害的指示或有偏见的内容",
+      "item3": "对2021年以后的世界和事件了解有限"
+    }
+  }
+}
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -22,5 +22,31 @@ export default defineNuxtConfig({
        'material-design-icons-iconfont/dist/material-design-icons.css',
        'highlight.js/styles/panda-syntax-dark.css',
    ],
-    modules: ['@nuxtjs/color-mode']
+    modules: [
+        '@nuxtjs/color-mode',
+        '@nuxtjs/i18n'
+    ],
+    i18n: {
+        strategy: 'no_prefix',
+        locales: [
+            {
+                code: 'en',
+                iso: 'en-US',
+                name: 'English',
+                file: 'en-US.json',
+            },
+            {
+                code: 'zh-CN',
+                iso: 'zh-CN',
+                name: '简体中文',
+                file: 'zh-CN.json',
+            }
+        ],
+        lazy: true,
+        langDir: 'lang',
+        defaultLocale: 'en',
+        vueI18n: {
+            fallbackLocale: 'en',
+        },
+    }
 })
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
  },
  "devDependencies": {
    "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/i18n": "^8.0.0-beta.9",
    "material-design-icons-iconfont": "^6.7.0",
    "nuxt": "^3.2.0"
  },
@@ -18,6 +19,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"
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,21 @@
 <script setup>
-import { fetchEventSource } from '@microsoft/fetch-event-source'
+import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'

+const { $i18n } = useNuxtApp()
 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 +31,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 +86,9 @@ const currentConversation = ref({})

 const grab = ref(null)
 const scrollChatWindow = () => {
+  if (grab.value === null) {
+    return;
+  }
  grab.value.scrollIntoView({behavior: 'smooth'})
 }

@@ -91,8 +110,7 @@ const send = (message) => {
  scrollChatWindow()
 }
 const stop = () => {
-  ctrl.abort();
-  fetchingResponse.value = false
+  abortFetch()
 }

 const snackbar = ref(false)
@@ -106,7 +124,10 @@ createNewConversation()
 </script>

 <template>
-  <div ref="chatWindow">
+  <div
+      v-if="currentConversation.messages.length > 0"
+      ref="chatWindow"
+  >
    <v-card
        rounded="0"
        elevation="0"
@@ -115,15 +136,16 @@ createNewConversation()
        :variant="conversation.from === 'ai' ? 'tonal' : 'text'"
    >
      <v-container>
-        <v-card-text class="text-caption text-disabled">{{ conversation.from }}</v-card-text>
+        <v-card-text class="text-caption text-disabled">{{ $t(`roles.${conversation.from}`) }}</v-card-text>
        <v-card-text>
          <MsgContent :content="conversation.message" />
        </v-card-text>
      </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 +159,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 }}

--- a/server/api/conversation.post.js
+++ b/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) => {
-    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) => {
@@ -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) => {
-        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',
@@ -37,13 +29,11 @@ export default defineEventHandler(async (event) => {
    })

    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)
 })
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rafi	13798e668a	update demo	2023-02-16 18:19:28 +08:00
Wong Saang	d431048dc4	Merge pull request #5 from WongSaang/dev feat: i18n	2023-02-16 17:55:03 +08:00
Rafi	9215965d45	feat: i18n Add simplified Chinese translation	2023-02-16 17:34:40 +08:00
Rafi	66767d9352	feat: i18n config	2023-02-15 18:20:49 +08:00
Rafi	5abd5edba5	i18n config	2023-02-14 21:24:33 +08:00
Rafi	233eb9c27a	feat: i18n	2023-02-14 18:32:49 +08:00
Rafi	5201349363	fix error when clicking the stop button and optimize SSE logic	2023-02-14 15:49:44 +08:00
Rafi	cdd8a86de0	Add feedback buttons	2023-02-13 21:21:47 +08:00
Rafi	96902c9e14	Modify the background color of the theme menu to white to solve the problem of not being able to see the menu	2023-02-13 21:12:46 +08:00
Rafi	b10fafd6a8	feat: Change the location of the snackbar to the top	2023-02-13 21:01:39 +08:00
Rafi	58e92bfe84	feat: Add a welcome screen	2023-02-13 20:55:50 +08:00