Change the model cache to local storage and support caching multiple models

components/ModelDialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-dialog
+      v-model="dialog"
+      persistent
+      scrollable
+  >
+    <template v-slot:activator="{ props }">
+      <v-list-item
+          rounded="xl"
+          v-bind="props"
+          prepend-icon="smart_toy"
+          active
+          color="primary"
+      >
+        {{ currentModel }}
+      </v-list-item>
+    </template>
+    <v-card>
+      <v-card-title>
+        <span class="text-h5">OpenAI Models</span>
+        <div>
+          About the models:
+          <a target="_blank" href="https://platform.openai.com/docs/models/overview">https://platform.openai.com/docs/models/overview</a>
+        </div>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <div
+            v-for="(model, index) in models"
+            :key="index"
+            class="d-flex align-center"
+        >
+          <v-switch
+              v-model="currentModel"
+              color="primary"
+              :label="model"
+              :value="model"
+              hide-details
+          ></v-switch>
+          <v-icon
+              icon="delete_outline"
+              @click="removeModel(index)"
+          ></v-icon>
+        </div>
+        <div>
+          <v-btn
+              variant="outlined"
+              v-if="!showInputModel"
+              @click="showInputModel = true"
+          >
+            Add a model
+          </v-btn>
+          <div
+              v-else
+              class="d-flex align-center"
+          >
+            <v-text-field
+                v-model="inputModel"
+                label="Enter a model name"
+                hide-details
+            ></v-text-field>
+            <v-btn class="ml-3" icon="done" @click="createNewModel"></v-btn>
+            <v-btn class="ml-3" icon="close" @click="showInputModel = false"></v-btn>
+          </div>
+        </div>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-alert
+            v-if="warningText"
+            density="compact"
+            type="warning"
+            :text="warningText"
+        ></v-alert>
+        <v-spacer></v-spacer>
+        <v-btn
+            color="primary"
+            @click="save"
+        >
+          Save & Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+const dialog = ref(false)
+const models = useModels()
+const currentModel = useCurrentModel()
+const inputModel = ref('')
+const showInputModel = ref(false)
+const warningText = ref(null)
+const showWarning = (text) => {
+  warningText.value = text
+  setTimeout(() => {
+    warningText.value = null
+  }, 3000)
+}
+const createNewModel = () => {
+  models.value.push(inputModel.value)
+  inputModel.value = ''
+  showInputModel.value = false
+}
+const removeModel = (index) => {
+  if (currentModel.value === models.value[index]) {
+    currentModel.value = null
+  }
+  models.value.splice(index, 1)
+}
+const save = async () => {
+  console.log(currentModel.value)
+  if (!currentModel.value) {
+    showWarning('Please select at least one model.')
+    return
+  }
+  setModels(models.value)
+  setCurrentModel(currentModel.value)
+  dialog.value = false
+}
+</script>

components/ModelNameEditor.vue

@@ -1,48 +0,0 @@
-<template>
-  <v-list-item v-if="showModelNameEditor">
-    <v-text-field
-        label="Model name"
-        v-model="modelNameInput"
-        hide-details
-        variant="outlined"
-    ></v-text-field>
-    <template v-slot:append>
-      <v-icon icon="done" size="small" @click="submitModelName"></v-icon>
-      <v-icon icon="close" size="small" @click="showModelNameEditor = false"></v-icon>
-    </template>
-  </v-list-item>
-  <v-list-item
-      v-else
-      :title="currentModelName"
-      subtitle="Current model"
-  >
-    <template v-slot:append>
-      <v-icon icon="edit" @click="showModelNameEditor = true"></v-icon>
-    </template>
-  </v-list-item>
-</template>
-
-<script setup>
-const { data } = await useFetch('/api/settings/?key=modelName')
-const currentModelName = ref(data.value.data)
-const modelNameInput = ref(currentModelName.value)
-const showModelNameEditor = ref(false)
-const submitModelName = async () => {
-  try {
-    const { data } = await useFetch('/api/settings', {
-      method: 'POST',
-      body: { key: 'modelName', value: modelNameInput.value }
-    })
-    if (data.value.status === 'success') {
-      currentModelName.value = modelNameInput.value
-      showModelNameEditor.value = false
-    }
-  } catch (e) {
-    console.log(e)
-  }
-}
-</script>
-
-<style scoped>
-
-</style>