ai-chat-ui-kit 0.1.0

package/packages/core/src/parser/markdown.ts

@@ -0,0 +1,206 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+
+// 声明全局 __copyCode 方法
+declare global {
+  interface Window {
+    __copyCode(button: HTMLElement): void;
+  }
+}
+
+// 创建 marked 实例
+const marked = new Marked(
+  markedHighlight({
+    langPrefix: 'hljs language-',
+    highlight(code, lang) {
+      if (lang && hljs.getLanguage(lang)) {
+        return hljs.highlight(code, { language: lang }).value;
+      }
+      return hljs.highlightAuto(code).value;
+    }
+  })
+);
+
+// 配置 marked
+marked.setOptions({
+  breaks: true,
+  gfm: true
+});
+
+/**
+ * 自定义 renderer，扩展代码块渲染
+ */
+function createRenderer() {
+  const renderer = new marked.Renderer();
+
+  // 自定义代码块渲染
+  renderer.code = function(code: string, infostring: string | undefined, escaped: boolean) {
+    const language = infostring || '';
+    const highlighted = language && hljs.getLanguage(language)
+      ? hljs.highlight(code, { language }).value
+      : hljs.highlightAuto(code).value;
+
+    return `
+      <div class="markdown-code-block" data-language="${language}">
+        <div class="code-block-header">
+          <span class="code-language">${language || 'plaintext'}</span>
+          <button class="code-copy-btn" onclick="window.__copyCode(this)">复制</button>
+        </div>
+        <pre><code class="hljs language-${language}">${highlighted}</code></pre>
+      </div>
+    `;
+  };
+
+  // 自定义表格渲染
+  renderer.table = function(header: string, body: string) {
+    return `
+      <div class="markdown-table-wrapper">
+        <table>
+          <thead>${header}</thead>
+          <tbody>${body}</tbody>
+        </table>
+      </div>
+    `;
+  };
+
+  return renderer;
+}
+
+// 设置自定义 renderer
+marked.use({ renderer: createRenderer() });
+
+/**
+ * 解析 Markdown 为 HTML
+ * @param content Markdown 字符串
+ * @returns 解析后的 HTML 字符串
+ */
+export function parseMarkdown(content: string): string {
+  if (!content) {
+    return '';
+  }
+
+  try {
+    return marked.parse(content) as string;
+  } catch (error) {
+    console.error('Markdown parse error:', error);
+    // 降级：转义 HTML 并返回纯文本
+    return escapeHtml(content);
+  }
+}
+
+/**
+ * 检测内容是否包含 Markdown 语法
+ * @param content 待检测内容
+ * @returns 是否包含 Markdown
+ */
+export function detectMarkdown(content: string): boolean {
+  if (!content) {
+    return false;
+  }
+
+  // 常见的 Markdown 语法正则
+  const markdownPatterns = [
+    /^#{1,6}\s+.+/m,           // 标题
+    /`{3}[\s\S]*?`{3}/,        // 代码块
+    /`[^`]+`/,                  // 行内代码
+    /\*\*[^*]+\*\*/,            // 粗体
+    /\*[^*]+\*/,                 // 斜体
+    /\[.+?\]\(.+?\)/,           // 链接
+    /!\[.+?\]\(.+?\)/,          // 图片
+    /^\s*[-*+]\s+.+/m,          // 无序列表
+    /^\s*\d+\.\s+.+/m,          // 有序列表
+    /^\s*>.+/m,                 // 引用
+    /\|(.+)\|/,                 // 表格
+    /^---$/m                     // 分隔线
+  ];
+
+  return markdownPatterns.some(pattern => pattern.test(content));
+}
+
+/**
+ * 转义 HTML 特殊字符
+ */
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+
+  return text.replace(/[&<>"']/g, char => map[char]);
+}
+
+/**
+ * 注册全局代码复制函数
+ * 需要在浏览器环境中调用
+ */
+export function registerCodeCopyHandler(): void {
+  if (typeof window !== 'undefined') {
+    window.__copyCode = function(button: HTMLElement) {
+      const codeBlock = button.closest('.markdown-code-block');
+      if (!codeBlock) return;
+
+      const code = codeBlock.querySelector('code');
+      if (!code) return;
+
+      const text = code.textContent || '';
+
+      navigator.clipboard.writeText(text).then(() => {
+        const originalText = button.textContent;
+        button.textContent = '已复制';
+        button.classList.add('copied');
+
+        setTimeout(() => {
+          button.textContent = originalText;
+          button.classList.remove('copied');
+        }, 2000);
+      }).catch(err => {
+        console.error('Copy failed:', err);
+      });
+    };
+  }
+}
+
+/**
+ * 渲染 Markdown 到指定容器
+ * @param content Markdown 内容
+ * @param container 目标容器元素
+ * @returns 渲染后的 HTML 字符串
+ */
+export function renderMarkdownToContainer(content: string, container: HTMLElement): string {
+  const html = parseMarkdown(content);
+  container.innerHTML = html;
+
+  // 为代码块添加复制功能
+  container.querySelectorAll('.code-copy-btn').forEach(btn => {
+    btn.addEventListener('click', function(this: HTMLButtonElement) {
+      const codeBlock = this.closest('.markdown-code-block');
+      if (!codeBlock) return;
+
+      const code = codeBlock.querySelector('code');
+      if (!code) return;
+
+      const text = code.textContent || '';
+      navigator.clipboard.writeText(text).then(() => {
+        const originalText = this.textContent;
+        this.textContent = '已复制';
+        this.classList.add('copied');
+
+        setTimeout(() => {
+          this.textContent = originalText;
+          this.classList.remove('copied');
+        }, 2000);
+      });
+    });
+  });
+
+  return html;
+}

package/packages/core/src/parser/mermaid.ts

@@ -0,0 +1,276 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+/**
+ * Mermaid 图表类型
+ */
+export type MermaidChartType = 
+  | 'graph'      // 流程图
+  | 'flowchart'  // 流图（新语法）
+  | 'sequence'   // 时序图
+  | 'class'      // 类图
+  | 'state'      // 状态图
+  | 'er'         // ER 图
+  | 'journey'    // 用户旅程图
+  | 'gantt'      // 甘特图
+  | 'pie'        // 饼图
+  | 'gitgraph'   // Git 图
+  | 'mindmap'    // 思维导图
+  | 'timeline'   // 时间线
+  | 'unknown';   // 未知类型
+
+/**
+ * Mermaid 检测结果的接口
+ */
+export interface MermaidDetectionResult {
+  isMermaid: boolean;
+  chartType: MermaidChartType;
+  code: string;
+}
+
+/**
+ * 检测代码块是否为 Mermaid 图表
+ * @param code 待检测的代码字符串
+ * @returns 是否为 Mermaid 图表
+ */
+export function detectMermaid(code: string): boolean {
+  if (!code || typeof code !== 'string') {
+    return false;
+  }
+
+  const trimmed = code.trim();
+  
+  // Mermaid 代码块通常以这些关键字开头
+  const mermaidKeywords = [
+    'graph',      // 流程图（LR, RL, TB, BT 方向）
+    'flowchart',  // 新流程图语法
+    'sequenceDiagram',  // 时序图
+    'classDiagram',     // 类图
+    'stateDiagram',     // 状态图
+    'erDiagram',        // ER 图
+    'journey',          // 用户旅程图
+    'gantt',            // 甘特图
+    'pie',              // 饼图
+    'gitGraph',         // Git 图
+    'mindmap',          // 思维导图
+    'timeline',         // 时间线
+    'quadrantChart'     // 象限图
+  ];
+
+  // 检查是否以 Mermaid 关键字开头
+  for (const keyword of mermaidKeywords) {
+    if (trimmed.startsWith(keyword)) {
+      return true;
+    }
+  }
+
+  // 检查 graph 方向简写（如 graph TD, graph LR）
+  const graphDirectionRegex = /^(graph|flowchart)\s+(TB|TD|BT|RL|LR)/i;
+  if (graphDirectionRegex.test(trimmed)) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * 检测 Mermaid 图表类型
+ * @param code Mermaid 代码
+ * @returns 图表类型
+ */
+export function detectMermaidChartType(code: string): MermaidChartType {
+  if (!code || typeof code !== 'string') {
+    return 'unknown';
+  }
+
+  const trimmed = code.trim();
+
+  if (/^(graph|flowchart)/i.test(trimmed)) {
+    return 'flowchart';
+  }
+
+  if (/^sequenceDiagram/i.test(trimmed)) {
+    return 'sequence';
+  }
+
+  if (/^classDiagram/i.test(trimmed)) {
+    return 'class';
+  }
+
+  if (/^stateDiagram/i.test(trimmed)) {
+    return 'state';
+  }
+
+  if (/^erDiagram/i.test(trimmed)) {
+    return 'er';
+  }
+
+  if (/^journey/i.test(trimmed)) {
+    return 'journey';
+  }
+
+  if (/^gantt/i.test(trimmed)) {
+    return 'gantt';
+  }
+
+  if (/^pie/i.test(trimmed)) {
+    return 'pie';
+  }
+
+  if (/^gitGraph/i.test(trimmed)) {
+    return 'gitgraph';
+  }
+
+  if (/^mindmap/i.test(trimmed)) {
+    return 'mindmap';
+  }
+
+  if (/^timeline/i.test(trimmed)) {
+    return 'timeline';
+  }
+
+  return 'unknown';
+}
+
+/**
+ * 从 Markdown 内容中提取 Mermaid 代码块
+ * @param content Markdown 内容
+ * @returns 提取的 Mermaid 代码数组
+ */
+export function extractMermaidFromMarkdown(content: string): string[] {
+  if (!content) {
+    return [];
+  }
+
+  const mermaidBlocks: string[] = [];
+  
+  // 匹配 ```mermaid ... ``` 代码块
+  const mermaidRegex = /```mermaid\s*([\s\S]*?)```/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = mermaidRegex.exec(content)) !== null) {
+    if (match[1]) {
+      mermaidBlocks.push(match[1].trim());
+    }
+  }
+
+  return mermaidBlocks;
+}
+
+/**
+ * 渲染 Mermaid 图表到指定容器
+ * @param code Mermaid 代码
+ * @param container 目标容器元素
+ * @param options 可选配置
+ */
+export function renderMermaid(
+  code: string,
+  container: HTMLElement,
+  options?: {
+    theme?: 'default' | 'dark' | 'forest' | 'neutral';
+    backgroundColor?: string;
+    scale?: number;
+  }
+): void {
+  if (!code || !container) {
+    console.error('renderMermaid: code or container is missing');
+    return;
+  }
+
+  // 检查 mermaid 是否可用
+  if (typeof window === 'undefined') {
+    console.error('renderMermaid: only works in browser environment');
+    return;
+  }
+
+  // 动态导入 mermaid（避免 SSR 问题）
+  import('mermaid')
+    .then((mermaid) => {
+      // 初始化 mermaid
+      mermaid.default.initialize({
+        startOnLoad: false,
+        theme: options?.theme || 'default',
+        securityLevel: 'loose',
+        flowchart: { useMaxWidth: true, htmlLabels: true },
+        ...options
+      });
+
+      // 生成唯一 ID
+      const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+      // 创建渲染容器
+      const wrapper = document.createElement('div');
+      wrapper.className = 'mermaid-chart-wrapper';
+      wrapper.style.overflow = 'auto';
+
+      const diagramDiv = document.createElement('div');
+      diagramDiv.className = 'mermaid-chart';
+      diagramDiv.id = id;
+
+      // 设置 mermaid 代码
+      diagramDiv.textContent = code;
+
+      wrapper.appendChild(diagramDiv);
+      container.appendChild(wrapper);
+
+      // 渲染
+      mermaid.default.run({
+        querySelector: `#${id}`
+      }).catch((err: Error) => {
+        console.error('Mermaid render error:', err);
+        diagramDiv.innerHTML = `<pre style="color:red;">Mermaid 渲染失败: ${err.message}</pre>`;
+      });
+    })
+    .catch((err) => {
+      console.error('Failed to load mermaid:', err);
+      container.innerHTML = `<pre style="color:red;">无法加载 Mermaid 库</pre>`;
+    });
+}
+
+/**
+ * 批量渲染容器中的所有 Mermaid 代码块
+ * @param container 容器元素
+ */
+export function renderAllMermaidInContainer(container: HTMLElement): void {
+  if (!container) {
+    return;
+  }
+
+  // 查找所有 class 包含 language-mermaid 的 code 元素
+  const mermaidElements = container.querySelectorAll('code.language-mermaid, code.language-flow');
+  
+  mermaidElements.forEach((el) => {
+    const code = el.textContent || '';
+    const parent = el.closest('pre');
+    
+    if (parent) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'mermaid-chart-wrapper';
+      
+      parent.parentNode?.replaceChild(wrapper, parent);
+      renderMermaid(code, wrapper);
+    }
+  });
+}
+
+/**
+ * 验证 Mermaid 代码语法
+ * @param code Mermaid 代码
+ * @returns 是否有效
+ */
+export async function validateMermaid(code: string): Promise<boolean> {
+  if (!code) {
+    return false;
+  }
+
+  try {
+    const mermaid = await import('mermaid');
+    await mermaid.default.parse(code);
+    return true;
+  } catch (error) {
+    console.error('Mermaid validation error:', error);
+    return false;
+  }
+}

