@matechat/ng 17.1.0 → 17.2.0-alpha.0

package/README.md

@@ -3,7 +3,7 @@
     <img alt="MateChat Logo" src="https://matechat.gitcode.com/logo.svg" width="180" style="max-width:100%;">
   </a>
 </p>
-<h1 align="center">MateChat/Angular</h1>
+<h1 align="center">MateChat / Angular</h1>
 <p align="center">前端智能化场景解决方案UI库，轻松构建你的AI应用。已服务于华为内部多个应用智能化改造，并助力CodeArts、InsCode AI IDE等智能化助手搭建。</p>
 
 ![example](https://matechat.gitcode.com/example1.png)
@@ -25,11 +25,11 @@
 如果你还没有新建项目，可以使用 Angular CLI 首先初始化一个`angular`项目：
 
 ```bash
-npm install -g @angular/cli@latest
+$ npm install -g @angular/cli@latest
 
-ng new matechat-demo
+$ ng new matechat-demo
 
-npm i @matechat/ng
+$ npm i @matechat/ng
 ```
 
 ### 2. 引入
@@ -80,6 +80,7 @@ export class AppComponent {}
 </div>
 ```
 
+
 ```ts
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -133,7 +134,6 @@ export class App {
   margin-top: 8px;
 }
 ```
-
 ### 4. 主题化
 
 在`main.ts`中初始化主题
@@ -148,7 +148,6 @@ import { ThemeServiceInit, infinityTheme } from "devui-theme";
 ThemeServiceInit({ infinityTheme }, "infinityTheme");
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
 ```
-
 ## 🧩 对接模型服务
 
 在搭建完成页面后，可以开始对接模型服务，如 `盘古大模型`、`ChatGPT` 等优秀大模型，在注册并生成对应模型的调用API_Key后，可以参考如下方法进行调用：
@@ -156,7 +155,7 @@ bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err))
 1. 通过 npm 安装 openai:
 
 ```bash
-npm install openai
+$ npm install openai
 ```
 
 2. 使用OpenAI初始化并调用模型接口，如下为一段代码示例：

package/fesm2022/matechat-ng.mjs

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { Subject, debounceTime } from 'rxjs';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { DiffDOM } from 'diff-dom';
+import morphdom from 'morphdom';
 import markdownit from 'markdown-it';
 import { getDefaultWhiteList, getDefaultCSSWhiteList, filterXSS } from 'xss';
 import hljs from 'highlight.js';
