@blueking/ai-ui-sdk 0.2.0-beta.22 → 0.2.0-beta.23

package/dist/components/render-markdown/katex.ts.js

@@ -0,0 +1,309 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+const defaultKatexOptions = {
+    throwOnError: false,
+    strict: 'ignore',
+    trust: false,
+    output: 'html'
+};
+const CODE_NODE_TYPES = new Set([
+    'code',
+    'codeBlock',
+    'htmlBlock',
+    'htmlInline'
+]);
+function isEscaped(value, index) {
+    let count = 0;
+    let i = index - 1;
+    while(i >= 0 && value[i] === '\\'){
+        count += 1;
+        i -= 1;
+    }
+    return count % 2 === 1;
+}
+function findUnescaped(value, search, fromIndex) {
+    let index = value.indexOf(search, fromIndex);
+    while(index !== -1){
+        if (!isEscaped(value, index)) return index;
+        index = value.indexOf(search, index + search.length);
+    }
+    return -1;
+}
+function isInCodeNode(node) {
+    let current = node;
+    while(current){
+        if (current.type && CODE_NODE_TYPES.has(current.type)) {
+            return true;
+        }
+        current = current.parent;
+    }
+    return false;
+}
+export function normalizeLatex(input, options = {}) {
+    let value = input.trim();
+    if (options.autoEscapePercent !== false) {
+        value = value.replace(/(^|[^\\])%/g, '$1\\%');
+    }
+    return value;
+}
+export function renderKatexToHtml(latex, displayMode = true, options = {}) {
+    return katex.renderToString(normalizeLatex(latex, options), _object_spread(_object_spread_props(_object_spread({}, defaultKatexOptions), {
+        displayMode
+    }), options.katexOptions || {}));
+}
+export function createTuiKatexCustomRenderer(options = {}) {
+    let mathState = null;
+    function toArray(value) {
+        return Array.isArray(value) ? value : [
+            value
+        ];
+    }
+    function findNextOpen(value, fromIndex) {
+        const candidates = [];
+        const dollarBlock = findUnescaped(value, '$$', fromIndex);
+        if (dollarBlock !== -1) {
+            candidates.push({
+                index: dollarBlock,
+                open: '$$',
+                close: '$$',
+                display: true
+            });
+        }
+        const bracketBlock = findUnescaped(value, '\\[', fromIndex);
+        if (bracketBlock !== -1) {
+            candidates.push({
+                index: bracketBlock,
+                open: '\\[',
+                close: '\\]',
+                display: true
+            });
+        }
+        const bracketInline = findUnescaped(value, '\\(', fromIndex);
+        if (bracketInline !== -1) {
+            candidates.push({
+                index: bracketInline,
+                open: '\\(',
+                close: '\\)',
+                display: false
+            });
+        }
+        if (options.enableSingleDollar !== false) {
+            let singleDollar = findUnescaped(value, '$', fromIndex);
+            while(singleDollar !== -1 && (value[singleDollar - 1] === '$' || value[singleDollar + 1] === '$')){
+                singleDollar = findUnescaped(value, '$', singleDollar + 1);
+            }
+            if (singleDollar !== -1) {
+                candidates.push({
+                    index: singleDollar,
+                    open: '$',
+                    close: '$',
+                    display: false
+                });
+            }
+        }
+        if (!candidates.length) return null;
+        return candidates.sort((a, b)=>{
+            if (a.index !== b.index) return a.index - b.index;
+            return b.open.length - a.open.length;
+        })[0];
+    }
+    function processText(value) {
+        let html = '';
+        let index = 0;
+        let hasMath = false;
+        while(index < value.length){
+            if (mathState) {
+                hasMath = true;
+                const closeIndex = findUnescaped(value, mathState.close, index);
+                if (closeIndex === -1) {
+                    mathState.content += value.slice(index);
+                    return {
+                        html,
+                        hasMath
+                    };
+                }
+                mathState.content += value.slice(index, closeIndex);
+                try {
+                    html += renderKatexToHtml(mathState.content, mathState.display, options);
+                } catch (e) {
+                    html += `${mathState.open}${mathState.content}${mathState.close}`;
+                }
+                index = closeIndex + mathState.close.length;
+                mathState = null;
+                continue;
+            }
+            const nextOpen = findNextOpen(value, index);
+            if (!nextOpen) {
+                html += value.slice(index);
+                break;
+            }
+            hasMath = true;
+            html += value.slice(index, nextOpen.index);
+            mathState = {
+                open: nextOpen.open,
+                close: nextOpen.close,
+                display: nextOpen.display,
+                content: ''
+            };
+            index = nextOpen.index + nextOpen.open.length;
+        }
+        return {
+            html,
+            hasMath
+        };
+    }
+    function flushUnclosedMath() {
+        if (!mathState) return '';
+        const raw = `${mathState.open}${mathState.content}`;
+        mathState = null;
+        return raw;
+    }
+    function renderBlock(node) {
+        let html = '';
+        try {
+            html = renderKatexToHtml(node.literal || '', true, options);
+        } catch (error) {
+            html = `<pre><code>${String(error)}</code></pre>`;
+        }
+        return [
+            {
+                type: 'openTag',
+                tagName: 'div',
+                outerNewLine: true,
+                classNames: [
+                    'tui-katex-block'
+                ]
+            },
+            {
+                type: 'html',
+                content: html
+            },
+            {
+                type: 'closeTag',
+                tagName: 'div',
+                outerNewLine: true
+            }
+        ];
+    }
+    const renderer = {
+        paragraph (_node, context) {
+            if (context.entering) {
+                mathState = null;
+                return context.origin();
+            }
+            const pending = flushUnclosedMath();
+            const origin = context.origin();
+            if (!pending) return origin;
+            return [
+                {
+                    type: 'html',
+                    content: pending
+                },
+                ...toArray(origin)
+            ];
+        },
+        text (node) {
+            const value = node.literal || '';
+            if (isInCodeNode(node)) {
+                return {
+                    type: 'text',
+                    content: value
+                };
+            }
+            const result = processText(value);
+            if (!result.hasMath) {
+                return {
+                    type: 'text',
+                    content: value
+                };
+            }
+            return {
+                type: 'html',
+                content: result.html
+            };
+        },
+        softbreak (_node, context) {
+            if (mathState) {
+                mathState.content += '\n';
+                return {
+                    type: 'text',
+                    content: ''
+                };
+            }
+            return context.origin();
+        },
+        linebreak (_node, context) {
+            if (mathState) {
+                mathState.content += '\n';
+                return {
+                    type: 'text',
+                    content: ''
+                };
+            }
+            return context.origin();
+        },
+        /**
+     * 支持 TUI custom block:
+     *
+     * $$katex
+     * \frac{15}{5000}\times 100\%=0.3\%
+     * $$
+     */ katex: renderBlock,
+        /**
+     * 这里 latex 也按数学公式处理，不走 latex.js。
+     */ latex: renderBlock
+    };
+    return renderer;
+}

