Add feedback buttons

fix: Send button doesn't work, input box doesn't wrap on mobile

app.vue

@@ -1,123 +1,26 @@
 <script setup>
-import { fetchEventSource } from '@microsoft/fetch-event-source'
-
 const runtimeConfig = useRuntimeConfig()
-const currentModel = useCurrentModel()
-const openaiApiKey = useApiKey()
-const fetchingResponse = ref(false)
-const fetchReply = async (message, parentMessageId) => {
-  const ctrl = new AbortController()
-  try {
-    await fetchEventSource('/api/conversation', {
-      signal: ctrl.signal,
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        model: currentModel.value,
-        openaiApiKey: openaiApiKey.value,
-        message: message,
-        parentMessageId: parentMessageId,
-        conversationId: currentConversation.value.id
-      }),
-      onopen(response) {
-        if (response.status === 200) {
-          return;
+const colorMode = useColorMode()
+const drawer = ref(null)
+const themes = ref([
+  { title: 'Light', value: 'light' },
+  { title: 'Dark', value: 'dark' },
+  { title: 'System', value: 'system'}
+])
+const setTheme = (theme) => {
+  colorMode.preference = theme
 }
-        throw new Error(`Failed to send message. HTTP ${response.status} - ${response.statusText}`);
-      },
-      onclose() {
-        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 feedback = () => {
+  window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
 }
-        const { type, data } = JSON.parse(message.data);
-        if (type === '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
-          return;
-        }
-        if (currentConversation.value.messages[currentConversation.value.messages.length - 1].from === 'ai') {
-          currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data
-        } else {
-          currentConversation.value.messages.push({id: null, from: 'ai', message: data})
-        }
-        scrollChatWindow()
-      },
-    })
-  } catch (err) {
-    ctrl.abort()
-    showSnackbar(err.message)
-    fetchingResponse.value = false
-  }
-}
-
-const theme = ref('light')
-const toggleTheme = () => {
-  theme.value = theme.value === 'light' ? 'dark' : 'light'
-}
-
-const defaultConversation = ref({
-  id: null,
-  messages: []
-})
-const currentConversation = ref({})
-
-const grab = ref(null)
-const scrollChatWindow = () => {
-  grab.value.scrollIntoView({behavior: 'smooth'})
-}
-
-const createNewConversation = () => {
-  currentConversation.value = Object.assign(defaultConversation.value, {
-  })
-}
-const send = (message) => {
-  fetchingResponse.value = true
-  let parentMessageId = null
-  if (currentConversation.value.messages.length > 0) {
-    const lastMessage = currentConversation.value.messages[currentConversation.value.messages.length - 1]
-    if (lastMessage.from === 'ai' && lastMessage.id !== null) {
-      parentMessageId = lastMessage.id
-    }
-  }
-  currentConversation.value.messages.push({from: 'me', parentMessageId: parentMessageId, message: message})
-  fetchReply(message, parentMessageId)
-  scrollChatWindow()
-}
-const stop = () => {
-  ctrl.abort();
-  fetchingResponse.value = false
-}
-
-const snackbar = ref(false)
-const snackbarText = ref('')
-const showSnackbar = (text) => {
-  snackbarText.value = text
-  snackbar.value = true
-}
-
-onNuxtReady(() => {
-  createNewConversation()
-})
 </script>
 
 <template>
   <v-app
-      :theme="theme"
+      :theme="$colorMode.value"
   >
     <v-navigation-drawer
-        permanent
+        v-model="drawer"
     >
       <v-list>
         <ModelDialog/>
