ai-chat-ui-kit 0.1.0

package/packages/core/src/api/base.ts

@@ -0,0 +1,210 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { APIAdapter, Message, ModelConfig, ChatConfig, ToolCall } from '../types/index.js';
+
+/**
+ * API 适配器基类
+ * 提供通用的 SSE 流式处理、AbortController 管理等
+ */
+export abstract class BaseAPIAdapter implements APIAdapter {
+  protected abortController: AbortController | null = null;
+
+  /**
+   * 发送消息（由子类实现）
+   */
+  abstract sendMessage(params: {
+    messages: Message[];
+    modelConfig: ModelConfig;
+    chatConfig: ChatConfig;
+    onChunk?: (chunk: string) => void;
+    onToolCall?: (toolCall: ToolCall) => void;
+    onComplete?: (message: Message) => void;
+    onError?: (error: Error) => void;
+  }): Promise<void>;
+
+  /**
+   * 中止请求
+   */
+  abort(): void {
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+
+  /**
+   * 创建 AbortController
+   */
+  protected createAbortController(): AbortController {
+    this.abort(); // 取消之前的请求
+    this.abortController = new AbortController();
+    return this.abortController;
+  }
+
+  /**
+   * 转换为 OpenAI 格式的消息
+   */
+  protected convertToOpenAIFormat(messages: Message[]): Array<{ role: string; content: string }> {
+    return messages.map(msg => ({
+      role: msg.role,
+      content: msg.content
+    }));
+  }
+
+  /**
+   * 处理 SSE 流式响应
+   * @param response Fetch Response 对象
+   * @param onChunk 接收文本块的回调
+   * @returns 完整的响应文本
+   */
+  protected async handleStreamResponse(
+    response: Response,
+    onChunk: (chunk: string) => void
+  ): Promise<string> {
+    if (!response.body) {
+      throw new Error('Response body is null, cannot read stream');
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let fullContent = '';
+    let buffer = '';
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        
+        if (done) {
+          break;
+        }
+
+        // 解码并添加到缓冲区
+        buffer += decoder.decode(value, { stream: true });
+        
+        // 按行处理 SSE 数据
+        const lines = buffer.split('\n');
+        // 保留最后一行（可能不完整）
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          const trimmedLine = line.trim();
+          
+          if (!trimmedLine || trimmedLine === 'data: [DONE]') {
+            continue;
+          }
+
+          if (trimmedLine.startsWith('data: ')) {
+            const data = trimmedLine.slice(6);
+            
+            try {
+              const parsed = JSON.parse(data);
+              const content = this.extractContentFromChunk(parsed);
+              
+              if (content) {
+                fullContent += content;
+                onChunk(content);
+              }
+            } catch (e) {
+              // 忽略解析错误，继续处理下一行
+              console.warn('Failed to parse SSE chunk:', data);
+            }
+          }
+        }
+      }
+
+      // 处理缓冲区剩余内容
+      if (buffer.trim()) {
+        const trimmedLine = buffer.trim();
+        if (trimmedLine.startsWith('data: ')) {
+          const data = trimmedLine.slice(6);
+          try {
+            const parsed = JSON.parse(data);
+            const content = this.extractContentFromChunk(parsed);
+            if (content) {
+              fullContent += content;
+              onChunk(content);
+            }
+          } catch (e) {
+            // 忽略
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+
+    return fullContent;
+  }
+
+  /**
+   * 从 SSE chunk 中提取文本内容（由子类重写）
+   */
+  protected extractContentFromChunk(chunk: unknown): string {
+    // OpenAI 格式
+    if (typeof chunk === 'object' && chunk !== null) {
+      const data = chunk as Record<string, unknown>;
+      
+      // OpenAI 格式: choices[0].delta.content
+      if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
+        const choice = data.choices[0] as Record<string, unknown>;
+        const delta = choice.delta as Record<string, unknown> | undefined;
+        if (delta && typeof delta.content === 'string') {
+          return delta.content;
+        }
+      }
+    }
+
+    return '';
+  }
+
+  /**
+   * 处理工具调用（由子类重写）
+   */
+  protected extractToolCallsFromChunk(chunk: unknown): ToolCall[] {
+    return [];
+  }
+
+  /**
+   * 构建请求头
+   */
+  protected buildHeaders(modelConfig: ModelConfig): Record<string, string> {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...modelConfig.headers
+    };
+
+    return headers;
+  }
+
+  /**
+   * 构建请求体（基础实现，子类可重写）
+   */
+  protected buildRequestBody(
+    messages: Message[],
+    modelConfig: ModelConfig,
+    chatConfig: ChatConfig
+  ): Record<string, unknown> {
+    return {
+      model: modelConfig.model,
+      messages: this.convertToOpenAIFormat(messages),
+      stream: chatConfig.stream !== false,
+      ...modelConfig.params
+    };
+  }
+
+  /**
+   * 处理错误
+   */
+  protected handleError(error: unknown, onError?: (error: Error) => void): void {
+    const err = error instanceof Error ? error : new Error(String(error));
+    
+    if (onError) {
+      onError(err);
+    } else {
+      console.error('API Adapter Error:', err);
+    }
+  }
+}

package/packages/core/src/api/index.ts

@@ -0,0 +1,54 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { APIAdapter, ModelConfig } from '../types/index.js';
+import { OpenAIAdapter } from './adapters.js';
+import { ERNIEAdapter } from './adapters.js';
+import { QwenAdapter } from './adapters.js';
+import { SparkAdapter } from './adapters.js';
+import { HunyuanAdapter } from './adapters.js';
+
+/**
+ * 创建 API 适配器
+ * @param provider 模型提供商
+ * @returns 对应的 API 适配器实例
+ */
+export function createAPIAdapter(provider: ModelConfig['provider']): APIAdapter {
+  switch (provider) {
+    case 'openai':
+      return new OpenAIAdapter();
+    
+    case 'ernie':
+      return new ERNIEAdapter();
+    
+    case 'qwen':
+      return new QwenAdapter();
+    
+    case 'spark':
+      return new SparkAdapter();
+    
+    case 'hunyuan':
+      return new HunyuanAdapter();
+    
+    case 'custom':
+      // 自定义提供商默认使用 OpenAI 兼容格式
+      console.warn('Custom provider using OpenAI-compatible format by default');
+      return new OpenAIAdapter();
+    
+    default:
+      throw new Error(`Unsupported provider: ${provider}`);
+  }
+}
+
+/**
+ * 适配器类导出（供需要直接实例化的场景使用）
+ */
+export {
+  OpenAIAdapter,
+  ERNIEAdapter,
+  QwenAdapter,
+  SparkAdapter,
+  HunyuanAdapter
+};

package/packages/core/src/index.ts

@@ -0,0 +1,93 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+// ============================================================================
+// 类型导出
+// ============================================================================
+export {
+  MessageRole,
+  type Message,
+  type ToolCall,
+  type ModelConfig,
+  type ChatConfig,
+  type APIAdapter,
+  type MessagePlugin,
+  type RenderContext,
+  type ThemeConfig,
+  type ChatState
+} from './types/index.js';
+
+// ============================================================================
+// Store 导出
+// ============================================================================
+export { BaseStore } from './store/base.js';
+export { ChatStore } from './store/ChatStore.js';
+export { ModelConfigStore } from './store/ModelConfigStore.js';
+export { ToolCallStore } from './store/ToolCallStore.js';
+
+// ============================================================================
+// API 适配器导出
+// ============================================================================
+export { BaseAPIAdapter } from './api/base.js';
+export {
+  OpenAIAdapter,
+  ERNIEAdapter,
+  QwenAdapter,
+  SparkAdapter,
+  HunyuanAdapter,
+  createAPIAdapter
+} from './api/index.js';
+
+// ============================================================================
+// Parser 导出
+// ============================================================================
+// Markdown 解析器
+export {
+  parseMarkdown,
+  detectMarkdown,
+  registerCodeCopyHandler,
+  renderMarkdownToContainer
+} from './parser/markdown.js';
+
+// Mermaid 检测器
+export {
+  type MermaidChartType,
+  type MermaidDetectionResult,
+  detectMermaid,
+  detectMermaidChartType,
+  extractMermaidFromMarkdown,
+  renderMermaid,
+  renderAllMermaidInContainer,
+  validateMermaid
+} from './parser/mermaid.js';
+
+// Latex 检测器
+export {
+  type LatexDetectionResult,
+  detectLatex,
+  hasLatex,
+  replaceLatexWithPlaceholders,
+  renderLatex,
+  renderLatexWithKaTeX,
+  extractAllLatex
+} from './parser/latex.js';
+
+// ============================================================================
+// Plugin 导出
+// ============================================================================
+export { PluginManager, getDefaultPluginManager } from './plugins/PluginManager.js';
+export {
+  CodeBlockPlugin,
+  MermaidPlugin,
+  LatexPlugin,
+  ToolCallPlugin,
+  registerBuiltinPlugins
+} from './plugins/builtin.js';
+
+// ============================================================================
+// 版本信息
+// ============================================================================
+export const VERSION = '0.1.0';
+export const PACKAGE_NAME = '@ai-chat-ui-kit/core';

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

@@ -0,0 +1,274 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+/**
+ * Latex 检测结果的接口
+ */
+export interface LatexDetectionResult {
+  // 行内公式
+  inline: string[];
+  // 块级公式
+  block: string[];
+}
+
+/**
+ * 检测内容中的 Latex 公式
+ * @param content 待检测的内容
+ * @returns 包含行内和块级公式的对象
+ */
+export function detectLatex(content: string): LatexDetectionResult {
+  if (!content || typeof content !== 'string') {
+    return { inline: [], block: [] };
+  }
+
+  const result: LatexDetectionResult = {
+    inline: [],
+    block: []
+  };
+
+  // 块级公式模式：
+  // 1. $$...$$  (双美元符号)
+  // 2. \[...\]  (方括号)
+  // 3. \begin{equation}...\end{equation}
+  // 4. \begin{align}...\end{align}
+  // 5. \begin{gather}...\end{gather}
+
+  const blockPatterns = [
+    /\$\$([\s\S]*?)\$\$/g,                           // $$...$$
+    /\\\[([\s\S]*?)\\\]/g,                           // \[...\]
+    /\\begin\{(equation|align|gather|multline)\}([\s\S]*?)\\end\{\1\}/g  // \begin{...}...\end{...}
+  ];
+
+  for (const pattern of blockPatterns) {
+    let match: RegExpExecArray | null;
+    const regex = new RegExp(pattern.source, pattern.flags);
+    
+    while ((match = regex.exec(content)) !== null) {
+      const formula = match[1] || match[0];
+      if (formula.trim()) {
+        result.block.push(formula.trim());
+      }
+    }
+  }
+
+  // 行内公式模式：
+  // 1. $...$  (单美元符号，但不能是 $$)
+  // 2. \(...\)  (括号)
+
+  const inlinePatterns = [
+    /(?<!\$)\$(?!\$)(.*?)(?<!\$)\$(?!\$)/g,  // $...$  (不匹配 $$)
+    /\\\((.*?)\\\)/g                            // \(...\)
+  ];
+
+  for (const pattern of inlinePatterns) {
+    let match: RegExpExecArray | null;
+    const regex = new RegExp(pattern.source, pattern.flags);
+    
+    while ((match = regex.exec(content)) !== null) {
+      const formula = match[1] || match[0];
+      if (formula.trim()) {
+        result.inline.push(formula.trim());
+      }
+    }
+  }
+
+  // 去重
+  result.inline = [...new Set(result.inline)];
+  result.block = [...new Set(result.block)];
+
+  return result;
+}
+
+/**
+ * 检测内容是否包含 Latex 公式
+ * @param content 待检测的内容
+ * @returns 是否包含 Latex
+ */
+export function hasLatex(content: string): boolean {
+  if (!content) {
+    return false;
+  }
+
+  // 快速检测：查找常见的 Latex 标记
+  const quickChecks = [
+    '$$',           // 块级公式
+    '\\(',          // 行内公式开始
+    '\\)',          // 行内公式结束
+    '\\[',          // 块级公式开始
+    '\\]',          // 块级公式结束
+    '\\begin{',     // 环境开始
+    '\\end{',       // 环境结束
+    '\\frac',       // 分数
+    '\\sum',        // 求和
+    '\\int',        // 积分
+    '\\alpha',      // 希腊字母
+    '\\beta',
+    '\\gamma',
+    '\\delta',
+    '\\pi',
+    '\\infty',      // 无穷符号
+    '\\overrightarrow',  // 向量
+    '\\begin{matrix}',    // 矩阵
+    '\\begin{pmatrix}'    // 括号矩阵
+  ];
+
+  return quickChecks.some(check => content.includes(check));
+}
+
+/**
+ * 将 Latex 公式替换为占位符
+ * @param content 原始内容
+ * @returns 替换后的内容和占位符映射
+ */
+export function replaceLatexWithPlaceholders(content: string): {
+  processed: string;
+  placeholders: Array<{ id: string; formula: string; display: boolean }>;
+} {
+  if (!content) {
+    return { processed: '', placeholders: [] };
+  }
+
+  const placeholders: Array<{ id: string; formula: string; display: boolean }> = [];
+  let processed = content;
+  let counter = 0;
+
+  // 先替换块级公式
+  const blockReplacements = [
+    { regex: /\$\$([\s\S]*?)\$\$/g, display: true },
+    { regex: /\\\[([\s\S]*?)\\\]/g, display: true },
+    { regex: /\\begin\{(equation|align|gather|multline)\}([\s\S]*?)\\end\{\1\}/g, display: true }
+  ];
+
+  for (const { regex, display } of blockReplacements) {
+    processed = processed.replace(regex, (match, ...args) => {
+      const formula = args[0] || match;
+      const id = `__LATEX_PLACEHOLDER_${counter++}__`;
+      placeholders.push({ id, formula: formula.trim(), display });
+      return id;
+    });
+  }
+
+  // 再替换行内公式
+  const inlineReplacements = [
+    { regex: /(?<!\$)\$(?!\$)(.*?)(?<!\$)\$(?!\$)/g, display: false },
+    { regex: /\\\((.*?)\\\)/g, display: false }
+  ];
+
+  for (const { regex, display } of inlineReplacements) {
+    processed = processed.replace(regex, (match, ...args) => {
+      const formula = args[0] || match;
+      const id = `__LATEX_PLACEHOLDER_${counter++}__`;
+      placeholders.push({ id, formula: formula.trim(), display });
+      return id;
+    });
+  }
+
+  return { processed, placeholders };
+}
+
+/**
+ * 渲染 Latex 公式（返回 HTML 字符串，供外部如 KaTeX 渲染）
+ * @param content 包含 Latex 的内容
+ * @returns 处理后的 HTML 字符串
+ */
+export function renderLatex(content: string): string {
+  if (!content) {
+    return '';
+  }
+
+  let processed = content;
+
+  // 替换块级公式
+  processed = processed.replace(/\$\$([\s\S]*?)\$\$/g, (_, formula) => {
+    return `<div class="latex-block">$$${formula}$$</div>`;
+  });
+
+  processed = processed.replace(/\\\[([\s\S]*?)\\\]/g, (_, formula) => {
+    return `<div class="latex-block">\\[${formula}\\]</div>`;
+  });
+
+  // 替换行内公式
+  processed = processed.replace(/(?<!\$)\$(?!\$)(.*?)(?<!\$)\$(?!\$)/g, (_, formula) => {
+    return `<span class="latex-inline">$${formula}$</span>`;
+  });
+
+  processed = processed.replace(/\\\((.*?)\\\)/g, (_, formula) => {
+    return `<span class="latex-inline">\\(${formula}\\)</span>`;
+  });
+
+  return processed;
+}
+
+/**
+ * 使用 KaTeX 渲染 Latex 公式
+ * @param content 包含 Latex 的内容
+ * @param container 目标容器元素
+ * @returns 渲染后的 HTML 字符串
+ */
+export function renderLatexWithKaTeX(content: string, container: HTMLElement): string {
+  if (!content || !container) {
+    return '';
+  }
+
+  if (typeof window === 'undefined') {
+    console.error('renderLatexWithKaTeX: only works in browser environment');
+    return '';
+  }
+
+  // 动态导入 KaTeX
+  import('katex')
+    .then((katex) => {
+      // 渲染块级公式
+      const blockRegex = /\$\$([\s\S]*?)\$\$/g;
+      let match: RegExpExecArray | null;
+
+      // 先处理块级公式
+      container.innerHTML = container.innerHTML.replace(blockRegex, (_, formula) => {
+        try {
+          const tempDiv = document.createElement('div');
+          katex.default.render(formula, tempDiv, {
+            displayMode: true,
+            throwOnError: false
+          });
+          return tempDiv.innerHTML;
+        } catch (err) {
+          console.error('KaTeX block render error:', err);
+          return `$$${formula}$$`;
+        }
+      });
+
+      // 处理行内公式
+      const inlineRegex = /(?<!\$)\$(?!\$)(.*?)(?<!\$)\$(?!\$)/g;
+      container.innerHTML = container.innerHTML.replace(inlineRegex, (_, formula) => {
+        try {
+          const tempDiv = document.createElement('span');
+          katex.default.render(formula, tempDiv, {
+            displayMode: false,
+            throwOnError: false
+          });
+          return tempDiv.innerHTML;
+        } catch (err) {
+          console.error('KaTeX inline render error:', err);
+          return `$${formula}$`;
+        }
+      });
+    })
+    .catch((err) => {
+      console.error('Failed to load KaTeX:', err);
+      container.innerHTML = `<pre style="color:red;">无法加载 KaTeX 库</pre>`;
+    });
+
+  return container.innerHTML;
+}
+
+/**
+ * 提取所有 Latex 公式（用于预处理）
+ * @param content 原始内容
+ * @returns 所有公式的数组
+ */
+export function extractAllLatex(content: string): string[] {
+  const result = detectLatex(content);
+  return [...result.block, ...result.inline];
+}

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

@@ -0,0 +1,58 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+import { describe, it, expect } from 'vitest';
+import { parseMarkdown, detectMarkdown } from './markdown';
+
+describe('Markdown Parser', () => {
+  describe('parseMarkdown', () => {
+    it('should parse basic markdown', () => {
+      const result = parseMarkdown('# Hello World');
+      expect(result).toContain('Hello World');
+      expect(result).toContain('<h1>');
+    });
+
+    it('should handle empty input', () => {
+      const result = parseMarkdown('');
+      expect(result).toBe('');
+    });
+
+    it('should parse code blocks with highlight.js', () => {
+      const code = '```javascript\nconst a = 1;\n```';
+      const result = parseMarkdown(code);
+      expect(result).toContain('code-block');
+      expect(result).toContain('javascript');
+    });
+
+    it('should parse tables', () => {
+      const table = '| Header |\n| ------ |\n| Cell   |';
+      const result = parseMarkdown(table);
+      expect(result).toContain('<table>');
+    });
+
+    it('should parse bold and italic text', () => {
+      expect(parseMarkdown('**bold**')).toContain('<strong>bold</strong>');
+      expect(parseMarkdown('*italic*')).toContain('<em>italic</em>');
+    });
+  });
+
+  describe('detectMarkdown', () => {
+    it('should detect headings', () => {
+      expect(detectMarkdown('# Heading')).toBe(true);
+      expect(detectMarkdown('## H2')).toBe(true);
+    });
+
+    it('should detect code blocks', () => {
+      expect(detectMarkdown('```code```')).toBe(true);
+    });
+
+    it('should detect bold text', () => {
+      expect(detectMarkdown('**bold**')).toBe(true);
+    });
+
+    it('should return false for plain text', () => {
+      expect(detectMarkdown('plain text without markdown')).toBe(false);
+    });
+  });
+});