fix(gen_title) add openaiApiKey to request body

app.vue

@@ -1,12 +1,3 @@
-<script setup>
-onNuxtReady(() => {
-  fetchSystemSettings()
-  // api key
-  const apiKey = useApiKey()
-  apiKey.value = getStoredApiKey()
-})
-</script>
-
 <template>
   <NuxtLayout>
     <NuxtLoadingIndicator />

components/Conversation.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
 
-const { $i18n } = useNuxtApp()
+const { $i18n, $settings } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
@@ -63,7 +63,7 @@ const fetchReply = async (message) => {
   }
 
   const data = Object.assign({}, currentModel.value, {
-    openaiApiKey: enableCustomApiKey.value ? openaiApiKey.value : null,
+    openaiApiKey: $settings.open_api_key_setting === 'True' ? openaiApiKey.value : null,
     message: message,
     conversationId: props.conversation.id,
     frugalMode: frugalMode.value
@@ -169,17 +169,8 @@ const deleteMessage = (index) => {
   props.conversation.messages.splice(index, 1)
 }
 
-const settings = useSettings()
 const enableWebSearch = ref(false)
 
-const showWebSearchToggle = computed(() => {
-  return settings.value && settings.value.open_web_search && settings.value.open_web_search === 'True'
-})
-
-const enableCustomApiKey = computed(() => {
-  return settings.value && settings.value.open_api_key_setting && settings.value.open_api_key_setting === 'True'
-})
-
 
 onNuxtReady(() => {
   currentModel.value = getCurrentModel()
@@ -260,7 +251,7 @@ onNuxtReady(() => {
       >
         <Prompt v-show="!fetchingResponse" :use-prompt="usePrompt" />
         <v-switch
-            v-if="showWebSearchToggle"
+            v-if="$settings.open_web_search === 'True'"
             v-model="enableWebSearch"
             inline
             hide-details
@@ -268,36 +259,43 @@ onNuxtReady(() => {
             :label="$t('webSearch')"
         ></v-switch>
         <v-spacer></v-spacer>
-        <v-switch
+        <div
-            v-model="frugalMode"
+            v-if="$settings.open_frugal_mode_control === 'True'"
-            inline
+            class="d-flex align-center"
-            hide-details
-            color="primary"
-            :label="$t('frugalMode')"
-        ></v-switch>
-        <v-dialog
-            transition="dialog-bottom-transition"
-            width="auto"
         >
-          <template v-slot:activator="{ props }">
+          <v-switch
-            <v-icon
+              v-model="frugalMode"
-                color="grey"
+              inline
-                v-bind="props"
+              hide-details
-                icon="help_outline"
+              color="primary"
-            ></v-icon>
+              :label="$t('frugalMode')"
-          </template>
+          ></v-switch>
-          <template v-slot:default="{ isActive }">
+          <v-dialog
-            <v-card>
+              transition="dialog-bottom-transition"
-              <v-toolbar
+              width="auto"
-                  color="primary"
+          >
-                  :title="$t('frugalMode')"
+            <template v-slot:activator="{ props }">
-              ></v-toolbar>
+              <v-icon
-              <v-card-text>
+                  color="grey"
-                {{ $t('frugalModeTip') }}
+                  v-bind="props"
-              </v-card-text>
+                  icon="help_outline"
-            </v-card>
+                  class="ml-3"
-          </template>
+              ></v-icon>
-        </v-dialog>
+            </template>
+            <template v-slot:default="{ isActive }">
+              <v-card>
+                <v-toolbar
+                    color="primary"
+                    :title="$t('frugalMode')"
+                ></v-toolbar>
+                <v-card-text>
+                  {{ $t('frugalModeTip') }}
+                </v-card-text>
+              </v-card>
+            </template>
+          </v-dialog>
+        </div>
+
       </v-toolbar>
     </div>
   </v-footer>

components/MsgEditor.vue

@@ -48,8 +48,11 @@ const send = () => {
   message.value = ""
 }
 
+const textArea = ref()
+
 const usePrompt = (prompt) => {
   message.value = prompt
+  textArea.value.focus()
 }
 
 const clickSendBtn = () => {
@@ -73,6 +76,7 @@ defineExpose({
       class="flex-grow-1 d-flex align-center justify-space-between"
   >
     <v-textarea
+        ref="textArea"
         v-model="message"
         :label="$t('writeAMessage')"
         :placeholder="hint"

components/NavigationDrawer.vue

@@ -3,7 +3,7 @@ import { useDisplay } from 'vuetify'
 import {useDrawer} from "../composables/states";
 
 const route = useRoute()
-const { $i18n } = useNuxtApp()
+const { $i18n, $settings } = useNuxtApp()
 const colorMode = useColorMode()
 const {mdAndUp} = useDisplay()
 const drawerPermanent = computed(() => {
@@ -88,11 +88,6 @@ const loadConversations = async () => {
   loadingConversations.value = false
 }
 
-const settings = useSettings()
-const showApiKeySetting = computed(() => {
-  return settings.value && settings.value.open_api_key_setting && settings.value.open_api_key_setting === 'True'
-})
-
 const signOut = async () => {
   const { data, error } = await useFetch('/api/account/logout/', {
     method: 'POST'
@@ -277,7 +272,7 @@ const drawer = useDrawer()
           </v-dialog>
 
           <ApiKeyDialog
-              v-if="showApiKeySetting"
+              v-if="$settings.open_api_key_setting === 'True'"
           />
 
           <ModelParameters/>

composables/states.js

@@ -7,8 +7,6 @@ export const useApiKey = () => useState('apiKey', () => getStoredApiKey())
 
 export const useConversations = () => useState('conversations', () => [])
 
-export const useSettings = () => useState('settings', () => {})
-
 export const useUser = () => useState('user', () => null)
 
 export const useDrawer = () => useState('drawer', () => false)

docker-compose.yml

@@ -20,6 +20,7 @@ services:
     platform: linux/x86_64
     image: wongsaang/chatgpt-ui-wsgi-server:latest
     environment:
+      - DEBUG=${DEBUG:-False} # Whether to enable debug mode, default False
       - APP_DOMAIN=${APP_DOMAIN:-localhost:9000}
       - SERVER_WORKERS=3 # The number of worker processes for handling requests.
       - WORKER_TIMEOUT=180 # Workers silent for more than this many seconds are killed and restarted. default 180s

docs/guide/configuration.md

@@ -77,4 +77,8 @@ After deployment, there is an `open_registration` setting under `Chat->Settings`
 
 ## Web Search Function Control
 
-This feature is disabled by default. You can enable it in the admin panel under `Chat->Settings`. There is a setting called `open_web_search`, set its value to `True`.
+This feature is disabled by default. You can enable it in the admin panel under `Chat->Settings`. There is a setting called `open_web_search`, set its value to `True`.
+
+## Frugal Mode Control
+
+This feature is enabled by default. You can disable it in the `Chat->Settings` section of the management backend. There is a setting called `open_frugal_mode_control` in Settings. Set its value to `False`.

docs/zh/guide/configuration.md

@@ -78,4 +78,8 @@ backend-wsgi-server:
 
 ## 网页搜索功能控制
 
-该功能默认处于关闭状态，你可以在管理后台的 `Chat->Settings` 中开启它，在 Settings 中有一个 `open_web_search` 的设置项，把它的值设置为 `True`。
+该功能默认处于关闭状态，你可以在管理后台的 `Chat->Settings` 中开启它，在 Settings 中有一个 `open_web_search` 的设置项，把它的值设置为 `True`。
+
+## 节俭模式控制
+
+该功能默认处于开启状态，你可以在管理后台的 `Chat->Settings` 中关闭它，在 Settings 中有一个 `open_frugal_mode_control` 的设置项，把它的值设置为 `False`。

lang/zh-CN.json

@@ -26,7 +26,7 @@
   "to your account.":"你的账号了。",
   "welcomeTo": "欢迎来到",
   "language": "语言",
-  "setApiKey": "设置API密钥",
+  "setApiKey": "API 密钥",
   "setOpenAIApiKey": "设置OpenAI的API密钥",
   "openAIApiKey": "OpenAI的API密钥",
   "getAKey": "获取钥匙",

package.json

@@ -11,10 +11,11 @@
   },
   "devDependencies": {
     "@kevinmarrec/nuxt-pwa": "^0.17.0",
+    "@nuxt/devtools": "^0.4.0",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/i18n": "^8.0.0-beta.9",
     "material-design-icons-iconfont": "^6.7.0",
-    "nuxt": "^3.3.3",
+    "nuxt": "^3.4.0",
     "vuepress": "^2.0.0-beta.61"
   },
   "dependencies": {

plugins/initApiKey.js

@@ -0,0 +1,6 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.hook('app:created', async () => {
+        const apiKey = useApiKey()
+        apiKey.value = getStoredApiKey()
+    })
+})

plugins/settings.js

@@ -0,0 +1,24 @@
+const transformData = (list) => {
+    const result = {};
+    for (let i = 0; i < list.length; i++) {
+        const item = list[i];
+        result[item.name] = item.value;
+    }
+    return result;
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.hook('app:created', async () => {
+        let settings = {}
+
+        const { data, error } = await useAuthFetch('/api/chat/settings/', {
+            method: 'GET',
+        })
+
+        if (!error.value) {
+            settings = transformData(data.value)
+        }
+
+        nuxtApp.provide('settings', settings)
+    })
+})

utils/helper.js

@@ -24,12 +24,14 @@ export const addConversation = (conversation) => {
 
 
 export const genTitle = async (conversationId) => {
-    const { $i18n } = useNuxtApp()
+    const { $i18n, $settings } = useNuxtApp()
+    const openaiApiKey = useApiKey()
     const { data, error } = await useAuthFetch('/api/gen_title/', {
         method: 'POST',
         body: {
             conversationId: conversationId,
-            prompt: $i18n.t('genTitlePrompt')
+            prompt: $i18n.t('genTitlePrompt'),
+            openaiApiKey: $settings.open_api_key_setting === 'True' ? openaiApiKey.value : null,
         }
     })
     if (!error.value) {
@@ -44,25 +46,6 @@ export const genTitle = async (conversationId) => {
     return null
 }
 
-const transformData = (list) => {
-    const result = {};
-    for (let i = 0; i < list.length; i++) {
-        const item = list[i];
-        result[item.name] = item.value;
-    }
-    return result;
-}
-
-export const fetchSystemSettings = async () => {
-    const { data, error } = await useAuthFetch('/api/chat/settings/', {
-        method: 'GET',
-    })
-    if (!error.value) {
-        const settings = useSettings()
-        settings.value = transformData(data.value)
-    }
-}
-
 export const fetchUser = async () => {
     return useMyFetch('/api/account/user/')
 }