@matechat/core
Version:
前端智能化场景解决方案UI库，轻松构建你的AI应用。
402 lines (401 loc) • 18 kB
JavaScript
import "./index.css";
import { defineComponent as Q, ref as A, computed as x, createElementBlock as L, openBlock as y, normalizeClass as S, renderSlot as b, createVNode as R, createElementVNode as N, toDisplayString as F, unref as z, Transition as $, withCtx as K, createCommentVNode as P, useSlots as J, watch as T, nextTick as V, h as f, onMounted as q, Fragment as ee, createBlock as te, resolveDynamicComponent as se } from "vue";
import p from "highlight.js";
import ie from "markdown-it";
import { debounce as ne } from "lodash-es";
import { getDefaultWhiteList as oe, getDefaultCSSWhiteList as le, filterXSS as ae } from "xss";
const ce = "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", re = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+ZnVuY3Rpb24gaWNvbi9jb3B5PC90aXRsZT4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFQSS1zdGFydGVyLeWbvuagh+WFpeW6kyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU5Mi4wMDAwMDAsIC0yMDQuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLmlrnmoLzlpIfku70tMTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU2MC4wMDAwMDAsIDE4MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDx0ZXh0IGlkPSLlm77moIciIGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0ibm9ybWFsIiBsaW5lLXNwYWNpbmc9IjE2IiBmaWxsPSIjNzE3NTdGIj4KICAgICAgICAgICAgICAgICAgICA8dHNwYW4geD0iMjcuMTM2IiB5PSI2MSI+5aSN5Yi2PC90c3Bhbj4KICAgICAgICAgICAgICAgIDwvdGV4dD4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8cGF0aCBkPSJNNjA0LjUsMjA2IEM2MDUuMjc5Njk2LDIwNiA2MDUuOTIwNDQ5LDIwNi41OTQ4ODggNjA1Ljk5MzEzMywyMDcuMzU1NTQgTDYwNiwyMDcuNSBMNjA2LDIxNC41IEM2MDYsMjE1LjI3OTY5NiA2MDUuNDA1MTEyLDIxNS45MjA0NDkgNjA0LjY0NDQ2LDIxNS45OTMxMzMgTDYwNC41LDIxNiBMNjA0LDIxNiBMNjA0LDIxNi41IEM2MDQsMjE3LjI3OTY5NiA2MDMuNDA1MTEyLDIxNy45MjA0NDkgNjAyLjY0NDQ2LDIxNy45OTMxMzMgTDYwMi41LDIxOCBMNTk1LjUsMjE4IEM1OTQuNjcxNTczLDIxOCA1OTQsMjE3LjMyODQyNyA1OTQsMjE2LjUgTDU5NCwyMTYuNSBMNTk0LDIwOS41IEM1OTQsMjA4LjY3MTU3MyA1OTQuNjcxNTczLDIwOCA1OTUuNSwyMDggTDU5NS41LDIwOCBMNTk2LDIwOCBMNTk2LDIwNy41IEM1OTYsMjA2LjcyMDMwNCA1OTYuNTk0ODg4LDIwNi4wNzk1NTEgNTk3LjM1NTU0LDIwNi4wMDY4NjcgTDU5Ny41LDIwNiBMNjA0LjUsMjA2IFogTTYwMi41LDIwOSBMNTk1LjUsMjA5IEM1OTUuMjIzODU4LDIwOSA1OTUsMjA5LjIyMzg1OCA1OTUsMjA5LjUgTDU5NSwyMDkuNSBMNTk1LDIxNi41IEM1OTUsMjE2Ljc3NjE0MiA1OTUuMjIzODU4LDIxNyA1OTUuNSwyMTcgTDU5NS41LDIxNyBMNjAyLjUsMjE3IEM2MDIuNzc2MTQyLDIxNyA2MDMsMjE2Ljc3NjE0MiA2MDMsMjE2LjUgTDYwMywyMTYuNSBMNjAzLDIwOS41IEM2MDMsMjA5LjIyMzg1OCA2MDIuNzc2MTQyLDIwOSA2MDIuNSwyMDkgTDYwMi41LDIwOSBaIE02MDQuNSwyMDcgTDU5Ny41LDIwNyBDNTk3LjI1NDU0LDIwNyA1OTcuMDUwMzkyLDIwNy4xNzY4NzUgNTk3LjAwODA1NiwyMDcuNDEwMTI0IEw1OTcsMjA3LjUgTDU5NywyMDggTDYwMi41LDIwOCBDNjAzLjI3OTY5NiwyMDggNjAzLjkyMDQ0OSwyMDguNTk0ODg4IDYwMy45OTMxMzMsMjA5LjM1NTU0IEw2MDQsMjA5LjUgTDYwNCwyMTUgTDYwNC41LDIxNSBDNjA0Ljc0NTQ2LDIxNSA2MDQuOTQ5NjA4LDIxNC44MjMxMjUgNjA0Ljk5MTk0NCwyMTQuNTg5ODc2IEw2MDUsMjE0LjUgTDYwNSwyMDcuNSBDNjA1LDIwNy4yNTQ1NCA2MDQuODIzMTI1LDIwNy4wNTAzOTIgNjA0LjU4OTg3NiwyMDcuMDA4MDU2IEw2MDQuNSwyMDcgWiIgaWQ9IuW9oueKtue7k+WQiCIgZmlsbD0iIzcxNzU3RiIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=", de = "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 G {
constructor() {
this.xssWhiteList = oe(), this.cssWhiteList = le(), 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, o, c, i) {
if (!i && (o === "id" || s === "span" && o === "style"))
return o + "=" + c;
}
getXssWhiteList() {
return this.xssWhiteList;
}
setXssWhiteList(s) {
this.xssWhiteList = s;
}
setCustomXssRules(s) {
s && s.forEach((o) => {
o.value === null ? delete this.xssWhiteList[o.key] : this.xssWhiteList[o.key] = o.value;
});
}
setMdPlugins(s, o) {
s && s.length && s.forEach((c) => {
const { plugin: i, opts: h } = c;
o.use(i, h);
});
}
filterHtml(s) {
return ae(s, {
whiteList: this.xssWhiteList,
onIgnoreTagAttr: this.onIgnoreTagAttr,
css: {
whiteList: Object.assign({}, this.cssWhiteList, {
top: !0,
left: !0,
bottom: !0,
right: !0
})
}
});
}
}
const ge = {
key: 0,
class: "mc-code-block-header"
}, ue = { class: "mc-code-lang" }, he = { class: "mc-code-block-actions" }, Me = {
key: 0,
src: re
}, Ie = {
key: 1,
src: de
}, me = { key: 0 }, ye = { key: 0 }, pe = ["innerHTML"], De = /* @__PURE__ */ Q({
__name: "CodeBlock",
props: {
code: {
type: String,
required: !0
},
language: {
type: String,
default: ""
},
blockIndex: {
type: Number,
required: !0
},
theme: {
type: String,
default: "light"
}
},
setup(g) {
const s = g, o = new G(), c = A(!0), i = A(!1), h = x(() => {
try {
const e = s.code.indexOf('<span class="mc-typewriter');
let l;
return s.language && p.getLanguage(s.language) ? e !== -1 ? l = p.highlight(s.code.slice(0, e), { language: s.language }).value + s.code.slice(e) : l = p.highlight(s.code, { language: s.language }).value : typeof p.highlightAuto !== void 0 ? e !== -1 ? l = p.highlightAuto(s.code.slice(0, e)).value + s.code.slice(e) : l = p.highlightAuto(s.code).value : l = o.filterHtml(s.code), l;
} catch {
}
}), M = () => {
c.value = !c.value;
}, w = ne((e) => {
const l = e.target;
if (navigator.clipboard)
navigator.clipboard.writeText(s.code);
else {
const r = document.createElement("textarea");
r.style.position = "fixed", r.style.top = "-9999px", r.style.left = "-9999px", r.style.zIndex = "-1", r.value = s.code, document.body.appendChild(r), r.select(), document.execCommand("copy"), document.body.removeChild(r);
}
l.classList.remove("icon-copy-new"), i.value = !0, setTimeout(() => {
i.value = !1;
}, 1500);
}, 300), I = (e) => {
e.dataset || (e.dataset = {}), e.style.height && (e.dataset.height = e.style.height), e.style.maxHeight = 0;
}, k = (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";
});
}, D = (e) => {
e.style.maxHeight = "", e.style.overflow = e.dataset.oldOverflow;
}, C = (e) => {
e.dataset || (e.dataset = {}), e.dataset.oldOverflow = e.style.overflow, e.style.maxHeight = `${e.scrollHeight}px`, e.style.overflow = "hidden";
}, m = (e) => {
e.scrollHeight !== 0 && (e.style.maxHeight = 0);
}, j = (e) => {
e.style.maxHeight = "", e.style.overflow = e.dataset.oldOverflow;
}, O = x(() => s.theme === "dark" ? "mc-code-block-dark" : "mc-code-block-light");
return (e, l) => (y(), L(
"div",
{
class: S(["mc-code-block", O.value])
},
[
e.$slots.header ? b(e.$slots, "header", { key: 1 }, void 0, !0) : (y(), L("div", ge, [
N(
"span",
ue,
F(g.language),
1
/* TEXT */
),
b(e.$slots, "actions", {}, () => [
N("div", he, [
N("div", {
class: "mc-action-btn mc-toggle-btn",
onClick: M
}, l[1] || (l[1] = [
N(
"img",
{ src: ce },
null,
-1
/* HOISTED */
)
])),
N("div", {
class: "mc-action-btn mc-copy-btn",
onClick: l[0] || (l[0] = //@ts-ignore
(...r) => z(w) && z(w)(...r))
}, [
i.value ? (y(), L("img", Ie)) : (y(), L("img", Me))
])
])
], !0)
])),
R($, {
name: "collapse-transition",
onBeforeEnter: I,
onEnter: k,
onAfterEnter: D,
onBeforeLeave: C,
onLeave: m,
onAfterLeave: j
}, {
default: K(() => [
c.value ? (y(), L("div", me, [
e.$slots.content ? b(e.$slots, "content", { key: 1 }, void 0, !0) : (y(), L("pre", ye, [
N("code", {
class: S(`hljs language-${g.language}`),
innerHTML: h.value
}, null, 10, pe)
]))
])) : P("v-if", !0)
]),
_: 3
/* FORWARDED */
})
],
2
/* CLASS */
));
}
}), Z = (g, s) => {
const o = g.__vccOpts || g;
for (const [c, i] of s)
o[c] = i;
return o;
}, Le = /* @__PURE__ */ Z(De, [["__scopeId", "data-v-e924c33d"]]), _ = {
step: 2,
interval: 50,
style: "normal"
}, Ne = {
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"
}
}, we = /* @__PURE__ */ Q({
__name: "mdCard",
props: Ne,
emits: ["afterMdtInit", "typingStart", "typing", "typingEnd"],
setup(g, { expose: s, emit: o }) {
const c = new G(), i = g, h = o, M = J();
let w = null;
const I = ie({
breaks: !0,
linkify: !0,
html: !0,
highlight: (t, n) => {
if (n && p.getLanguage(n))
try {
return p.highlight(t, { language: n }).value;
} catch {
}
return "";
},
...i.mdOptions
});
I.renderer.rules.fence = (t, n) => `<!----MC_MARKDOWN_CODE_BLOCK_${n}---->`;
const k = A({
tokens: [],
html: ""
}), D = A(0), C = A(!1), m = () => {
var u;
let t = i.content || "";
if (i.typing && C.value) {
t = i.content.slice(0, D.value) || "";
const d = { ..._, ...i == null ? void 0 : i.typingOptions };
d.style === "cursor" ? t += '<span class="mc-typewriter mc-typewriter-cursor">|</span>' : (d.style === "color" || d.style === "gradient") && (t = t.slice(0, -5) + `<span class="mc-typewriter mc-typewriter-${d.style}">${t.slice(-5)}</span>`);
}
if (i.enableThink) {
const d = ((u = i.thinkOptions) == null ? void 0 : u.customClass) || "mc-think-block";
t = (t == null ? void 0 : t.replace("<think>", `<div class="${d}">`).replace("</think>", "</div>")) || "";
}
const n = I.parse(t, {}), a = I.render(t);
k.value = { tokens: n, html: a };
};
T(
() => {
var t;
return [i.enableThink, (t = i.thinkOptions) == null ? void 0 : t.customClass];
},
() => {
m();
}
);
const j = (t, n, a) => {
const u = {
actions: M.actions ? () => M.actions({ codeBlockData: { code: n, language: t } }) || null : void 0,
header: M.header ? () => M.header({ codeBlockData: { code: n, language: t } }) || null : void 0,
content: M.content ? () => M.content({ codeBlockData: { code: n, language: t } }) || null : void 0
};
return f(
Le,
{
language: t,
code: n,
blockIndex: a,
theme: i.theme,
key: `code-block-${a}`
},
u
);
};
T(
() => i.content,
(t, n) => {
if (!i.typing) {
D.value = (t == null ? void 0 : t.length) || 0, m();
return;
}
t.indexOf(n) === -1 && (D.value = 0), V(() => e());
},
{ immediate: !0 }
);
const O = () => {
C.value = !1, h("typingEnd");
}, e = () => {
clearTimeout(w), C.value = !0, h("typingStart");
const t = { ..._, ...i == null ? void 0 : i.typingOptions }, n = () => {
let a = t.step;
if (Array.isArray(t.step) && (a = t.step[0] + Math.floor(Math.random() * (t.step[1] - t.step[0]))), D.value += a, m(), h("typing"), D.value >= i.content.length) {
O(), m();
return;
}
w = setTimeout(n, t.interval);
};
w = setTimeout(n);
}, l = x(() => ({
name: "MarkdownRenderer",
render() {
var W;
if (typeof document > "u")
return f("div");
const { html: t, tokens: n } = k.value, a = [];
let u = 0, d;
const B = /<!----MC_MARKDOWN_CODE_BLOCK_(\d+)---->/g;
let E = 0, U = 0;
for (; d = B.exec(t), !!d; ) {
d.index > u && a.push(
f("div", {
innerHTML: t.slice(u, d.index),
key: `markdown-segment-${U++}`
})
);
const v = n[Number.parseInt(d[1])], H = ((W = v == null ? void 0 : v.info) == null ? void 0 : W.replace(/<span\b[^>]*>/i, "").replace("</span>", "")) || "", X = v.content;
a.push(j(H, X, E)), E++, u = B.lastIndex;
}
return u < t.length && a.push(
f("div", {
innerHTML: t.slice(u),
key: `markdown-segment-${U++}`
})
), f("div", a);
}
}));
T(
() => i.customXssRules,
(t) => {
c.setCustomXssRules(t), m();
},
{ deep: !1 }
), T(
() => i.mdPlugins,
(t) => {
c.setMdPlugins(t, I), m();
},
{ immediate: !0, deep: !1 }
);
const r = x(() => i.theme === "dark" ? "mc-markdown-render-dark" : "mc-markdown-render-light");
return q(() => {
h("afterMdtInit", I);
}), s({ mdt: I }), (t, n) => (y(), L(
ee,
null,
[
N(
"div",
{
class: S(["mc-markdown-render", r.value])
},
[
(y(), te(se(l.value)))
],
2
/* CLASS */
),
P("v-if", !0)
],
64
/* STABLE_FRAGMENT */
));
}
}), Y = /* @__PURE__ */ Z(we, [["__scopeId", "data-v-6987322b"]]);
Y.install = (g) => {
g.component("McMarkdownCard", Y);
};
export {
Y as McMarkdownCard
};