askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/markDownText.vue

@@ -0,0 +1,961 @@
+<template>
+    <div @click="lookImage">
+        <div class="think" v-if="hasThinkValue">
+            <p class="think_title" :style="{ height: showThink ? '32px' : '20px' }" @click="showThink = !showThink">
+                <span class="think_title_left">
+                    <i class="iconfont guoran-icon-deepseek"></i>
+                    {{ $t('dragonCommon.deeplyPondered') }}
+                    <span v-if="!isHistory">（{{ $t('dragonCommon.time') }} {{ filterTime(thinkTimeNum) }}）</span>
+                </span>
+                <span class="think_title_right" :class="showThink ? '' : 'hide_think_title'">
+                    <i class="iconfont guoran-jiantouxiangshang"></i>
+                </span>
+            </p>
+            <div class="think_content" :class="showThink ? '' : 'hide_think'" v-html="parseThinkVal">
+            </div>
+        </div>
+        <!-- <vue-markdown 
+            class="mark_down" 
+            :source="typedContent" 
+            :ref="'markdown' + msgId" 
+            @click.native="clickMarkDown"
+            :plugins="plugins"
+        >
+        </vue-markdown> -->
+        <!-- v-show="hasContent"  -->
+        <div 
+            class="mark_down"
+            v-html="markParseText"
+            ref="markDown"
+            @click="clickMarkDown">
+        </div>
+        <!-- <div v-show="!hasThinkValue && !hasContent" class="blinking-cursor"></div> -->
+        <div v-if="showPreview">
+            <img-view :url-list="imgList" @closeViewer="closeViewer"></img-view>
+        </div>
+    </div>
+
+</template>
+
+<script>
+/* eslint-disable */
+// import VueMarkdown from 'vue-markdown';
+import ImgView from "./imgView.vue";
+// import Typed from "typed.js";
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+import { v4 as uuidv4 } from "uuid";
+const marked = require("marked")
+export default {
+    name: "markDownText",
+    data() {
+        return {
+            eventSource: null,
+            plugins: [
+
+            ],
+            typedContent: "",
+            typingSpeed: 15,
+            showPreview: false,
+            imgList: [],
+            isManualScroll: false,
+            hasThinkValue: false,
+            chainThinkValue: "",
+            showThink: true,
+            streamThinkValueAddFlag: false,
+            timer: null,
+            generatingString: "",
+            generatingThinkString: "",
+            streamEnd: false,
+            thinkCount: 0,
+            thinkTimer: null,
+            thinkTimeNum: 0,
+            thinkEnd: true,
+            signSetFlag: false,
+            // 重试地址
+            retryUrl: "",
+        }
+    },
+    props: {
+        chainValues: {
+            type: String,
+            default: ""
+        },
+        msgId: {
+            type: String,
+            default: ""
+        },
+        isHistory: {
+            type: Boolean,
+            default: false
+        },
+        streamRequestUrl: {
+            type: String,
+            default: ""
+        },
+        whetherRequestStream: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        hasContent() {
+            if (!this.markParseText) return false; // 如果 markParseText 为空，返回 false
+            const tempDiv = document.createElement("div");
+            tempDiv.innerHTML = this.markParseText;
+            const textContent = tempDiv.textContent || tempDiv.innerText || "";
+            return textContent.trim() !== ""; // 如果文本内容不为空，返回 true
+        },
+        markParseText() {
+            const regex = /```json\n{"content":"/g
+            const regex2 = /```json\n{\n  "content": "/g
+            let str = this.typedContent
+            str = str.replace(regex, "")
+            str = str.replace(regex2, "")
+            str = str.replaceAll("\\n", "\n")
+            // 处理特殊情况，标题前的多个换行符补充一个空行
+            str = str.replaceAll("\n\n ###", "<p>　<p/>\n ###")
+            let markdown = marked.marked(str, {
+                breaks: true
+            })
+            return this.parseCode(markdown)
+        },
+        parseThinkVal() {
+            let str = this.chainThinkValue;
+            str = str.replaceAll("\\n", "\n")
+            str = str.replaceAll("\n", "<br>")
+            return this.parseCode(str)
+        }
+    },
+    components: {
+        ImgView
+    },
+    mounted() {
+        this.$nextTick(() => {
+            console.log("this.askMassageStream: ", this.askMassageStream);
+            console.log("this.whetherRequestStream: ", this.whetherRequestStream);
+            console.log("this.streamRequestUrl: ", this.streamRequestUrl);
+            console.log("this.isHistory: ", this.isHistory);
+            if (this.isHistory) {
+                if (this.whetherRequestStream) {
+                    console.log("71 新版 真 流 打字 效果");
+                    window.addEventListener('wheel', this.handleScroll, true);
+                    this.streamInfo(this.streamRequestUrl);
+                } else {
+                    this.typedContent = this.filterThinkVal(this.chainValues);
+                    this.$nextTick(() =>{
+                        this.appendCopyBtn()
+                    })
+                }
+            } else {
+                console.log("78 pre 新版 真 流 打字 效果");
+                // 新版 真 流 打字 效果
+                if (this.askMassageStream && this.whetherRequestStream && this.streamRequestUrl) {
+                    console.log("81 新版 真 流 打字 效果");
+                    window.addEventListener('wheel', this.handleScroll, true);
+                    this.streamInfo(this.streamRequestUrl);
+                } else {
+                    console.log("markdowncopy 旧版 模拟 流 打字 效果 sseOtherInfo");
+                    this.$emit("sseOtherInfo", this.msgId, "start", "");
+                    this.$emit("sseOtherInfo", this.msgId, "hideloading", "");
+                    // 旧版 模拟 流 打字 效果
+                    this.typedContent = this.filterThinkVal(this.chainValues);
+                    this.$nextTick(() =>{
+                        this.appendCopyBtn()
+                    })
+                }
+            }
+        })
+    },
+    methods: {
+        closeMessageStream() {
+            this.eventSource.close();
+            setTimeout(() => {
+                let str = this.typedContent + this.generatingString
+                this.$set(this, "typedContent", str)
+                this.generatingString = "";
+                let str2 = this.filterText(this.chainThinkValue + this.generatingThinkString)
+                this.$set(this, "chainThinkValue", str2)
+                this.generatingThinkString = "";
+                this.closeTimeOut()
+                clearInterval(this.thinkTimer)
+                this.thinkTimer = null
+                this.thinkEnd = true
+                setTimeout(() => {
+                    this.removeLoadingNode()
+                }, 200)
+                this.$emit("streamCallback", this.typedContent)
+                this.$emit("sseOtherInfo", this.msgId, "start", "");
+            }, 200);
+        },
+        filterTime(time) {
+            if (time < 60) {
+                return time + " 秒";
+            } else {
+                return Math.floor(time / 60) + " 分 " + time % 60 + " 秒";
+            }
+        },
+        // 处理历史记录中的 <think> 标签
+        filterThinkVal(text) {
+            // 用于匹配 <think> 标签的正则表达式
+            this.hasThinkValue = false;
+            this.chainThinkValue = "";
+            const thinkStartRegex = /<think>/;
+            // const thinkEndRegex = /<\/think>/;
+            const thinkEndRegex = /<\/think>/g;
+            // 查找第一个 <think> 标签的位置
+            const startIndex = text.search(thinkStartRegex);
+            if (startIndex === -1) {
+                // 如果没有找到 <think> 标签，直接返回原始文本和空内容
+                return text.replaceAll("\\n", "\n")
+            }
+            // 从第一个 <think> 标签之后开始查找最后一个 </think> 标签
+            let endIndex = -1;
+            let match;
+            // 循环查找所有匹配项
+            while ((match = thinkEndRegex.exec(text)) !== null) {
+                endIndex = match.index;
+            }
+            if (endIndex !== -1) {
+                console.log(`最后一个 </think> 的起始位置是: ${endIndex}`);
+                // 提取 <think> 标签中的内容
+                let thinkVal = text.slice(startIndex + '<think>'.length, endIndex);
+                // 从原始文本中剔除 <think> 标签及其中的内容
+                let typedContent = text.slice(0, startIndex) + text.slice(endIndex);
+                this.hasThinkValue = true;
+                this.chainThinkValue = thinkVal.replaceAll("<think>", "").replaceAll("</think>", "<br/>");
+                this.chainThinkValue = this.filterText(this.chainThinkValue)
+                return typedContent.replaceAll("\\n", "\n");
+            } else {
+                // text.replaceAll("\\n", "\n")
+                this.hasThinkValue = true;
+                this.chainThinkValue = text.replaceAll("<think>", "").replaceAll("</think>", "<br/>");
+                return ""
+            }
+        },
+        filterText(str) {
+            /* eslint-disable */
+            const regex = /\{\n  "functionCall": \{/s
+            str = str.replace(regex, "")
+            str = str.replaceAll("```json", "")
+            return str
+        },
+        // 处理流式消息中的 <think> 标签
+        streamFilterThinkValue() {
+
+        },
+        // 打字效果已在MarkdownText文件中处理
+        typeNewWriter(text, keyId, msg) {
+            // setTimeout(() => {
+            //     let ref = 'msgTyped' + keyId;
+            //     const el = this.$refs[ref][0];
+            //     new Typed(el, {
+            //         strings: [text],
+            //         typeSpeed: 15,
+            //         showCursor: false,
+            //         onComplete: () => {
+            //             msg.isHistory = true
+            //             this.$emit('openFirstPreview', msg)
+            //             this.typingSuccess()
+            //         },
+            //     })
+            // }, 500)
+        },
+        handleScroll() {
+            console.log("this.isManualScroll = true;");
+            this.isManualScroll = true;
+            window.removeEventListener('wheel', this.handleScroll, true);
+        },
+        scrollMarkdown() {
+            !this.isManualScroll && this.$nextTick(() => {
+                let container = document.getElementById("list");
+                if (container) {
+                    let scrollHeight = container.scrollHeight;
+                    container.scrollTop = scrollHeight;
+                }
+            });
+        },
+        streamInfo(url) {
+            // 通知消息列表，当前还未建立sse，先不出空消息
+            if(this.retryUrl == ""){
+                this.$emit("sseOtherInfo", this.msgId, "init", "");
+            }
+            this.$emit("answerDocKnowledgeFn");
+            this.eventSource = new EventSource(url);
+            this.$emit("streamStatus", true, this.msgId);
+            // this.$set(this, 'showThink', true);
+            this.signSetFlag = false;
+            this.thinkEnd = false
+            let tempString = "";
+            // let generatingString = "";
+            // let timer = null;
+            let images = [];
+            let matched = [];
+            let recommendItems = [];
+            let isFirstStr = true;
+            const backslashOrNRegex = /[\\n]/; // 不能替换为 /\n/，会导致格式解析错误，在处理方法末尾做了修改
+            // 如果只有一次推送、并且推送字符串中带有 n
+            let isOnlyOnce = 0; // 标记是否只有一次推送
+            let hasN = false; // 标记是否有 n
+            const thinkStartRegex = /<think>/;
+            const thinkEndRegex = /<\/think>/
+            this.eventSource.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (event.lastEventId === 'finish') { // 不能删除 finish
+                    console.log("finish+++++");
+                } else if (event.lastEventId === '[DONE]') {
+                    this.streamEnd = true;
+                    // 只有一次推送，且推送字符串中带有 n
+                    // 用于特殊情况（只有一次内容推送 且 含有 n）
+                    if (isOnlyOnce == 1 && hasN) {
+                        this.$emit("answerDocKnowledgeFn");
+                        let repStr = tempString.replace(/\\n/g, '\n');
+                        this.$set(this, "typedContent", repStr);
+                        this.scrollMarkdown();
+                    }
+                    let DONETmier = setInterval(() => {
+                        // 在所有文本内容打字效果完毕后 展示底部图片 文件 推荐等
+                        if (this.generatingString == "") {
+                            if (images.length != 0) {
+                                setTimeout(() => {
+                                    this.$emit("sseOtherInfo", this.msgId, "images", images);
+                                    this.scrollMarkdown();
+                                }, 50);
+                            }
+                            if (matched.length != 0) {
+                                setTimeout(() => {
+                                    this.$emit("sseOtherInfo", this.msgId, "matched", matched);
+                                    this.scrollMarkdown();
+                                }, 100);
+                            }
+                            if (recommendItems.length != 0) {
+                                setTimeout(() => {
+                                    this.$emit("sseOtherInfo", this.msgId, "recommendItems", recommendItems);
+                                    this.scrollMarkdown();
+                                }, 150);
+                            }
+                            this.closeTimeOut()
+                            clearInterval(DONETmier);
+                            if(this.thinkTimer != null) {
+                                clearInterval(this.thinkTimer)
+                                this.thinkTimer = null
+                                this.thinkEnd = true
+                            }
+                            this.$emit("streamCallback", this.typedContent)
+                            this.$emit("streamStatus", false, this.msgId);
+                            this.appendCopyBtn()
+                            setTimeout(() => {
+                                this.removeLoadingNode()
+                            }, 200);
+                            this.$emit("sseOtherInfo", this.msgId, "start", "");
+                        }
+
+                    }, 100);
+                    this.eventSource.close();
+                    // 重试地址不为空，说明需要重试
+                    console.log("需要重试 this.retryUrl: ", this.retryUrl);
+                    if (this.retryUrl != "") {
+                        console.log("this.retryUrl: ", this.retryUrl);
+                        this.streamInfo(this.retryUrl);
+                        // 将重试地址清空，用于在收到结束标识并结束后 判断是否需要重试
+                        this.retryUrl = "";
+                        this.$emit("sseOtherInfo", this.msgId, "changeHeaderStyleValue", this.$t('common.modelgeneration'));
+                    }
+                } else if (event.lastEventId === 'matched') {
+                    matched = data;
+                } else if (event.lastEventId === 'images') {
+                    images = data;
+                } else if (event.lastEventId === 'recommendItems') {
+                    recommendItems = data;
+                } else if (event.lastEventId === 'retry') {
+                    this.retryUrl = data.content;
+                } else if (event.lastEventId === 'generated_image') {
+                    let imgs = JSON.parse(data.content);
+                    let imgsStr = "";
+                    for (let i = 0; i < imgs.length; i++) {
+                        imgsStr += `![](${imgs[i].oss_url})`;
+                    }
+                    this.$set(this, "typedContent", this.typedContent + imgsStr);
+
+                    // 模拟图片推送
+                    // let imgs = JSON.parse('[{"oss_url":"https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/generated-img/generated_img_865652a94b374337b2ac703466cdea94.png"}]');
+                    // let imgsStr = "";
+                    // for (let i = 0; i < imgs.length; i++) {
+                    //     imgsStr += `![](${imgs[i].oss_url})`;
+                    // }
+                    // this.$set(this, "typedContent", this.typedContent + imgsStr);
+
+                }  else if (event.lastEventId === 'source') {
+                    this.$emit("changedHeadStatusValue", this.msgId, data);
+                }  else {
+                    // console.log("start event.lastEventId: ", event.lastEventId);
+                    // 设置当前知识答案id，用于loading取消和展示
+                    this.$emit("sseOtherInfo", this.msgId, "start", "");
+                    if(thinkStartRegex.test(data.content) && thinkEndRegex.test(data.content)) {
+                        this.hasThinkValue = true;
+                        this.thinkCount = 0
+                        this.ThinkTime()
+                    } else {
+                        // 最终根据规则是以最后一个 </think> 标识当前深度思考结束，开始正常添加数据到 typedContent
+                        if (thinkStartRegex.test(data.content)) {
+                            if (this.thinkCount == 0) {
+                                this.thinkCount = 0
+                            } else {
+                                this.thinkCount += 1;
+                            }
+                            this.hasThinkValue = true;
+                            this.ThinkTime()
+                            // this.streamThinkValueAddFlag = true;
+                        }
+                        if (thinkEndRegex.test(data.content)) {
+                            this.thinkCount -= 1;
+                            // this.streamThinkValueAddFlag = false;
+                        }
+                    }
+                    // 字符串中存在特定字符，本次接收消息暂不展示
+                    if (backslashOrNRegex.test(data.content) && !this.hasThinkValue) {
+                        tempString += data.content;
+                        // 用于特殊情况（只有一次内容推送 且 含有 n）
+                        isOnlyOnce++;
+                        hasN = true;
+                    } else {
+                        if (data.content.trim() != "") {
+                            isOnlyOnce++;
+                        }
+                        // 此处判断的逻辑是识别到了深度思考 结束，开始处理回复的内容数据，关闭掉深度思考的手动计时，并收起深度思考的内容
+                        let repStr = tempString.replace(/\\n/g, '\n');
+                        if (this.hasThinkValue && this.thinkCount == 0) {
+                            this.generatingThinkString = this.generatingThinkString + repStr + data.content;
+                            this.thinkEnd = false
+                            this.ThinkTime()
+                        } else {
+                            let str = data.content
+                            if (thinkEndRegex.test(data.content)) {
+                                let arr = data.content.split("</think>")
+                                this.generatingThinkString = this.generatingThinkString + arr[0]
+                                str = arr[1]
+                            }
+                            this.generatingString = this.generatingString + repStr + str;
+                        }
+                        tempString = "";
+                        if (isFirstStr) {
+                            isFirstStr = false;
+                            this.timer = 0;
+                            this.openTimeOutSetVal()
+                        }
+                    }
+                }
+            };
+            this.eventSource.onerror =  (err) => {
+                this.typedContent += `\n${this.$t("dragonCommon.eventSourceError")}\n`;
+                this.closeTimeOut()
+                this.$emit("streamStatus", false, this.msgId);
+                this.$emit("streamErrorCallBack", this.msgId);
+                this.$emit("streamCallback", this.typedContent)
+                if(this.eventSource) {
+                    try {
+                        this.eventSource.close();
+                    } catch (e) {
+                        console.error('EventSource close failed:', e);
+                    }
+                }
+                setTimeout(() => {
+                    this.removeLoadingNode()
+                }, 200);
+            };
+        },
+        openTimeOutSetVal() {
+            if (this.timer != null) {
+                this.timer = setTimeout(() => {
+                    this.closeThinkContent(this)
+                    // 先把深度思考的值 push 完成后再执行正常内容的 push，最终以正常内容的值为空判断为本轮打字效果结束
+                    if (this.generatingThinkString != "") {
+                        let str = this.filterText(this.chainThinkValue + this.generatingThinkString.charAt(0))
+                        this.$set(this, "chainThinkValue", str)
+                        this.generatingThinkString = this.generatingThinkString.slice(1)
+                        this.scrollMarkdown();
+                    } else if (this.generatingString != "") {
+                        this.$set(this, "typedContent", this.typedContent + this.generatingString.charAt(0))
+                        this.generatingString = this.generatingString.slice(1)
+                        this.scrollMarkdown();
+                        if(this.thinkTimer != null) {
+                            clearInterval(this.thinkTimer)
+                            this.thinkTimer = null
+                            this.thinkEnd = true
+                        }
+                    }
+                    this.openTimeOutSetVal()
+                }, 20);
+            }
+        },
+        closeTimeOut() {
+            clearTimeout(this.timer);
+            this.timer = null;
+        },
+        ThinkTime() {
+            if(this.thinkTimer == null) {
+                this.thinkTimer = setInterval(() => {
+                    this.thinkTimeNum += 1;
+                }, 1000)
+            }
+        },
+        startTypingEffect() {
+            // 使用正则表达式将 HTML 内容按 <table> 标签分割
+            const segments = this.chainValues.split(/(<\/?table[\s\S]*?>[\s\S]*?<\/table>)/i);
+            console.log("segments: ", segments);
+
+            let segmentIndex = 0;
+            let i = 0;
+            const processNextSegment = () => {
+                if (segmentIndex >= segments.length) {
+                    this.$emit('openFirstPreview')
+                    this.$emit('typingSuccess');
+                    return;
+                }
+                const segment = segments[segmentIndex];
+                if (/^<\/?table[\s\S]*?>[\s\S]*?<\/table>$/i.test(segment)) {
+                    // 如果当前段是 <table> 标签，直接添加到 typedContent 中
+                    this.typedContent += segment;
+                    segmentIndex++;
+                    processNextSegment();
+                } else {
+                    i = 0;
+                    const updateContent = () => {
+                        if (i < segment.length) {
+                            this.typedContent += segment.charAt(i);
+                            i++;
+                            // 使用 requestAnimationFrame 替代 setInterval，防止卡顿
+                            requestAnimationFrame(updateContent);
+                        } else {
+                            segmentIndex++;
+                            processNextSegment();
+                        }
+                    };
+                    updateContent();
+                }
+            };
+            processNextSegment();
+        },
+
+        lookImage(e) {
+            let previewImageUrl = ""
+            console.log('e.target', e.target)
+            if (e.target.localName == 'img') {
+                previewImageUrl = e.target.currentSrc;
+                this.showPreview = true;
+                let richtext = JSON.parse(JSON.stringify(this.typedContent))
+                this.imgList = [];
+                richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
+                    this.imgList.push(capture);
+                });
+                /*当前点击的图片作为第一个图片*/
+                let index = this.imgList.indexOf(previewImageUrl);
+                this.imgList.splice(index, 1);
+                this.imgList.unshift(previewImageUrl);
+            }
+           
+        },
+        closeViewer() {
+            this.showPreview = false;
+        },
+        clickMarkDown(e) {
+            if (e.target.tagName == "A") {
+                window.open(e.target.href, "_blank")
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+            }
+        },
+        closeThinkContent: _.debounce(function (that) {
+            if (that.thinkEnd && that.generatingThinkString == "" && !that.signSetFlag) {
+                that.showThink = false;
+                // 标识已经自动关闭过一次深度思考内容，不再影响手动打开的效果
+                that.signSetFlag = true;
+            }
+        }, 500),
+        parseCode(markDownText) {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(markDownText, 'text/html');
+            doc.querySelectorAll('pre code').forEach((block) => {
+                hljs.highlightBlock(block);
+            });
+            doc.querySelectorAll('a').forEach((block) => {
+                block.setAttribute('target', '_blank');
+                block.setAttribute('rel', 'noopener noreferrer');
+            });
+            let node = this.getLastNode(doc)
+            if (node && !this.isHistory) {
+                let loading = document.createElement('span')
+                loading.classList.add("loading-circle")
+                loading.id = "loading-circle"
+                this.removeLoadingNode()
+                node.appendChild(loading)
+            }
+            return doc.documentElement.outerHTML
+        },
+        removeLoadingNode() {
+            let old = document.getElementById("loading-circle")
+            if(old) old.remove()
+        },
+        getLastNode(node) {
+            let filterList = ["STRONG", "BR", "SPAN", "I", "EM", "B", "A"]
+            if(node.lastElementChild && !filterList.includes(node.lastElementChild.tagName)) {
+                return this.getLastNode(node.lastElementChild)
+            } else {
+                return node
+            }
+        },
+        appendCopyBtn() {
+            let doc = this.$refs.markDown.$el ? this.$refs.markDown.$el : this.$refs.markDown
+            let codeList = doc.querySelectorAll('pre code')
+            codeList.forEach(ele =>{
+                let list = ele.getElementsByClassName("code_copy_btn")
+                if(list.length == 0 && ele.classList.contains("hljs") && !ele.classList.contains("hljs-undefined")) {
+                    let text = ele.innerText
+                    let btnId = uuidv4();
+                    let copy = document.createElement('div')
+                    copy.classList.add("code_copy_btn")
+                    copy.setAttribute('id', btnId)
+                    copy.style.display = 'flex'
+                    let i = document.createElement('i')
+                    i.classList.add("iconfont")
+                    i.classList.add("guoran-tongyichicun-fuzhi")
+                    let span = document.createElement('span')
+                    span.innerText = this.$t("dragonCommon.copy")
+                    copy.append(i)
+                    copy.append(span)
+                    copy.onclick = () =>{
+                        let fn = () =>{
+                            let id = copy.getAttribute("id")
+                            copy.style.display = "none"
+                            let cs = document.getElementById(id + "success")
+                            if(cs) {
+                                cs.style.display = "flex"
+                            }
+                            setTimeout(() =>{
+                                cs && (cs.style.display = "none")
+                                copy.style.display = "flex"
+                            }, 2000)
+                        }
+                        if (navigator.clipboard) {
+                            // 使用 Clipboard API 进行复制
+                            navigator.clipboard.writeText(text).then(() => { fn()})
+                            .catch((error) => {
+                                // 如果 Clipboard API 失败，尝试使用传统方法
+                                this.fallbackCopyTextToClipboard(text, fn, () =>{
+                                    this.$message.error(this.$t("dragonCommon.copyError"))
+                                });
+                            });
+                        } else {
+                            this.fallbackCopyTextToClipboard(text, fn, () =>{
+                                this.$message.error(this.$t("dragonCommon.copyError"))
+                            });
+                        }
+                    }
+                    ele.append(copy)
+                    let copySuccess = document.createElement('div')
+                    copySuccess.classList.add("code_copy_btn")
+                    copySuccess.setAttribute('id', btnId + 'success')
+                    copySuccess.style.display = 'none'
+                    let csI = document.createElement('i')
+                    csI.classList.add("el-icon-check")
+                    let csSpan = document.createElement('span')
+                    csSpan.innerText = this.$t("dragonCommon.copySuccess")
+                    copySuccess.append(csI)
+                    copySuccess.append(csSpan)
+                    ele.append(copySuccess)
+                }
+            })
+        },
+        fallbackCopyTextToClipboard(text, success, fail) {
+            // 创建一个临时的 input 元素
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            // 使 textarea 不在屏幕上显示
+            textArea.style.position = 'fixed';
+            textArea.style.top = 0;
+            textArea.style.left = 0;
+            textArea.style.width = '2em';
+            textArea.style.height = '2em';
+            textArea.style.padding = 0;
+            textArea.style.border = 'none';
+            textArea.style.outline = 'none';
+            textArea.style.boxShadow = 'none';
+            textArea.style.background = 'transparent';
+
+            // 将 textarea 添加到文档中
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+
+            try {
+                // 执行复制命令
+                const successful = document.execCommand('copy');
+                if (successful) {
+                    success()
+                } else {
+                    fail()
+                }
+            } catch (err) {
+                fail()
+            }
+            // 移除临时的 textarea
+            document.body.removeChild(textArea);
+        },
+    },
+    beforeDestroy() {
+        if (this.eventSource) {
+            this.eventSource.close();
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+@import "../assets/less/variables.less";
+
+.blinking-cursor {
+    display: inline-block;
+    width: 2px;
+    height: 1em;
+    background-color: @background-color-black;
+    animation: blink 1s steps(2, start) infinite;
+}
+
+@keyframes blink {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+.think {
+    padding: 10px;
+    background: @background-color-bubble;
+    border-radius: 8px;
+    margin-bottom: 12px;
+
+    .think_content {
+        height: auto;
+        white-space: pre-wrap;
+        transition: all 2s ease;
+
+        /deep/ br {
+            line-height: 10px !important;
+        }
+    }
+
+    .hide_think {
+        height: 0px;
+        overflow: hidden;
+        transition: all 2s ease;
+    }
+
+    .think_title {
+        width: 100%;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+
+        .think_title_left {
+            display: flex;
+            align-items: center;
+
+            i {
+                font-size: 18px;
+            }
+
+            .guoran-icon-deepseek {
+                font-size: 18px;
+            }
+        }
+
+        .think_title_right {
+            font-size: 18px;
+            color: @font-primary-accent-color;
+        }
+
+        .hide_think_title {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.mark_down {
+    line-height: 24px;
+    overflow-x: auto;
+
+    /deep/code {
+        font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif !important;
+        white-space: pre-wrap;
+        font-size: 16px;
+        position: relative;
+        .code_copy_btn {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            display: flex;
+            align-items: center;
+            padding: 3px 12px;
+            background: @background-color-summary;
+            cursor: pointer;
+            font-size: 14px;
+            border-radius: 25px;
+            i {
+                font-size: 14px;
+                margin-right: 6px;
+            }
+        }
+    }
+
+    /deep/ pre {
+        // code {
+        //     background: #F3F3F3 !important;
+        //     color: #444 !important;
+        // }
+        .language-undefined {
+            background: @background-color-light;
+            color: @background-color-black;
+        }
+    }
+
+    /deep/p {
+        margin-bottom: 7px;
+        font-size: 16px;
+    }
+
+    /deep/p:only-child {
+        margin: 0 !important;
+    }
+
+    /deep/p:last-child {
+        margin-bottom: 0 !important;
+    }
+
+    /deep/ul {
+        margin-bottom: 7px;
+        list-style: disc;
+        padding-left: 40px;
+
+        li {
+            margin: 7px 0 !important;
+            font-size: 16px;
+            // padding-left: 40px;
+        }
+    }
+
+    /deep/ ol {
+        list-style: auto;
+        padding-left: 40px;
+
+        li {
+            margin: 7px 0 !important;
+            font-size: 16px;
+            // padding-left: 40px;
+        }
+    }
+
+    /deep/img {
+        max-width: 400px;
+    }
+
+    /deep/h3,
+    /deep/h2,
+    /deep/h1,
+    /deep/h4,
+    /deep/h5,
+    /deep/h6 {
+        color: @font-primary-color;
+        font-weight: 500;
+        line-height: 26px;
+        margin: 7px 0;
+    }
+
+    /deep/h6 {
+        font-size: 12px;
+    }
+
+    /deep/h5 {
+        font-size: 14px;
+    }
+
+    /deep/h4 {
+        font-size: 16px;
+    }
+
+    /deep/h3 {
+        font-size: 20px;
+    }
+
+    /deep/h2 {
+        font-size: 22px;
+    }
+
+    /deep/h1 {
+        font-size: 24px;
+    }
+
+    // /deep/h3 {
+    //     font-size: 20px;
+    // }
+
+    /deep/hr {
+        margin: 16px 0;
+    }
+
+    /deep/ table {
+        border-spacing: 0;
+        // border-radius: 8px;
+        // overflow: hidden;
+        border: solid 1px @border-color-table;
+        min-width: 800px;
+        overflow-x: auto;
+        margin: 16px 0;
+    }
+
+    /deep/ th {
+        background: @background-color-summary;
+        border: solid 1px @border-color-table;
+        padding: 8px;
+        height: 38px;
+        min-width: 100px;
+    }
+
+    /deep/ td {
+        border: solid 1px @border-color-table;
+        padding: 8px;
+        height: 28px;
+        min-width: 100px;
+    }
+}
+
+/* 圆圈的样式 */
+/deep/.loading-circle {
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    border-radius: 50%;
+    background-color: @primary-color;
+    animation: loading 2s infinite ease-in-out;
+    margin: 0 8px;
+    /* 动画控制 */
+}
+
+/* 放大缩小的动画 */
+@keyframes loading {
+
+    0%,
+    100% {
+        transform: scale(1);
+        /* 原始大小 */
+    }
+
+    50% {
+        transform: scale(1.5);
+        /* 放大 */
+    }
+}
+</style>