Fix the issue where useSettings does not work in SSR mode.

app.vue

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

components/Conversation.vue

@@ -166,20 +166,18 @@ const deleteMessage = (index) => {
   props.conversation.messages.splice(index, 1)
 }
 
-const showWebSearchToggle = ref(false)
-const enableWebSearch = ref(false)
-const enableCustomApiKey = ref(false)
-
 const settings = useSettings()
+const enableWebSearch = ref(false)
 
-watchEffect(() => {
+const showWebSearchToggle = computed(() => {
-  if (settings.value) {
+  return settings.value && settings.value.open_web_search && settings.value.open_web_search === 'True'
-    const settingsValue = toRaw(settings.value)
-    showWebSearchToggle.value = settingsValue.open_web_search && settingsValue.open_web_search === 'True'
-    enableCustomApiKey.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
-  }
 })
 
+const enableCustomApiKey = computed(() => {
+  return settings.value && settings.value.open_api_key_setting && settings.value.open_api_key_setting === 'True'
+})
+
+
 onNuxtReady(() => {
   currentModel.value = getCurrentModel()
 })

components/NavigationDrawer.vue

@@ -89,12 +89,8 @@ const loadConversations = async () => {
 }
 
 const settings = useSettings()
-const showApiKeySetting = ref(false)
+const showApiKeySetting = computed(() => {
-watchEffect(() => {
+  return settings.value && settings.value.open_api_key_setting && settings.value.open_api_key_setting === 'True'
-  if (settings.value) {
-    const settingsValue = toRaw(settings.value)
-    showApiKeySetting.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
-  }
 })
 
 const signOut = async () => {

composables/states.js

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

utils/helper.js

@@ -53,14 +53,14 @@ const transformData = (list) => {
     return result;
 }
 
-export const getSystemSettings = async () => {
+export const fetchSystemSettings = async () => {
     const { data, error } = await useAuthFetch('/api/chat/settings/', {
         method: 'GET',
     })
     if (!error.value) {
-        return transformData(data.value)
+        const settings = useSettings()
+        settings.value = transformData(data.value)
     }
-    return {}
 }
 
 export const fetchUser = async () => {