package/packages/core/src/plugins/PluginManager.ts

@@ -0,0 +1,232 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { MessagePlugin, Message, RenderContext } from '../types/index.js';
+
+/**
+ * 插件管理器
+ * 负责管理所有消息插件，包括注册、注销、匹配和渲染
+ */
+export class PluginManager {
+  private plugins: Map<string, MessagePlugin> = new Map();
+  private renderOrder: string[] = [];  // 渲染顺序（按优先级）
+
+  /**
+   * 注册插件
+   * @param plugin 插件实例
+   */
+  register(plugin: MessagePlugin): void {
+    if (!plugin || !plugin.type) {
+      console.error('PluginManager: Cannot register invalid plugin', plugin);
+      return;
+    }
+
+    if (this.plugins.has(plugin.type)) {
+      console.warn(`PluginManager: Plugin "${plugin.type}" is already registered, overwriting`);
+    }
+
+    this.plugins.set(plugin.type, plugin);
+    this.updateRenderOrder();
+  }
+
+  /**
+   * 注销插件
+   * @param type 插件类型标识
+   */
+  unregister(type: string): void {
+    if (this.plugins.has(type)) {
+      this.plugins.delete(type);
+      this.updateRenderOrder();
+    }
+  }
+
+  /**
+   * 获取指定类型的插件
+   * @param type 插件类型标识
+   * @returns 插件实例或 undefined
+   */
+  getPlugin(type: string): MessagePlugin | undefined {
+    return this.plugins.get(type);
+  }
+
+  /**
+   * 获取所有已注册的插件
+   * @returns 插件数组
+   */
+  getAllPlugins(): MessagePlugin[] {
+    return Array.from(this.plugins.values());
+  }
+
+  /**
+   * 根据内容匹配最合适的插件（按优先级排序）
+   * @param content 消息内容
+   * @returns 匹配的插件或 null
+   */
+  matchPlugin(content: string): MessagePlugin | null {
+    if (!content || typeof content !== 'string') {
+      return null;
+    }
+
+    const matchedPlugins: Array<{ plugin: MessagePlugin; priority: number }> = [];
+
+    for (const plugin of this.plugins.values()) {
+      if (plugin.match && typeof plugin.match === 'function') {
+        try {
+          const isMatch = plugin.match(content);
+          if (isMatch) {
+            matchedPlugins.push({
+              plugin,
+              priority: plugin.priority || 0
+            });
+          }
+        } catch (error) {
+          console.error(`PluginManager: Error in plugin "${plugin.type}" match function:`, error);
+        }
+      }
+    }
+
+    // 按优先级排序（数字越大优先级越高）
+    matchedPlugins.sort((a, b) => b.priority - a.priority);
+
+    return matchedPlugins.length > 0 ? matchedPlugins[0].plugin : null;
+  }
+
+  /**
+   * 匹配所有符合条件的插件（按优先级排序）
+   * @param content 消息内容
+   * @returns 所有匹配的插件数组
+   */
+  matchAllPlugins(content: string): MessagePlugin[] {
+    if (!content || typeof content !== 'string') {
+      return [];
+    }
+
+    const matchedPlugins: Array<{ plugin: MessagePlugin; priority: number }> = [];
+
+    for (const plugin of this.plugins.values()) {
+      if (plugin.match && typeof plugin.match === 'function') {
+        try {
+          const isMatch = plugin.match(content);
+          if (isMatch) {
+            matchedPlugins.push({
+              plugin,
+              priority: plugin.priority || 0
+            });
+          }
+        } catch (error) {
+          console.error(`PluginManager: Error in plugin "${plugin.type}" match function:`, error);
+        }
+      }
+    }
+
+    // 按优先级排序
+    matchedPlugins.sort((a, b) => b.priority - a.priority);
+
+    return matchedPlugins.map(item => item.plugin);
+  }
+
+  /**
+   * 使用匹配的插件渲染内容
+   * @param content 消息内容
+   * @param context 渲染上下文
+   * @returns 渲染结果（HTMLElement 或 HTML 字符串）
+   */
+  renderWithPlugin(content: string, context: RenderContext): HTMLElement | string {
+    const plugin = this.matchPlugin(content);
+
+    if (plugin && plugin.render) {
+      try {
+        return plugin.render(content, context);
+      } catch (error) {
+        console.error(`PluginManager: Error in plugin "${plugin.type}" render function:`, error);
+        return content; // 降级返回原始内容
+      }
+    }
+
+    // 没有匹配的插件，返回原始内容
+    return content;
+  }
+
+  /**
+   * 渲染所有匹配的插件（用于一个消息需要多个插件处理的情况）
+   * @param content 消息内容
+   * @param context 渲染上下文
+   * @returns 渲染结果数组
+   */
+  renderWithAllPlugins(content: string, context: RenderContext): Array<{ plugin: MessagePlugin; result: HTMLElement | string }> {
+    const plugins = this.matchAllPlugins(content);
+    const results: Array<{ plugin: MessagePlugin; result: HTMLElement | string }> = [];
+
+    for (const plugin of plugins) {
+      if (plugin.render) {
+        try {
+          const result = plugin.render(content, context);
+          results.push({ plugin, result });
+        } catch (error) {
+          console.error(`PluginManager: Error in plugin "${plugin.type}" render function:`, error);
+        }
+      }
+    }
+
+    return results;
+  }
+
+  /**
+   * 清除所有插件
+   */
+  clear(): void {
+    this.plugins.clear();
+    this.renderOrder = [];
+  }
+
+  /**
+   * 获取已注册插件的数量
+   */
+  get size(): number {
+    return this.plugins.size;
+  }
+
+  /**
+   * 检查是否注册了指定类型的插件
+   * @param type 插件类型标识
+   */
+  hasPlugin(type: string): boolean {
+    return this.plugins.has(type);
+  }
+
+  /**
+   * 更新渲染顺序（按优先级排序）
+   */
+  private updateRenderOrder(): void {
+    const sorted = Array.from(this.plugins.entries())
+      .sort((a, b) => {
+        const priorityA = a[1].priority || 0;
+        const priorityB = b[1].priority || 0;
+        return priorityB - priorityA; // 降序
+      })
+      .map(([type]) => type);
+
+    this.renderOrder = sorted;
+  }
+}
+
+/**
+ * 创建插件管理器的单例
+ */
+let defaultPluginManager: PluginManager | null = null;
+
+export function getDefaultPluginManager(): PluginManager {
+  if (!defaultPluginManager) {
+    defaultPluginManager = new PluginManager();
+  }
+  return defaultPluginManager;
+}
+
+export function resetDefaultPluginManager(): void {
+  if (defaultPluginManager) {
+    defaultPluginManager.clear();
+  }
+  defaultPluginManager = new PluginManager();
+}