package/dist/components/render-markdown/view.ts.js

@@ -30,6 +30,7 @@ import { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue';
 import { filterXss } from '@blueking/xss-filter';
 import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
 import { commonConfig } from './common.ts.js';
+import { filterCSS } from './filter-css.ts.js';
 import '@toast-ui/editor/dist/toastui-editor-viewer.css';
 import './view.postcss.css';
 export default defineComponent({
@@ -53,13 +54,14 @@ export default defineComponent({
             viewer = new Viewer(_object_spread({
                 el: viewerRef.value,
                 initialValue: props.value,
-                customHTMLSanitizer: (html)=>filterXss(html, {
+                customHTMLSanitizer: (html)=>filterCSS(filterXss(html, {
                         whiteList: {
                             a: [
                                 'href',
                                 'target',
                                 'class',
-                                'title'
+                                'title',
+                                'rel'
                             ],
                             section: [
                                 'class'
@@ -69,7 +71,13 @@ export default defineComponent({
                             ],
                             span: [
                                 'class',
-                                'data-variable-index'
+                                'style',
+                                'data-variable-index',
+                                'aria-hidden'
+                            ],
+                            div: [
+                                'class',
+                                'style'
                             ],
                             svg: [
                                 'class'
@@ -83,15 +91,58 @@ export default defineComponent({
                             li: [
                                 'class',
                                 'title'
+                            ],
+                            p: [
+                                'class'
+                            ],
+                            br: [],
+                            strong: [
+                                'class'
+                            ],
+                            b: [
+                                'class'
+                            ],
+                            em: [
+                                'class'
+                            ],
+                            code: [
+                                'class'
+                            ],
+                            pre: [
+                                'class'
+                            ],
+                            blockquote: [
+                                'class'
+                            ],
+                            table: [
+                                'class'
+                            ],
+                            thead: [
+                                'class'
+                            ],
+                            tbody: [
+                                'class'
+                            ],
+                            tr: [
+                                'class'
+                            ],
+                            th: [
+                                'class',
+                                'align'
+                            ],
+                            td: [
+                                'class',
+                                'align'
                             ]
                         },
+                        css: false,
                         onTagAttr: (_tag, name, value)=>{
                             if (name === 'data-nodeid') {
                                 return `${name}="${value}"`;
                             }
                             return undefined;
                         }
-                    })
+                    }))
             }, commonConfig));
         };
         const handleDestroy = ()=>{

package/dist/components/render-router-tab/index.vue.css

@@ -1,12 +1,12 @@
 
-.router-tab[data-v-i9x5wla3] {
+.router-tab[data-v-ojhdcext] {
   margin-top: 2px;
   height: 42px;
   background: #FFFFFF;
   box-shadow: 0 2px 4px 0 #1919290d;
   padding: 0 24px;
 }
-.router-tab a[data-v-i9x5wla3] {
+.router-tab a[data-v-ojhdcext] {
     padding: 0 8px;
     margin-right: 24px;
     font-size: 14px;
@@ -15,7 +15,7 @@
     color: #4D4F56;
     box-sizing: border-box;
 }
-.router-tab a.router-link-exact-active[data-v-i9x5wla3] {
+.router-tab a.router-link-exact-active[data-v-ojhdcext] {
       color: #3A84FF;
       border-bottom: 2px solid #3A84FF;
 }

package/dist/components/render-router-tab/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-i9x5wla3";
+script.__scopeId = "data-v-ojhdcext";
 script.__file = "./src/components/render-router-tab/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-t-table/index.vue.css

@@ -1,12 +1,12 @@
 
-.t-t-pagination[data-v-0m307x41] {
+.t-t-pagination[data-v-9tp6er4n] {
   position: relative;
   padding: 16px 16px 0 16px;
 }
-.t-t-pagination[data-v-0m307x41] .bk-pagination-list.is-last {
+.t-t-pagination[data-v-9tp6er4n] .bk-pagination-list.is-last {
     margin-left: auto;
 }
-.pagination-loading[data-v-0m307x41]::after {
+.pagination-loading[data-v-9tp6er4n]::after {
     content: '';
     position: absolute;
     top: 0;
@@ -16,93 +16,93 @@
     background-color: rgba(255, 255, 255, 0.6);
     z-index: 72;
 }
-.pagination-border[data-v-0m307x41] {
+.pagination-border[data-v-9tp6er4n] {
   border-right: 1px solid #dcdee5;
   border-left: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
   padding-bottom: 16px;
 }
-.t-t-table[data-v-0m307x41] {
+.t-t-table[data-v-9tp6er4n] {
   display: inline;
   font-size: 12px;
 }
-.t-t-table[data-v-0m307x41] .t-table__th-cell-inner {
+.t-t-table[data-v-9tp6er4n] .t-table__th-cell-inner {
     color: #313238;
 }
-.t-t-table[data-v-0m307x41] th {
+.t-t-table[data-v-9tp6er4n] th {
     padding: 0 16px;
     height: 42px;
     background-color: #FAFBFD !important;
 }
-.t-t-table[data-v-0m307x41] .t-table__body tr {
+.t-t-table[data-v-9tp6er4n] .t-table__body tr {
     color: #63656e;
     font-size: 12px;
 }
-.t-t-table[data-v-0m307x41] .t-table__body tr td {
+.t-t-table[data-v-9tp6er4n] .t-table__body tr td {
       padding: 0 16px;
       height: 40px;
       background-color: #fff;
 }
-.t-t-table[data-v-0m307x41] .t-table__body tr:hover td {
+.t-t-table[data-v-9tp6er4n] .t-table__body tr:hover td {
     background-color: #f5f7fa !important;
     color: #63656E;
 }
-.t-t-table[data-v-0m307x41] .t-table__content .t-table__body .t-table__empty-row {
+.t-t-table[data-v-9tp6er4n] .t-table__content .t-table__body .t-table__empty-row {
     background-color: #fff !important;
 }
-.t-t-table[data-v-0m307x41] .t-table__content .t-table__body .t-table__empty-row >td {
+.t-t-table[data-v-9tp6er4n] .t-table__content .t-table__body .t-table__empty-row >td {
       border: none;
 }
-.t-t-table[data-v-0m307x41] th .t-table__ellipsis {
+.t-t-table[data-v-9tp6er4n] th .t-table__ellipsis {
     width: auto !important;
 }
-.t-t-table[data-v-0m307x41] .t-loading__gradient.t-icon-loading {
+.t-t-table[data-v-9tp6er4n] .t-loading__gradient.t-icon-loading {
     display: none;
 }
-.t-t-table[data-v-0m307x41]:first-of-type .t-table__affixed-header-elm-wrap{
+.t-t-table[data-v-9tp6er4n]:first-of-type .t-table__affixed-header-elm-wrap{
       width: calc(100% - 6px) !important;
 }
-.t-t-table[data-v-0m307x41] .t-table__affixed-header-elm-wrap>div {
+.t-t-table[data-v-9tp6er4n] .t-table__affixed-header-elm-wrap>div {
       width: 100% !important;
       scrollbar-width: none;
 }
-.t-t-table[data-v-0m307x41] .t-table--layout-fixed{
+.t-t-table[data-v-9tp6er4n] .t-table--layout-fixed{
     width: 100% !important;
 }
-.t-t-table[data-v-0m307x41] .bk-exception-description{
+.t-t-table[data-v-9tp6er4n] .bk-exception-description{
     margin-bottom: 0;
 }
-.t-t-table[data-v-0m307x41] .t-table__content{
+.t-t-table[data-v-9tp6er4n] .t-table__content{
     z-index: 2;
     max-height: 100%;
     overflow: auto;
 }
-.t-t-table[data-v-0m307x41] .t-table__content::-webkit-scrollbar {
+.t-t-table[data-v-9tp6er4n] .t-table__content::-webkit-scrollbar {
       width: 6px;
       height: 6px;
 }
-.t-t-table[data-v-0m307x41] .t-table__content::-webkit-scrollbar-thumb {
+.t-t-table[data-v-9tp6er4n] .t-table__content::-webkit-scrollbar-thumb {
       width: 6px;
       height: 6px;
       border-radius: 3px;
       background-color: #dcdee5;
 }
-.t-t-table[data-v-0m307x41] .t-table__content::-webkit-scrollbar-thumb:hover {
+.t-t-table[data-v-9tp6er4n] .t-table__content::-webkit-scrollbar-thumb:hover {
         background-color: #979ba5;
 }
-.t-t-table[data-v-0m307x41] .t-table__ellipsis.t-text-ellipsis:has(.checkbox){
+.t-t-table[data-v-9tp6er4n] .t-table__ellipsis.t-text-ellipsis:has(.checkbox){
     line-height: 100%;
 }
-.t-t-table[data-v-0m307x41] .t-table__cell--sort-trigger.t-table__double-icons{
+.t-t-table[data-v-9tp6er4n] .t-table__cell--sort-trigger.t-table__double-icons{
     gap: 5px;
 }
-.t-t-table[data-v-0m307x41] .t-table__sort-icon--active>i{
+.t-t-table[data-v-9tp6er4n] .t-table__sort-icon--active>i{
     color: #3a84ff !important;
 }
-.t-t-table[data-v-0m307x41] .t-table__cell--fixed-left:has(.checkbox){
+.t-t-table[data-v-9tp6er4n] .t-table__cell--fixed-left:has(.checkbox){
     line-height: 100%;
 }
-.t-t-table[data-v-0m307x41] .t-table__filter-icon.t-is-focus>span{
+.t-t-table[data-v-9tp6er4n] .t-table__filter-icon.t-is-focus>span{
     color: #3a84ff !important;
 }
 

package/dist/components/render-t-table/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js';
-script.__scopeId = "data-v-0m307x41";
+script.__scopeId = "data-v-9tp6er4n";
 script.__file = "./src/components/render-t-table/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-tag-tree/index.vue.css

@@ -1,28 +1,28 @@
 
-.tag-tree[data-v-hzalychi] {
+.tag-tree[data-v-r7powkgj] {
   font-size: 12px;
   height: auto;
   max-height: calc(100% - 44px);
 }
-.tag-tree .manage-tree-item[data-v-hzalychi] {
+.tag-tree .manage-tree-item[data-v-r7powkgj] {
     height: 32px;
     flex: 1;
 }
-.tag-tree .quick-icon[data-v-hzalychi] {
+.tag-tree .quick-icon[data-v-r7powkgj] {
     margin-left: -24px;
     padding-left: 8px;
 }
-.tag-tree[data-v-hzalychi] .tree-item:has(.bottom-line) {
+.tag-tree[data-v-r7powkgj] .tree-item:has(.bottom-line) {
       border-bottom: 1px solid #F0F1F5;
 }
-.tag-tree[data-v-hzalychi] .tree-item.active .quick-icon {
+.tag-tree[data-v-r7powkgj] .tree-item.active .quick-icon {
         color: #3A84FF;
 }
-.tag-tree[data-v-hzalychi] .tree-item.active .tag-number {
+.tag-tree[data-v-r7powkgj] .tree-item.active .tag-number {
         background: #A3C5FD;
         color: #fff;
 }
-.tag-number[data-v-hzalychi] {
+.tag-number[data-v-r7powkgj] {
   line-height: 16px;
   padding: 0 4px;
   background-color: #F0F1F5;

package/dist/components/render-tag-tree/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-hzalychi";
+script.__scopeId = "data-v-r7powkgj";
 script.__file = "./src/components/render-tag-tree/index.vue";
 import './index.vue.css';
 export default script;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/ai-ui-sdk",
-  "version": "0.2.0-beta.22",
+  "version": "0.2.0-beta.23",
   "description": "蓝鲸AI UI SDK",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -82,6 +82,7 @@
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "bkui-vue": "*",
     "dayjs": "^1.11.13",
+    "katex": "^0.16.45",
     "prismjs": "^1.30.0",
     "tdesign-vue-next": "^1.16.0",
     "tippy.js": "^6.3.7",