diff --git a/web/src/components/ChatPrompt.vue b/web/src/components/ChatPrompt.vue index 9954c887..a1669c25 100644 --- a/web/src/components/ChatPrompt.vue +++ b/web/src/components/ChatPrompt.vue @@ -102,6 +102,13 @@ export default defineComponent({ border-radius: 5px; overflow: auto; + img { + max-width: 600px; + border-radius: 10px; + margin 10px 0 + } + + a { color #20a0ff } diff --git a/web/src/components/FileSelect.vue b/web/src/components/FileSelect.vue index e25c7de5..fe539941 100644 --- a/web/src/components/FileSelect.vue +++ b/web/src/components/FileSelect.vue @@ -53,6 +53,7 @@ import {ref} from "vue"; import {ElMessage} from "element-plus"; import {httpGet, httpPost} from "@/utils/http"; import {PictureFilled, Plus} from "@element-plus/icons-vue"; +import {isImage} from "@/utils/libs"; const props = defineProps({ userId: String, @@ -69,11 +70,6 @@ const fetchFiles = () => { }) } -const isImage = (ext) => { - const expr = /\.(jpg|jpeg|png|gif|bmp|svg)$/i; - return expr.test(ext); -} - const getFileIcon = (ext) => { const files = { ".docx": "doc.png", diff --git a/web/src/utils/libs.js b/web/src/utils/libs.js index 7797fd66..bd27e081 100644 --- a/web/src/utils/libs.js +++ b/web/src/utils/libs.js @@ -161,3 +161,8 @@ export function substr(str, length) { return result } +export function isImage(url) { + const expr = /\.(jpg|jpeg|png|gif|bmp|svg)$/i; + return expr.test(url); +} + diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue index b45e9a32..d0b6ead1 100644 --- a/web/src/views/ChatPlus.vue +++ b/web/src/views/ChatPlus.vue @@ -282,7 +282,7 @@ import { VideoPause } from '@element-plus/icons-vue' import 'highlight.js/styles/a11y-dark.css' -import {dateFormat, isMobile, randString, removeArrayItem, UUID} from "@/utils/libs"; +import {dateFormat, isImage, isMobile, randString, removeArrayItem, UUID} from "@/utils/libs"; import {ElMessage, ElMessageBox} from "element-plus"; import hl from "highlight.js"; import {getSessionId, getUserToken, removeUserToken} from "@/store/session"; @@ -636,7 +636,7 @@ const connect = function (chat_id, role_id) { lineBuffer.value += data.content; const reply = chatData.value[chatData.value.length - 1] reply['orgContent'] = lineBuffer.value; - reply['content'] = md.render(processBlankQuote(lineBuffer.value)); + reply['content'] = md.render(processContent(lineBuffer.value)); } // 将聊天框的滚动条滑动到最底部 nextTick(() => { @@ -712,7 +712,7 @@ const sendMessage = function () { type: "prompt", id: randString(32), icon: loginUser.value.avatar, - content: md.render(prompt.value), + content: md.render(processContent(prompt.value)), created_at: new Date().getTime(), }); @@ -778,7 +778,7 @@ const loadChatHistory = function (chatId) { showHello.value = false for (let i = 0; i < data.length; i++) { data[i].orgContent = data[i].content; - data[i].content = md.render(processBlankQuote(data[i].content)) + data[i].content = md.render(processContent(data[i].content)) chatData.value.push(data[i]); } @@ -792,7 +792,22 @@ const loadChatHistory = function (chatId) { }) } -const processBlankQuote = (content) => { +const processContent = (content) => { + //process img url + const linkRegex = /(https?:\/\/\S+)/g; + const links = content.match(linkRegex); + if (links) { + for (let link of links) { + if (isImage(link)) { + const index = content.indexOf(link) + if (content.substring(index - 1, 2) !== "]") { + content = content.replace(link, "\n![](" + link + ")\n") + } + } + } + } + + // 处理引用块 if (content.indexOf("\n") === -1) { return content }