更新数据库 SQL

web/src/components/ChatPrompt.vue

@@ -7,7 +7,7 @@
 
       <div class="chat-item">
         <div v-if="files.length > 0" class="file-list-box">
-          <div v-for="file in files">
+          <div v-for="file in files" :key="file.url">
             <div class="image" v-if="isImage(file.ext)">
               <el-image :src="file.url" fit="cover" />
             </div>
@@ -17,7 +17,9 @@
               </div>
               <div class="body">
                 <div class="title">
-                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold">{{ file.name }} </el-link>
+                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold"
+                    >{{ file.name }}
+                  </el-link>
                 </div>
                 <div class="info">
                   <span>{{ GetFileType(file.ext) }}</span>
@@ -46,7 +48,7 @@
 
       <div class="chat-item">
         <div v-if="files.length > 0" class="file-list-box">
-          <div v-for="file in files">
+          <div v-for="file in files" :key="file.url">
             <div class="image" v-if="isImage(file.ext)">
               <el-image :src="file.url" fit="cover" />
             </div>
@@ -56,7 +58,9 @@
               </div>
               <div class="body">
                 <div class="title">
-                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold">{{ file.name }} </el-link>
+                  <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold"
+                    >{{ file.name }}
+                  </el-link>
                 </div>
                 <div class="info">
                   <span>{{ GetFileType(file.ext) }}</span>
@@ -81,15 +85,15 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
-import { Clock } from "@element-plus/icons-vue";
-import { httpPost } from "@/utils/http";
-import hl from "highlight.js";
-import { dateFormat, isImage, processPrompt } from "@/utils/libs";
-import { FormatFileSize, GetFileIcon, GetFileType } from "@/store/system";
-import emoji from "markdown-it-emoji";
-import mathjaxPlugin from "markdown-it-mathjax3";
-import MarkdownIt from "markdown-it";
+import { FormatFileSize, GetFileIcon, GetFileType } from '@/store/system'
+import { httpPost } from '@/utils/http'
+import { dateFormat, isImage, processPrompt } from '@/utils/libs'
+import { Clock } from '@element-plus/icons-vue'
+import hl from 'highlight.js'
+import MarkdownIt from 'markdown-it'
+import emoji from 'markdown-it-emoji'
+import mathjaxPlugin from 'markdown-it-mathjax3'
+import { onMounted, ref } from 'vue'
 
 const md = new MarkdownIt({
   breaks: true,
@@ -97,94 +101,94 @@ const md = new MarkdownIt({
   linkify: true,
   typographer: true,
   highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
     // 显示复制代码按钮
     const copyBtn = `<span class="copy-code-btn" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
 <textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
       /<\/textarea>/g,
-      "&lt;/textarea>"
-    )}</textarea>`;
+      '&lt;/textarea>'
+    )}</textarea>`
     if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`;
+      const langHtml = `<span class="lang-name">${lang}</span>`
       // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value;
+      const preCode = hl.highlight(lang, str, true).value
       // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
     }
 
     // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str);
+    const preCode = md.utils.escapeHtml(str)
     // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
   },
-});
-md.use(mathjaxPlugin);
-md.use(emoji);
+})
+md.use(mathjaxPlugin)
+md.use(emoji)
 const props = defineProps({
   data: {
     type: Object,
     default: {
-      content: "",
-      created_at: "",
+      content: '',
+      created_at: '',
       tokens: 0,
-      model: "",
-      icon: "",
+      model: '',
+      icon: '',
     },
   },
   listStyle: {
     type: String,
-    default: "list",
+    default: 'list',
   },
-});
-const finalTokens = ref(props.data.tokens);
-const content = ref(processPrompt(props.data.content));
-const files = ref([]);
+})
+const finalTokens = ref(props.data.tokens)
+const content = ref(processPrompt(props.data.content))
+const files = ref([])
 
 onMounted(() => {
-  processFiles();
-});
+  processFiles()
+})
 
 const processFiles = () => {
   if (!props.data.content) {
-    return;
+    return
   }
 
   // 提取图片｜文件链接
-  const linkRegex = /(https?:\/\/\S+)/g;
-  const links = props.data.content.match(linkRegex);
-  const urlPrefix = `${window.location.protocol}//${window.location.host}`;
+  const linkRegex = /(https?:\/\/\S+)/g
+  const links = props.data.content.match(linkRegex)
+  const urlPrefix = `${window.location.protocol}//${window.location.host}`
   if (links) {
     // 把本地链接转换为相对路径
     const _links = links.map((link) => {
       if (link.startsWith(urlPrefix)) {
-        return link.replace(urlPrefix, "");
+        return link.replace(urlPrefix, '')
       }
-      return link;
-    });
+      return link
+    })
     // 合并数组并去重
