UNPKG

@matechat/core

Version:

前端智能化场景解决方案UI库,轻松构建你的AI应用。

492 lines (491 loc) 20.9 kB
import "./index.css"; import { defineComponent as P, ref as w, computed as T, watch as k, nextTick as G, onMounted as Z, createElementBlock as y, openBlock as M, normalizeClass as C, renderSlot as E, createVNode as K, createElementVNode as h, toDisplayString as U, createCommentVNode as W, unref as v, Transition as J, withCtx as V, useSlots as q, h as A, Fragment as ee, createBlock as te, resolveDynamicComponent as se } from "vue"; import D from "highlight.js"; import ie from "markdown-it"; import { debounce as ne } from "lodash-es"; import { getDefaultWhiteList as oe, getDefaultCSSWhiteList as ae, filterXSS as le } from "xss"; import { useMcI18n as ce } from "@matechat/core/Locale"; const re = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='16px'%20height='16px'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3e全部收起%3c/title%3e%3cg%20id='全部收起'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cpath%20d='M4.715694,14.4114091%20C4.910563,14.5464051%205.179987,14.5271201%205.353553,14.3535531%20L5.353553,14.3535531%20L7.99999988,11.7070001%20L10.646447,14.3535531%20L10.715694,14.4114091%20C10.910563,14.5464051%2011.179987,14.5271201%2011.353553,14.3535531%20C11.548816,14.1582911%2011.548816,13.8417091%2011.353553,13.6464471%20L11.353553,13.6464471%20L8.353553,10.6464471%20L8.284306,10.5885911%20C8.089437,10.4535951%207.820013,10.4728801%207.646447,10.6464471%20L7.646447,10.6464471%20L4.646447,13.6464471%20L4.588591,13.7156941%20C4.453595,13.9105631%204.47288,14.1799871%204.646447,14.3535531%20L4.646447,14.3535531%20L4.715694,14.4114091%20Z%20M14.5,7.50000012%20C14.776142,7.50000012%2015,7.72385812%2015,8.00000012%20C15,8.27614212%2014.776142,8.50000012%2014.5,8.50000012%20L1.5,8.50000012%20C1.223858,8.50000012%201,8.27614212%201,8.00000012%20C1,7.72385812%201.223858,7.50000012%201.5,7.50000012%20L14.5,7.50000012%20Z%20M8.284306,5.41140912%20L8.353553,5.35355312%20L11.353553,2.35355312%20C11.548816,2.15829112%2011.548816,1.84170912%2011.353553,1.64644712%20C11.179987,1.47288012%2010.910563,1.45359512%2010.715694,1.58859112%20L10.646447,1.64644712%20L7.99999988,4.29300012%20L5.353553,1.64644712%20C5.179987,1.47288012%204.910563,1.45359512%204.715694,1.58859112%20L4.646447,1.64644712%20C4.47288,1.82001312%204.453595,2.08943712%204.588591,2.28430612%20L4.646447,2.35355312%20L7.646447,5.35355312%20C7.820013,5.52712012%208.089437,5.54640512%208.284306,5.41140912%20Z'%20id='形状结合'%20fill='%2371757F'%20fill-rule='nonzero'%3e%3c/path%3e%3c/g%3e%3c/svg%3e", de = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+ZnVuY3Rpb24gaWNvbi9jb3B5PC90aXRsZT4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFQSS1zdGFydGVyLeWbvuagh+WFpeW6kyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU5Mi4wMDAwMDAsIC0yMDQuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLmlrnmoLzlpIfku70tMTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU2MC4wMDAwMDAsIDE4MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDx0ZXh0IGlkPSLlm77moIciIGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0ibm9ybWFsIiBsaW5lLXNwYWNpbmc9IjE2IiBmaWxsPSIjNzE3NTdGIj4KICAgICAgICAgICAgICAgICAgICA8dHNwYW4geD0iMjcuMTM2IiB5PSI2MSI+5aSN5Yi2PC90c3Bhbj4KICAgICAgICAgICAgICAgIDwvdGV4dD4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8cGF0aCBkPSJNNjA0LjUsMjA2IEM2MDUuMjc5Njk2LDIwNiA2MDUuOTIwNDQ5LDIwNi41OTQ4ODggNjA1Ljk5MzEzMywyMDcuMzU1NTQgTDYwNiwyMDcuNSBMNjA2LDIxNC41IEM2MDYsMjE1LjI3OTY5NiA2MDUuNDA1MTEyLDIxNS45MjA0NDkgNjA0LjY0NDQ2LDIxNS45OTMxMzMgTDYwNC41LDIxNiBMNjA0LDIxNiBMNjA0LDIxNi41IEM2MDQsMjE3LjI3OTY5NiA2MDMuNDA1MTEyLDIxNy45MjA0NDkgNjAyLjY0NDQ2LDIxNy45OTMxMzMgTDYwMi41LDIxOCBMNTk1LjUsMjE4IEM1OTQuNjcxNTczLDIxOCA1OTQsMjE3LjMyODQyNyA1OTQsMjE2LjUgTDU5NCwyMTYuNSBMNTk0LDIwOS41IEM1OTQsMjA4LjY3MTU3MyA1OTQuNjcxNTczLDIwOCA1OTUuNSwyMDggTDU5NS41LDIwOCBMNTk2LDIwOCBMNTk2LDIwNy41IEM1OTYsMjA2LjcyMDMwNCA1OTYuNTk0ODg4LDIwNi4wNzk1NTEgNTk3LjM1NTU0LDIwNi4wMDY4NjcgTDU5Ny41LDIwNiBMNjA0LjUsMjA2IFogTTYwMi41LDIwOSBMNTk1LjUsMjA5IEM1OTUuMjIzODU4LDIwOSA1OTUsMjA5LjIyMzg1OCA1OTUsMjA5LjUgTDU5NSwyMDkuNSBMNTk1LDIxNi41IEM1OTUsMjE2Ljc3NjE0MiA1OTUuMjIzODU4LDIxNyA1OTUuNSwyMTcgTDU5NS41LDIxNyBMNjAyLjUsMjE3IEM2MDIuNzc2MTQyLDIxNyA2MDMsMjE2Ljc3NjE0MiA2MDMsMjE2LjUgTDYwMywyMTYuNSBMNjAzLDIwOS41IEM2MDMsMjA5LjIyMzg1OCA2MDIuNzc2MTQyLDIwOSA2MDIuNSwyMDkgTDYwMi41LDIwOSBaIE02MDQuNSwyMDcgTDU5Ny41LDIwNyBDNTk3LjI1NDU0LDIwNyA1OTcuMDUwMzkyLDIwNy4xNzY4NzUgNTk3LjAwODA1NiwyMDcuNDEwMTI0IEw1OTcsMjA3LjUgTDU5NywyMDggTDYwMi41LDIwOCBDNjAzLjI3OTY5NiwyMDggNjAzLjkyMDQ0OSwyMDguNTk0ODg4IDYwMy45OTMxMzMsMjA5LjM1NTU0IEw2MDQsMjA5LjUgTDYwNCwyMTUgTDYwNC41LDIxNSBDNjA0Ljc0NTQ2LDIxNSA2MDQuOTQ5NjA4LDIxNC44MjMxMjUgNjA0Ljk5MTk0NCwyMTQuNTg5ODc2IEw2MDUsMjE0LjUgTDYwNSwyMDcuNSBDNjA1LDIwNy4yNTQ1NCA2MDQuODIzMTI1LDIwNy4wNTAzOTIgNjA0LjU4OTg3NiwyMDcuMDA4MDU2IEw2MDQuNSwyMDcgWiIgaWQ9IuW9oueKtue7k+WQiCIgZmlsbD0iIzcxNzU3RiIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=", ge = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='16px'%20height='16px'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3estatus/whiteBG/correct%3c/title%3e%3cdesc%3eCreated%20with%20Sketch.%3c/desc%3e%3cdefs%3e%3cpolygon%20id='path-1'%20points='6.53553391%209.77817459%2012.1923882%204.12132034%2013.6066017%205.53553391%206.53553391%2012.6066017%203%209.07106781%204.41421356%207.65685425%206.53553391%209.77817459'%3e%3c/polygon%3e%3c/defs%3e%3cg%20id='status/whiteBG/correct'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cmask%20id='mask-2'%20fill='white'%3e%3cuse%20xlink:href='%23path-1'%3e%3c/use%3e%3c/mask%3e%3cuse%20id='Mask'%20fill='%233DCCA6'%20xlink:href='%23path-1'%3e%3c/use%3e%3c/g%3e%3c/svg%3e"; class $ { constructor() { this.xssWhiteList = oe(), this.cssWhiteList = ae(), this.setDefaultXss(); } setDefaultXss() { this.xssWhiteList.input = ["type", "checked", "disabled", "class"], this.xssWhiteList.label = ["for"], this.xssWhiteList.ul = ["class"], this.xssWhiteList.div = ["class"], this.xssWhiteList.a = ["href", "class", "target", "name"], this.xssWhiteList.ol = ["start"], this.xssWhiteList.p = ["class"], this.xssWhiteList.span = ["style", "class", "title", "id"], this.xssWhiteList.svg = ["style", "class", "width", "height", "viewbox", "preserveaspectratio", "id", "fill", "stroke"], this.xssWhiteList.path = ["style", "class", "d", "id", "fill", "stroke"], this.xssWhiteList.th = ["style"], this.xssWhiteList.td = ["style"]; } onIgnoreTagAttr(s, a, g, i) { if (!i && (a === "id" || s === "span" && a === "style")) return a + "=" + g; } getXssWhiteList() { return this.xssWhiteList; } setXssWhiteList(s) { this.xssWhiteList = s; } setCustomXssRules(s) { s && s.forEach((a) => { a.value === null ? delete this.xssWhiteList[a.key] : this.xssWhiteList[a.key] = a.value; }); } setMdPlugins(s, a) { s && s.length && s.forEach((g) => { const { plugin: i, opts: u } = g; a.use(i, u); }); } filterHtml(s) { return le(s, { whiteList: this.xssWhiteList, onIgnoreTagAttr: this.onIgnoreTagAttr, css: { whiteList: Object.assign({}, this.cssWhiteList, { top: !0, left: !0, bottom: !0, right: !0 }) } }); } } const ue = { key: 0, class: "mc-code-block-header" }, me = { class: "mc-code-lang" }, he = { class: "mc-code-block-actions" }, Me = { key: 0, style: { "margin-right": "8px" } }, ye = ["title"], Ie = ["title"], pe = { key: 0, src: de }, De = { key: 1, src: ge }, Le = { key: 0 }, we = ["innerHTML"], fe = { key: 1 }, Ne = ["innerHTML"], ve = /* @__PURE__ */ P({ __name: "CodeBlock", props: { code: { type: String, required: !0 }, language: { type: String, default: "" }, blockIndex: { type: Number, required: !0 }, theme: { type: String, default: "light" }, enableMermaid: { type: Boolean, default: !1 }, mermaidConfig: { type: Object, default: () => ({}) } }, setup(d) { const s = d, { t: a } = ce(), g = new $(); let i = null; const u = w(!0), m = w(!1), f = w(""), r = w(!0), I = T(() => { var e; return s.enableMermaid && ((e = s.language) == null ? void 0 : e.toLowerCase()) === "mermaid"; }), L = T(() => { try { const e = s.code.indexOf('<span class="mc-typewriter'); let n; return s.language && D.getLanguage(s.language) ? e !== -1 ? n = D.highlight(s.code.slice(0, e), { language: s.language }).value + s.code.slice(e) : n = D.highlight(s.code, { language: s.language }).value : typeof D.highlightAuto !== void 0 ? e !== -1 ? n = D.highlightAuto(s.code.slice(0, e)).value + s.code.slice(e) : n = D.highlightAuto(s.code).value : n = g.filterHtml(s.code), n; } catch { } }), N = async () => { if (!(!I.value || !s.code)) { if (!i) try { const { MermaidService: e } = await import("./MermaidService-BAyBWx9t.js"), n = { theme: s.theme === "dark" ? "dark" : "default", ...s.mermaidConfig }; i = new e(n); } catch (e) { console.error("Failed to load MermaidService:", e); return; } try { const e = await i.renderMermaid(s.code.replace(/<span[^>]*\bclass\s*=\s*['"]mc-typewriter[^>]*>([\s\S]*?)<\/span>/g, "$1"), s.theme); f.value = e; } catch { } } }, p = () => { u.value = !u.value; }, x = ne((e) => { const n = e.target; if (navigator.clipboard) navigator.clipboard.writeText(s.code); else { const c = document.createElement("textarea"); c.style.position = "fixed", c.style.top = "-9999px", c.style.left = "-9999px", c.style.zIndex = "-1", c.value = s.code, document.body.appendChild(c), c.select(), document.execCommand("copy"), document.body.removeChild(c); } n.classList.remove("icon-copy-new"), m.value = !0, setTimeout(() => { m.value = !1; }, 1500); }, 300), b = (e) => { e.dataset || (e.dataset = {}), e.style.height && (e.dataset.height = e.style.height), e.style.maxHeight = 0; }, O = (e) => { requestAnimationFrame(() => { e.dataset.oldOverflow = e.style.overflow, e.dataset.height ? e.style.maxHeight = e.dataset.height : e.scrollHeight !== 0 ? e.style.maxHeight = `${e.scrollHeight}px` : e.style.maxHeight = 0, e.style.overflow = "hidden"; }); }, S = (e) => { e.style.maxHeight = "", e.style.overflow = e.dataset.oldOverflow; }, B = (e) => { e.dataset || (e.dataset = {}), e.dataset.oldOverflow = e.style.overflow, e.style.maxHeight = `${e.scrollHeight}px`, e.style.overflow = "hidden"; }, t = (e) => { e.scrollHeight !== 0 && (e.style.maxHeight = 0); }, o = (e) => { e.style.maxHeight = "", e.style.overflow = e.dataset.oldOverflow; }, l = T(() => s.theme === "dark" ? "mc-code-block-dark" : "mc-code-block-light"); return k(() => [s.code, s.theme, s.enableMermaid], () => { I.value && G(() => { N(); }); }, { immediate: !0 }), Z(() => { I.value && N(); }), (e, n) => (M(), y( "div", { class: C(["mc-code-block", l.value]) }, [ e.$slots.header ? E(e.$slots, "header", { key: 1 }, void 0, !0) : (M(), y("div", ue, [ h( "span", me, U(d.language), 1 /* TEXT */ ), E(e.$slots, "actions", {}, () => [ h("div", he, [ I.value ? (M(), y("div", Me, [ h( "ul", { class: C(["mc-diagram-switch", { "mc-show-code": !r.value }]) }, [ h( "li", { onClick: n[0] || (n[0] = (c) => r.value = !0), class: C({ "mc-diagram-switch-active": r.value }) }, U(v(a)("Md.diagram")), 3 /* TEXT, CLASS */ ), h( "li", { onClick: n[1] || (n[1] = (c) => r.value = !1), class: C({ "mc-diagram-switch-active": !r.value }) }, U(v(a)("Md.code")), 3 /* TEXT, CLASS */ ) ], 2 /* CLASS */ ) ])) : W("v-if", !0), h("div", { class: "mc-action-btn mc-toggle-btn", title: v(a)("Md.toggle"), onClick: p }, n[3] || (n[3] = [ h( "img", { src: re }, null, -1 /* CACHED */ ) ]), 8, ye), h("div", { class: "mc-action-btn mc-copy-btn", title: v(a)("Md.copy"), onClick: n[2] || (n[2] = //@ts-ignore (...c) => v(x) && v(x)(...c)) }, [ m.value ? (M(), y("img", De)) : (M(), y("img", pe)) ], 8, Ie) ]) ], !0) ])), K(J, { name: "collapse-transition", onBeforeEnter: b, onEnter: O, onAfterEnter: S, onBeforeLeave: B, onLeave: t, onAfterLeave: o }, { default: V(() => [ u.value ? (M(), y("div", Le, [ I.value && r.value && !e.$slots.content ? (M(), y("div", { key: 0, class: "mc-mermaid-content", innerHTML: f.value }, null, 8, we)) : e.$slots.content ? E(e.$slots, "content", { key: 2 }, void 0, !0) : (M(), y("pre", fe, [ h("code", { class: C(`hljs language-${d.language}`), innerHTML: L.value }, null, 10, Ne) ])) ])) : W("v-if", !0) ]), _: 3 /* FORWARDED */ }) ], 2 /* CLASS */ )); } }), X = (d, s) => { const a = d.__vccOpts || d; for (const [g, i] of s) a[g] = i; return a; }, Ce = /* @__PURE__ */ X(ve, [["__scopeId", "data-v-7ffec7b6"]]), Q = { step: 2, interval: 50, style: "normal" }, Ae = { content: { type: String, default: "" }, typing: { type: Boolean, default: !1 }, enableThink: { type: Boolean, default: !1 }, typingOptions: { step: { type: Number, default: 2 }, interval: { type: [Number, Array], default: 60 }, style: { type: String, default: "normal" } }, thinkOptions: { customClass: { type: String, default: "" } }, mdOptions: { type: Object, default: () => ({}) }, mdPlugins: { type: Array, default: () => [] }, customXssRules: { type: Array, default: () => [] }, theme: { type: String, default: "light" }, enableMermaid: { type: Boolean, default: !1 }, mermaidConfig: { type: Object, default: () => ({}) } }, ke = /* @__PURE__ */ P({ __name: "mdCard", props: Ae, emits: ["afterMdtInit", "typingStart", "typing", "typingEnd"], setup(d, { expose: s, emit: a }) { const g = new $(), i = d, u = a, m = q(); let f = null; const r = ie({ breaks: !0, linkify: !0, html: !0, highlight: (t, o) => { if (o && D.getLanguage(o)) try { return D.highlight(t, { language: o }).value; } catch { } return ""; }, ...i.mdOptions }); r.renderer.rules.fence = (t, o) => `<!----MC_MARKDOWN_CODE_BLOCK_${o}---->`; const I = w({ tokens: [], html: "" }), L = w(0), N = w(!1), p = () => { var e; let t = i.content || ""; if (i.typing && N.value) { t = i.content.slice(0, L.value) || ""; const n = { ...Q, ...i == null ? void 0 : i.typingOptions }; n.style === "cursor" ? t += '<span class="mc-typewriter mc-typewriter-cursor">|</span>' : (n.style === "color" || n.style === "gradient") && (t = t.slice(0, -5) + `<span class="mc-typewriter mc-typewriter-${n.style}">${t.slice(-5)}</span>`); } if (i.enableThink) { const n = ((e = i.thinkOptions) == null ? void 0 : e.customClass) || "mc-think-block"; t = (t == null ? void 0 : t.replace("<think>", `<div class="${n}">`).replace("</think>", "</div>")) || ""; } const o = r.parse(t, {}), l = r.render(t); I.value = { tokens: o, html: l }; }; k( () => { var t; return [i.enableThink, (t = i.thinkOptions) == null ? void 0 : t.customClass]; }, () => { p(); } ); const x = (t, o, l) => { const e = { actions: m.actions ? () => m.actions({ codeBlockData: { code: o, language: t } }) || null : void 0, header: m.header ? () => m.header({ codeBlockData: { code: o, language: t } }) || null : void 0, content: m.content ? () => m.content({ codeBlockData: { code: o, language: t } }) || null : void 0 }; return A( Ce, { language: t, code: o, blockIndex: l, theme: i.theme, enableMermaid: i.enableMermaid, mermaidConfig: i.mermaidConfig, key: `code-block-${l}` }, e ); }; k( () => i.content, (t, o) => { if (!i.typing) { L.value = (t == null ? void 0 : t.length) || 0, p(); return; } t.indexOf(o) === -1 && (L.value = 0), G(() => O()); }, { immediate: !0 } ); const b = () => { N.value = !1, u("typingEnd"); }, O = () => { clearTimeout(f), N.value = !0, u("typingStart"); const t = { ...Q, ...i == null ? void 0 : i.typingOptions }, o = () => { let l = t.step; if (Array.isArray(t.step) && (l = t.step[0] + Math.floor(Math.random() * (t.step[1] - t.step[0]))), L.value += l, p(), u("typing"), L.value >= i.content.length) { b(), p(); return; } f = setTimeout(o, t.interval); }; f = setTimeout(o); }, S = T(() => ({ name: "MarkdownRenderer", render() { var Y; if (typeof document > "u") return A("div"); const { html: t, tokens: o } = I.value, l = []; let e = 0, n; const c = /<!----MC_MARKDOWN_CODE_BLOCK_(\d+)---->/g; let _ = 0, z = 0; for (; n = c.exec(t), !!n; ) { n.index > e && l.push( A("div", { innerHTML: t.slice(e, n.index), key: `markdown-segment-${z++}` }) ); const j = o[Number.parseInt(n[1])], F = ((Y = j == null ? void 0 : j.info) == null ? void 0 : Y.replace(/<span\b[^>]*>/i, "").replace("</span>", "")) || "", R = j.content; l.push(x(F, R, _)), _++, e = c.lastIndex; } return e < t.length && l.push( A("div", { innerHTML: t.slice(e), key: `markdown-segment-${z++}` }) ), A("div", l); } })); k( () => i.customXssRules, (t) => { g.setCustomXssRules(t), p(); }, { deep: !1 } ), k( () => i.mdPlugins, (t) => { g.setMdPlugins(t, r), p(); }, { immediate: !0, deep: !1 } ); const B = T(() => i.theme === "dark" ? "mc-markdown-render-dark" : "mc-markdown-render-light"); return Z(() => { u("afterMdtInit", r); }), s({ mdt: r }), (t, o) => (M(), y( ee, null, [ h( "div", { class: C(["mc-markdown-render", B.value]) }, [ (M(), te(se(S.value))) ], 2 /* CLASS */ ), W("v-if", !0) ], 64 /* STABLE_FRAGMENT */ )); } }), H = /* @__PURE__ */ X(ke, [["__scopeId", "data-v-a40d857a"]]); H.install = (d) => { d.component("McMarkdownCard", H); }; export { H as McMarkdownCard };