@@ -923,7 +923,7 @@ class InputComponent extends BaseComponent {
     ngOnInit() {
         this.foundation = new InputFoundation(this.adapter);
         this.foundation.init();
-        this.inputValue = this.value;
+        this.inputValue = this.value || '';
     }
     get adapter() {
         return {
@@ -1639,7 +1639,6 @@ class CodeBlockComponent extends BaseComponent {
             .pipe(debounceTime(300))
             .subscribe(() => this.copyCodeInternal());
         this.foundation = new CodeBlockFoundation(this.adapter);
-        this.diffDom = new DiffDOM();
     }
     get adapter() {
         return {
@@ -1653,8 +1652,7 @@ class CodeBlockComponent extends BaseComponent {
                     const newElement = document.createElement('code');
                     newElement.className = `hljs language-${language}`;
                     newElement.innerHTML = highlightedCode;
-                    const diff = this.diffDom.diff(this.codeElementRef.nativeElement, newElement);
-                    this.diffDom.apply(this.codeElementRef.nativeElement, diff);
+                    morphdom(this.codeElementRef.nativeElement, newElement);
                 }
             },
         };
@@ -1678,6 +1676,7 @@ class CodeBlockComponent extends BaseComponent {
         }
     }
     ngAfterViewInit() {
+        this.updateHighlightedCode();
         if (this.isMermaid) {
             this.renderMermaid();
         }
@@ -1703,7 +1702,9 @@ class CodeBlockComponent extends BaseComponent {
         this.isMermaid = this.foundation.checkIsMermaid();
     }
     updateHighlightedCode() {
-        this.foundation.updateHighlightedCode();
+        setTimeout(() => {
+            this.foundation.updateHighlightedCode();
+        });
     }
     zoomIn() {
         this.foundation.zoomIn();
@@ -2040,6 +2041,26 @@ const tokensToAst = (tokens) => {
     }
     return rootNode.children;
 };
+/**
+ * 递归查找所有层级中 className 包含 code-block-wrapper 的 DIV 节点
+ * @param {Array} vnodes - 待查找的 vnode 列表
+ * @returns {Array} 符合条件的节点列表
+ */
+function findCodeBlockWrappers(vnodes) {
+    const result = [];
+    // 遍历当前层级的 vnode
+    vnodes.forEach((node) => {
+        // 检查当前节点是否符合条件
+        if (node.nodeName === 'DIV' && node.className?.includes('code-block-wrapper')) {
+            result.push(node);
+        }
+        // 递归处理子节点（如果存在子节点且为数组）
+        if (node.childNodes?.length) {
+            result.push(...findCodeBlockWrappers(node.childNodes));
+        }
+    });
+    return result;
+}
 // 声明一个utils静态默认导出
 var MdParserUtils = {
     isSelfClosingTag,
@@ -2047,7 +2068,8 @@ var MdParserUtils = {
     tokensToAst,
     genTreeNode,
     matchHtmlToken,
-    isValidTagName
+    isValidTagName,
+    findCodeBlockWrappers,
 };
 
 class MarkdownCardComponent extends BaseComponent {
@@ -2072,6 +2094,7 @@ class MarkdownCardComponent extends BaseComponent {
         // 组件缓存映射表，用于存储已创建的CodeBlockComponent实例
         this.codeBlockComponentsCache = new Map();
         this.afterMdtInit = new EventEmitter();
+        this.mdRenderChange = new EventEmitter();
         this.typingStart = new EventEmitter();
         this.typingEvent = new EventEmitter();
         this.typingEnd = new EventEmitter();
@@ -2092,21 +2115,6 @@ class MarkdownCardComponent extends BaseComponent {
         });
         this.mdCardService = new MDCardService();
         this.foundation = new MarkdownCardFoundation(this.adapter);
-        // 初始化 diffDom 实例
-        this.diffDom = new DiffDOM({
-            // 配置filterOuterDiff钩子，识别code-block-wrapper元素并直接替换
-            filterOuterDiff: (t1, t2, diffs) => {
-                // 检查是否是class为code-block-wrapper的div元素
-                const isTargetElement = t2.nodeName === 'DIV' &&
-                    t2.attributes &&
-                    t2.attributes.class &&
-                    t2.attributes.class.includes('code-block-wrapper');
-                if (isTargetElement) {
-                    t1.innerDone = true;
-                    t2.innerDone = true;
-                }
-            },
-        });
     }
     ngOnInit() {
         this.mdCardService.setMdPlugins(this.mdPlugins || [], this.mdt);
@@ -2132,28 +2140,35 @@ class MarkdownCardComponent extends BaseComponent {
     }
     ngOnChanges(changes) {
         if (changes['content']) {
-            if (!this.typing) {
-                this.typingIndex = this.content?.length || 0;
-                this.parseContent();
-            }
-            if (this.content.indexOf(changes['content']?.previousValue) === -1) {
-                this.typingIndex = 0;
-            }
-            // 使用setTimeout模拟Vue的nextTick行为
-            setTimeout(() => this.typewriterStart());
+            this.contentChange(changes['content']);
         }
-        if (changes['customXssRules']) {
+        if (changes['customXssRules'] && !changes['customXssRules'].firstChange) {
             this.mdCardService.setCustomXssRules(this.customXssRules || []);
             this.parseContent();
         }
-        if (changes['enableThink'] || changes['thinkOptions'] || changes['theme']) {
+        if ((changes['enableThink'] && !changes['enableThink'].firstChange) ||
+            (changes['thinkOptions'] && !changes['thinkOptions'].firstChange) ||
+            (changes['theme'] && !changes['theme'].firstChange)) {
             this.parseContent();
         }
-        if (changes['mdPlugins']) {
+        if (changes['mdPlugins'] && !changes['mdPlugins'].firstChange) {
             this.mdCardService.setMdPlugins(this.mdPlugins || [], this.mdt);
             this.parseContent();
         }
     }
+    contentChange(change) {
+        if (!this.typing) {
+            this.typingIndex = this.content?.length || 0;
+            this.parseContent();
+        }
+        else {
+            if (this.content.indexOf(change.previousValue) === -1) {
+                this.typingIndex = 0;
+            }
+            // 使用setTimeout模拟Vue的nextTick行为
+            setTimeout(() => this.typewriterStart());
+        }
+    }
     parseContent() {
         this.foundation.parseContent();
     }
@@ -2168,10 +2183,7 @@ class MarkdownCardComponent extends BaseComponent {
         const container = this.markdownContainer.element.nativeElement;
         const parser = new DOMParser();
         const newContainerDiv = parser.parseFromString(`<div></div>`, 'text/html');
-        const codeBlockWrappers = vnodes.filter((node) => {
-            return (node.nodeName === 'DIV' &&
-                node.className?.includes('code-block-wrapper'));
-        });
+        const codeBlockWrappers = this.parser.findCodeBlockWrappers(vnodes);
         vnodes.forEach((node) => {
             if (node &&
                 (node.nodeType ||
@@ -2186,8 +2198,19 @@ class MarkdownCardComponent extends BaseComponent {
             }
         });
         let newContainerDivHTML = newContainerDiv.body?.firstChild?.outerHTML || '';
-        const patches = this.diffDom.diff(container, this.mdCardService.filterHtml(newContainerDivHTML));
-        this.diffDom.apply(container, patches);
+        const filteredHTML = this.mdCardService.filterHtml(newContainerDivHTML);
+        // 使用morphdom进行DOM更新
+        const newElement = document.createElement('div');
+        newElement.innerHTML = filteredHTML;
+        morphdom(container, filteredHTML, {
+            onBeforeElUpdated: (fromEl, toEl) => {
+                // 检查是否是代码块元素
+                if (fromEl.nodeName === 'DIV' && fromEl.classList.contains('code-block-wrapper')) {
+                    return false;
+                }
+                return true;
+            }
+        });
         // 将codeBlockWrappers中的每个div元素替换container中的对应key属性的元素
         codeBlockWrappers.forEach((newCodeBlock) => {
             if (newCodeBlock &&
@@ -2202,6 +2225,7 @@ class MarkdownCardComponent extends BaseComponent {
                 }
             }
         });
+        this.mdRenderChange.emit(newContainerDivHTML);
     }
     getEmptyCodeBlock(node) {
         const codeNode = document.createElement('div');
@@ -2430,7 +2454,7 @@ class MarkdownCardComponent extends BaseComponent {
         this.codeBlockComponentsCache.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: MarkdownCardComponent, isStandalone: false, selector: "mc-markdown-card", inputs: { content: "content", typing: "typing", enableThink: "enableThink", typingOptions: "typingOptions", thinkOptions: "thinkOptions", mdOptions: "mdOptions", mdPlugins: "mdPlugins", customXssRules: "customXssRules", theme: "theme", enableMermaid: "enableMermaid", mermaidConfig: "mermaidConfig", actionsTemplate: "actionsTemplate", headerTemplate: "headerTemplate", contentTemplate: "contentTemplate" }, outputs: { afterMdtInit: "afterMdtInit", typingStart: "typingStart", typingEvent: "typingEvent", typingEnd: "typingEnd" }, viewQueries: [{ propertyName: "markdownContainer", first: true, predicate: ["markdownContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-markdown-render\" [ngClass]=\"theme === 'dark' ? 'mc-markdown-render-dark' : 'mc-markdown-render-light'\">\n  <div #markdownContainer></div>\n</div>\n<ng-content></ng-content>", styles: [".mc-markdown-render ::ng-deep .h1,.mc-markdown-render ::ng-deep .h2,.mc-markdown-render ::ng-deep .h3,.mc-markdown-render ::ng-deep .h4,.mc-markdown-render ::ng-deep .h5,.mc-markdown-render ::ng-deep .h6,.mc-markdown-render ::ng-deep h1,.mc-markdown-render ::ng-deep h2,.mc-markdown-render ::ng-deep h3,.mc-markdown-render ::ng-deep h4,.mc-markdown-render ::ng-deep h5,.mc-markdown-render ::ng-deep h6{line-height:1.1;margin:16px 0 12px}.mc-markdown-render ::ng-deep .h1:first-child,.mc-markdown-render ::ng-deep .h2:first-child,.mc-markdown-render ::ng-deep .h3:first-child,.mc-markdown-render ::ng-deep .h4:first-child,.mc-markdown-render ::ng-deep .h5:first-child,.mc-markdown-render ::ng-deep .h6:first-child,.mc-markdown-render ::ng-deep h1:first-child,.mc-markdown-render ::ng-deep h2:first-child,.mc-markdown-render ::ng-deep h3:first-child,.mc-markdown-render ::ng-deep h4:first-child,.mc-markdown-render ::ng-deep h5:first-child,.mc-markdown-render ::ng-deep h6:first-child{margin-top:0}.mc-markdown-render ::ng-deep h1{font-size:32px;line-height:40px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep h3{line-height:28px;font-size:20px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep caption{border:1px dashed var(--devui-line, #d7d8da);border-bottom:0;padding:3px;text-align:center}.mc-markdown-render ::ng-deep p{overflow-wrap:break-word;margin:0;padding:0;line-height:24px}.mc-markdown-render ::ng-deep p:last-child{margin:0}.mc-markdown-render ::ng-deep ul,.mc-markdown-render ::ng-deep ol{margin:0;padding:0;padding-inline-start:1.75em}.mc-markdown-render ::ng-deep ul>li,.mc-markdown-render ::ng-deep ol>li{line-height:21px}.mc-markdown-render ::ng-deep ul{list-style-type:disc}.mc-markdown-render ::ng-deep ul li::marker{font-size:20px}.mc-markdown-render ::ng-deep ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin-bottom:10px;border-collapse:collapse;display:table}.mc-markdown-render ::ng-deep td,.mc-markdown-render ::ng-deep th{padding:5px 10px;border:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.mc-markdown-render ::ng-deep th{border-top:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-global-bg, #f6f6f8)}.mc-markdown-render ::ng-deep td p{margin:0;padding:0}.mc-markdown-render ::ng-deep blockquote{padding:0 8px;margin:0;color:var(--devui-text-weak, #575d6c);border-left:5px solid var(--devui-dividing-line, #f2f2f3)}.mc-markdown-render ::ng-deep a{color:var(--devui-link, #526ecc);text-decoration:none;cursor:pointer}.mc-markdown-render ::ng-deep a:hover{color:var(--devui-link-active, #526ecc)}.mc-markdown-render ::ng-deep img{max-width:100%}.mc-markdown-render{font-size:var(--devui-font-size, 14px);overflow-x:auto}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-think-block{color:var(--devui-aide-text, #71757f);border-left:1px solid var(--devui-line, #d7d8da);padding-left:8px;margin-bottom:1rem}::ng-deep .mc-typewriter-color{background-image:-webkit-linear-gradient(left,#191919,#5588f0,#e171ee,#f2c55c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-gradient{background:linear-gradient(to right,var(--devui-text, #252b3a),var(--devui-base-bg, #ffffff));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-cursor{font-weight:900;animation:typewriter .8s linear 0s infinite}@keyframes typewriter{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: MarkdownCardComponent, isStandalone: false, selector: "mc-markdown-card", inputs: { content: "content", typing: "typing", enableThink: "enableThink", typingOptions: "typingOptions", thinkOptions: "thinkOptions", mdOptions: "mdOptions", mdPlugins: "mdPlugins", customXssRules: "customXssRules", theme: "theme", enableMermaid: "enableMermaid", mermaidConfig: "mermaidConfig", actionsTemplate: "actionsTemplate", headerTemplate: "headerTemplate", contentTemplate: "contentTemplate" }, outputs: { afterMdtInit: "afterMdtInit", mdRenderChange: "mdRenderChange", typingStart: "typingStart", typingEvent: "typingEvent", typingEnd: "typingEnd" }, viewQueries: [{ propertyName: "markdownContainer", first: true, predicate: ["markdownContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-markdown-render\" [ngClass]=\"theme === 'dark' ? 'mc-markdown-render-dark' : 'mc-markdown-render-light'\">\n  <div #markdownContainer></div>\n</div>\n<ng-content></ng-content>", styles: [".mc-markdown-render ::ng-deep .h1,.mc-markdown-render ::ng-deep .h2,.mc-markdown-render ::ng-deep .h3,.mc-markdown-render ::ng-deep .h4,.mc-markdown-render ::ng-deep .h5,.mc-markdown-render ::ng-deep .h6,.mc-markdown-render ::ng-deep h1,.mc-markdown-render ::ng-deep h2,.mc-markdown-render ::ng-deep h3,.mc-markdown-render ::ng-deep h4,.mc-markdown-render ::ng-deep h5,.mc-markdown-render ::ng-deep h6{line-height:1.1;margin:16px 0 12px}.mc-markdown-render ::ng-deep .h1:first-child,.mc-markdown-render ::ng-deep .h2:first-child,.mc-markdown-render ::ng-deep .h3:first-child,.mc-markdown-render ::ng-deep .h4:first-child,.mc-markdown-render ::ng-deep .h5:first-child,.mc-markdown-render ::ng-deep .h6:first-child,.mc-markdown-render ::ng-deep h1:first-child,.mc-markdown-render ::ng-deep h2:first-child,.mc-markdown-render ::ng-deep h3:first-child,.mc-markdown-render ::ng-deep h4:first-child,.mc-markdown-render ::ng-deep h5:first-child,.mc-markdown-render ::ng-deep h6:first-child{margin-top:0}.mc-markdown-render ::ng-deep h1{font-size:32px;line-height:40px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep h3{line-height:28px;font-size:20px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep caption{border:1px dashed var(--devui-line, #d7d8da);border-bottom:0;padding:3px;text-align:center}.mc-markdown-render ::ng-deep p{overflow-wrap:break-word;margin:0;padding:0;line-height:24px}.mc-markdown-render ::ng-deep p:last-child{margin:0}.mc-markdown-render ::ng-deep ul,.mc-markdown-render ::ng-deep ol{margin:0;padding:0;padding-inline-start:1.75em}.mc-markdown-render ::ng-deep ul>li,.mc-markdown-render ::ng-deep ol>li{line-height:21px}.mc-markdown-render ::ng-deep ul{list-style-type:disc}.mc-markdown-render ::ng-deep ul li::marker{font-size:20px}.mc-markdown-render ::ng-deep ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin-bottom:10px;border-collapse:collapse;display:table}.mc-markdown-render ::ng-deep td,.mc-markdown-render ::ng-deep th{padding:5px 10px;border:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.mc-markdown-render ::ng-deep th{border-top:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-global-bg, #f6f6f8)}.mc-markdown-render ::ng-deep td p{margin:0;padding:0}.mc-markdown-render ::ng-deep blockquote{padding:0 8px;margin:0;color:var(--devui-text-weak, #575d6c);border-left:5px solid var(--devui-dividing-line, #f2f2f3)}.mc-markdown-render ::ng-deep a{color:var(--devui-link, #526ecc);text-decoration:none;cursor:pointer}.mc-markdown-render ::ng-deep a:hover{color:var(--devui-link-active, #526ecc)}.mc-markdown-render ::ng-deep img{max-width:100%}.mc-markdown-render{font-size:var(--devui-font-size, 14px);overflow-x:auto}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-think-block{color:var(--devui-aide-text, #71757f);border-left:1px solid var(--devui-line, #d7d8da);padding-left:8px;margin-bottom:1rem}::ng-deep .mc-typewriter-color{background-image:-webkit-linear-gradient(left,#191919,#5588f0,#e171ee,#f2c55c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-gradient{background:linear-gradient(to right,var(--devui-text, #252b3a),var(--devui-base-bg, #ffffff));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-cursor{font-weight:900;animation:typewriter .8s linear 0s infinite}@keyframes typewriter{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardComponent, decorators: [{
             type: Component,
@@ -2465,6 +2489,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 type: Input
             }], afterMdtInit: [{
                 type: Output
+            }], mdRenderChange: [{
+                type: Output
             }], typingStart: [{
                 type: Output
             }], typingEvent: [{