@matechat/ng 0.0.1-alpha.0 → 20.0.1-alpha.0

package/fesm2022/matechat-ng.mjs

@@ -1,10 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Injectable, Pipe, ContentChild, NgModule, EventEmitter, HostListener, ViewChild, Output } from '@angular/core';
+import { Component, Input, Injectable, Pipe, ContentChildren, ContentChild, NgModule, EventEmitter, HostListener, ViewChild, Output, ViewChildren, ViewContainerRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
+import { Subject, debounceTime } from 'rxjs';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { DiffDOM } from 'diff-dom';
+import markdownit from 'markdown-it';
+import { getDefaultWhiteList, getDefaultCSSWhiteList, filterXSS } from 'xss';
+import hljs from 'highlight.js';
 
 class BubbleLoadingComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BubbleLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -49,6 +53,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }] } });
 
+var zhCN = {
+    Input: {
+        send: "发送",
+        pauseAnswer: "停止回答",
+        pleaseEnter: "请输入您的问题...",
+        pleaseEnterPlaceholder: "请输入您的问题，并按{enterKey}发送，按{shiftEnterKey}换行",
+        ariaLabel: "输入框",
+    },
+    Md: {
+        toggle: "收起/展开",
+        copy: "复制",
+        diagram: '图形',
+        code: '代码',
+        zoomIn: '放大',
+        zoomOut: '缩小',
+        downLoad: '下载',
+    },
+    Bubble: {
+        ariaLabel: "聊天消息气泡",
+        emptyAvatar: "无头像占位",
+        userName: "用户名称: {name}",
+        content: "消息内容",
+        avatar: "用户头像: {name}"
+    },
+};
+
+var enUS = {
+    Input: {
+        send: "Send",
+        pauseAnswer: "Stop",
+        pleaseEnter: "Please enter your question...",
+        pleaseEnterPlaceholder: "Please enter your question and press {enterKey} to send, {shiftEnterKey} to wrap.",
+        ariaLabel: "Input box",
+    },
+    Md: {
+        toggle: "Collapse/Expand",
+        copy: "Copy",
+        diagram: 'Diagram',
+        code: 'Code',
+        zoomIn: 'Zoom In',
+        zoomOut: 'Zoom Out',
+        downLoad: 'Download',
+    },
+    Bubble: {
+        ariaLabel: "Chat message bubble",
+        emptyAvatar: "Empty avatar placeholder",
+        userName: "User name: {name}",
+        content: "Message content",
+        avatar: "User avatar: {name}"
+    },
+};
+
 class LocaleService {
     constructor() {
         // 当前语言
@@ -73,10 +129,8 @@ class LocaleService {
     async loadDefaultLocales() {
         try {
             // 动态导入默认语言包
-            const zhCN = await import('./matechat-ng-zh-cn--_YVZHnW.mjs');
-            const enUS = await import('./matechat-ng-en-us-DsYnUbZd.mjs');
-            this._localeData.set('zh-cn', zhCN.default);
-            this._localeData.set('en-us', enUS.default);
+            this._localeData.set('zh-cn', zhCN);
+            this._localeData.set('en-us', enUS);
         }
         catch (error) {
             console.error('Failed to load default locales:', error);
@@ -394,6 +448,9 @@ class BaseFoundation {
     setCache(key, value) {
         return key && this._adapter.setCache(key, value);
     }
+    nextTick(cb) {
+        return this._adapter.nextTick(cb);
+    }
     _isInProps(key) {
         const props = this.getProps();
         return key in props;
@@ -432,7 +489,6 @@ class BubbleFoundation extends BaseFoundation {
 
 class BaseComponent {
     constructor() {
-        this.foundation = null;
     }
     ngOnDestroy() {
         this.foundation &&
@@ -460,6 +516,7 @@ class BaseComponent {
             getCache: (key) => key && this.cache[key],
             getCaches: () => this.cache,
             setCache: (key, value) => key && (this.cache[key] = value),
+            nextTick: (cb) => setTimeout(cb, 0),
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -475,6 +532,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
         }], ctorParameters: () => [] });
 
 class BubbleComponent extends BaseComponent {
+    // 计算是否有内容投影
+    get ngContentProjected() {
+        return this.contentChildren && this.contentChildren.length > 0;
+    }
     constructor() {
         super();
         // 组件属性
@@ -484,9 +545,9 @@ class BubbleComponent extends BaseComponent {
         this.avatarPosition = 'side';
         this.variant = 'filled';
         // 内容投影模板引用
+        this.avatarTemplate = null;
         this.topTemplate = null;
         this.loadingTplTemplate = null;
-        this.defaultTemplate = null;
         this.bottomTemplate = null;
     }
     ngOnInit() {
@@ -516,11 +577,11 @@ class BubbleComponent extends BaseComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BubbleComponent, isStandalone: true, selector: "mc-bubble", inputs: { content: "content", loading: "loading", align: "align", avatarPosition: "avatarPosition", variant: "variant", avatarConfig: "avatarConfig" }, queries: [{ propertyName: "topTemplate", first: true, predicate: ["top"], descendants: true }, { propertyName: "loadingTplTemplate", first: true, predicate: ["loadingTpl"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "bottomTemplate", first: true, predicate: ["bottom"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-bubble\" [ngClass]=\"bubbleClasses\" role=\"group\" [attr.aria-label]=\"'Bubble.ariaLabel' | translate\">\n  <div\n    *ngIf=\"avatarConfig\"\n    class=\"mc-bubble-avatar\" role=\"img\"\n    [ngClass]=\"{ 'empty-avatar': isEmptyAvatar }\"\n  >\n    <mc-avatar\n      *ngIf=\"!isEmptyAvatar\"\n      [imgSrc]=\"avatarConfig?.imgSrc || ''\"\n      [name]=\"avatarConfig?.name || ''\"\n      [width]=\"avatarConfig?.width || 36\"\n      [height]=\"avatarConfig?.height || 36\"\n      [gender]=\"avatarConfig?.gender || ''\"\n    />\n    <div *ngIf=\"isEmptyAvatar\"    class=\"mc-bubble-avatar-wrapper\" [attr.aria-label]=\"'Bubble.emptyAvatar' | translate\"\n         [style.width.px]=\"avatarConfig?.width || 36\"\n         [style.height.px]=\"avatarConfig?.height || 36\"></div>\n    <span *ngIf=\"avatarPosition === 'top'\" class=\"mc-bubble-avatar-name\" [attr.aria-label]=\"'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } \">{{\n      avatarConfig?.displayName\n    }}</span>\n  </div>\n  <div\n    class=\"mc-bubble-content-container\" aria-live=\"polite\"\n    [ngClass]=\"{ 'with-avatar': avatarConfig }\"\n  >\n    <!-- \u9876\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"topTemplate\"></ng-container>\n      <ng-content select=\"[top]\"></ng-content>\n    </ng-container>\n    \n    <!-- \u52A0\u8F7D\u72B6\u6001 -->\n    <div *ngIf=\"loading\" class=\"loading-container\" role=\"status\" aria-busy=\"true\">\n      <ng-container *ngIf=\"loadingTplTemplate; else defaultLoadingTemplate\">\n        <ng-container *ngTemplateOutlet=\"loadingTplTemplate\"></ng-container>\n        <ng-content select=\"[loadingTpl]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultLoadingTemplate>\n        <mc-bubble-loading></mc-bubble-loading>\n      </ng-template>\n    </div>\n    \n    <!-- \u4E3B\u8981\u5185\u5BB9 -->\n    <div\n      *ngIf=\"(defaultTemplate || content) && !loading\"\n      class=\"mc-bubble-content\"\n      [ngClass]=\"[variant]\"\n      role=\"region\"\n    >\n      <ng-container *ngIf=\"defaultTemplate; else contentTemplate\">\n        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n      <ng-template #contentTemplate>\n        <span [attr.aria-label]=\"'Bubble.content' | translate\">{{ content }}</span>\n      </ng-template>\n    </div>\n    \n    <!-- \u5E95\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"bottomTemplate\"></ng-container>\n      <ng-content select=\"[bottom]\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-bubble{display:flex;gap:4px;font-size:var(--devui-font-size, 14px)}.mc-bubble .mc-bubble-content{word-wrap:break-word}.mc-bubble .mc-bubble-content.filled,.mc-bubble .mc-bubble-content.bordered{padding:12px 16px;border-radius:12px}.mc-bubble .mc-bubble-content.filled{background-color:var(--devui-global-bg, #f6f6f8)}.mc-bubble .mc-bubble-content.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-bubble .mc-bubble-avatar{flex-shrink:0;display:flex;gap:4px}.mc-bubble .mc-bubble-avatar .mc-bubble-avatar-name{font-size:14px}.mc-bubble .mc-bubble-avatar.empty-avatar{visibility:hidden}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar{align-items:center}.mc-bubble .mc-bubble-content-container{max-width:100%}.mc-bubble.mc-bubble-avatar-top{flex-direction:column}.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{align-items:flex-start;flex-direction:column}.mc-bubble.mc-bubble-loading.mc-bubble-avatar-side{align-items:center}.mc-bubble.mc-bubble-avatar-side.mc-bubble-right{flex-direction:row-reverse;justify-content:end}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{display:flex}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-content-container{align-items:flex-end}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar{flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BubbleLoadingComponent, selector: "mc-bubble-loading" }, { kind: "component", type: AvatarComponent, selector: "mc-avatar", inputs: ["imgSrc", "name", "width", "height", "isRound", "gender"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BubbleComponent, isStandalone: true, selector: "mc-bubble", inputs: { content: "content", loading: "loading", align: "align", avatarPosition: "avatarPosition", variant: "variant", avatarConfig: "avatarConfig" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true }, { propertyName: "topTemplate", first: true, predicate: ["top"], descendants: true }, { propertyName: "loadingTplTemplate", first: true, predicate: ["loadingTpl"], descendants: true }, { propertyName: "bottomTemplate", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "contentChildren", predicate: ["ng-content"] }], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-bubble\" [ngClass]=\"bubbleClasses\" role=\"group\" [attr.aria-label]=\"'Bubble.ariaLabel' | translate\">\n  <!-- \u81EA\u5B9A\u4E49\u5934\u50CF\u533A\u57DF -->\n  <div *ngIf=\"avatarTemplate\" class=\"mc-bubble-avatar\" role=\"img\">\n    <ng-container *ngTemplateOutlet=\"avatarTemplate\"></ng-container>\n    <ng-content select=\"[avatar]\"></ng-content>\n  </div>\n  \n  <!-- \u9ED8\u8BA4\u5934\u50CF\u914D\u7F6E -->\n  <div *ngIf=\"!avatarTemplate && avatarConfig\"\n    class=\"mc-bubble-avatar\" role=\"img\"\n    [ngClass]=\"{ 'empty-avatar': isEmptyAvatar }\"\n  >\n    <mc-avatar\n      *ngIf=\"!isEmptyAvatar\"\n      [imgSrc]=\"avatarConfig?.imgSrc || ''\"\n      [name]=\"avatarConfig?.name || ''\"\n      [width]=\"avatarConfig?.width || 36\"\n      [height]=\"avatarConfig?.height || 36\"\n      [gender]=\"avatarConfig?.gender || ''\"\n    />\n    <div *ngIf=\"isEmptyAvatar\"    class=\"mc-bubble-avatar-wrapper\" [attr.aria-label]=\"'Bubble.emptyAvatar' | translate\"\n         [style.width.px]=\"avatarConfig?.width || 36\"\n         [style.height.px]=\"avatarConfig?.height || 36\"></div>\n    <span *ngIf=\"avatarPosition === 'top'\" class=\"mc-bubble-avatar-name\" [attr.aria-label]=\"'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } \">{{\n      avatarConfig?.displayName\n    }}</span>\n  </div>\n  <div\n    class=\"mc-bubble-content-container\" aria-live=\"polite\"\n    [ngClass]=\"{ 'with-avatar': avatarTemplate || avatarConfig }\"\n  >\n    <!-- \u9876\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"topTemplate\"></ng-container>\n      <ng-content select=\"[top]\"></ng-content>\n    </ng-container>\n    \n    <!-- \u52A0\u8F7D\u72B6\u6001 -->\n    <div *ngIf=\"loading\" class=\"loading-container\" role=\"status\" aria-busy=\"true\">\n      <ng-container *ngIf=\"loadingTplTemplate; else defaultLoadingTemplate\">\n        <ng-container *ngTemplateOutlet=\"loadingTplTemplate\"></ng-container>\n        <ng-content select=\"[loadingTpl]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultLoadingTemplate>\n        <mc-bubble-loading></mc-bubble-loading>\n      </ng-template>\n    </div>\n    \n    <!-- \u4E3B\u8981\u5185\u5BB9 -->\n    <div\n      *ngIf=\"!loading\"\n      class=\"mc-bubble-content\"\n      [ngClass]=\"[variant]\"\n      role=\"region\"\n    >\n      <ng-content></ng-content>\n      <ng-container *ngIf=\"content && !ngContentProjected\">\n        <span [attr.aria-label]=\"'Bubble.content' | translate\">{{ content }}</span>\n      </ng-container>\n    </div>\n    \n    <!-- \u5E95\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"bottomTemplate\"></ng-container>\n      <ng-content select=\"[bottom]\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-bubble{display:flex;gap:4px;font-size:var(--devui-font-size, 14px)}.mc-bubble .mc-bubble-content{word-wrap:break-word}.mc-bubble .mc-bubble-content.filled,.mc-bubble .mc-bubble-content.bordered{padding:12px 16px;border-radius:12px}.mc-bubble .mc-bubble-content.filled{background-color:var(--devui-global-bg, #f6f6f8)}.mc-bubble .mc-bubble-content.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-bubble .mc-bubble-avatar{flex-shrink:0;display:flex;gap:4px}.mc-bubble .mc-bubble-avatar .mc-bubble-avatar-name{font-size:14px}.mc-bubble .mc-bubble-avatar.empty-avatar{visibility:hidden}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar{align-items:center}.mc-bubble .mc-bubble-content-container{max-width:100%}.mc-bubble.mc-bubble-avatar-top{flex-direction:column}.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{align-items:flex-start;flex-direction:column}.mc-bubble.mc-bubble-loading.mc-bubble-avatar-side{align-items:center}.mc-bubble.mc-bubble-avatar-side.mc-bubble-right{flex-direction:row-reverse;justify-content:end}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{display:flex}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-content-container{align-items:flex-end}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar{flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BubbleLoadingComponent, selector: "mc-bubble-loading" }, { kind: "component", type: AvatarComponent, selector: "mc-avatar", inputs: ["imgSrc", "name", "width", "height", "isRound", "gender"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BubbleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mc-bubble', standalone: true, imports: [CommonModule, BubbleLoadingComponent, AvatarComponent, TranslatePipe], template: "<div class=\"mc-bubble\" [ngClass]=\"bubbleClasses\" role=\"group\" [attr.aria-label]=\"'Bubble.ariaLabel' | translate\">\n  <div\n    *ngIf=\"avatarConfig\"\n    class=\"mc-bubble-avatar\" role=\"img\"\n    [ngClass]=\"{ 'empty-avatar': isEmptyAvatar }\"\n  >\n    <mc-avatar\n      *ngIf=\"!isEmptyAvatar\"\n      [imgSrc]=\"avatarConfig?.imgSrc || ''\"\n      [name]=\"avatarConfig?.name || ''\"\n      [width]=\"avatarConfig?.width || 36\"\n      [height]=\"avatarConfig?.height || 36\"\n      [gender]=\"avatarConfig?.gender || ''\"\n    />\n    <div *ngIf=\"isEmptyAvatar\"    class=\"mc-bubble-avatar-wrapper\" [attr.aria-label]=\"'Bubble.emptyAvatar' | translate\"\n         [style.width.px]=\"avatarConfig?.width || 36\"\n         [style.height.px]=\"avatarConfig?.height || 36\"></div>\n    <span *ngIf=\"avatarPosition === 'top'\" class=\"mc-bubble-avatar-name\" [attr.aria-label]=\"'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } \">{{\n      avatarConfig?.displayName\n    }}</span>\n  </div>\n  <div\n    class=\"mc-bubble-content-container\" aria-live=\"polite\"\n    [ngClass]=\"{ 'with-avatar': avatarConfig }\"\n  >\n    <!-- \u9876\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"topTemplate\"></ng-container>\n      <ng-content select=\"[top]\"></ng-content>\n    </ng-container>\n    \n    <!-- \u52A0\u8F7D\u72B6\u6001 -->\n    <div *ngIf=\"loading\" class=\"loading-container\" role=\"status\" aria-busy=\"true\">\n      <ng-container *ngIf=\"loadingTplTemplate; else defaultLoadingTemplate\">\n        <ng-container *ngTemplateOutlet=\"loadingTplTemplate\"></ng-container>\n        <ng-content select=\"[loadingTpl]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultLoadingTemplate>\n        <mc-bubble-loading></mc-bubble-loading>\n      </ng-template>\n    </div>\n    \n    <!-- \u4E3B\u8981\u5185\u5BB9 -->\n    <div\n      *ngIf=\"(defaultTemplate || content) && !loading\"\n      class=\"mc-bubble-content\"\n      [ngClass]=\"[variant]\"\n      role=\"region\"\n    >\n      <ng-container *ngIf=\"defaultTemplate; else contentTemplate\">\n        <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n      <ng-template #contentTemplate>\n        <span [attr.aria-label]=\"'Bubble.content' | translate\">{{ content }}</span>\n      </ng-template>\n    </div>\n    \n    <!-- \u5E95\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"bottomTemplate\"></ng-container>\n      <ng-content select=\"[bottom]\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-bubble{display:flex;gap:4px;font-size:var(--devui-font-size, 14px)}.mc-bubble .mc-bubble-content{word-wrap:break-word}.mc-bubble .mc-bubble-content.filled,.mc-bubble .mc-bubble-content.bordered{padding:12px 16px;border-radius:12px}.mc-bubble .mc-bubble-content.filled{background-color:var(--devui-global-bg, #f6f6f8)}.mc-bubble .mc-bubble-content.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-bubble .mc-bubble-avatar{flex-shrink:0;display:flex;gap:4px}.mc-bubble .mc-bubble-avatar .mc-bubble-avatar-name{font-size:14px}.mc-bubble .mc-bubble-avatar.empty-avatar{visibility:hidden}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar{align-items:center}.mc-bubble .mc-bubble-content-container{max-width:100%}.mc-bubble.mc-bubble-avatar-top{flex-direction:column}.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{align-items:flex-start;flex-direction:column}.mc-bubble.mc-bubble-loading.mc-bubble-avatar-side{align-items:center}.mc-bubble.mc-bubble-avatar-side.mc-bubble-right{flex-direction:row-reverse;justify-content:end}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{display:flex}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-content-container{align-items:flex-end}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar{flex-direction:row-reverse}\n"] }]
+            args: [{ selector: 'mc-bubble', standalone: true, imports: [CommonModule, BubbleLoadingComponent, AvatarComponent, TranslatePipe], template: "<div class=\"mc-bubble\" [ngClass]=\"bubbleClasses\" role=\"group\" [attr.aria-label]=\"'Bubble.ariaLabel' | translate\">\n  <!-- \u81EA\u5B9A\u4E49\u5934\u50CF\u533A\u57DF -->\n  <div *ngIf=\"avatarTemplate\" class=\"mc-bubble-avatar\" role=\"img\">\n    <ng-container *ngTemplateOutlet=\"avatarTemplate\"></ng-container>\n    <ng-content select=\"[avatar]\"></ng-content>\n  </div>\n  \n  <!-- \u9ED8\u8BA4\u5934\u50CF\u914D\u7F6E -->\n  <div *ngIf=\"!avatarTemplate && avatarConfig\"\n    class=\"mc-bubble-avatar\" role=\"img\"\n    [ngClass]=\"{ 'empty-avatar': isEmptyAvatar }\"\n  >\n    <mc-avatar\n      *ngIf=\"!isEmptyAvatar\"\n      [imgSrc]=\"avatarConfig?.imgSrc || ''\"\n      [name]=\"avatarConfig?.name || ''\"\n      [width]=\"avatarConfig?.width || 36\"\n      [height]=\"avatarConfig?.height || 36\"\n      [gender]=\"avatarConfig?.gender || ''\"\n    />\n    <div *ngIf=\"isEmptyAvatar\"    class=\"mc-bubble-avatar-wrapper\" [attr.aria-label]=\"'Bubble.emptyAvatar' | translate\"\n         [style.width.px]=\"avatarConfig?.width || 36\"\n         [style.height.px]=\"avatarConfig?.height || 36\"></div>\n    <span *ngIf=\"avatarPosition === 'top'\" class=\"mc-bubble-avatar-name\" [attr.aria-label]=\"'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } \">{{\n      avatarConfig?.displayName\n    }}</span>\n  </div>\n  <div\n    class=\"mc-bubble-content-container\" aria-live=\"polite\"\n    [ngClass]=\"{ 'with-avatar': avatarTemplate || avatarConfig }\"\n  >\n    <!-- \u9876\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"topTemplate\"></ng-container>\n      <ng-content select=\"[top]\"></ng-content>\n    </ng-container>\n    \n    <!-- \u52A0\u8F7D\u72B6\u6001 -->\n    <div *ngIf=\"loading\" class=\"loading-container\" role=\"status\" aria-busy=\"true\">\n      <ng-container *ngIf=\"loadingTplTemplate; else defaultLoadingTemplate\">\n        <ng-container *ngTemplateOutlet=\"loadingTplTemplate\"></ng-container>\n        <ng-content select=\"[loadingTpl]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultLoadingTemplate>\n        <mc-bubble-loading></mc-bubble-loading>\n      </ng-template>\n    </div>\n    \n    <!-- \u4E3B\u8981\u5185\u5BB9 -->\n    <div\n      *ngIf=\"!loading\"\n      class=\"mc-bubble-content\"\n      [ngClass]=\"[variant]\"\n      role=\"region\"\n    >\n      <ng-content></ng-content>\n      <ng-container *ngIf=\"content && !ngContentProjected\">\n        <span [attr.aria-label]=\"'Bubble.content' | translate\">{{ content }}</span>\n      </ng-container>\n    </div>\n    \n    <!-- \u5E95\u90E8\u5185\u5BB9\u6295\u5F71 -->\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngTemplateOutlet=\"bottomTemplate\"></ng-container>\n      <ng-content select=\"[bottom]\"></ng-content>\n    </ng-container>\n  </div>\n</div>\n", styles: [".mc-bubble{display:flex;gap:4px;font-size:var(--devui-font-size, 14px)}.mc-bubble .mc-bubble-content{word-wrap:break-word}.mc-bubble .mc-bubble-content.filled,.mc-bubble .mc-bubble-content.bordered{padding:12px 16px;border-radius:12px}.mc-bubble .mc-bubble-content.filled{background-color:var(--devui-global-bg, #f6f6f8)}.mc-bubble .mc-bubble-content.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-bubble .mc-bubble-avatar{flex-shrink:0;display:flex;gap:4px}.mc-bubble .mc-bubble-avatar .mc-bubble-avatar-name{font-size:14px}.mc-bubble .mc-bubble-avatar.empty-avatar{visibility:hidden}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar{align-items:center}.mc-bubble .mc-bubble-content-container{max-width:100%}.mc-bubble.mc-bubble-avatar-top{flex-direction:column}.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{align-items:flex-start;flex-direction:column}.mc-bubble.mc-bubble-loading.mc-bubble-avatar-side{align-items:center}.mc-bubble.mc-bubble-avatar-side.mc-bubble-right{flex-direction:row-reverse;justify-content:end}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{display:flex}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-content-container{align-items:flex-end}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar{flex-direction:row-reverse}\n"] }]
         }], ctorParameters: () => [], propDecorators: { content: [{
                 type: Input
             }], loading: [{
@@ -533,18 +594,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }], avatarConfig: [{
                 type: Input
+            }], avatarTemplate: [{
+                type: ContentChild,
+                args: ['avatar']
             }], topTemplate: [{
                 type: ContentChild,
                 args: ['top']
             }], loadingTplTemplate: [{
                 type: ContentChild,
                 args: ['loadingTpl']
-            }], defaultTemplate: [{
-                type: ContentChild,
-                args: ['defaultTemplate']
             }], bottomTemplate: [{
                 type: ContentChild,
                 args: ['bottom']
+            }], contentChildren: [{
+                type: ContentChildren,
+                args: ['ng-content']
             }] } });
 
 class BubbleModule {
@@ -791,7 +855,6 @@ class InputFoundation extends BaseFoundation {
         this._adapter.emitChange();
     }
     emitChange() {
-        console.log('emitChange---2');
         this._adapter.emitChange();
     }
     submit(inputValue) {
@@ -819,6 +882,11 @@ class InputFoundation extends BaseFoundation {
     }
 }
 
+// 默认的autosize配置
+const DEFAULT_AUTOSIZE = {
+    minRows: 1,
+    maxRows: 5
+};
 // 创建一个token用于组件间通信
 const inputContextToken = 'input-context';
 class InputComponent extends BaseComponent {
@@ -836,6 +904,9 @@ class InputComponent extends BaseComponent {
         this.maxLength = null;
         this.submitShortKey = SubmitShortKey.Enter;
         this.autofocus = false;
+        this.autosize = false;
+        // textarea样式
+        this.textareaStyle = {};
         this.change = new EventEmitter();
         this.submit = new EventEmitter();
         this.cancel = new EventEmitter();
@@ -873,6 +944,12 @@ class InputComponent extends BaseComponent {
     ngOnChanges(changes) {
         if (changes['value']) {
             this.inputValue = changes['value']?.currentValue || '';
+            // 值变化时更新textarea样式
+            this.updateTextareaStyle();
+        }
+        if (changes['autosize']) {
+            // autosize配置变化时更新textarea样式
+            this.updateTextareaStyle();
         }
     }
     get inputClasses() {
@@ -884,6 +961,8 @@ class InputComponent extends BaseComponent {
     onInput() {
         if (!this.lock) {
             this.foundation.emitChange();
+            // 输入时更新textarea样式
+            this.updateTextareaStyle();
         }
     }
     onCompositionStart() {
@@ -920,6 +999,92 @@ class InputComponent extends BaseComponent {
                 this.textareaElement.nativeElement.focus();
             });
         }
+        // 初始化时更新textarea样式
+        this.updateTextareaStyle();
+    }
+    // 更新textarea样式
+    updateTextareaStyle() {
+        if (!this.textareaElement || this.autosize === false) {
+            this.textareaStyle = {};
+            return;
+        }
+        const config = this.getAutosizeConfig();
+        const result = this.computeTextareaHeight(this.textareaElement.nativeElement, config.minRows, config.maxRows);
+        this.textareaStyle = {
+            ...result,
+            resize: 'none'
+        };
+    }
+    // 获取autosize配置
+    getAutosizeConfig() {
+        return typeof this.autosize === 'boolean'
+            ? DEFAULT_AUTOSIZE
+            : this.autosize;
+    }
+    // 计算textarea高度
+    computeTextareaHeight(targetElement, minRows = 1, maxRows) {
+        const style = window.getComputedStyle(targetElement);
+        const boxSizing = style.getPropertyValue('box-sizing');
+        const paddingSize = Number.parseFloat(style.getPropertyValue('padding-top')) +
+            Number.parseFloat(style.getPropertyValue('padding-bottom'));
+        const borderSize = Number.parseFloat(style.getPropertyValue('border-top-width')) +
+            Number.parseFloat(style.getPropertyValue('border-bottom-width'));
+        // 创建临时textarea元素
+        const tempTextarea = document.createElement('textarea');
+        const sizingStyle = [
+            'letter-spacing', 'line-height', 'padding-top', 'padding-bottom',
+            'font-family', 'font-weight', 'font-size', 'font-variant',
+            'text-rendering', 'text-transform', 'width', 'text-indent',
+            'padding-left', 'padding-right', 'border-width', 'box-sizing',
+            'word-break', 'white-space'
+        ];
+        const contextStyle = sizingStyle
+            .map(name => `${name}:${style.getPropertyValue(name)}`)
+            .join(';');
+        const hiddenStyle = `
+      min-height:0 !important;
+      max-height:none !important;
+      height:0 !important;
+      visibility:hidden !important;
+      overflow:hidden !important;
+      position:absolute !important;
+      z-index:-1000 !important;
+      top:0 !important;
+      right:0 !important;
+      pointer-events:none !important;
+    `;
+        tempTextarea.setAttribute('style', `${contextStyle};${hiddenStyle}`);
+        tempTextarea.value = targetElement.value || targetElement.placeholder || '';
+        document.body.appendChild(tempTextarea);
+        let height = tempTextarea.scrollHeight;
+        const result = {
+            height: `${height}px`
+        };
+        if (minRows !== undefined || maxRows !== undefined) {
+            tempTextarea.value = ' ';
+            const singleRowHeight = tempTextarea.scrollHeight - paddingSize;
+            if (minRows !== undefined) {
+                let minHeight = singleRowHeight * minRows;
+                if (boxSizing === 'border-box') {
+                    minHeight = minHeight + paddingSize + borderSize;
+                }
+                height = Math.max(minHeight, height);
+                result['minHeight'] = `${minHeight}px`;
+            }
+            if (maxRows !== undefined) {
+                let maxHeight = singleRowHeight * maxRows;
+                if (boxSizing === 'border-box') {
+                    maxHeight = maxHeight + paddingSize + borderSize;
+                }
+                if (height > maxHeight) {
+                    height = maxHeight;
+                    result['overflowY'] = 'auto';
+                }
+            }
+        }
+        document.body.removeChild(tempTextarea);
+        result['height'] = `${height}px`;
+        return result;
     }
     get placeholderText() {
         return this.foundation.getPlaceholderText();
@@ -931,11 +1096,11 @@ class InputComponent extends BaseComponent {
         this.blur.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InputComponent, deps: [{ token: LocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: InputComponent, isStandalone: true, selector: "mc-input", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", displayType: "displayType", variant: "variant", sendBtnVariant: "sendBtnVariant", loading: "loading", showCount: "showCount", maxLength: "maxLength", submitShortKey: "submitShortKey", autofocus: "autofocus" }, outputs: { change: "change", submit: "submit", cancel: "cancel", focus: "focus", blur: "blur" }, providers: [{ provide: inputContextToken, useExisting: InputComponent }], queries: [{ propertyName: "headTemplate", first: true, predicate: ["head"], descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: ["prefix"], descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: ["suffix"], descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ["button"], descendants: true }, { propertyName: "extraTemplate", first: true, predicate: ["extra"], descendants: true }], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"inputClasses\">\n  <ng-container *ngIf=\"headTemplate; then headTemplate\"></ng-container>\n\n  <div class=\"mc-input-content\">\n    <ng-container *ngIf=\"prefixTemplate; then prefixTemplate\"></ng-container>\n\n    <textarea\n      #textarea\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"placeholderText\"\n      [disabled]=\"disabled\"\n      [maxlength]=\"maxLength\"\n      class=\"mc-textarea\"\n      [ngClass]=\"{\n        'mc-textarea-simple': displayType === 'simple',\n        'mc-textarea-disabled': disabled\n      }\"\n      [attr.aria-label]=\"'Input.ariaLabel' | translate\"\n      [attr.aria-disabled]=\"disabled\"\n      (input)=\"onInput()\"\n      (change)=\"onChange($event)\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    ></textarea>\n    <ng-container *ngIf=\"suffixTemplate; then suffixTemplate\"></ng-container>\n\n    <ng-container *ngIf=\"displayType === 'simple'\">\n      <ng-container *ngIf=\"buttonTemplate; else defaultButton\">\n        <ng-container\n          *ngIf=\"buttonTemplate; then buttonTemplate\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultButton>\n        <mc-button\n          [disabled]=\"disabled || (!loading && !inputValue)\"\n          [loading]=\"loading\"\n          [inputValue]=\"inputValue\"\n          [sendBtnVariant]=\"sendBtnVariant\"\n          (submit)=\"onButtonSubmit($event)\"\n          (cancel)=\"onButtonCancel()\"\n          (change)=\"onButtonChange($event)\"\n        ></mc-button>\n      </ng-template>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"displayType === 'full'\" class=\"mc-input-foot\">\n    <div class=\"mc-input-foot-left\">\n      <ng-container *ngIf=\"extraTemplate; then extraTemplate\"></ng-container>\n      <span *ngIf=\"showCount\" id=\"mc-input-count\" class=\"mc-input-foot-count\">\n        {{ inputValue.length }}{{ !maxLength ? \"\" : \"/\" + maxLength }}\n      </span>\n    </div>\n\n    <ng-container *ngIf=\"buttonTemplate; else defaultFooterButton\">\n      <ng-container *ngIf=\"buttonTemplate; then buttonTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultFooterButton>\n      <mc-button\n        [disabled]=\"disabled || (!loading && !inputValue)\"\n        [loading]=\"loading\"\n        [inputValue]=\"inputValue\"\n        [sendBtnVariant]=\"sendBtnVariant\"\n        (submit)=\"onButtonSubmit($event)\"\n        (cancel)=\"onButtonCancel()\"\n        (change)=\"onButtonChange($event)\"\n      ></mc-button>\n    </ng-template>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";body[ui-theme=infinity-theme]{--mc-text: #aeaeae;--mc-box-shadow: rgba(25, 25, 25, .06)}body[ui-theme=galaxy-theme]{--mc-text: #4e5057;--mc-box-shadow: rgba(206, 209, 219, .06)}.mc-input{display:flex;flex-direction:column;width:100%;padding:12px 0;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:16px;box-sizing:border-box;background-color:var(--devui-base-bg, #ffffff)}.mc-input.mc-input-simple{border-radius:24px}.mc-input.mc-input-simple .mc-input-content{padding:0 20px}.mc-input.mc-input-borderless{border:none;box-shadow:0 1px 8px 0 var(--mc-box-shadow, rgba(25, 25, 25, .06))}.mc-input.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-input .mc-input-content{display:flex;align-items:flex-end;padding:0 16px}.mc-input .mc-input-foot{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 16px}.mc-input .mc-input-foot .mc-input-foot-left{flex:1;height:100%;display:flex;align-items:center}.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count{color:var(--mc-text, #aeaeae);font-size:var(--devui-font-size-sm, 12px)}.mc-textarea{width:100%;height:64px;padding:4px 0;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);background-color:var(--devui-form-control-bg, #ffffff);vertical-align:middle;outline:none;box-sizing:border-box;resize:none;border:none}.mc-textarea.mc-textarea-simple{height:32px}.mc-textarea.mc-textarea-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-textarea::placeholder{color:var(--devui-placeholder, #babbc0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "mc-button", inputs: ["disabled", "loading", "inputValue", "sendBtnVariant"], outputs: ["submit", "cancel", "change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: InputComponent, isStandalone: true, selector: "mc-input", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", displayType: "displayType", variant: "variant", sendBtnVariant: "sendBtnVariant", loading: "loading", showCount: "showCount", maxLength: "maxLength", submitShortKey: "submitShortKey", autofocus: "autofocus", autosize: "autosize" }, outputs: { change: "change", submit: "submit", cancel: "cancel", focus: "focus", blur: "blur" }, providers: [{ provide: inputContextToken, useExisting: InputComponent }], queries: [{ propertyName: "headTemplate", first: true, predicate: ["head"], descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: ["prefix"], descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: ["suffix"], descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ["button"], descendants: true }, { propertyName: "extraTemplate", first: true, predicate: ["extra"], descendants: true }], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"inputClasses\">\n  <ng-container *ngIf=\"headTemplate; then headTemplate\"></ng-container>\n\n  <div class=\"mc-input-content\">\n    <ng-container *ngIf=\"prefixTemplate; then prefixTemplate\"></ng-container>\n\n    <textarea\n      #textarea\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"placeholderText\"\n      [disabled]=\"disabled\"\n      [maxlength]=\"maxLength\"\n      class=\"mc-textarea\"\n      [ngClass]=\"{\n        'mc-textarea-simple': displayType === 'simple',\n        'mc-textarea-disabled': disabled\n      }\"\n      [ngStyle]=\"textareaStyle\"\n      [attr.aria-label]=\"'Input.ariaLabel' | translate\"\n      [attr.aria-disabled]=\"disabled\"\n      (input)=\"onInput()\"\n      (change)=\"onChange($event)\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    ></textarea>\n    <ng-container *ngIf=\"suffixTemplate; then suffixTemplate\"></ng-container>\n\n    <ng-container *ngIf=\"displayType === 'simple'\">\n      <ng-container *ngIf=\"buttonTemplate; else defaultButton\">\n        <ng-container\n          *ngIf=\"buttonTemplate; then buttonTemplate\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultButton>\n        <mc-button\n          [disabled]=\"disabled || (!loading && !inputValue)\"\n          [loading]=\"loading\"\n          [inputValue]=\"inputValue\"\n          [sendBtnVariant]=\"sendBtnVariant\"\n          (submit)=\"onButtonSubmit($event)\"\n          (cancel)=\"onButtonCancel()\"\n          (change)=\"onButtonChange($event)\"\n        ></mc-button>\n      </ng-template>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"displayType === 'full'\" class=\"mc-input-foot\">\n    <div class=\"mc-input-foot-left\">\n      <ng-container *ngIf=\"extraTemplate; then extraTemplate\"></ng-container>\n      <span *ngIf=\"showCount\" id=\"mc-input-count\" class=\"mc-input-foot-count\">\n        {{ inputValue.length }}{{ !maxLength ? \"\" : \"/\" + maxLength }}\n      </span>\n    </div>\n\n    <ng-container *ngIf=\"buttonTemplate; else defaultFooterButton\">\n      <ng-container *ngIf=\"buttonTemplate; then buttonTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultFooterButton>\n      <mc-button\n        [disabled]=\"disabled || (!loading && !inputValue)\"\n        [loading]=\"loading\"\n        [inputValue]=\"inputValue\"\n        [sendBtnVariant]=\"sendBtnVariant\"\n        (submit)=\"onButtonSubmit($event)\"\n        (cancel)=\"onButtonCancel()\"\n        (change)=\"onButtonChange($event)\"\n      ></mc-button>\n    </ng-template>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";body[ui-theme=infinity-theme]{--mc-text: #aeaeae;--mc-box-shadow: rgba(25, 25, 25, .06)}body[ui-theme=galaxy-theme]{--mc-text: #4e5057;--mc-box-shadow: rgba(206, 209, 219, .06)}.mc-input{display:flex;flex-direction:column;width:100%;padding:12px 0;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:16px;box-sizing:border-box;background-color:var(--devui-base-bg, #ffffff)}.mc-input.mc-input-simple{border-radius:24px}.mc-input.mc-input-simple .mc-input-content{padding:0 20px}.mc-input.mc-input-borderless{border:none;box-shadow:0 1px 8px 0 var(--mc-box-shadow, rgba(25, 25, 25, .06))}.mc-input.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-input .mc-input-content{display:flex;align-items:flex-end;padding:0 16px}.mc-input .mc-input-foot{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 16px}.mc-input .mc-input-foot .mc-input-foot-left{flex:1;height:100%;display:flex;align-items:center}.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count{color:var(--mc-text, #aeaeae);font-size:var(--devui-font-size-sm, 12px)}.mc-textarea{width:100%;height:64px;padding:4px 0;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);background-color:var(--devui-form-control-bg, #ffffff);vertical-align:middle;outline:none;box-sizing:border-box;resize:none;border:none}.mc-textarea.mc-textarea-simple{height:32px}.mc-textarea.mc-textarea-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-textarea::placeholder{color:var(--devui-placeholder, #babbc0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "mc-button", inputs: ["disabled", "loading", "inputValue", "sendBtnVariant"], outputs: ["submit", "cancel", "change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mc-input', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, TranslatePipe], providers: [{ provide: inputContextToken, useExisting: InputComponent }], template: "<div [ngClass]=\"inputClasses\">\n  <ng-container *ngIf=\"headTemplate; then headTemplate\"></ng-container>\n\n  <div class=\"mc-input-content\">\n    <ng-container *ngIf=\"prefixTemplate; then prefixTemplate\"></ng-container>\n\n    <textarea\n      #textarea\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"placeholderText\"\n      [disabled]=\"disabled\"\n      [maxlength]=\"maxLength\"\n      class=\"mc-textarea\"\n      [ngClass]=\"{\n        'mc-textarea-simple': displayType === 'simple',\n        'mc-textarea-disabled': disabled\n      }\"\n      [attr.aria-label]=\"'Input.ariaLabel' | translate\"\n      [attr.aria-disabled]=\"disabled\"\n      (input)=\"onInput()\"\n      (change)=\"onChange($event)\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    ></textarea>\n    <ng-container *ngIf=\"suffixTemplate; then suffixTemplate\"></ng-container>\n\n    <ng-container *ngIf=\"displayType === 'simple'\">\n      <ng-container *ngIf=\"buttonTemplate; else defaultButton\">\n        <ng-container\n          *ngIf=\"buttonTemplate; then buttonTemplate\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultButton>\n        <mc-button\n          [disabled]=\"disabled || (!loading && !inputValue)\"\n          [loading]=\"loading\"\n          [inputValue]=\"inputValue\"\n          [sendBtnVariant]=\"sendBtnVariant\"\n          (submit)=\"onButtonSubmit($event)\"\n          (cancel)=\"onButtonCancel()\"\n          (change)=\"onButtonChange($event)\"\n        ></mc-button>\n      </ng-template>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"displayType === 'full'\" class=\"mc-input-foot\">\n    <div class=\"mc-input-foot-left\">\n      <ng-container *ngIf=\"extraTemplate; then extraTemplate\"></ng-container>\n      <span *ngIf=\"showCount\" id=\"mc-input-count\" class=\"mc-input-foot-count\">\n        {{ inputValue.length }}{{ !maxLength ? \"\" : \"/\" + maxLength }}\n      </span>\n    </div>\n\n    <ng-container *ngIf=\"buttonTemplate; else defaultFooterButton\">\n      <ng-container *ngIf=\"buttonTemplate; then buttonTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultFooterButton>\n      <mc-button\n        [disabled]=\"disabled || (!loading && !inputValue)\"\n        [loading]=\"loading\"\n        [inputValue]=\"inputValue\"\n        [sendBtnVariant]=\"sendBtnVariant\"\n        (submit)=\"onButtonSubmit($event)\"\n        (cancel)=\"onButtonCancel()\"\n        (change)=\"onButtonChange($event)\"\n      ></mc-button>\n    </ng-template>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";body[ui-theme=infinity-theme]{--mc-text: #aeaeae;--mc-box-shadow: rgba(25, 25, 25, .06)}body[ui-theme=galaxy-theme]{--mc-text: #4e5057;--mc-box-shadow: rgba(206, 209, 219, .06)}.mc-input{display:flex;flex-direction:column;width:100%;padding:12px 0;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:16px;box-sizing:border-box;background-color:var(--devui-base-bg, #ffffff)}.mc-input.mc-input-simple{border-radius:24px}.mc-input.mc-input-simple .mc-input-content{padding:0 20px}.mc-input.mc-input-borderless{border:none;box-shadow:0 1px 8px 0 var(--mc-box-shadow, rgba(25, 25, 25, .06))}.mc-input.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-input .mc-input-content{display:flex;align-items:flex-end;padding:0 16px}.mc-input .mc-input-foot{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 16px}.mc-input .mc-input-foot .mc-input-foot-left{flex:1;height:100%;display:flex;align-items:center}.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count{color:var(--mc-text, #aeaeae);font-size:var(--devui-font-size-sm, 12px)}.mc-textarea{width:100%;height:64px;padding:4px 0;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);background-color:var(--devui-form-control-bg, #ffffff);vertical-align:middle;outline:none;box-sizing:border-box;resize:none;border:none}.mc-textarea.mc-textarea-simple{height:32px}.mc-textarea.mc-textarea-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-textarea::placeholder{color:var(--devui-placeholder, #babbc0)}\n"] }]
+            args: [{ selector: 'mc-input', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, TranslatePipe], providers: [{ provide: inputContextToken, useExisting: InputComponent }], template: "<div [ngClass]=\"inputClasses\">\n  <ng-container *ngIf=\"headTemplate; then headTemplate\"></ng-container>\n\n  <div class=\"mc-input-content\">\n    <ng-container *ngIf=\"prefixTemplate; then prefixTemplate\"></ng-container>\n\n    <textarea\n      #textarea\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"placeholderText\"\n      [disabled]=\"disabled\"\n      [maxlength]=\"maxLength\"\n      class=\"mc-textarea\"\n      [ngClass]=\"{\n        'mc-textarea-simple': displayType === 'simple',\n        'mc-textarea-disabled': disabled\n      }\"\n      [ngStyle]=\"textareaStyle\"\n      [attr.aria-label]=\"'Input.ariaLabel' | translate\"\n      [attr.aria-disabled]=\"disabled\"\n      (input)=\"onInput()\"\n      (change)=\"onChange($event)\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onKeydown($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    ></textarea>\n    <ng-container *ngIf=\"suffixTemplate; then suffixTemplate\"></ng-container>\n\n    <ng-container *ngIf=\"displayType === 'simple'\">\n      <ng-container *ngIf=\"buttonTemplate; else defaultButton\">\n        <ng-container\n          *ngIf=\"buttonTemplate; then buttonTemplate\"\n        ></ng-container>\n      </ng-container>\n      <ng-template #defaultButton>\n        <mc-button\n          [disabled]=\"disabled || (!loading && !inputValue)\"\n          [loading]=\"loading\"\n          [inputValue]=\"inputValue\"\n          [sendBtnVariant]=\"sendBtnVariant\"\n          (submit)=\"onButtonSubmit($event)\"\n          (cancel)=\"onButtonCancel()\"\n          (change)=\"onButtonChange($event)\"\n        ></mc-button>\n      </ng-template>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"displayType === 'full'\" class=\"mc-input-foot\">\n    <div class=\"mc-input-foot-left\">\n      <ng-container *ngIf=\"extraTemplate; then extraTemplate\"></ng-container>\n      <span *ngIf=\"showCount\" id=\"mc-input-count\" class=\"mc-input-foot-count\">\n        {{ inputValue.length }}{{ !maxLength ? \"\" : \"/\" + maxLength }}\n      </span>\n    </div>\n\n    <ng-container *ngIf=\"buttonTemplate; else defaultFooterButton\">\n      <ng-container *ngIf=\"buttonTemplate; then buttonTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultFooterButton>\n      <mc-button\n        [disabled]=\"disabled || (!loading && !inputValue)\"\n        [loading]=\"loading\"\n        [inputValue]=\"inputValue\"\n        [sendBtnVariant]=\"sendBtnVariant\"\n        (submit)=\"onButtonSubmit($event)\"\n        (cancel)=\"onButtonCancel()\"\n        (change)=\"onButtonChange($event)\"\n      ></mc-button>\n    </ng-template>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";body[ui-theme=infinity-theme]{--mc-text: #aeaeae;--mc-box-shadow: rgba(25, 25, 25, .06)}body[ui-theme=galaxy-theme]{--mc-text: #4e5057;--mc-box-shadow: rgba(206, 209, 219, .06)}.mc-input{display:flex;flex-direction:column;width:100%;padding:12px 0;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:16px;box-sizing:border-box;background-color:var(--devui-base-bg, #ffffff)}.mc-input.mc-input-simple{border-radius:24px}.mc-input.mc-input-simple .mc-input-content{padding:0 20px}.mc-input.mc-input-borderless{border:none;box-shadow:0 1px 8px 0 var(--mc-box-shadow, rgba(25, 25, 25, .06))}.mc-input.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-input .mc-input-content{display:flex;align-items:flex-end;padding:0 16px}.mc-input .mc-input-foot{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 16px}.mc-input .mc-input-foot .mc-input-foot-left{flex:1;height:100%;display:flex;align-items:center}.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count{color:var(--mc-text, #aeaeae);font-size:var(--devui-font-size-sm, 12px)}.mc-textarea{width:100%;height:64px;padding:4px 0;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);background-color:var(--devui-form-control-bg, #ffffff);vertical-align:middle;outline:none;box-sizing:border-box;resize:none;border:none}.mc-textarea.mc-textarea-simple{height:32px}.mc-textarea.mc-textarea-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-textarea::placeholder{color:var(--devui-placeholder, #babbc0)}\n"] }]
         }], ctorParameters: () => [{ type: LocaleService }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -958,6 +1123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }], autofocus: [{
                 type: Input
+            }], autosize: [{
+                type: Input
             }], change: [{
                 type: Output
             }], submit: [{
@@ -1015,6 +1182,1336 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
+class MDCardService {
+    constructor() {
+        this.xssWhiteList = getDefaultWhiteList();
+        this.cssWhiteList = getDefaultCSSWhiteList();
+        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(tag, name, value, isWhiteAttr) {
+        if (!isWhiteAttr && (name === 'id' || (tag === 'span' && name === 'style'))) {
+            return name + '=' + value;
+        }
+        return undefined;
+    }
+    getXssWhiteList() {
+        return this.xssWhiteList;
+    }
+    setXssWhiteList(list) {
+        this.xssWhiteList = list;
+    }
+    setCustomXssRules(rules) {
+        if (rules) {
+            rules.forEach((rule) => {
+                if (rule['value'] === null) {
+                    delete this.xssWhiteList[rule['key']];
+                }
+                else {
+                    this.xssWhiteList[rule['key']] = rule['value'];
+                }
+            });
+        }
+    }
+    setMdPlugins(plugins, mdt) {
+        if (plugins && plugins.length) {
+            plugins.forEach(item => {
+                const { plugin, opts } = item;
+                mdt.use(plugin, opts);
+            });
+        }
+    }
+    filterHtml(html) {
+        return filterXSS(html, {
+            whiteList: this.xssWhiteList,
+            onIgnoreTagAttr: this.onIgnoreTagAttr,
+            css: {
+                whiteList: Object.assign({}, this.cssWhiteList, {
+                    top: true,
+                    left: true,
+                    bottom: true,
+                    right: true,
+                }),
+            },
+        });
+    }
+}
+
+class MermaidService {
+    constructor(config = {}) {
+        this.config = config;
+        this.mermaidInstance = null;
+        this.isLoading = false;
+        this.lastValidResult = '';
+        this.viewStateMap = new WeakMap();
+        this.containerHeight = 400;
+    }
+    async loadMermaid() {
+        if (this.mermaidInstance) {
+            return this.mermaidInstance;
+        }
+        if (this.isLoading) {
+            return new Promise((resolve) => {
+                const checkInstance = () => {
+                    if (this.mermaidInstance) {
+                        resolve(this.mermaidInstance);
+                    }
+                    else {
+                        setTimeout(checkInstance, 50);
+                    }
+                };
+                checkInstance();
+            });
+        }
+        this.isLoading = true;
+        try {
+            const { default: mermaid } = await import('mermaid');
+            mermaid.initialize({
+                theme: this.config.theme || 'default',
+                startOnLoad: false,
+                suppressErrorRendering: true,
+                ...this.config
+            });
+            this.mermaidInstance = mermaid;
+            return mermaid;
+        }
+        catch (error) {
+            console.error('Failed to load mermaid:', error);
+            throw new Error('Failed to load mermaid library');
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async renderToContainer(container, code, theme = 'light') {
+        const svgStr = await this.renderMermaid(code, theme);
+        container.innerHTML = svgStr;
+        const svg = container.querySelector('svg');
+        if (svg) {
+            this.initViewState(container, svg);
+            this.applyTransform(container, svg);
+            svg.addEventListener('mousedown', (e) => this.onSvgMouseDown(e, container, svg));
+        }
+    }
+    initViewState(container, svg) {
+        // 获取svg的viewBox或宽高
+        let vb = svg.getAttribute('viewBox');
+        let svgW = 0, svgH = 0;
+        if (vb) {
+            const arr = vb.split(/\s+/);
+            svgW = parseFloat(arr[2]);
+            svgH = parseFloat(arr[3]);
+        }
+        else {
+            svgW = svg.width.baseVal.value || svg.getBoundingClientRect().width;
+            svgH = svg.height.baseVal.value || svg.getBoundingClientRect().height;
+        }
+        const contW = container.clientWidth || 0;
+        const contH = this.containerHeight;
+        let scale = 1;
+        if (svgW && svgH && contW && contH) {
+            scale = Math.min(contW / svgW, contH / svgH, 1);
+        }
+        this.viewStateMap.set(container, {
+            scale,
+            offsetX: 0,
+            offsetY: 0,
+            dragging: false,
+            dragStart: { x: 0, y: 0 },
+            lastOffset: { x: 0, y: 0 },
+        });
+    }
+    applyTransform(container, svg) {
+        const state = this.viewStateMap.get(container);
+        if (!state)
+            return;
+        svg.style.position = 'absolute';
+        svg.style.left = '50%';
+        svg.style.top = '50%';
+        svg.style.transform = `translate(-50%, -50%) translate(${state.offsetX}px, ${state.offsetY}px) scale(${state.scale})`;
+        svg.style.transformOrigin = 'center center';
+        svg.style.cursor = state.dragging ? 'grabbing' : 'grab';
+    }
+    zoomIn(container) {
+        const svg = container.querySelector('svg');
+        const state = this.viewStateMap.get(container);
+        if (svg && state) {
+            state.scale = Math.min(state.scale + 0.2, 3);
+            this.applyTransform(container, svg);
+        }
+    }
+    zoomOut(container) {
+        const svg = container.querySelector('svg');
+        const state = this.viewStateMap.get(container);
+        if (svg && state) {
+            state.scale = Math.max(state.scale - 0.2, 0.2);
+            this.applyTransform(container, svg);
+        }
+    }
+    reset(container) {
+        const svg = container.querySelector('svg');
+        if (svg) {
+            this.initViewState(container, svg);
+            this.applyTransform(container, svg);
+        }
+    }
+    async download(container, filename = 'diagram.png') {
+        const svg = container.querySelector('svg');
+        if (!svg)
+            return;
+        try {
+            const clonedSvg = svg.cloneNode(true);
+            const svgData = new XMLSerializer().serializeToString(clonedSvg);
+            const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgData)}`;
+            const img = new Image();
+            await new Promise((resolve, reject) => {
+                img.onload = () => resolve();
+                img.onerror = (e) => reject(new Error('Image loading failed'));
+                img.src = svgUrl;
+            });
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                throw new Error('Canvas context not available');
+            canvas.width = img.width * 2;
+            canvas.height = img.height * 2;
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    console.error('Failed to create blob from canvas');
+                    return;
+                }
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                document.body.appendChild(a);
+                a.click();
+                setTimeout(() => {
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                }, 100);
+            }, 'image/png');
+        }
+        catch (error) {
+            console.error('Failed to download diagram:', error);
+        }
+    }
+    onSvgMouseDown(e, container, svg) {
+        const state = this.viewStateMap.get(container);
+        if (!state)
+            return;
+        state.dragging = true;
+        state.dragStart = { x: e.clientX, y: e.clientY };
+        state.lastOffset = { x: state.offsetX, y: state.offsetY };
+        const move = (ev) => this.onSvgMouseMove(ev, container, svg);
+        const up = () => this.onSvgMouseUp(container, svg, move, up);
+        document.addEventListener('mousemove', move);
+        document.addEventListener('mouseup', up);
+        this.applyTransform(container, svg);
+    }
+    onSvgMouseMove(e, container, svg) {
+        const state = this.viewStateMap.get(container);
+        if (!state || !state.dragging)
+            return;
+        state.offsetX = state.lastOffset.x + (e.clientX - state.dragStart.x);
+        state.offsetY = state.lastOffset.y + (e.clientY - state.dragStart.y);
+        this.applyTransform(container, svg);
+    }
+    onSvgMouseUp(container, svg, move, up) {
+        const state = this.viewStateMap.get(container);
+        if (!state)
+            return;
+        state.dragging = false;
+        document.removeEventListener('mousemove', move);
+        document.removeEventListener('mouseup', up);
+        this.applyTransform(container, svg);
+    }
+    async renderMermaid(code, theme = 'light') {
+        try {
+            const mermaid = await this.loadMermaid();
+            if (this.config.theme !== theme) {
+                this.config.theme = theme;
+                mermaid.initialize({
+                    startOnLoad: false,
+                    suppressErrorRendering: true,
+                    theme: theme === 'dark' ? 'dark' : 'default',
+                    ...this.config
+                });
+            }
+            const id = `mc_mermaid_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+            const { svg } = await mermaid.render(id, code);
+            this.lastValidResult = svg;
+            return svg;
+        }
+        catch (error) {
+            return this.lastValidResult;
+        }
+    }
+    // 设置配置
+    setConfig(config = {}) {
+        this.config = {
+            theme: 'default',
+            ...config
+        };
+    }
+}
+
+class CodeBlockFoundation extends BaseFoundation {
+    constructor(adapter) {
+        super({ ...adapter });
+        this.toggleExpand = () => {
+            this.setState({ expanded: !this.getStates().expanded });
+        };
+        this.zoomOut = () => {
+            const container = this._adapter.getContainer();
+            if (container && this.mermaidService) {
+                this.mermaidService.zoomOut(container);
+            }
+        };
+        this.zoomIn = () => {
+            const container = this._adapter.getContainer();
+            if (container && this.mermaidService) {
+                this.mermaidService.zoomIn(container);
+            }
+        };
+        this.checkIsMermaid = () => {
+            const { enableMermaid, language } = this.getProps();
+            return enableMermaid && language?.toLowerCase() === 'mermaid';
+        };
+        this.download = () => {
+            const container = this._adapter.getContainer();
+            if (container && this.mermaidService) {
+                this.mermaidService.download(container);
+            }
+        };
+        this.handleCopySuccess = () => {
+            this.setState({ copied: true });
+            setTimeout(() => {
+                this.setState({ copied: false });
+            }, 1500);
+        };
+        this.updateHighlightedCode = () => {
+            const { code, language } = this.getProps();
+            let highlightedCode = '';
+            try {
+                const typeIndex = code.indexOf(`<span class="mc-typewriter`);
+                if (language && hljs.getLanguage(language)) {
+                    if (typeIndex !== -1) {
+                        highlightedCode =
+                            hljs.highlight(code.slice(0, typeIndex), {
+                                language,
+                            }).value + code.slice(typeIndex);
+                    }
+                    else {
+                        highlightedCode = hljs.highlight(code, {
+                            language,
+                        }).value;
+                    }
+                }
+                else {
+                    if (typeof hljs.highlightAuto !== 'undefined') {
+                        if (typeIndex !== -1) {
+                            highlightedCode =
+                                hljs.highlightAuto(code.slice(0, typeIndex)).value +
+                                    code.slice(typeIndex);
+                        }
+                        else {
+                            highlightedCode = hljs.highlightAuto(code).value;
+                        }
+                    }
+                    else {
+                        highlightedCode = this.mdCardService.filterHtml(code);
+                    }
+                }
+            }
+            catch (_) {
+                highlightedCode = code;
+            }
+            this._adapter.highlightCodeChange(highlightedCode, language);
+        };
+        this.renderMermaid = async () => {
+            const { code, theme, mermaidConfig, } = this.getProps();
+            const { mermaidContentRef } = this.getStates();
+            const isMermaid = this.checkIsMermaid();
+            if (!isMermaid || !code || !mermaidContentRef) {
+                return;
+            }
+            if (!this.mermaidService) {
+                try {
+                    this.mermaidService = new MermaidService();
+                    const config = {
+                        theme: theme === 'dark' ? 'dark' : 'default',
+                        ...mermaidConfig,
+                    };
+                    this.mermaidService.setConfig(config);
+                }
+                catch (error) {
+                    console.error('Failed to load MermaidService:', error);
+                    return;
+                }
+            }
+            this.nextTick(async () => {
+                const container = mermaidContentRef.nativeElement;
+                if (container) {
+                    // 移除打字效果相关的span标签
+                    const cleanCode = code.replace(/<span[^>]*\bclass\s*=\s*['"]mc-typewriter[^>]*>([\s\S]*?)<\/span>/g, `$1`);
+                    await this.mermaidService?.renderToContainer(container, cleanCode, theme);
+                }
+            });
+        };
+        this.mdCardService = new MDCardService();
+    }
+    copyCodeInternal() {
+        const { code } = this.getProps();
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(code).then(() => {
+                this.handleCopySuccess();
+            });
+        }
+        else {
+            const textarea = document.createElement('textarea');
+            textarea.style.position = 'fixed';
+            textarea.style.top = '-9999px';
+            textarea.style.left = '-9999px';
+            textarea.style.zIndex = '-1';
+            textarea.value = code;
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            this.handleCopySuccess();
+        }
+    }
+}
+
+class CodeBlockComponent extends BaseComponent {
+    get showMermaidDiagram() {
+        return this._showMermaidDiagram;
+    }
+    set showMermaidDiagram(value) {
+        if (this._showMermaidDiagram !== value) {
+            this._showMermaidDiagram = value;
+            // 当切换为显示图表且当前是mermaid类型时，渲染图表
+            if (value && this.isMermaid) {
+                // 在视图更新后渲染mermaid
+                setTimeout(() => {
+                    this.renderMermaid();
+                });
+            }
+        }
+    }
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.code = '';
+        this.language = '';
+        this.blockIndex = 0;
+        this.theme = 'light';
+        this.enableMermaid = false;
+        this.mermaidConfig = {};
+        this.contentTemplate = null;
+        this.headerTemplate = null;
+        this.actionsTemplate = null;
+        this.expanded = true;
+        this.copied = false;
+        this.mermaidContent = '';
+        this._showMermaidDiagram = true;
+        this.highlightedCode = '';
+        this.isMermaid = false;
+        this.copySubject = new Subject();
+        this.copySubject
+            .pipe(debounceTime(300))
+            .subscribe(() => this.copyCodeInternal());
+        this.foundation = new CodeBlockFoundation(this.adapter);
+        this.diffDom = new DiffDOM();
+    }
+    get adapter() {
+        return {
+            ...super.adapter,
+            getContainer: () => {
+                return this.mermaidContentRef.nativeElement;
+            },
+            highlightCodeChange: (highlightedCode, language) => {
+                this.highlightedCode = highlightedCode;
+                if (this.codeElementRef?.nativeElement) {
+                    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);
+                }
+            },
+        };
+    }
+    switchShowMermaid(show) {
+        this.showMermaidDiagram = show;
+        if (!this.showMermaidDiagram) {
+            this.codeElementTemplates.changes.subscribe(() => {
+                if (this.codeElementRef?.nativeElement && !this.showMermaidDiagram) {
+                    this.codeElementRef.nativeElement.innerHTML = this.highlightedCode;
+                }
+            });
+        }
+        this.cdr.detectChanges();
+    }
+    ngOnInit() {
+        this.checkIsMermaid();
+        this.updateHighlightedCode();
+        if (this.isMermaid) {
+            this.renderMermaid();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.isMermaid) {
+            this.renderMermaid();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['code'] || changes['language']) {
+            this.checkIsMermaid();
+            this.updateHighlightedCode();
+        }
+        if (changes['enableMermaid'] || changes['theme'] || changes['code']) {
+            this.checkIsMermaid();
+            if (this.isMermaid) {
+                this.renderMermaid();
+            }
+        }
+        if (changes['showMermaidDiagram'] &&
+            this.isMermaid &&
+            this.showMermaidDiagram) {
+            this.renderMermaid();
+        }
+    }
+    checkIsMermaid() {
+        this.isMermaid = this.foundation.checkIsMermaid();
+    }
+    updateHighlightedCode() {
+        this.foundation.updateHighlightedCode();
+    }
+    zoomIn() {
+        this.foundation.zoomIn();
+        this.cdr.detectChanges();
+    }
+    zoomOut() {
+        this.foundation.zoomOut();
+        this.cdr.detectChanges();
+    }
+    download() {
+        this.foundation.download();
+    }
+    async renderMermaid() {
+        await this.foundation.renderMermaid();
+    }
+    toggleExpand() {
+        this.foundation.toggleExpand();
+        this.cdr.detectChanges();
+    }
+    copyCode() {
+        this.copySubject.next();
+    }
+    copyCodeInternal() {
+        this.foundation.copyCodeInternal();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CodeBlockComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CodeBlockComponent, selector: "mc-code-block", inputs: { code: "code", language: "language", blockIndex: "blockIndex", theme: "theme", enableMermaid: "enableMermaid", mermaidConfig: "mermaidConfig", contentTemplate: "contentTemplate", headerTemplate: "headerTemplate", actionsTemplate: "actionsTemplate" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["rootRef"], descendants: true }, { propertyName: "mermaidContentRef", first: true, predicate: ["mermaidContent"], descendants: true }, { propertyName: "codeElementRef", first: true, predicate: ["codeElement"], descendants: true }, { propertyName: "codeElementTemplates", predicate: ["codeElementTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"mc-code-block\"\n  [ngClass]=\"theme === 'dark' ? 'mc-code-block-dark' : 'mc-code-block-light'\"\n  #rootRef\n>\n  <div class=\"mc-code-block-header\" *ngIf=\"!headerTemplate\">\n    <span class=\"mc-code-lang\">{{ language }}</span>\n    <ng-container *ngIf=\"!actionsTemplate\">\n      <div class=\"mc-code-block-actions\">\n        <div *ngIf=\"isMermaid\" style=\"margin-right: 8px\">\n          <ul\n            class=\"mc-diagram-switch\"\n            [ngClass]=\"{ 'mc-show-code': !showMermaidDiagram }\"\n          >\n            <li\n              (click)=\"switchShowMermaid(true)\"\n              [ngClass]=\"{ 'mc-diagram-switch-active': showMermaidDiagram }\"\n            >\n              \u56FE\u8868\n            </li>\n            <li\n              (click)=\"switchShowMermaid(false)\"\n              [ngClass]=\"{ 'mc-diagram-switch-active': !showMermaidDiagram }\"\n            >\n              \u4EE3\u7801\n            </li>\n          </ul>\n        </div>\n        <div\n          *ngIf=\"isMermaid && showMermaidDiagram\"\n          class=\"mc-action-btn mc-toggle-btn\"\n          [title]=\"'Md.zoomIn' | translate\"\n          (click)=\"zoomIn()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"enlarge\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <path\n                d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M7.16666667,4.66666667 C7.41212656,4.66666667 7.61627504,4.84354183 7.658611,5.07679103 L7.66666667,5.16666667 L7.666,6.668 L9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L7.666,7.668 L7.66666667,9.16666667 C7.66666667,9.44280904 7.44280904,9.66666667 7.16666667,9.66666667 C6.92120678,9.66666667 6.7170583,9.48979151 6.67472234,9.2565423 L6.66666667,9.16666667 L6.666,7.669 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L6.666,6.669 L6.66666667,5.16666667 C6.66666667,4.89052429 6.89052429,4.66666667 7.16666667,4.66666667 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill=\"#71757F\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n        <div\n          *ngIf=\"isMermaid && showMermaidDiagram\"\n          class=\"mc-action-btn mc-toggle-btn\"\n          title=\"\u7F29\u5C0F\"\n          (click)=\"zoomOut()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"zoom-out\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <path\n                d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L9.16601582,6.66666666 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill=\"#71757F\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n        <div\n          *ngIf=\"isMermaid && showMermaidDiagram\"\n          class=\"mc-action-btn mc-toggle-btn\"\n          title=\"\u4E0B\u8F7D\"\n          (click)=\"download()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"\u9875\u9762-1\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <g id=\"i\u4E0B\u8F7D\">\n                <path\n                  d=\"M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\n                  id=\"\u5F62\u72B6\u7ED3\u5408\"\n                  fill=\"#71757F\"\n                ></path>\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div\n          class=\"mc-action-btn mc-toggle-btn\"\n          title=\"\u5C55\u5F00/\u6298\u53E0\"\n          (click)=\"toggleExpand()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"\u5168\u90E8\u6536\u8D77\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <path\n                d=\"M4.715694,14.4114091 C4.910563,14.5464051 5.179987,14.5271201 5.353553,14.3535531 L5.353553,14.3535531 L7.99999988,11.7070001 L10.646447,14.3535531 L10.715694,14.4114091 C10.910563,14.5464051 11.179987,14.5271201 11.353553,14.3535531 C11.548816,14.1582911 11.548816,13.8417091 11.353553,13.6464471 L11.353553,13.6464471 L8.353553,10.6464471 L8.284306,10.5885911 C8.089437,10.4535951 7.820013,10.4728801 7.646447,10.6464471 L7.646447,10.6464471 L4.646447,13.6464471 L4.588591,13.7156941 C4.453595,13.9105631 4.47288,14.1799871 4.646447,14.3535531 L4.646447,14.3535531 L4.715694,14.4114091 Z M14.5,7.50000012 C14.776142,7.50000012 15,7.72385812 15,8.00000012 C15,8.27614212 14.776142,8.50000012 14.5,8.50000012 L1.5,8.50000012 C1.223858,8.50000012 1,8.27614212 1,8.00000012 C1,7.72385812 1.223858,7.50000012 1.5,7.50000012 L14.5,7.50000012 Z M8.284306,5.41140912 L8.353553,5.35355312 L11.353553,2.35355312 C11.548816,2.15829112 11.548816,1.84170912 11.353553,1.64644712 C11.179987,1.47288012 10.910563,1.45359512 10.715694,1.58859112 L10.646447,1.64644712 L7.99999988,4.29300012 L5.353553,1.64644712 C5.179987,1.47288012 4.910563,1.45359512 4.715694,1.58859112 L4.646447,1.64644712 C4.47288,1.82001312 4.453595,2.08943712 4.588591,2.28430612 L4.646447,2.35355312 L7.646447,5.35355312 C7.820013,5.52712012 8.089437,5.54640512 8.284306,5.41140912 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill=\"#71757F\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n        <div\n          class=\"mc-action-btn mc-copy-btn\"\n          title=\"\u590D\u5236\"\n          (click)=\"copyCode()\"\n        >\n          @if(copied) {\n          <span>\n            <svg\n              width=\"16px\"\n              height=\"16px\"\n              viewBox=\"0 0 16 16\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            >\n              <defs>\n                <polygon\n                  id=\"path-1\"\n                  points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n                ></polygon>\n              </defs>\n              <g\n                id=\"status/whiteBG/correct\"\n                stroke=\"none\"\n                stroke-width=\"1\"\n                fill=\"none\"\n                fill-rule=\"evenodd\"\n              >\n                <mask id=\"mask-2\" fill=\"white\">\n                  <use xlink:href=\"#path-1\"></use>\n                </mask>\n                <use id=\"Mask\" fill=\"#3DCCA6\" xlink:href=\"#path-1\"></use>\n              </g>\n            </svg>\n          </span>\n          } @else {\n          <span>\n            <svg\n              width=\"16px\"\n              height=\"16px\"\n              viewBox=\"0 0 16 16\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            >\n              <g\n                id=\"\u9875\u9762-1\"\n                stroke=\"none\"\n                stroke-width=\"1\"\n                fill=\"none\"\n                fill-rule=\"evenodd\"\n              >\n                <g\n                  id=\"API-starter-\u56FE\u6807\u5165\u5E93\"\n                  transform=\"translate(-592.000000, -204.000000)\"\n                >\n                  <g\n                    id=\"\u65B9\u683C\u5907\u4EFD-16\"\n                    transform=\"translate(560.000000, 180.000000)\"\n                  >\n                    <text\n                      id=\"\u56FE\u6807\"\n                      font-family=\"PingFangSC-Regular, PingFang SC\"\n                      font-size=\"12\"\n                      font-weight=\"normal\"\n                      line-spacing=\"16\"\n                      fill=\"#71757F\"\n                    >\n                      <tspan x=\"27.136\" y=\"61\">\u590D\u5236</tspan>\n                    </text>\n                  </g>\n                  <path\n                    d=\"M604.5,206 C605.279696,206 605.920449,206.594888 605.993133,207.35554 L606,207.5 L606,214.5 C606,215.279696 605.405112,215.920449 604.64446,215.993133 L604.5,216 L604,216 L604,216.5 C604,217.279696 603.405112,217.920449 602.64446,217.993133 L602.5,218 L595.5,218 C594.671573,218 594,217.328427 594,216.5 L594,216.5 L594,209.5 C594,208.671573 594.671573,208 595.5,208 L595.5,208 L596,208 L596,207.5 C596,206.720304 596.594888,206.079551 597.35554,206.006867 L597.5,206 L604.5,206 Z M602.5,209 L595.5,209 C595.223858,209 595,209.223858 595,209.5 L595,209.5 L595,216.5 C595,216.776142 595.223858,217 595.5,217 L595.5,217 L602.5,217 C602.776142,217 603,216.776142 603,216.5 L603,216.5 L603,209.5 C603,209.223858 602.776142,209 602.5,209 L602.5,209 Z M604.5,207 L597.5,207 C597.25454,207 597.050392,207.176875 597.008056,207.410124 L597,207.5 L597,208 L602.5,208 C603.279696,208 603.920449,208.594888 603.993133,209.35554 L604,209.5 L604,215 L604.5,215 C604.74546,215 604.949608,214.823125 604.991944,214.589876 L605,214.5 L605,207.5 C605,207.25454 604.823125,207.050392 604.589876,207.008056 L604.5,207 Z\"\n                    id=\"\u5F62\u72B6\u7ED3\u5408\"\n                    fill=\"#71757F\"\n                    fill-rule=\"nonzero\"\n                  ></path>\n                </g>\n              </g>\n            </svg>\n          </span>\n          }\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"actionsTemplate\">\n      <ng-template [ngTemplateOutlet]=\"actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"headerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n  </ng-container>\n\n  <div [ngClass]=\"{ 'mc-block-hidden': !expanded }\" >\n    @if (showMermaidDiagram && isMermaid && !contentTemplate) {\n    <div class=\"mc-mermaid-content\" #mermaidContent></div>\n    } @else if(!contentTemplate) {\n    <pre #codeElementTemplate><code #codeElement [ngClass]=\"'hljs language-' + language\" ></code></pre>\n    } @else {\n    <ng-container *ngIf=\"contentTemplate\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n    </ng-container>\n    }\n  </div>\n</div>\n", 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}}.mc-code-block-light ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-light ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-light ::ng-deep .hljs{background:#fefefe;color:#545454}.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-quote{color:#696969}.mc-code-block-light ::ng-deep .hljs-variable,.mc-code-block-light ::ng-deep .hljs-template-variable,.mc-code-block-light ::ng-deep .hljs-tag,.mc-code-block-light ::ng-deep .hljs-name,.mc-code-block-light ::ng-deep .hljs-selector-id,.mc-code-block-light ::ng-deep .hljs-selector-class,.mc-code-block-light ::ng-deep .hljs-regexp,.mc-code-block-light ::ng-deep .hljs-deletion{color:#d91e18}.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-link{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-attribute{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-addition{color:green}.mc-code-block-light ::ng-deep .hljs-title,.mc-code-block-light ::ng-deep .hljs-section{color:#007faa}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{color:#7928a1}.mc-code-block-light ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-light ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast: active){.mc-code-block-light ::ng-deep .hljs-addition,.mc-code-block-light ::ng-deep .hljs-attribute,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-link,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-quote{color:highlight}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-light{border:1px solid #d7d8da}.mc-code-block-light code.hljs{padding:1em}.mc-code-block-light{background-color:#f5f5f5}.mc-code-block-light .mc-code-lang,.mc-code-block-light .mc-code-block-actions .mc-copy-btn,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn{color:#252b3a}.mc-code-block-light .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn:hover{background-color:#ebebeb}.mc-code-block-light .mc-mermaid-content{background:#fefefe}.mc-code-block-dark ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-dark ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-dark ::ng-deep .hljs{background:#2b2b2b;color:#f8f8f2}.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-quote{color:#d4d0ab}.mc-code-block-dark ::ng-deep .hljs-variable,.mc-code-block-dark ::ng-deep .hljs-template-variable,.mc-code-block-dark ::ng-deep .hljs-tag,.mc-code-block-dark ::ng-deep .hljs-name,.mc-code-block-dark ::ng-deep .hljs-selector-id,.mc-code-block-dark ::ng-deep .hljs-selector-class,.mc-code-block-dark ::ng-deep .hljs-regexp,.mc-code-block-dark ::ng-deep .hljs-deletion{color:#ffa07a}.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-link{color:#f5ab35}.mc-code-block-dark ::ng-deep .hljs-attribute{color:gold}.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-addition{color:#abe338}.mc-code-block-dark ::ng-deep .hljs-title,.mc-code-block-dark ::ng-deep .hljs-section{color:#00e0e0}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{color:#dcc6e0}.mc-code-block-dark ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-dark ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast: active){.mc-code-block-dark ::ng-deep .hljs-addition,.mc-code-block-dark ::ng-deep .hljs-attribute,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-link,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-quote{color:highlight}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-dark{border:1px solid #4e5057}.mc-code-block-dark code.hljs{padding:1em}.mc-code-block-dark{background-color:#34363a}.mc-code-block-dark .mc-code-lang,.mc-code-block-dark .mc-code-block-actions .mc-copy-btn,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn{color:#ced1db}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn:hover{background-color:#393a3e}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn img,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn img{filter:brightness(1.5)}.mc-code-block-dark .mc-mermaid-content{background:#2b2b2b!important}@keyframes collapse-expand{0%{opacity:0;max-height:0}to{opacity:1;max-height:1000px}}@keyframes collapse-collapse{0%{opacity:1;max-height:1000px}to{opacity:0;max-height:0}}.mc-block-hidden{display:none}.collapse-expanded{animation:collapse-expand .5s ease-out}.collapse-collapsed{animation:collapse-collapse .5s ease-in}.mc-code-block{margin:1rem 0;overflow:hidden;border-radius:14px}.mc-code-block pre{margin:0}.mc-code-block .mc-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box}.mc-code-block .mc-code-block-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.mc-code-block .mc-code-block-header .mc-code-lang{font-size:14px}.mc-code-block .mc-mermaid-content{position:relative;width:100%;height:400px;overflow:hidden;background:inherit}.mc-code-block .mc-code-block-actions{display:flex;align-items:center}.mc-code-block .mc-code-block-actions .mc-copy-btn,.mc-code-block .mc-code-block-actions .mc-toggle-btn{cursor:pointer;border-radius:4px;font-size:18px;padding:4px}.mc-code-block .mc-diagram-switch{display:flex;align-items:center;list-style:none;margin:0;padding:2px;border-radius:4px;background-color:var(--devui-icon-hover-bg);position:relative;transition:all .3s ease;overflow:hidden;height:24px}.mc-code-block .mc-diagram-switch:before{content:\"\";position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);background-color:var(--devui-base-bg);border-radius:4px;transition:transform .3s ease;box-shadow:0 1px 2px #0000001a;z-index:1}.mc-code-block .mc-diagram-switch.mc-show-code:before{transform:translate(100%)}.mc-code-block .mc-diagram-switch .mc-diagram-switch-active{text-shadow:0 0 .4px #252b3a}.mc-code-block .mc-diagram-switch li{position:relative;padding:0 8px;margin:0;font-size:12px;cursor:pointer;transition:color .3s ease;z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CodeBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-code-block', standalone: false, template: "<div\n  class=\"mc-code-block\"\n  [ngClass]=\"theme === 'dark' ? 'mc-code-block-dark' : 'mc-code-block-light'\"\n  #rootRef\n>\n  <div class=\"mc-code-block-header\" *ngIf=\"!headerTemplate\">\n    <span class=\"mc-code-lang\">{{ language }}</span>\n    <ng-container *ngIf=\"!actionsTemplate\">\n      <div class=\"mc-code-block-actions\">\n        <div *ngIf=\"isMermaid\" style=\"margin-right: 8px\">\n          <ul\n            class=\"mc-diagram-switch\"\n            [ngClass]=\"{ 'mc-show-code': !showMermaidDiagram }\"\n          >\n            <li\n              (click)=\"switchShowMermaid(true)\"\n              [ngClass]=\"{ 'mc-diagram-switch-active': showMermaidDiagram }\"\n            >\n              \u56FE\u8868\n            </li>\n            <li\n              (click)=\"switchShowMermaid(false)\"\n              [ngClass]=\"{ 'mc-diagram-switch-active': !showMermaidDiagram }\"\n            >\n              \u4EE3\u7801\n            </li>\n          </ul>\n        </div>\n        <div\n          *ngIf=\"isMermaid && showMermaidDiagram\"\n          class=\"mc-action-btn mc-toggle-btn\"\n          [title]=\"'Md.zoomIn' | translate\"\n          (click)=\"zoomIn()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"enlarge\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <path\n                d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M7.16666667,4.66666667 C7.41212656,4.66666667 7.61627504,4.84354183 7.658611,5.07679103 L7.66666667,5.16666667 L7.666,6.668 L9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L7.666,7.668 L7.66666667,9.16666667 C7.66666667,9.44280904 7.44280904,9.66666667 7.16666667,9.66666667 C6.92120678,9.66666667 6.7170583,9.48979151 6.67472234,9.2565423 L6.66666667,9.16666667 L6.666,7.669 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L6.666,6.669 L6.66666667,5.16666667 C6.66666667,4.89052429 6.89052429,4.66666667 7.16666667,4.66666667 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill=\"#71757F\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n        <div\n          *ngIf=\"isMermaid && showMermaidDiagram\"\n          class=\"mc-action-btn mc-toggle-btn\"\n          title=\"\u7F29\u5C0F\"\n          (click)=\"zoomOut()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"zoom-out\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <path\n                d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L9.16601582,6.66666666 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill=\"#71757F\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n        <div\n          *ngIf=\"isMermaid && showMermaidDiagram\"\n          class=\"mc-action-btn mc-toggle-btn\"\n          title=\"\u4E0B\u8F7D\"\n          (click)=\"download()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"\u9875\u9762-1\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <g id=\"i\u4E0B\u8F7D\">\n                <path\n                  d=\"M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\n                  id=\"\u5F62\u72B6\u7ED3\u5408\"\n                  fill=\"#71757F\"\n                ></path>\n              </g>\n            </g>\n          </svg>\n        </div>\n        <div\n          class=\"mc-action-btn mc-toggle-btn\"\n          title=\"\u5C55\u5F00/\u6298\u53E0\"\n          (click)=\"toggleExpand()\"\n        >\n          <svg\n            width=\"16px\"\n            height=\"16px\"\n            viewBox=\"0 0 16 16\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g\n              id=\"\u5168\u90E8\u6536\u8D77\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n            >\n              <path\n                d=\"M4.715694,14.4114091 C4.910563,14.5464051 5.179987,14.5271201 5.353553,14.3535531 L5.353553,14.3535531 L7.99999988,11.7070001 L10.646447,14.3535531 L10.715694,14.4114091 C10.910563,14.5464051 11.179987,14.5271201 11.353553,14.3535531 C11.548816,14.1582911 11.548816,13.8417091 11.353553,13.6464471 L11.353553,13.6464471 L8.353553,10.6464471 L8.284306,10.5885911 C8.089437,10.4535951 7.820013,10.4728801 7.646447,10.6464471 L7.646447,10.6464471 L4.646447,13.6464471 L4.588591,13.7156941 C4.453595,13.9105631 4.47288,14.1799871 4.646447,14.3535531 L4.646447,14.3535531 L4.715694,14.4114091 Z M14.5,7.50000012 C14.776142,7.50000012 15,7.72385812 15,8.00000012 C15,8.27614212 14.776142,8.50000012 14.5,8.50000012 L1.5,8.50000012 C1.223858,8.50000012 1,8.27614212 1,8.00000012 C1,7.72385812 1.223858,7.50000012 1.5,7.50000012 L14.5,7.50000012 Z M8.284306,5.41140912 L8.353553,5.35355312 L11.353553,2.35355312 C11.548816,2.15829112 11.548816,1.84170912 11.353553,1.64644712 C11.179987,1.47288012 10.910563,1.45359512 10.715694,1.58859112 L10.646447,1.64644712 L7.99999988,4.29300012 L5.353553,1.64644712 C5.179987,1.47288012 4.910563,1.45359512 4.715694,1.58859112 L4.646447,1.64644712 C4.47288,1.82001312 4.453595,2.08943712 4.588591,2.28430612 L4.646447,2.35355312 L7.646447,5.35355312 C7.820013,5.52712012 8.089437,5.54640512 8.284306,5.41140912 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill=\"#71757F\"\n                fill-rule=\"nonzero\"\n              ></path>\n            </g>\n          </svg>\n        </div>\n        <div\n          class=\"mc-action-btn mc-copy-btn\"\n          title=\"\u590D\u5236\"\n          (click)=\"copyCode()\"\n        >\n          @if(copied) {\n          <span>\n            <svg\n              width=\"16px\"\n              height=\"16px\"\n              viewBox=\"0 0 16 16\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            >\n              <defs>\n                <polygon\n                  id=\"path-1\"\n                  points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n                ></polygon>\n              </defs>\n              <g\n                id=\"status/whiteBG/correct\"\n                stroke=\"none\"\n                stroke-width=\"1\"\n                fill=\"none\"\n                fill-rule=\"evenodd\"\n              >\n                <mask id=\"mask-2\" fill=\"white\">\n                  <use xlink:href=\"#path-1\"></use>\n                </mask>\n                <use id=\"Mask\" fill=\"#3DCCA6\" xlink:href=\"#path-1\"></use>\n              </g>\n            </svg>\n          </span>\n          } @else {\n          <span>\n            <svg\n              width=\"16px\"\n              height=\"16px\"\n              viewBox=\"0 0 16 16\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            >\n              <g\n                id=\"\u9875\u9762-1\"\n                stroke=\"none\"\n                stroke-width=\"1\"\n                fill=\"none\"\n                fill-rule=\"evenodd\"\n              >\n                <g\n                  id=\"API-starter-\u56FE\u6807\u5165\u5E93\"\n                  transform=\"translate(-592.000000, -204.000000)\"\n                >\n                  <g\n                    id=\"\u65B9\u683C\u5907\u4EFD-16\"\n                    transform=\"translate(560.000000, 180.000000)\"\n                  >\n                    <text\n                      id=\"\u56FE\u6807\"\n                      font-family=\"PingFangSC-Regular, PingFang SC\"\n                      font-size=\"12\"\n                      font-weight=\"normal\"\n                      line-spacing=\"16\"\n                      fill=\"#71757F\"\n                    >\n                      <tspan x=\"27.136\" y=\"61\">\u590D\u5236</tspan>\n                    </text>\n                  </g>\n                  <path\n                    d=\"M604.5,206 C605.279696,206 605.920449,206.594888 605.993133,207.35554 L606,207.5 L606,214.5 C606,215.279696 605.405112,215.920449 604.64446,215.993133 L604.5,216 L604,216 L604,216.5 C604,217.279696 603.405112,217.920449 602.64446,217.993133 L602.5,218 L595.5,218 C594.671573,218 594,217.328427 594,216.5 L594,216.5 L594,209.5 C594,208.671573 594.671573,208 595.5,208 L595.5,208 L596,208 L596,207.5 C596,206.720304 596.594888,206.079551 597.35554,206.006867 L597.5,206 L604.5,206 Z M602.5,209 L595.5,209 C595.223858,209 595,209.223858 595,209.5 L595,209.5 L595,216.5 C595,216.776142 595.223858,217 595.5,217 L595.5,217 L602.5,217 C602.776142,217 603,216.776142 603,216.5 L603,216.5 L603,209.5 C603,209.223858 602.776142,209 602.5,209 L602.5,209 Z M604.5,207 L597.5,207 C597.25454,207 597.050392,207.176875 597.008056,207.410124 L597,207.5 L597,208 L602.5,208 C603.279696,208 603.920449,208.594888 603.993133,209.35554 L604,209.5 L604,215 L604.5,215 C604.74546,215 604.949608,214.823125 604.991944,214.589876 L605,214.5 L605,207.5 C605,207.25454 604.823125,207.050392 604.589876,207.008056 L604.5,207 Z\"\n                    id=\"\u5F62\u72B6\u7ED3\u5408\"\n                    fill=\"#71757F\"\n                    fill-rule=\"nonzero\"\n                  ></path>\n                </g>\n              </g>\n            </svg>\n          </span>\n          }\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"actionsTemplate\">\n      <ng-template [ngTemplateOutlet]=\"actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n    </ng-container>\n  </div>\n  <ng-container *ngIf=\"headerTemplate\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n  </ng-container>\n\n  <div [ngClass]=\"{ 'mc-block-hidden': !expanded }\" >\n    @if (showMermaidDiagram && isMermaid && !contentTemplate) {\n    <div class=\"mc-mermaid-content\" #mermaidContent></div>\n    } @else if(!contentTemplate) {\n    <pre #codeElementTemplate><code #codeElement [ngClass]=\"'hljs language-' + language\" ></code></pre>\n    } @else {\n    <ng-container *ngIf=\"contentTemplate\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n    </ng-container>\n    }\n  </div>\n</div>\n", 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}}.mc-code-block-light ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-light ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-light ::ng-deep .hljs{background:#fefefe;color:#545454}.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-quote{color:#696969}.mc-code-block-light ::ng-deep .hljs-variable,.mc-code-block-light ::ng-deep .hljs-template-variable,.mc-code-block-light ::ng-deep .hljs-tag,.mc-code-block-light ::ng-deep .hljs-name,.mc-code-block-light ::ng-deep .hljs-selector-id,.mc-code-block-light ::ng-deep .hljs-selector-class,.mc-code-block-light ::ng-deep .hljs-regexp,.mc-code-block-light ::ng-deep .hljs-deletion{color:#d91e18}.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-link{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-attribute{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-addition{color:green}.mc-code-block-light ::ng-deep .hljs-title,.mc-code-block-light ::ng-deep .hljs-section{color:#007faa}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{color:#7928a1}.mc-code-block-light ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-light ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast: active){.mc-code-block-light ::ng-deep .hljs-addition,.mc-code-block-light ::ng-deep .hljs-attribute,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-link,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-quote{color:highlight}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-light{border:1px solid #d7d8da}.mc-code-block-light code.hljs{padding:1em}.mc-code-block-light{background-color:#f5f5f5}.mc-code-block-light .mc-code-lang,.mc-code-block-light .mc-code-block-actions .mc-copy-btn,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn{color:#252b3a}.mc-code-block-light .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn:hover{background-color:#ebebeb}.mc-code-block-light .mc-mermaid-content{background:#fefefe}.mc-code-block-dark ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-dark ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-dark ::ng-deep .hljs{background:#2b2b2b;color:#f8f8f2}.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-quote{color:#d4d0ab}.mc-code-block-dark ::ng-deep .hljs-variable,.mc-code-block-dark ::ng-deep .hljs-template-variable,.mc-code-block-dark ::ng-deep .hljs-tag,.mc-code-block-dark ::ng-deep .hljs-name,.mc-code-block-dark ::ng-deep .hljs-selector-id,.mc-code-block-dark ::ng-deep .hljs-selector-class,.mc-code-block-dark ::ng-deep .hljs-regexp,.mc-code-block-dark ::ng-deep .hljs-deletion{color:#ffa07a}.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-link{color:#f5ab35}.mc-code-block-dark ::ng-deep .hljs-attribute{color:gold}.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-addition{color:#abe338}.mc-code-block-dark ::ng-deep .hljs-title,.mc-code-block-dark ::ng-deep .hljs-section{color:#00e0e0}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{color:#dcc6e0}.mc-code-block-dark ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-dark ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast: active){.mc-code-block-dark ::ng-deep .hljs-addition,.mc-code-block-dark ::ng-deep .hljs-attribute,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-link,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-quote{color:highlight}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-dark{border:1px solid #4e5057}.mc-code-block-dark code.hljs{padding:1em}.mc-code-block-dark{background-color:#34363a}.mc-code-block-dark .mc-code-lang,.mc-code-block-dark .mc-code-block-actions .mc-copy-btn,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn{color:#ced1db}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn:hover{background-color:#393a3e}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn img,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn img{filter:brightness(1.5)}.mc-code-block-dark .mc-mermaid-content{background:#2b2b2b!important}@keyframes collapse-expand{0%{opacity:0;max-height:0}to{opacity:1;max-height:1000px}}@keyframes collapse-collapse{0%{opacity:1;max-height:1000px}to{opacity:0;max-height:0}}.mc-block-hidden{display:none}.collapse-expanded{animation:collapse-expand .5s ease-out}.collapse-collapsed{animation:collapse-collapse .5s ease-in}.mc-code-block{margin:1rem 0;overflow:hidden;border-radius:14px}.mc-code-block pre{margin:0}.mc-code-block .mc-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box}.mc-code-block .mc-code-block-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.mc-code-block .mc-code-block-header .mc-code-lang{font-size:14px}.mc-code-block .mc-mermaid-content{position:relative;width:100%;height:400px;overflow:hidden;background:inherit}.mc-code-block .mc-code-block-actions{display:flex;align-items:center}.mc-code-block .mc-code-block-actions .mc-copy-btn,.mc-code-block .mc-code-block-actions .mc-toggle-btn{cursor:pointer;border-radius:4px;font-size:18px;padding:4px}.mc-code-block .mc-diagram-switch{display:flex;align-items:center;list-style:none;margin:0;padding:2px;border-radius:4px;background-color:var(--devui-icon-hover-bg);position:relative;transition:all .3s ease;overflow:hidden;height:24px}.mc-code-block .mc-diagram-switch:before{content:\"\";position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);background-color:var(--devui-base-bg);border-radius:4px;transition:transform .3s ease;box-shadow:0 1px 2px #0000001a;z-index:1}.mc-code-block .mc-diagram-switch.mc-show-code:before{transform:translate(100%)}.mc-code-block .mc-diagram-switch .mc-diagram-switch-active{text-shadow:0 0 .4px #252b3a}.mc-code-block .mc-diagram-switch li{position:relative;padding:0 8px;margin:0;font-size:12px;cursor:pointer;transition:color .3s ease;z-index:2}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { code: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], blockIndex: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], enableMermaid: [{
+                type: Input
+            }], mermaidConfig: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], rootRef: [{
+                type: ViewChild,
+                args: ['rootRef']
+            }], mermaidContentRef: [{
+                type: ViewChild,
+                args: ['mermaidContent']
+            }], codeElementRef: [{
+                type: ViewChild,
+                args: ['codeElement', { static: false }]
+            }], codeElementTemplates: [{
+                type: ViewChildren,
+                args: ['codeElementTemplate']
+            }] } });
+
+const defaultTypingConfig = {
+    step: 2,
+    interval: 50,
+    style: 'normal',
+};
+
+class MarkdownCardFoundation extends BaseFoundation {
+    constructor(adapter) {
+        super({ ...adapter });
+        this.isToken = (node) => {
+            return 'type' in node && 'content' in node;
+        };
+        this.typewriterEnd = () => {
+            this.setState({ isTyping: false });
+            this._adapter.typingEnd?.();
+        };
+        this.getThinkContent = (content, thinkOptions) => {
+            const thinkClass = thinkOptions?.customClass || 'mc-think-block';
+            return (content
+                ?.replace('<think>', `<div class="${thinkClass}">`)
+                ?.replace('</think>', '</div>') || '');
+        };
+        this.parseTypingContent = (content) => {
+            const { typingOptions } = this.getProps();
+            const { typingIndex } = this.getStates();
+            content = content.slice(0, typingIndex) || '';
+            const options = { ...defaultTypingConfig, ...typingOptions };
+            if (options.style === 'cursor') {
+                content += `<span class="mc-typewriter mc-typewriter-cursor">|</span>`;
+            }
+            else if (options.style === 'color' || options.style === 'gradient') {
+                content =
+                    content.slice(0, -5) +
+                        `<span class="mc-typewriter mc-typewriter-${options.style}">${content.slice(-5)}</span>`;
+            }
+            return content || '';
+        };
+        this.parseContent = () => {
+            const { content, thinkOptions, enableThink } = this.getProps();
+            const { typing, isTyping } = this.getStates();
+            let parseContent = content || '';
+            if (typing && isTyping) {
+                parseContent = this.parseTypingContent(content);
+            }
+            if (enableThink) {
+                parseContent = this.getThinkContent(content, thinkOptions);
+            }
+            parseContent = this._adapter.parseContent(parseContent);
+        };
+        this.typewriterStart = () => {
+            const { typingOptions } = this.getProps();
+            const { timer } = this.getStates();
+            if (timer) {
+                clearTimeout(timer);
+            }
+            this.setState({ isTyping: true });
+            this._adapter.typingStart?.();
+            const options = { ...defaultTypingConfig, ...typingOptions };
+            const typingStep = () => {
+                const { typingIndex, content } = this.getStates();
+                let step = options.step || 2;
+                if (Array.isArray(options.step)) {
+                    step =
+                        options.step[0] +
+                            Math.floor(Math.random() * (options.step[1] - options.step[0]));
+                }
+                let index = typingIndex + step;
+                this.setState({ typingIndex: index });
+                this.parseContent();
+                this._adapter.typingEvent();
+                if (index >= content.length) {
+                    this.typewriterEnd();
+                    this.parseContent();
+                    return;
+                }
+                let typingTimeout = setTimeout(typingStep, typeof options.interval === 'number' ? options.interval : 50);
+                this.setState({
+                    timer: typingTimeout,
+                });
+            };
+            let typingStepTimeout = setTimeout(typingStep);
+            this.setState({
+                timer: typingStepTimeout,
+            });
+        };
+    }
+}
+
+// 判断是否自闭合标签
+const isSelfClosingTag = (token) => {
+    // 判断token.content里面是否包含完整的HTML结构（所有开始标签都有对应的结束标签）
+    const content = token.content || '';
+    // 检查是否是自闭合标签（如 <img />, <br /> 等）
+    if (content.match(/<(\w+)[^>]*\/>/)) {
+        return true;
+    }
+    // 检查是否包含完整的HTML结构
+    const tagStack = [];
+    const openTagRegex = /<(\w+)[^>]*>/g;
+    const closeTagRegex = /<\/(\w+)>/g;
+    let openMatch;
+    let closeMatch;
+    // 重置正则表达式的lastIndex
+    openTagRegex.lastIndex = 0;
+    closeTagRegex.lastIndex = 0;
+    // 按顺序处理所有标签
+    const allMatches = [];
+    // 收集所有开始标签
+    while ((openMatch = openTagRegex.exec(content)) !== null) {
+        allMatches.push({
+            type: 'open',
+            tagName: openMatch[1],
+            index: openMatch.index
+        });
+    }
+    // 收集所有结束标签
+    while ((closeMatch = closeTagRegex.exec(content)) !== null) {
+        allMatches.push({
+            type: 'close',
+            tagName: closeMatch[1],
+            index: closeMatch.index
+        });
+    }
+    // 按位置排序
+    allMatches.sort((a, b) => a.index - b.index);
+    // 检查标签是否完全匹配
+    for (const match of allMatches) {
+        if (match.type === 'open') {
+            tagStack.push(match.tagName);
+        }
+        else {
+            if (tagStack.length === 0) {
+                return false; // 没有对应的开始标签
+            }
+            const lastOpenTag = tagStack[tagStack.length - 1];
+            if (lastOpenTag !== match.tagName) {
+                return false; // 标签不匹配
+            }
+            tagStack.pop();
+        }
+    }
+    // 只有当所有标签都正确匹配时，才认为是自闭合的
+    return tagStack.length === 0;
+};
+// 判断是否是结束标签
+const isClosingTag = (openToken, closeToken) => {
+    const openContent = openToken?.content || '';
+    const closeContent = closeToken?.content || '';
+    const openTagMatch = openContent.match(/<(\w+)/);
+    const closeTagMatch = closeContent.match(/<\/(\w+)/);
+    if (openTagMatch && closeTagMatch) {
+        return openTagMatch[1] === closeTagMatch[1];
+    }
+    return false;
+};
+// 创建ast树节点
+const genTreeNode = (node) => {
+    return {
+        nodeType: node ? node.type.replace('_open', '') : 'root',
+        openNode: node,
+        closeNode: null,
+        children: [],
+        vNodeKey: node?.vNodeKey || ''
+    };
+};
+// 匹配成对html token
+const matchHtmlToken = (token, stack) => {
+    // 简单排除单独的闭合标签
+    const isCloseTag = token.content.startsWith('</');
+    if (!stack.length) {
+        token.nesting = isCloseTag ? 0 : 1;
+        stack.push(token);
+        return;
+    }
+    // 判断当前token是否是上一个html token的闭合标签
+    const prevToken = stack[stack.length - 1];
+    const closing = isClosingTag(prevToken, token);
+    if (closing) {
+        token.nesting = -1;
+        stack.pop();
+    }
+    else {
+        if (isCloseTag) {
+            token.nesting = 0;
+        }
+        else {
+            token.nesting = 1;
+            stack.push(token);
+        }
+    }
+};
+const isValidTagName = (tagName) => {
+    if (!tagName)
+        return false;
+    try {
+        document.createElement(tagName);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+};
+const tokensToAst = (tokens) => {
+    // 递归处理 inline 类型的 token
+    const processInlineToken = (token) => {
+        const node = genTreeNode(token);
+        // 如果 token 有 children，递归处理它们
+        if (token.children && token.children.length > 0) {
+            node.children = tokensToAst(token.children);
+        }
+        return node;
+    };
+    // 创建根节点
+    const rootNode = genTreeNode(null);
+    let curr = rootNode;
+    const stack = [];
+    const htmlInlineTokenStack = [];
+    const htmlBlockTokenStack = [];
+    // 处理html token nesting值
+    tokens.forEach((tok, idx) => {
+        tok.vNodeKey = `mc-markdown-content-key-${idx}`;
+        tok.tokenIndex = idx;
+        if (tok.type.includes('html_')) {
+            if (isSelfClosingTag(tok)) {
+                tok.nesting = 0;
+                return;
+            }
+            const stack = tok.type === 'html_block'
+                ? htmlBlockTokenStack
+                : htmlInlineTokenStack;
+            matchHtmlToken(tok, stack);
+        }
+    });
+    tokens.forEach((tok, idx) => {
+        let tmp;
+        if (tok.nesting === 1) {
+            // 开始标签
+            tmp = genTreeNode(tok);
+            curr.children.push(tmp);
+            stack.push(curr);
+            curr = tmp;
+        }
+        else if (tok.nesting === -1) {
+            // 结束标签
+            curr.closeNode = tok;
+            if (!stack.length) {
+                throw new Error('AST stack underflow.');
+            }
+            tmp = stack.pop();
+            curr = tmp;
+        }
+        else if (tok.nesting === 0) {
+            // 自闭合标签或 inline 内容
+            if (tok.type === 'inline' && tok.children && tok.children.length > 0) {
+                // 对于 inline 类型，递归处理其 children
+                const inlineNode = processInlineToken(tok);
+                curr.children.push(inlineNode);
+            }
+            else {
+                // 普通 token，直接添加
+                curr.children.push(tok);
+            }
+        }
+        else {
+            throw new Error(`Invalid nesting level found in token index ${idx}.`);
+        }
+    });
+    if (stack.length !== 0) {
+        // throw new Error('Unbalanced block open/close tokens.');
+    }
+    return rootNode.children;
+};
+// 声明一个utils静态默认导出
+var MdParserUtils = {
+    isSelfClosingTag,
+    isClosingTag,
+    tokensToAst,
+    genTreeNode,
+    matchHtmlToken,
+    isValidTagName
+};
+
+class MarkdownCardComponent extends BaseComponent {
+    constructor(renderer, cdr) {
+        super();
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.content = '';
+        this.typing = false;
+        this.enableThink = false;
+        this.typingOptions = {};
+        this.thinkOptions = {};
+        this.mdOptions = {};
+        this.mdPlugins = [];
+        this.customXssRules = [];
+        this.theme = 'light';
+        this.enableMermaid = false;
+        this.mermaidConfig = {};
+        this.actionsTemplate = null;
+        this.headerTemplate = null;
+        this.contentTemplate = null;
+        // 组件缓存映射表，用于存储已创建的CodeBlockComponent实例
+        this.codeBlockComponentsCache = new Map();
+        this.afterMdtInit = new EventEmitter();
+        this.typingStart = new EventEmitter();
+        this.typingEvent = new EventEmitter();
+        this.typingEnd = new EventEmitter();
+        this.typingIndex = 0;
+        this.isTyping = false;
+        this.timer = null;
+        this.parser = MdParserUtils;
+        this.noDiff = false;
+        this.mdt = markdownit({
+            breaks: true,
+            linkify: true,
+            html: true,
+            highlight: (str, lang) => {
+                // 与Vue组件保持一致的高亮处理
+                return '';
+            },
+            ...this.mdOptions,
+        });
+        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);
+        this.parseContent();
+        this.afterMdtInit.emit(this.mdt);
+    }
+    get adapter() {
+        return {
+            ...super.adapter,
+            locale: (key, params) => this.adapter.locale(key, params),
+            typingStart: () => this.typingStart.emit(),
+            typingEnd: () => this.typingEnd.emit(),
+            typingEvent: () => this.typingEvent.emit(),
+            parseContent: (content) => {
+                // 解析 Markdown 内容
+                const tokens = this.mdt.parse(content, {});
+                const ast = this.parser.tokensToAst(tokens);
+                const vnodes = this.astToVnodes(ast);
+                this.renderContent(vnodes);
+            },
+        };
+    }
+    ngOnChanges(changes) {
+        if (changes['content']) {
+            if (!this.typing) {
+                this.typingIndex = this.content?.length || 0;
+                this.parseContent();
+                return;
+            }
+            if (this.content.indexOf(changes['content']?.previousValue) === -1) {
+                this.typingIndex = 0;
+            }
+            // 使用setTimeout模拟Vue的nextTick行为
+            setTimeout(() => this.typewriterStart());
+        }
+        if (changes['enableThink'] || changes['thinkOptions'] || changes['theme']) {
+            this.parseContent();
+        }
+        if (changes['customXssRules']) {
+            this.mdCardService.setCustomXssRules(this.customXssRules || []);
+            this.parseContent();
+        }
+        if (changes['mdPlugins']) {
+            this.mdCardService.setMdPlugins(this.mdPlugins || [], this.mdt);
+            this.parseContent();
+        }
+    }
+    parseContent() {
+        this.foundation.parseContent();
+    }
+    renderContent(vnodes) {
+        if (!this.markdownContainer || !this.markdownContainer.element) {
+            return;
+        }
+        if (this.noDiff) {
+            this.renderContentNoDiff(vnodes);
+            return;
+        }
+        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'));
+        });
+        vnodes.forEach((node) => {
+            if (node &&
+                (node.nodeType ||
+                    typeof node === 'string' ||
+                    node instanceof HTMLElement)) {
+                if (codeBlockWrappers.includes(node)) {
+                    newContainerDiv.body.firstChild?.appendChild(this.getEmptyCodeBlock(node));
+                }
+                else {
+                    newContainerDiv.body.firstChild?.appendChild(node);
+                }
+            }
+        });
+        let newContainerDivHTML = newContainerDiv.body?.firstChild?.outerHTML || '';
+        const patches = this.diffDom.diff(container, newContainerDivHTML);
+        this.diffDom.apply(container, patches);
+        // 将codeBlockWrappers中的每个div元素替换container中的对应key属性的元素
+        codeBlockWrappers.forEach((newCodeBlock) => {
+            if (newCodeBlock &&
+                newCodeBlock.attributes &&
+                newCodeBlock.attributes.key) {
+                const key = newCodeBlock?.attributes?.key?.value;
+                const existingElement = container.querySelector(`[key="${key}"]`);
+                if (existingElement &&
+                    newCodeBlock instanceof HTMLElement &&
+                    existingElement !== newCodeBlock) {
+                    existingElement.replaceWith(newCodeBlock);
+                }
+            }
+        });
+    }
+    getEmptyCodeBlock(node) {
+        const codeNode = document.createElement('div');
+        codeNode.className = 'code-block-wrapper';
+        codeNode.setAttribute('key', node?.attributes?.key?.value);
+        return codeNode;
+    }
+    astToVnodes(nodes) {
+        return nodes.map((node) => this.processASTNode(node));
+    }
+    processASTNode(node) {
+        if (node.nodeType === 'html_inline' || node.nodeType === 'html_block') {
+            return this.processHTMLNode(node);
+        }
+        if (node.nodeType === 'inline') {
+            return this.processInlineToken(node);
+        }
+        if (this.foundation.isToken(node)) {
+            return this.processToken(node);
+        }
+        return this.processASTNodeInternal(node);
+    }
+    processHTMLNode(node) {
+        if (!node.openNode?.content)
+            return;
+        const parser = new DOMParser();
+        const tagName = node.nodeType === 'html_block' ? 'div' : 'span';
+        const containerDocument = parser.parseFromString(`<${tagName}>${node.openNode.content}</${tagName}>`, 'text/html');
+        const containerBody = containerDocument.body.firstChild;
+        // 处理子节点
+        if (node.children && node.children.length > 0) {
+            node.children.forEach((child) => {
+                const childVnode = this.processASTNode(child);
+                if (childVnode && containerBody) {
+                    (containerBody?.firstChild || containerBody).appendChild(childVnode);
+                }
+            });
+        }
+        return containerBody;
+    }
+    renderContentNoDiff(vnodes) {
+        const container = this.markdownContainer.element.nativeElement;
+        const newContentFragement = this.renderer.createElement('div');
+        vnodes.forEach((node) => {
+            if (node &&
+                (node.nodeType ||
+                    typeof node === 'string' ||
+                    node instanceof HTMLElement)) {
+                newContentFragement.appendChild(node);
+            }
+        });
+        while (container.firstChild) {
+            container.removeChild(container.firstChild);
+        }
+        container.appendChild(newContentFragement);
+    }
+    processInlineToken(node) {
+        let html = '';
+        try {
+            if (!node.openNode) {
+                return null;
+            }
+            html = this.mdt.renderer.render([node.openNode], this.mdt.options, {});
+        }
+        catch (error) {
+            console.error('Error rendering inline token:', node);
+            return null;
+        }
+        // 将HTML字符串转换为DOM节点
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(`<div>${html}</div>`, 'text/html');
+        const token = doc.body.firstChild;
+        // 如果只有一个子节点，直接返回子节点而不是包含div
+        if (token && token.childNodes.length === 1) {
+            return token.firstChild;
+        }
+        return token;
+    }
+    processFenceNode(token) {
+        const language = token.info?.replace(/<span\b[^>]*>/i, '').replace('</span>', '') || '';
+        const code = token.content || '';
+        return this.createCodeBlock(language, code, token.tokenIndex || 0);
+    }
+    processASTNodeInternal(node) {
+        let tagName = 'div';
+        if (node.openNode?.tag && this.parser.isValidTagName(node.openNode?.tag)) {
+            tagName = node.openNode?.tag;
+        }
+        const element = this.renderer.createElement(tagName);
+        // 设置属性
+        if (node.openNode.attrs) {
+            node.openNode.attrs.forEach(([key, value]) => {
+                this.renderer.setAttribute(element, key, value);
+            });
+        }
+        // 特殊处理fence类型的token
+        if (node.openNode.type === 'fence') {
+            return this.processFenceNode(node.openNode);
+        }
+        // 处理所有带tag的AST节点
+        if (node.openNode?.tag) {
+            let tagName = this.parser.isValidTagName(node.openNode?.tag)
+                ? node.openNode?.tag
+                : 'div';
+            const element = this.renderer.createElement(tagName);
+            // 递归处理所有子节点并添加到当前元素
+            node.children.forEach((child) => {
+                const childNode = this.processASTNode(child);
+                if (childNode) {
+                    element.appendChild(childNode);
+                }
+            });
+            return element;
+        }
+        node.children.forEach((child) => {
+            const childNode = this.processASTNode(child);
+            if (childNode) {
+                element.appendChild(childNode);
+            }
+        });
+        return element;
+    }
+    processToken(token) {
+        if (token.type === 'text') {
+            return this.renderer.createText(token.content || '');
+        }
+        if (token.type === 'inline') {
+            return this.processInlineToken(token);
+        }
+        if (token.type === 'fence') {
+            return this.processFenceNode(token);
+        }
+        if (token.type === 'softbreak') {
+            if (this.mdt.options.breaks) {
+                return this.renderer.createElement('br');
+            }
+            else {
+                return this.renderer.createText('\n');
+            }
+        }
+        if (token.type === 'html_block' || token.type === 'html_inline') {
+            const parser = new DOMParser();
+            const tagName = token.type === 'html_block' ? 'div' : 'span';
+            const doc = parser.parseFromString(`<${tagName}>${token.content}</${tagName}>`, 'text/html');
+            const tokenDom = doc.body;
+            // 如果只有一个子节点，直接返回子节点而不是包含div
+            if (tokenDom.firstChild && tokenDom.childNodes.length === 1) {
+                return tokenDom.firstChild;
+            }
+            return tokenDom;
+        }
+        if (token.tag) {
+            const tagName = this.parser.isValidTagName(token.tag) ? token.tag : 'div';
+            const element = this.renderer.createElement(tagName);
+            if (token.attrs) {
+                token.attrs.forEach(([key, value]) => {
+                    this.renderer.setAttribute(element, key, value);
+                });
+            }
+            // 设置内容
+            if (token.content) {
+                const textNode = this.renderer.createText(token.content);
+                element.appendChild(textNode);
+            }
+            return element;
+        }
+        return this.renderer.createText(token.content || '');
+    }
+    createCodeBlock(language, code, blockIndex) {
+        const key = `code-block-${blockIndex}`;
+        // 检查缓存中是否已存在相同blockIndex的组件
+        if (this.codeBlockComponentsCache.has(key)) {
+            const cachedItem = this.codeBlockComponentsCache.get(key);
+            if (cachedItem) {
+                // 更新现有组件的属性
+                const componentRef = cachedItem.componentRef;
+                componentRef.setInput('language', language);
+                componentRef.setInput('code', code);
+                componentRef.setInput('theme', this.theme);
+                // 触发变更检测
+                componentRef.changeDetectorRef.detectChanges();
+                // 返回缓存的容器，无需重新创建
+                return cachedItem.container;
+            }
+        }
+        // 缓存中不存在，创建新组件
+        const codeBlockContainer = this.renderer.createElement('div');
+        this.renderer.setAttribute(codeBlockContainer, 'key', key);
+        const componentRef = this.markdownContainer.createComponent(CodeBlockComponent, {
+            projectableNodes: [],
+            injector: this.markdownContainer.injector,
+        });
+        // 设置组件属性
+        componentRef.instance.language = language;
+        componentRef.instance.code = code;
+        componentRef.instance.blockIndex = blockIndex;
+        componentRef.instance.theme = this.theme;
+        componentRef.instance.enableMermaid = this.enableMermaid;
+        componentRef.instance.mermaidConfig = this.mermaidConfig || {};
+        componentRef.instance.actionsTemplate = this.actionsTemplate;
+        componentRef.instance.headerTemplate = this.headerTemplate;
+        componentRef.instance.contentTemplate = this.contentTemplate;
+        // 触发变更检测
+        componentRef.changeDetectorRef.detectChanges();
+        // 将组件的DOM元素附加到容器中
+        this.renderer.appendChild(codeBlockContainer, componentRef.location.nativeElement);
+        // 添加样式类
+        this.renderer.addClass(codeBlockContainer, 'code-block-wrapper');
+        // 缓存组件实例和容器
+        this.codeBlockComponentsCache.set(key, {
+            componentRef: componentRef,
+            container: codeBlockContainer,
+        });
+        // 返回创建的DOM容器
+        return codeBlockContainer;
+    }
+    typewriterStart() {
+        this.foundation.typewriterStart();
+    }
+    // 在组件销毁时清理缓存，避免内存泄漏
+    ngOnDestroy() {
+        // 销毁所有缓存的组件实例
+        this.codeBlockComponentsCache.forEach((cachedItem) => {
+            cachedItem.componentRef.destroy();
+        });
+        this.codeBlockComponentsCache.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", 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: "17.3.0", type: MarkdownCardComponent, 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MarkdownCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-markdown-card', 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"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
+                type: Input
+            }], typing: [{
+                type: Input
+            }], enableThink: [{
+                type: Input
+            }], typingOptions: [{
+                type: Input
+            }], thinkOptions: [{
+                type: Input
+            }], mdOptions: [{
+                type: Input
+            }], mdPlugins: [{
+                type: Input
+            }], customXssRules: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], enableMermaid: [{
+                type: Input
+            }], mermaidConfig: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], afterMdtInit: [{
+                type: Output
+            }], typingStart: [{
+                type: Output
+            }], typingEvent: [{
+                type: Output
+            }], typingEnd: [{
+                type: Output
+            }], markdownContainer: [{
+                type: ViewChild,
+                args: ['markdownContainer', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class MarkdownCardModule {
+    static forRoot() {
+        return {
+            ngModule: MarkdownCardModule,
+            providers: []
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MarkdownCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MarkdownCardModule, declarations: [MarkdownCardComponent,
+            CodeBlockComponent], imports: [CommonModule,
+            TranslatePipe,
+            LocaleModule], exports: [MarkdownCardComponent,
+            CodeBlockComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MarkdownCardModule, imports: [CommonModule,
+            LocaleModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MarkdownCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MarkdownCardComponent,
+                        CodeBlockComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TranslatePipe,
+                        LocaleModule,
+                    ],
+                    exports: [
+                        MarkdownCardComponent,
+                        CodeBlockComponent
+                    ],
+                    providers: [],
+                    bootstrap: []
+                }]
+        }] });
+
 /*
  * Public API Surface of components-ng
  */
@@ -1023,5 +2520,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarBodyIconComponent, AvatarComponent, AvatarNoBodyIconComponent, BubbleComponent, BubbleLoadingComponent, BubbleModule, InputComponent, InputModule, LocaleModule, LocaleService, TranslatePipe, inputContextToken };
+export { AvatarBodyIconComponent, AvatarComponent, AvatarNoBodyIconComponent, BubbleComponent, BubbleLoadingComponent, BubbleModule, CodeBlockComponent, InputComponent, InputModule, LocaleModule, LocaleService, MarkdownCardComponent, MarkdownCardModule, TranslatePipe, inputContextToken };
 //# sourceMappingURL=matechat-ng.mjs.map