@@ -128,68 +31,70 @@ onNuxtReady(() => {
         <v-list>
           <ApiKeyDialog/>
 
+          <v-menu
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                  v-bind="props"
+                  rounded="xl"
+                  :prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
+                  title="Theme mode"
+              ></v-list-item>
+            </template>
+            <v-list
+                bg-color="white"
+            >
+              <v-list-item
+                  v-for="(theme, idx) in themes"
+                  :key="idx"
+                  @click="setTheme(theme.value)"
+              >
+                <v-list-item-title>{{ theme.title }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
           <v-list-item
               rounded="xl"
-              :prepend-icon="theme === 'light' ? 'dark_mode' : 'light_mode'"
-              :title="(theme === 'light' ? 'Dark' : 'Light') + ' mode'"
-              @click="toggleTheme"
+              prepend-icon="help_outline"
+              title="Feedback"
+              @click="feedback"
           ></v-list-item>
         </v-list>
       </template>
     </v-navigation-drawer>
-    <v-main>
-      <div ref="chatWindow">
-        <v-card
-            rounded="0"
-            elevation="0"
-            v-for="(conversation, index) in currentConversation.messages"
-            :key="index"
-            :variant="conversation.from === 'ai' ? 'tonal' : ''"
+
+    <v-app-bar
+        class="d-lg-none"
     >
-          <v-container>
-            <v-card-text class="text-caption text-disabled">{{ 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>
-      <v-container>
-      </v-container>
-    </v-main>
-    <v-footer app class="d-flex flex-column">
-      <div class="px-16 w-100 d-flex align-center">
+      <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-show="fetchingResponse"
-            icon="close"
-            title="stop"
-            class="mr-3"
-            @click="stop"
+              v-bind="props"
+              icon="help_outline"
+              title="Feedback"
           ></v-btn>
-        <MsgEditor :send-message="send" :disabled="fetchingResponse" :loading="fetchingResponse" />
-      </div>
-
-      <div class="px-4 py-2 text-disabled text-caption font-weight-light text-center w-100">
-        {{ new Date().getFullYear() }} — {{ runtimeConfig.public.appName }}
-      </div>
-    </v-footer>
-    <v-snackbar
-        v-model="snackbar"
-        multi-line
-    >
-      {{ snackbarText }}
-
-      <template v-slot:actions>
-        <v-btn
-            color="red"
-            variant="text"
-            @click="snackbar = false"
-        >
-          Close
-        </v-btn>
         </template>
-    </v-snackbar>
+        <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>
+      <NuxtPage/>
+    </v-main>
   </v-app>
 </template>

components/MsgEditor.vue

@@ -1,21 +1,21 @@
 <template>
   <v-textarea
       v-model="message"
-      clearable
-      label="Message"
-      placeholder="Type your message here"
+      label="Write a message..."
+      placeholder="Write a message..."
       rows="1"
       :auto-grow="autoGrow"
       :disabled="disabled"
       :loading="loading"
-      hide-details
+      :hint="hint"
       append-inner-icon="send"
-      @keyup.enter="send"
-      @click:append="send"
+      @keyup.enter.exact="enterOnly"
+      @click:appendInner="clickSendBtn"
   ></v-textarea>
 </template>
 
 <script>
+import { isMobile } from 'is-mobile'
 export default {
   name: "MsgEditor",
   props: {
@@ -30,6 +30,11 @@ export default {
       autoGrow: true,
     };
   },
+  computed: {
+    hint() {
+      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line.";
+    },
+  },
   watch: {
     message(val) {
       const lines = val.split(/\r\n|\r|\n/).length;
@@ -44,10 +49,24 @@ export default {
   },
   methods: {
     send() {
-      const msg = this.message
+      let msg = this.message
+      // remove the last "\n"
+      if (msg[msg.length - 1] === "\n") {
+        msg = msg.slice(0, -1)
+      }
+      if (msg.length > 0) {
+        this.sendMessage(msg)
+      }
       this.message = ""
-      this.sendMessage(msg);
     },
+    clickSendBtn () {
+      this.send()
+    },
+    enterOnly () {
+      if (!isMobile()) {
+        this.send()
+      }
+    }
   },
 }
 </script>

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>

nuxt.config.ts

@@ -21,5 +21,6 @@ export default defineNuxtConfig({
         'vuetify/styles',
         'material-design-icons-iconfont/dist/material-design-icons.css',
         'highlight.js/styles/panda-syntax-dark.css',
-    ]
+    ],
+    modules: ['@nuxtjs/color-mode']
 })

package.json

@@ -8,15 +8,17 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
+    "@nuxtjs/color-mode": "^3.2.0",
     "material-design-icons-iconfont": "^6.7.0",
-    "nuxt": "^3.1.2"
+    "nuxt": "^3.2.0"
   },
   "dependencies": {
-    "@keyv/sqlite": "^3.6.4",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@waylaidwanderer/chatgpt-api": "^1.12.2",
     "highlight.js": "^11.7.0",
+    "is-mobile": "^3.1.1",
     "marked": "^4.2.12",
     "vuetify": "^3.0.6"
-  }
+  },
+  "license": "MIT"
 }

pages/index.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { fetchEventSource } from '@microsoft/fetch-event-source'
+
+const runtimeConfig = useRuntimeConfig()
+const currentModel = useCurrentModel()
+const openaiApiKey = useApiKey()
+const fetchingResponse = ref(false)
+const fetchReply = async (message, parentMessageId) => {
+  const ctrl = new AbortController()
+  try {
+    await fetchEventSource('/api/conversation', {
+      signal: ctrl.signal,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: currentModel.value,
+        openaiApiKey: openaiApiKey.value,
+        message: message,
+        parentMessageId: parentMessageId,
+        conversationId: currentConversation.value.id
+      }),
+      onopen(response) {
+        if (response.status === 200) {
+          return;
+        }
+        throw new Error(`Failed to send message. HTTP ${response.status} - ${response.statusText}`);
+      },
+      onclose() {
+        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 { type, data } = JSON.parse(message.data);
+        if (type === '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
+          return;
+        }
+        if (currentConversation.value.messages[currentConversation.value.messages.length - 1].from === 'ai') {
+          currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data
+        } else {
+          currentConversation.value.messages.push({id: null, from: 'ai', message: data})
+        }
+        scrollChatWindow()
+      },
+    })
+  } catch (err) {
+    ctrl.abort()
+    showSnackbar(err.message)
+    fetchingResponse.value = false
+  }
+}
+
+const defaultConversation = ref({
+  id: null,
+  messages: []
+})
+const currentConversation = ref({})
+
+const grab = ref(null)
+const scrollChatWindow = () => {
+  grab.value.scrollIntoView({behavior: 'smooth'})
+}
+
+const createNewConversation = () => {
+  currentConversation.value = Object.assign(defaultConversation.value, {
+  })
+}
+const send = (message) => {
+  fetchingResponse.value = true
+  let parentMessageId = null
+  if (currentConversation.value.messages.length > 0) {
+    const lastMessage = currentConversation.value.messages[currentConversation.value.messages.length - 1]
+    if (lastMessage.from === 'ai' && lastMessage.id !== null) {
+      parentMessageId = lastMessage.id
+    }
+  }
+  currentConversation.value.messages.push({from: 'me', parentMessageId: parentMessageId, message: message})
+  fetchReply(message, parentMessageId)
+  scrollChatWindow()
+}
+const stop = () => {
+  ctrl.abort();
+  fetchingResponse.value = false
+}
+
+const snackbar = ref(false)
+const snackbarText = ref('')
+const showSnackbar = (text) => {
+  snackbarText.value = text
+  snackbar.value = true
+}
+
+createNewConversation()
+</script>
+
+<template>
+  <div
+      v-if="currentConversation.messages.length > 0"
+      ref="chatWindow"
+  >
+    <v-card
+        rounded="0"
+        elevation="0"
+        v-for="(conversation, index) in currentConversation.messages"
+        :key="index"
+        :variant="conversation.from === 'ai' ? 'tonal' : 'text'"
+    >
+      <v-container>
+        <v-card-text class="text-caption text-disabled">{{ 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>
+  <Welcome v-else />
+  <v-footer app class="d-flex flex-column">
+    <div class="px-md-16 w-100 d-flex align-center">
+      <v-btn
+          v-show="fetchingResponse"
+          icon="close"
+          title="stop"
+          class="mr-3"
+          @click="stop"
+      ></v-btn>
+      <MsgEditor :send-message="send" :disabled="fetchingResponse" :loading="fetchingResponse" />
+    </div>
+
+    <div class="px-4 py-2 text-disabled text-caption font-weight-light text-center w-100">
+      © {{ new Date().getFullYear() }} — {{ runtimeConfig.public.appName }}
+    </div>
+  </v-footer>
+  <v-snackbar
+      v-model="snackbar"
+      multi-line
+      location="top"
+  >
+    {{ snackbarText }}
+
+    <template v-slot:actions>
+      <v-btn
+          color="red"
+          variant="text"
+          @click="snackbar = false"
+      >
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>

server/api/conversation.post.js

@@ -69,7 +69,6 @@ export default defineEventHandler(async (event) => {
         // This is used for storing conversations, and supports additional drivers (conversations are stored in memory by default)
         // For example, to use a JSON file (`npm i keyv-file`) as a database:
         // store: new KeyvFile({ filename: 'cache.json' }),
-        uri: 'sqlite://database.sqlite'
     };
 
     const chatGptClient = new ChatGPTClient(body.openaiApiKey, clientOptions, cacheOptions);

server/api/settings.js

@@ -1,19 +0,0 @@
-import {getSetting, setSetting} from "~/utils/keyv";
-import {apiError, apiSuccess} from "~/utils/api";
-
-export default defineEventHandler(async (event) => {
-    const runtimeConfig = useRuntimeConfig()
-    const method = getMethod(event)
-    if (method === 'GET') {
-        const query = getQuery(event)
-        let value = await getSetting(query.key)
-        if (!value && query.key === 'modelName') {
-            value = runtimeConfig.openaiModelName
-        }
-        return apiSuccess(value)
-    } else if (method === 'POST') {
-        const body = await readBody(event)
-        await setSetting(body.key, body.value)
-        return apiSuccess()
-    }
-})

utils/keyv.js

@@ -1,18 +0,0 @@
-import Keyv from 'keyv'
-import KeyvSqlite from "@keyv/sqlite";
-
-const sqlite = new KeyvSqlite()
-
-const cacheOptions = {
-    namespace: 'settings',
-    uri: 'sqlite://database.sqlite',
-}
-const cache = new Keyv(cacheOptions);
-
-export const getSetting = async (key) => {
-    return await cache.get(key)
-}
-
-export const setSetting = async (key, value) => {
-    return await cache.set(key, value)
-}