-    const urls = [...new Set([...links, ..._links])];
-    httpPost("/api/upload/list", { urls: urls })
+    const urls = [...new Set([...links, ..._links])]
+    httpPost('/api/upload/list', { urls: urls })
       .then((res) => {
-        files.value = res.data.items;
+        files.value = res.data.items
 
         // for (let link of links) {
         //   if (isExternalImg(link, files.value)) {
         //     files.value.push({ url: link, ext: ".png" });
-        //   } 
+        //   }
         // }
       })
-      .catch(() => {});
+      .catch(() => {})
 
     // 替换图片｜文件链接
     for (let link of links) {
-      content.value = content.value.replace(link, "");
+      content.value = content.value.replace(link, '')
     }
   }
-  content.value = md.render(content.value.trim());
-};
+  content.value = md.render(content.value.trim())
+}
 const isExternalImg = (link, files) => {
-  return isImage(link) && !files.find((file) => file.url === link);
-};
+  return isImage(link) && !files.find((file) => file.url === link)
+}
 </script>
 
 <style lang="stylus">

web/src/components/ChatReply.vue

@@ -1,117 +1,137 @@
 <template>
   <div class="chat-reply">
-  <div class="chat-line chat-line-reply-list" v-if="listStyle === 'list'">
-    <div class="chat-line-inner">
-      <div class="chat-icon">
-        <img :src="data.icon" alt="ChatGPT" />
-      </div>
-
-      <div class="chat-item">
-        <div class="content-wrapper" v-html="md.render(processContent(data.content))"></div>
-        <div class="bar flex" v-if="data.created_at">
-          <span class="bar-item">{{ dateFormat(data.created_at) }}</span>
-          <span class="bar-item">tokens: {{ data.tokens }}</span>
-          <span class="bar-item">
-            <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
-              <el-icon class="copy-reply" :data-clipboard-text="data.content">
-                <DocumentCopy />
-              </el-icon>
-            </el-tooltip>
-          </span>
-          <span v-if="!readOnly" class="flex">
-            <span class="bar-item" @click="reGenerate(data.prompt)">
-              <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
-                <el-icon><Refresh /></el-icon>
-              </el-tooltip>
-            </span>
+    <div class="chat-line chat-line-reply-list" v-if="listStyle === 'list'">
+      <div class="chat-line-inner">
+        <div class="chat-icon">
+          <img :src="data.icon" alt="ChatGPT" />
+        </div>
 
+        <div class="chat-item">
+          <div class="content-wrapper" v-html="md.render(processContent(data.content))"></div>
+          <div class="bar flex text-gray-500" v-if="data.created_at">
+            <span class="bar-item text-sm">{{ dateFormat(data.created_at) }}</span>
+            <!-- <span class="bar-item">tokens: {{ data.tokens }}</span> -->
             <span class="bar-item">
-              <el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom">
-                <i class="iconfont icon-speaker" v-if="!isPlaying" @click="synthesis(data.content)"></i>
-                <el-image class="voice-icon" :src="playIcon" v-else />
+              <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
+                <el-icon class="copy-reply" :data-clipboard-text="data.content">
+                  <DocumentCopy />
+                </el-icon>
               </el-tooltip>
             </span>
