feat(editor): Encapsulate the tools in the editor toolbar as independent components.

components/Conversation.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
+import {useEnableWebSearch, useFrugalMode} from "~/composables/states";
 
 const { $i18n, $settings } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
@@ -7,7 +8,6 @@ const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
 const fetchingResponse = ref(false)
 const messageQueue = []
-const frugalMode = ref(true)
 let isProcessingQueue = false
 
 const props = defineProps({
@@ -51,10 +51,16 @@ const abortFetch = () => {
   }
   fetchingResponse.value = false
 }
+
+const enableWebSearch = useEnableWebSearch()
+
+const frugalMode = useFrugalMode()
+
 const fetchReply = async (message) => {
   ctrl = new AbortController()
 
   let webSearchParams = {}
+
   if (enableWebSearch.value) {
     webSearchParams['web_search'] = {
       ua: navigator.userAgent,
@@ -169,9 +175,6 @@ const deleteMessage = (index) => {
   props.conversation.messages.splice(index, 1)
 }
 
-const enableWebSearch = ref(false)
-
-
 onNuxtReady(() => {
   currentModel.value = getCurrentModel()
 })
@@ -250,51 +253,8 @@ onNuxtReady(() => {
           color="transparent"
       >
         <Prompt v-show="!fetchingResponse" :use-prompt="usePrompt" />
-        <v-switch
+        <EditorToolsWebSearch v-if="$settings.open_web_search === 'True'" />
-            v-if="$settings.open_web_search === 'True'"
+        <EditorToolsFrugalMode v-if="$settings.open_frugal_mode_control === 'True'" />
-            v-model="enableWebSearch"
-            inline
-            hide-details
-            color="primary"
-            :label="$t('webSearch')"
-        ></v-switch>
-        <v-spacer></v-spacer>
-        <div
-            v-if="$settings.open_frugal_mode_control === 'True'"
-            class="d-flex align-center"
-        >
-          <v-switch
-              v-model="frugalMode"
-              inline
-              hide-details
-              color="primary"
-              :label="$t('frugalMode')"
-          ></v-switch>
-          <v-dialog
-              transition="dialog-bottom-transition"
-              width="auto"
-          >
-            <template v-slot:activator="{ props }">
-              <v-icon
-                  color="grey"
-                  v-bind="props"
-                  icon="help_outline"
-                  class="ml-3"
-              ></v-icon>
-            </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>

components/editorTools/FrugalMode.vue

@@ -0,0 +1,53 @@
+<script setup>
+import {useFrugalMode} from "~/composables/states";
+
+const menu = ref(false)
+const frugalMode = useFrugalMode()
+</script>
+
+<template>
+  <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="props"
+          icon
+      >
+        <v-icon
+            icon="network_wifi_2_bar"
+            :color="frugalMode ? '' : 'grey'"
+        ></v-icon>
+      </v-btn>
+    </template>
+
+    <v-container>
+      <v-card
+          min-width="300"
+          max-width="500"
+      >
+        <v-card-title>
+          <span class="headline">{{ $t('frugalMode') }}</span>
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <p>{{ $t('frugalModeTip') }}</p>
+          <v-switch
+              v-model="frugalMode"
+              inline
+              hide-details
+              color="primary"
+              :label="$t('frugalMode')"
+          ></v-switch>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </v-menu>
+</template>
+
+<style scoped>
+
+</style>

components/editorTools/WebSearch.vue

@@ -0,0 +1,53 @@
+<script setup>
+import {useEnableWebSearch} from "~/composables/states";
+
+const menu = ref(false)
+const enableWebSearch = useEnableWebSearch()
+
+</script>
+
+<template>
+  <v-menu
+      v-model="menu"
+      :close-on-content-click="false"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="props"
+          icon
+      >
+        <v-icon
+            icon="travel_explore"
+            :color="enableWebSearch ? '' : 'grey'"
+        ></v-icon>
+      </v-btn>
+    </template>
+
+    <v-container>
+      <v-card
+          min-width="300"
+          max-width="500"
+      >
+        <v-card-title>
+          <span class="headline">{{ $t('webSearch') }}</span>
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <v-switch
+              v-model="enableWebSearch"
+              inline
+              hide-details
+              color="primary"
+              :label="$t('webSearch')"
+          ></v-switch>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </v-menu>
+</template>
+
+<style scoped>
+
+</style>

composables/states.js

@@ -10,3 +10,7 @@ export const useConversations = () => useState('conversations', () => [])
 export const useUser = () => useState('user', () => null)
 
 export const useDrawer = () => useState('drawer', () => false)
+
+export const useEnableWebSearch = () => useState('enableWebSearch', () => false)
+
+export const useFrugalMode = () => useState('frugalMode', () => false)