first commit

components/ApiKeyEditor.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-list-item v-if="showApiKeyEditor">
+    <v-text-field
+        label="Api key"
+        v-model="apiKeyInput"
+        hide-details
+        variant="outlined"
+    ></v-text-field>
+    <template v-slot:append>
+      <v-icon icon="done" size="small" @click="submitApiKey"></v-icon>
+      <v-icon icon="close" size="small" @click="showApiKeyEditor = false"></v-icon>
+    </template>
+  </v-list-item>
+  <v-list-item
+      v-else
+      :title="currentApiKey"
+      subtitle="OpenAI API key"
+  >
+    <template v-slot:append>
+      <v-icon icon="edit" @click="showApiKeyEditor = true"></v-icon>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup>
+const { data } = await useFetch('/api/settings/?key=apiKey')
+const currentApiKey = ref(data.value.data??'Not set yet')
+const apiKeyInput = ref(currentApiKey.value)
+const showApiKeyEditor = ref(false)
+const submitApiKey = async () => {
+  try {
+    const { data } = await useFetch('/api/settings', {
+      method: 'POST',
+      body: { key: 'apiKey', value: apiKeyInput.value }
+    })
+    if (data.value.status === 'success') {
+      currentApiKey.value = apiKeyInput.value
+      showApiKeyEditor.value = false
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/ModelNameEditor.vue

@@ -0,0 +1,48 @@
+<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>

components/MsgContent.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { marked } from "marked"
+import hljs from "highlight.js"
+
+marked.setOptions({
+  highlight: function (code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+    return hljs.highlight(code, { language }).value
+  },
+  langPrefix: 'hljs language-', // highlight.js css class prefix
+})
+
+const props = defineProps(['content'])
+const contentHtml = computed(() => {
+  return props.content ? marked(props.content) : ''
+})
+
+</script>
+
+<template>
+  <div
+      v-html="contentHtml"
+  ></div>
+
+</template>

components/MsgEditor.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-textarea
+      v-model="message"
+      clearable
+      label="Message"
+      placeholder="Type your message here"
+      rows="1"
+      :auto-grow="autoGrow"
+      :disabled="disabled"
+      :loading="loading"
+      hide-details
+      append-inner-icon="send"
+      @keyup.enter="send"
+      @click:append="send"
+  ></v-textarea>
+</template>
+
+<script>
+export default {
+  name: "MsgEditor",
+  props: {
+    sendMessage: Function,
+    disabled: Boolean,
+    loading: Boolean,
+  },
+  data() {
+    return {
+      message: "",
+      rows: 1,
+      autoGrow: true,
+    };
+  },
+  watch: {
+    message(val) {
+      const lines = val.split(/\r\n|\r|\n/).length;
+      if (lines > 8) {
+        this.rows = lines;
+        this.autoGrow = false;
+      } else {
+        this.rows = 1;
+        this.autoGrow = true;
+      }
+    },
+  },
+  methods: {
+    send() {
+      const msg = this.message
+      this.message = ""
+      this.sendMessage(msg);
+    },
+  },
+}
+</script>
+
+<style scoped>
+</style>