-          </span>
-          <!--          <span class="bar-item">-->
-          <!--            <el-dropdown trigger="click">-->
-          <!--              <span class="el-dropdown-link">-->
-          <!--                <el-icon><More/></el-icon>-->
-          <!--              </span>-->
-          <!--              <template #dropdown>-->
-          <!--                <el-dropdown-menu>-->
-          <!--                  <el-dropdown-item :icon="Headset" @click="synthesis(orgContent)">生成语音</el-dropdown-item>-->
-          <!--                </el-dropdown-menu>-->
-          <!--              </template>-->
-          <!--            </el-dropdown>-->
-          <!--          </span>-->
+            <span v-if="!readOnly" class="flex">
+              <span class="bar-item" @click="reGenerate(data.prompt)">
+                <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
+                  <el-icon><Refresh /></el-icon>
+                </el-tooltip>
+              </span>
+
+              <span class="bar-item">
+                <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  content="生成语音朗读"
+                  placement="bottom"
+                >
+                  <i
+                    class="iconfont icon-speaker"
+                    v-if="!isPlaying"
+                    @click="synthesis(data.content)"
+                  ></i>
+                  <el-image class="voice-icon" :src="playIcon" v-else />
+                </el-tooltip>
+              </span>
+            </span>
+            <!--          <span class="bar-item">-->
+            <!--            <el-dropdown trigger="click">-->
+            <!--              <span class="el-dropdown-link">-->
+            <!--                <el-icon><More/></el-icon>-->
+            <!--              </span>-->
+            <!--              <template #dropdown>-->
+            <!--                <el-dropdown-menu>-->
+            <!--                  <el-dropdown-item :icon="Headset" @click="synthesis(orgContent)">生成语音</el-dropdown-item>-->
+            <!--                </el-dropdown-menu>-->
+            <!--              </template>-->
+            <!--            </el-dropdown>-->
+            <!--          </span>-->
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <div class="chat-line chat-line-reply-chat" v-else>
-    <div class="chat-line-inner">
-      <div class="chat-icon">
-        <img :src="data.icon" alt="ChatGPT" />
-      </div>
-      <div class="chat-item">
-        <div class="content-wrapper">
-          <div class="content" v-html="md.render(processContent(data.content))"></div>
+    <div class="chat-line chat-line-reply-chat" v-else>
+      <div class="chat-line-inner">
+        <div class="chat-icon">
+          <img :src="data.icon" alt="ChatGPT" />
         </div>
-        <div class="bar" v-if="data.created_at">
-          <span class="bar-item">{{ dateFormat(data.created_at) }}</span>
-          <!--          <span class="bar-item">tokens: {{ data.tokens }}</span>-->
-          <span class="bar-item bg">
-            <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
-              <el-icon class="copy-reply" :data-clipboard-text="data.content">
-                <DocumentCopy />
-              </el-icon>
-            </el-tooltip>
-          </span>
-          <span v-if="!readOnly" class="flex">
-            <span class="bar-item bg" @click="reGenerate(data.prompt)">
-              <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
-                <el-icon><Refresh /></el-icon>
-              </el-tooltip>
-            </span>
-
+        <div class="chat-item">
+          <div class="content-wrapper">
+            <div class="content" v-html="md.render(processContent(data.content))"></div>
+          </div>
+          <div class="bar text-gray-500" v-if="data.created_at">
+            <span class="bar-item text-sm"> {{ dateFormat(data.created_at) }}</span>
+            <!--          <span class="bar-item">tokens: {{ data.tokens }}</span>-->
             <span class="bar-item bg">
-              <el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom"  v-if="!isPlaying">
-                <i class="iconfont icon-speaker" @click="synthesis(data.content)"></i>
+              <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
+                <el-icon class="copy-reply" :data-clipboard-text="data.content">
+                  <DocumentCopy />
+                </el-icon>
               </el-tooltip>
-              <el-tooltip class="box-item" effect="dark" content="暂停播放" placement="bottom"  v-else>
-                <el-image class="voice-icon" :src="playIcon" @click="stopSynthesis()"  />
-              </el-tooltip>
-              
             </span>
-          </span>
+            <span v-if="!readOnly" class="flex">
+              <span class="bar-item bg" @click="reGenerate(data.prompt)">
+                <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
+                  <el-icon><Refresh /></el-icon>
+                </el-tooltip>
+              </span>
+
+              <span class="bar-item bg">
+                <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  content="生成语音朗读"
+                  placement="bottom"
+                  v-if="!isPlaying"
+                >
+                  <i class="iconfont icon-speaker" @click="synthesis(data.content)"></i>
+                </el-tooltip>
+                <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  content="暂停播放"
+                  placement="bottom"
+                  v-else
+                >
+                  <el-image class="voice-icon" :src="playIcon" @click="stopSynthesis()" />
+                </el-tooltip>
+              </span>
+            </span>
+          </div>
         </div>
       </div>
     </div>
+    <audio ref="audio" @ended="isPlaying = false" />
   </div>
-  <audio ref="audio" @ended="isPlaying = false" />
-</div>
 </template>
 
 <script setup>
