[feature]: update prompt config.

frontend/src/stores/config.ts

@@ -10,8 +10,6 @@ export const useSettingsStore  = defineStore({
             language: 'zh',
             sider_open: true,
             echoCancel: true,
-            prompt_en: 'You are a helpful assistant.',
-            prompt_zh: '你是一个乐于助人的助手。',
         }
     },
     actions: {

frontend/src/views/Welcome/Components/PromptText.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Modal } from 'ant-design-vue';
+import axios from "axios";
+
+const base_url = axios.defaults.baseURL;
+
+// Props
+const props = defineProps({
+    open: {
+        type: Boolean,
+        default: false
+    }
+});
+
+// Emits
+const emit = defineEmits(['update:open']);
+
+// 默认提示词
+const default_prompt_en = ref<string>('');
+const default_prompt_zh = ref<string>('');
+
+// 响应式数据
+const current_prompt_en = ref<string>('');
+const current_prompt_zh = ref<string>('');
+
+const modalLoading = ref<boolean>(false);
+const languageSegment = ref<string>('zh');
+
+const fetchDefaultPrompt = async () => {
+    try {
+        const response = await fetch(`${base_url}/settings/settings/prompts/default`);
+        const data = await response.json();
+
+        if (data) {
+            // @ts-ignore
+            default_prompt_en.value = data.english_prompt;
+            default_prompt_zh.value = data.chinese_prompt;
+        }
+    } catch (error) {
+        console.error('Error fetching default prompt:', error);
+    }
+};
+
+const fetchCurrentPrompt = async () => {
+    try {
+        const response = await fetch(`${base_url}/settings/settings/prompts`);
+        const data = await response.json();
+
+        if (data) {
+            // @ts-ignore
+            current_prompt_en.value = data.english_prompt;
+            current_prompt_zh.value = data.chinese_prompt;
+        }
+    } catch (error) {
+        console.error('Error fetching current prompt:', error);
+    }
+};
+
+const updateCurrentPrompt = async () => {
+    try {
+        modalLoading.value = true;
+        const response = await fetch(`${base_url}/settings/settings/prompts`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                chinese_prompt: current_prompt_zh.value,
+                english_prompt: current_prompt_en.value
+            })
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        console.log('Current prompt updated successfully:', data);
+    } catch (error) {
+        console.error('Error updating current prompt:', error);
+    } finally {
+        modalLoading.value = false;
+    }
+};
+
+const resetDefaultPrompt = async () => {
+    try {
+        modalLoading.value = true;
+        const response = await fetch(`${base_url}/settings/settings/prompts`, {
+            method: 'DELETE',
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        console.log('Default prompt reset successfully:', data);
+        current_prompt_en.value = default_prompt_en.value;
+        current_prompt_zh.value = default_prompt_zh.value;
+    } catch (error) {
+        console.error('Error resetting default prompt:', error);
+    } finally {
+        modalLoading.value = false;
+    }
+};
+
+
+// 方法
+const handleCancel = async () => {
+    await fetchCurrentPrompt();
+    emit('update:open', false);
+};
+
+const handleSubmit = async () => {
+    await updateCurrentPrompt();
+    await fetchCurrentPrompt();
+    emit('update:open', false);
+};
+
+const handleResetPrompt = async (language: string) => {
+    await fetchDefaultPrompt();
+    if (language == 'en') {
+        current_prompt_en.value = default_prompt_en.value;
+    } else {
+        current_prompt_zh.value = default_prompt_zh.value;
+    }
+};
+
+// 监听open变化，初始化prompt值
+watch(() => props.open, (newOpen) => {
+    if (newOpen) {
+        fetchCurrentPrompt();
+        fetchDefaultPrompt();
+    }
+});
+
+</script>
+
+<template>
+    <a-modal
+        key="prompt-text-modal"
+        v-model:open="props.open"
+        :title="null"
+        :mask-closable="false"
+        centered
+        @update:open="(val: boolean) => emit('update:open', val)"
+    >
+        <template #footer>
+            <div class="btn-groups">
+                <div class="btn-group">
+                    <a-button key="back" @click="handleCancel">Cancel</a-button>
+                    <a-button key="submit" type="primary" :loading="modalLoading" @click="handleSubmit">Submit</a-button>
+                </div>
+            </div>
+        </template>
+
+        <div class="prompt-content">
+            <div class="prompt-title">
+                <p>Prompt Debug</p>
+            </div>
+            <a-radio-group button-style="solid" size="medium" v-model:value="languageSegment" class="language-segment">
+                <a-radio-button value="zh">Chinese</a-radio-button>
+                <a-radio-button value="en">English</a-radio-button>
+            </a-radio-group>
+            <div v-if="languageSegment == 'en'" class="prompt-item">
+                <a-textarea
+                    v-model:value="current_prompt_en"
+                    :placeholder="default_prompt_en"
+                    :auto-size="{ minRows: 10, maxRows: 20 }"
+                    show-count
+                    :maxlength="2000"
+                    allow-clear
+                    class="prompt-textarea"
+                />
+                <a-button key="back" @click="handleResetPrompt('en')" style="margin-top: 16px;">Reset</a-button>
+            </div>
+            <div v-if="languageSegment == 'zh'" class="prompt-item">
+                <a-textarea
+                    v-model:value="current_prompt_zh"
+                    :placeholder="default_prompt_zh"
+                    :auto-size="{ minRows: 10, maxRows: 20 }"
+                    show-count
+                    :maxlength="2000"
+                    allow-clear
+                    class="prompt-textarea"
+                />
+                <a-button key="back" @click="handleResetPrompt('zh')" style="margin-top: 16px;">Reset</a-button>
+            </div>
+        </div>
+    </a-modal>
+</template>
+
+<style lang="scss" scoped>
+.btn-groups {
+    margin-top: 36px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.prompt-title {
+    p {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+
+.prompt-content {
+    margin-top: 2px;
+
+    .prompt-title {
+        margin-bottom: 24px;
+        font-size: 22px;
+        font-weight: 500;
+        text-align: center;
+    }
+
+    .language-segment {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 16px;
+    }
+
+    .prompt-item {
+        margin-top: 16px;
+    }
+}
+</style>

frontend/src/views/Welcome/index.vue

@@ -4,8 +4,9 @@ import router from "@/router.ts";
 import { useSettingsStore } from "@/stores/config.ts";
 import { onMounted, ref, reactive, computed, h } from "vue";
 import { Modal } from 'ant-design-vue';
-import { SettingTwoTone } from "@ant-design/icons-vue";
+import { SoundTwoTone } from "@ant-design/icons-vue";
 import axios from "axios";
+import PromptText from "./Components/PromptText.vue";
 
 const base_url = axios.defaults.baseURL
 
@@ -79,26 +80,6 @@ const handleVoiceModalSubmit = async () => {
     await pushConfig(settingsStore.$state.role);
 };
 
-const promptModelOpen = ref<boolean>(false);
-const default_prompt_en = "You are a helpful assistant.";
-const default_prompt_zh = "你是一个乐于助人的助手。";
-const current_prompt = ref<string>(settingsStore.$state.language == 'zh' ? default_prompt_zh : default_prompt_en);
-
-const handlePromptModalCancel = () => {
-    current_prompt.value = settingsStore.$state.language == 'zh' ? settingsStore.$state.prompt_zh : settingsStore.$state.prompt_en;
-    promptModelOpen.value = false;
-};
-
-const handlePromptModalSubmit = async () => {
-    console.log('Prompt:', current_prompt.value);
-    if (settingsStore.$state.language == 'zh') {
-        settingsStore.$state.prompt_zh = current_prompt.value;
-    } else {
-        settingsStore.$state.prompt_en = current_prompt.value;
-    }
-    promptModelOpen.value = false;
-};
-
 const pushConfig = async (model_id: string) => {
     try {
         modalLoading.value = true;
@@ -161,9 +142,10 @@ const echoCancel = ref<boolean>(settingsStore.$state.echoCancel ?? true);
 
 const radioStyle = reactive({
     display: 'flex',
-    height: '36px',
-    lineHeight: '36px',
-    fontSize: '15px',
+    height: '40px',
+    lineHeight: '40px',
+    fontSize: '16px',
+    marginBottom: '8px',
 });
 
 const filteredRoles = computed(() => {
@@ -217,11 +199,14 @@ const togglePopover = (item: string) => {
     }
 };
 
-const handleResetPrompt = () => {
-    current_prompt.value = settingsStore.$state.language == 'zh' ? default_prompt_zh : default_prompt_en;
+const popoverVisible = ref<boolean>(false);
+const promptModelOpen = ref<boolean>(false);
+
+const playRefAudio = (id: string) => {
+    console.log('Playing reference audio for role:', id);
+    // TODO: Implement audio playback logic
 };
 
-const popoverVisible = ref<boolean>(false);
 
 </script>
 
@@ -294,35 +279,20 @@ const popoverVisible = ref<boolean>(false);
                     <p>Select voice Role:</p>
                     <a-radio-group size="large" v-model:value="role">
                         <a-radio v-for="r in filteredRoles" :style="radioStyle" :value="r['id']" :key="r['id']">
-                            {{ r['character_name'] }}
+                            <div style="display: flex; justify-content: space-between; align-items: center; width:450px;">
+                                {{ r['character_name'] }}
+                                <a-button :key="r['id']" type="text" @click="playRefAudio(r['id'])">
+                                    <SoundTwoTone style="font-size: 22px;"/>
+                                </a-button>
+                            </div>
+
                         </a-radio>
                     </a-radio-group>
                 </div>
             </div>
         </a-modal>
 
-        <a-modal v-model:open="promptModelOpen" :title="null" :mask-closable="false" centered>
-            <template #footer>
-                <div class="btn-groups">
-                     <a-button key="back" @click="handleResetPrompt">Reset</a-button>
-                    <div class="btn-group">
-                       <a-button key="back" @click="handlePromptModalCancel">Cancel</a-button>
-                        <a-button key="submit" type="primary" :loading="modalLoading" @click="handlePromptModalSubmit">Submit</a-button>
-                    </div>
-                </div>
-            </template>
-            <template #title>
-                <div class="prompt-title">
-                    <p>Prompt 调试</p>
-                </div>
-            </template>
-            <div class="prompt-content">
-                <div class="prompt-item">
-                    <p>Prompt:</p>
-                    <a-textarea v-model:value="current_prompt" :placeholder="settingsStore.$state.language == 'zh' ? default_prompt_zh : default_prompt_en" :auto-size="{ minRows: 6, maxRows: 20 }" show-count :maxlength="2000" allow-clear />
-                </div>
-            </div>
-        </a-modal>
+        <PromptText v-model:open="promptModelOpen" />
     </div>
 </template>