1  <script setup lang="tsx">
 2  import { ref, watch } from 'vue'
 3  import { useChatbotStore } from '@/renderer/store/chatbot'
 4  import { useSnackbarStore } from '@/renderer/store/snackbar'
 5  import type { ChatbotConfig } from '@/types/llm'
 6  
 7  const chatbotStore = useChatbotStore()
 8  const snackbarStore = useSnackbarStore()
 9  
10  const configFile = ref(undefined)
11  
12  watch(configFile, (newValue, _oldValue) => {
13    console.log(newValue)
14    if (newValue) {
15      const reader = new FileReader()
16      reader.onload = (event) => {
17        try {
18          const chatbotConfigJson = JSON.parse(event.target!.result as string) as
19            | ChatbotConfig
20            | ChatbotConfig[]
21          chatbotStore.updateStoreFromJSON(chatbotConfigJson)
22        } catch (err) {
23          console.log(err)
24          snackbarStore.showErrorMessage('snackbar.parse-config-fail')
25        } finally {
26          configFile.value = undefined
27        }
28      }
29      reader.readAsText(newValue)
30    }
31  })
32  </script>
33  
34  <template>
35    <v-container>
36      <v-btn-group variant="outlined" divided>
37        <v-btn
38          v-tooltip:top="$t('setting.config-file')"
39          icon
40          @click="($refs.fileInput as HTMLInputElement).click()"
41        >
42          <v-icon>mdi-upload</v-icon>
43          <v-file-input
44            ref="fileInput"
45            v-model="configFile"
46            style="display: none"
47            accept="application/json"
48            :label="$t('setting.config-file')"
49            single-line
50          ></v-file-input>
51        </v-btn>
52  
53        <v-btn
54          v-tooltip:top="$t('setting.reset')"
55          icon="mdi-refresh"
56          color="error"
57          @click="chatbotStore.resetState"
58        ></v-btn>
59        <v-btn
60          v-tooltip:top="$t('setting.add')"
61          icon="mdi-plus"
62          @click="chatbotStore.addChatbot"
63        ></v-btn>
64      </v-btn-group>
65    </v-container>
66  </template>
67  
68  <style scoped></style>