-import { Clock, DocumentCopy, Refresh } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
-import { dateFormat, processContent } from "@/utils/libs";
-import hl from "highlight.js";
-import emoji from "markdown-it-emoji";
-import mathjaxPlugin from "markdown-it-mathjax3";
-import MarkdownIt from "markdown-it";
-import { httpPost } from "@/utils/http";
-import { ref } from "vue";
-import { useSharedStore } from "@/store/sharedata";
+import { useSharedStore } from '@/store/sharedata'
+import { httpPost } from '@/utils/http'
+import { dateFormat, processContent } from '@/utils/libs'
+import { DocumentCopy, Refresh } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import hl from 'highlight.js'
+import MarkdownIt from 'markdown-it'
+import emoji from 'markdown-it-emoji'
+import mathjaxPlugin from 'markdown-it-mathjax3'
+import { ref } from 'vue'
 // eslint-disable-next-line no-undef,no-unused-vars
 const props = defineProps({
   data: {
     type: Object,
     default: {
-      icon: "",
-      content: "",
-      created_at: "",
+      icon: '',
+      content: '',
+      created_at: '',
       tokens: 0,
     },
   },
@@ -121,14 +141,14 @@ const props = defineProps({
   },
   listStyle: {
     type: String,
-    default: "list",
+    default: 'list',
   },
-});
+})
 
-const audio = ref(null);
-const isPlaying = ref(false);
-const playIcon = ref("/images/voice.gif");
-const store = useSharedStore();
+const audio = ref(null)
+const isPlaying = ref(false)
+const playIcon = ref('/images/voice.gif')
+const store = useSharedStore()
 
 const md = new MarkdownIt({
   breaks: true,
@@ -136,55 +156,60 @@ const md = new MarkdownIt({
   linkify: true,
   typographer: true,
   highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
     // 显示复制代码按钮
     const copyBtn = `<span class="copy-code-btn" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
 <textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
       /<\/textarea>/g,
-      "&lt;/textarea>"
-    )}</textarea>`;
+      '&lt;/textarea>'
+    )}</textarea>`
     if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`;
+      const langHtml = `<span class="lang-name">${lang}</span>`
       // 处理代码高亮
-      const preCode = hl.highlight(str, { language: lang }).value;
+      const preCode = hl.highlight(str, { language: lang }).value
       // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
     }
 
     // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str);
+    const preCode = md.utils.escapeHtml(str)
     // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
   },
-});
-md.use(mathjaxPlugin);
-md.use(emoji);
-const emits = defineEmits(["regen"]);
+})
+md.use(mathjaxPlugin)
+md.use(emoji)
+const emits = defineEmits(['regen'])
 
 if (!props.data.icon) {
-  props.data.icon = "images/gpt-icon.png";
+  props.data.icon = 'images/gpt-icon.png'
 }
 
 const synthesis = (text) => {
   isPlaying.value = true
-  httpPost("/api/chat/tts", { text:text, model_id:store.ttsModel }, { responseType: 'blob' }).then(response => {
-    // 创建 Blob 对象，明确指定 MIME 类型
-    const blob = new Blob([response], { type: 'audio/mpeg' }); // 假设音频格式为 MP3
-    const audioUrl = URL.createObjectURL(blob);
-    // 播放音频
-    audio.value.src = audioUrl;
-    audio.value.play().then(() => {
-      // 播放完成后释放 URL
-      URL.revokeObjectURL(audioUrl);
-    }).catch(() => {
-      ElMessage.error('音频播放失败，请检查浏览器是否支持该音频格式');
+  httpPost('/api/chat/tts', { text: text, model_id: store.ttsModel }, { responseType: 'blob' })
+    .then((response) => {
+      // 创建 Blob 对象，明确指定 MIME 类型
+      const blob = new Blob([response], { type: 'audio/mpeg' }) // 假设音频格式为 MP3
+      const audioUrl = URL.createObjectURL(blob)
+      // 播放音频
+      audio.value.src = audioUrl
+      audio.value
+        .play()
+        .then(() => {
+          // 播放完成后释放 URL
+          URL.revokeObjectURL(audioUrl)
+        })
+        .catch(() => {
+          ElMessage.error('音频播放失败，请检查浏览器是否支持该音频格式')
+          isPlaying.value = false
+        })
+    })
+    .catch((e) => {
+      ElMessage.error('语音合成失败：' + e.message)
       isPlaying.value = false
-    });
-  }).catch(e => {
-    ElMessage.error('语音合成失败：' + e.message);
-    isPlaying.value = false
-  });
-};
+    })
+}
 
 const stopSynthesis = () => {
   isPlaying.value = false
@@ -194,10 +219,9 @@ const stopSynthesis = () => {
 
 // 重新生成
 const reGenerate = (prompt) => {
-  console.log(prompt);
-  emits("regen", prompt);
-};
-
+  console.log(prompt)
+  emits('regen', prompt)
+}
 </script>
 
 <style lang="stylus">
@@ -461,7 +485,7 @@ const reGenerate = (prompt) => {
               width 20px
               height 20px
             }
-           
+
 
             .el-icon {
               position relative