ai-chat-ui-kit 0.1.0

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

@@ -0,0 +1,406 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { MessagePlugin, Message, RenderContext, ToolCall } from '../types/index.js';
+import { detectMermaid } from '../parser/mermaid.js';
+import { detectLatex, renderLatex } from '../parser/latex.js';
+import { parseMarkdown } from '../parser/markdown.js';
+
+/**
+ * 代码块插件
+ * 支持代码高亮、复制按钮、语言标签
+ */
+export class CodeBlockPlugin implements MessagePlugin {
+  type = 'code-block';
+  priority = 10;
+
+  /**
+   * 判断是否匹配代码块
+   */
+  match(content: string): boolean {
+    if (!content || typeof content !== 'string') {
+      return false;
+    }
+
+    // 检测 ``` 代码块
+    const codeBlockRegex = /```[\s\S]*?```/;
+    return codeBlockRegex.test(content);
+  }
+
+  /**
+   * 渲染代码块
+   */
+  render(content: string, context: RenderContext): HTMLElement | string {
+    if (!content) {
+      return '';
+    }
+
+    // 使用 marked 解析 Markdown（它会自动处理代码块高亮）
+    const html = parseMarkdown(content);
+
+    // 创建容器
+    const container = document.createElement('div');
+    container.className = 'plugin-code-block';
+    container.innerHTML = html;
+
+    // 为代码块添加复制按钮和语言标签
+    this.enhanceCodeBlocks(container);
+
+    return container;
+  }
+
+  /**
+   * 增强代码块（添加复制按钮等）
+   */
+  private enhanceCodeBlocks(container: HTMLElement): void {
+    const codeBlocks = container.querySelectorAll('pre code');
+
+    codeBlocks.forEach((codeEl) => {
+      const pre = codeEl.closest('pre');
+      if (!pre) return;
+
+      // 创建包装器
+      const wrapper = document.createElement('div');
+      wrapper.className = 'code-block-wrapper';
+
+      // 获取语言
+      const classes = codeEl.className;
+      const langMatch = classes.match(/language-(\S+)/);
+      const language = langMatch ? langMatch[1] : 'plaintext';
+
+      // 创建头部
+      const header = document.createElement('div');
+      header.className = 'code-block-header';
+
+      const langLabel = document.createElement('span');
+      langLabel.className = 'code-block-lang';
+      langLabel.textContent = language;
+
+      const copyBtn = document.createElement('button');
+      copyBtn.className = 'code-block-copy-btn';
+      copyBtn.textContent = '复制';
+      copyBtn.addEventListener('click', () => {
+        const code = codeEl.textContent || '';
+        navigator.clipboard.writeText(code).then(() => {
+          copyBtn.textContent = '已复制';
+          setTimeout(() => {
+            copyBtn.textContent = '复制';
+          }, 2000);
+        });
+      });
+
+      header.appendChild(langLabel);
+      header.appendChild(copyBtn);
+
+      // 重新组织 DOM
+      pre.parentNode?.insertBefore(wrapper, pre);
+      wrapper.appendChild(header);
+      wrapper.appendChild(pre);
+    });
+  }
+}
+
+/**
+ * Mermaid 图表插件
+ * 检测并渲染 Mermaid 图表
+ */
+export class MermaidPlugin implements MessagePlugin {
+  type = 'mermaid';
+  priority = 20;
+
+  /**
+   * 判断是否包含 Mermaid 图表
+   */
+  match(content: string): boolean {
+    if (!content || typeof content !== 'string') {
+      return false;
+    }
+
+    // 检测 ```mermaid 代码块
+    const mermaidBlockRegex = /```mermaid[\s\S]*?```/i;
+    if (mermaidBlockRegex.test(content)) {
+      return true;
+    }
+
+    // 或使用专门的 mermaid 检测函数
+    return detectMermaid(content);
+  }
+
+  /**
+   * 渲染 Mermaid 图表
+   */
+  render(content: string, context: RenderContext): HTMLElement | string {
+    if (!content) {
+      return '';
+    }
+
+    const container = document.createElement('div');
+    container.className = 'plugin-mermaid';
+
+    // 提取所有 mermaid 代码块
+    const mermaidRegex = /```mermaid\s*([\s\S]*?)```/gi;
+    let match: RegExpExecArray | null;
+    let remainingContent = content;
+
+    const parts: Array<{ type: 'text' | 'mermaid'; content: string }> = [];
+
+    while ((match = mermaidRegex.exec(content)) !== null) {
+      const mermaidCode = match[1]?.trim() || '';
+
+      // 添加 mermaid 之前的文本
+      const textBefore = content.substring(0, match.index);
+      if (textBefore) {
+        parts.push({ type: 'text', content: textBefore });
+      }
+
+      // 添加 mermaid 代码
+      parts.push({ type: 'mermaid', content: mermaidCode });
+
+      // 更新剩余内容
+      remainingContent = content.substring(match.index + match[0].length);
+    }
+
+    // 添加剩余文本
+    if (remainingContent) {
+      parts.push({ type: 'text', content: remainingContent });
+    }
+
+    // 渲染各部分
+    parts.forEach(part => {
+      if (part.type === 'text') {
+        const textHtml = parseMarkdown(part.content);
+        const textDiv = document.createElement('div');
+        textDiv.innerHTML = textHtml;
+        container.appendChild(textDiv);
+      } else if (part.type === 'mermaid') {
+        const mermaidContainer = document.createElement('div');
+        mermaidContainer.className = 'mermaid-render-area';
+        container.appendChild(mermaidContainer);
+
+        // 动态导入并渲染 mermaid
+        this.renderMermaidDiagram(part.content, mermaidContainer);
+      }
+    });
+
+    return container;
+  }
+
+  /**
+   * 渲染 Mermaid 图表
+   */
+  private renderMermaidDiagram(code: string, container: HTMLElement): void {
+    import('mermaid')
+      .then((mermaid) => {
+        mermaid.default.initialize({
+          startOnLoad: false,
+          theme: 'default',
+          securityLevel: 'loose'
+        });
+
+        const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        container.id = id;
+        container.textContent = code;
+
+        mermaid.default.run({ querySelector: `#${id}` });
+      })
+      .catch((err) => {
+        console.error('Failed to load mermaid:', err);
+        container.innerHTML = `<pre style="color:red;">Mermaid 渲染失败</pre>`;
+      });
+  }
+}
+
+/**
+ * Latex 公式插件
+ * 检测并渲染 Latex 公式
+ */
+export class LatexPlugin implements MessagePlugin {
+  type = 'latex';
+  priority = 15;
+
+  /**
+   * 判断是否包含 Latex 公式
+   */
+  match(content: string): boolean {
+    if (!content || typeof content !== 'string') {
+      return false;
+    }
+
+    return detectLatex(content).inline.length > 0 || detectLatex(content).block.length > 0;
+  }
+
+  /**
+   * 渲染 Latex 公式
+   */
+  render(content: string, context: RenderContext): HTMLElement | string {
+    if (!content) {
+      return '';
+    }
+
+    // 使用 KaTeX 或 MathJax 渲染
+    const container = document.createElement('div');
+    container.className = 'plugin-latex';
+
+    // 先解析 Markdown
+    let html = parseMarkdown(content);
+
+    // 替换 Latex 占位符为渲染后的公式
+    // 这里需要外部库（KaTeX/MathJax）支持
+    // 返回带有 class 标记的 HTML，供外部渲染
+    container.innerHTML = renderLatex(html);
+
+    // 尝试使用 KaTeX 渲染
+    this.renderWithKaTeX(container);
+
+    return container;
+  }
+
+  /**
+   * 使用 KaTeX 渲染
+   */
+  private renderWithKaTeX(container: HTMLElement): void {
+    import('katex')
+      .then((katex) => {
+        // 渲染块级公式
+        const blockFormulas = container.querySelectorAll('.latex-block');
+        blockFormulas.forEach(el => {
+          if (!(el instanceof HTMLElement)) return;
+          const formula = el.textContent || '';
+          try {
+            katex.default.render(formula.replace(/^\$|\$$/g, ''), el, {
+              displayMode: true,
+              throwOnError: false
+            });
+          } catch (err) {
+            console.error('KaTeX block render error:', err);
+          }
+        });
+
+        // 渲染行内公式
+        const inlineFormulas = container.querySelectorAll('.latex-inline');
+        inlineFormulas.forEach(el => {
+          if (!(el instanceof HTMLElement)) return;
+          const formula = el.textContent || '';
+          try {
+            katex.default.render(formula.replace(/^\$|\$$/g, ''), el, {
+              displayMode: false,
+              throwOnError: false
+            });
+          } catch (err) {
+            console.error('KaTeX inline render error:', err);
+          }
+        });
+      })
+      .catch((err) => {
+        console.warn('KaTeX not loaded:', err);
+      });
+  }
+}
+
+/**
+ * 工具调用插件
+ * 渲染工具调用状态和结果
+ */
+export class ToolCallPlugin implements MessagePlugin {
+  type = 'tool-call';
+  priority = 5;
+
+  /**
+   * 判断是否包含工具调用
+   */
+  match(content: string): boolean {
+    // 这个插件主要通过 ToolCall 数据触发，而非内容匹配
+    return false;
+  }
+
+  /**
+   * 渲染工具调用
+   */
+  render(content: string, context: RenderContext): HTMLElement | string {
+    const container = document.createElement('div');
+    container.className = 'plugin-tool-call';
+
+    const message = context.message;
+    if (!message || !message.toolCalls || message.toolCalls.length === 0) {
+      return '';
+    }
+
+    // 渲染每个工具调用
+    message.toolCalls.forEach(toolCall => {
+      const toolElement = this.renderToolCall(toolCall);
+      container.appendChild(toolElement);
+    });
+
+    return container;
+  }
+
+  /**
+   * 渲染单个工具调用
+   */
+  private renderToolCall(toolCall: ToolCall): HTMLElement {
+    const wrapper = document.createElement('div');
+    wrapper.className = `tool-call tool-call--${toolCall.status}`;
+
+    // 头部：工具名称和状态
+    const header = document.createElement('div');
+    header.className = 'tool-call__header';
+
+    const name = document.createElement('span');
+    name.className = 'tool-call__name';
+    name.textContent = toolCall.name;
+
+    const status = document.createElement('span');
+    status.className = 'tool-call__status';
+    status.textContent = this.getStatusText(toolCall.status);
+
+    header.appendChild(name);
+    header.appendChild(status);
+
+    // 参数
+    const args = document.createElement('pre');
+    args.className = 'tool-call__args';
+    args.textContent = JSON.stringify(toolCall.arguments, null, 2);
+
+    wrapper.appendChild(header);
+    wrapper.appendChild(args);
+
+    // 结果（如果有）
+    if (toolCall.result !== undefined) {
+      const result = document.createElement('pre');
+      result.className = 'tool-call__result';
+      result.textContent = typeof toolCall.result === 'string' 
+        ? toolCall.result 
+        : JSON.stringify(toolCall.result, null, 2);
+      wrapper.appendChild(result);
+    }
+
+    return wrapper;
+  }
+
+  /**
+   * 获取状态文本
+   */
+  private getStatusText(status: ToolCall['status']): string {
+    const statusMap: Record<ToolCall['status'], string> = {
+      pending: '等待中',
+      executing: '执行中',
+      completed: '已完成',
+      failed: '失败'
+    };
+
+    return statusMap[status] || status;
+  }
+}
+
+/**
+ * 注册所有内置插件到插件管理器
+ * @param manager 插件管理器实例
+ */
+export function registerBuiltinPlugins(manager: import('./PluginManager.js').PluginManager): void {
+  manager.register(new CodeBlockPlugin());
+  manager.register(new MermaidPlugin());
+  manager.register(new LatexPlugin());
+  manager.register(new ToolCallPlugin());
+}

package/packages/core/src/store/ChatStore.ts

@@ -0,0 +1,163 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { BaseStore } from './base.js';
+import { ChatState, Message, MessageRole, ChatConfig } from '../types/index.js';
+
+// 生成唯一 ID
+function generateId(): string {
+  return `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+// 初始状态
+const initialState: ChatState = {
+  messages: [],
+  isLoading: false,
+  isStreaming: false,
+  error: null,
+  sessionId: generateId()
+};
+
+export class ChatStore extends BaseStore<ChatState> {
+  private config: ChatConfig = {};
+
+  constructor() {
+    super(initialState);
+  }
+
+  // 设置配置
+  setConfig(config: ChatConfig): void {
+    this.config = { ...this.config, ...config };
+  }
+
+  // 获取配置
+  getConfig(): ChatConfig {
+    return this.config;
+  }
+
+  // 添加消息
+  addMessage(role: MessageRole, content: string, metadata?: Record<string, unknown>): Message {
+    const message: Message = {
+      id: generateId(),
+      role,
+      content,
+      timestamp: Date.now(),
+      metadata
+    };
+
+    const messages = [...this.state.messages, message];
+    
+    // 限制历史消息数量
+    const maxHistory = this.config.maxHistory || 50;
+    const trimmedMessages = messages.length > maxHistory 
+      ? messages.slice(-maxHistory) 
+      : messages;
+
+    this.setState({
+      messages: trimmedMessages,
+      error: null
+    });
+
+    return message;
+  }
+
+  // 更新消息（用于流式输出）
+  updateMessage(id: string, content: string): void {
+    const messages = this.state.messages.map(msg => 
+      msg.id === id ? { ...msg, content } : msg
+    );
+    this.setState({ messages });
+  }
+
+  // 设置工具调用
+  setToolCalls(messageId: string, toolCalls: Message['toolCalls']): void {
+    const messages = this.state.messages.map(msg => 
+      msg.id === messageId ? { ...msg, toolCalls } : msg
+    );
+    this.setState({ messages });
+  }
+
+  // 更新工具调用结果
+  updateToolCallResult(messageId: string, toolCallId: string, result: unknown): void {
+    const messages = this.state.messages.map(msg => {
+      if (msg.id === messageId && msg.toolCalls) {
+        const toolCalls = msg.toolCalls.map(tc => 
+          tc.id === toolCallId ? { ...tc, result, status: 'completed' as const } : tc
+        );
+        return { ...msg, toolCalls };
+      }
+      return msg;
+    });
+    this.setState({ messages });
+  }
+
+  // 设置加载状态
+  setLoading(isLoading: boolean): void {
+    this.setState({ isLoading });
+  }
+
+  // 设置流式输出状态
+  setStreaming(isStreaming: boolean): void {
+    this.setState({ isStreaming });
+  }
+
+  // 设置错误
+  setError(error: Error | null): void {
+    this.setState({ error, isLoading: false, isStreaming: false });
+  }
+
+  // 清空消息
+  clearMessages(): void {
+    this.setState({ messages: [], error: null });
+  }
+
+  // 删除消息
+  deleteMessage(id: string): void {
+    const messages = this.state.messages.filter(msg => msg.id !== id);
+    this.setState({ messages });
+  }
+
+  // 获取消息历史（用于 API 调用）
+  getMessageHistory(): Array<{ role: string; content: string }> {
+    return this.state.messages.map(msg => ({
+      role: msg.role,
+      content: msg.content
+    }));
+  }
+
+  // 重置
+  reset(): void {
+    this.setState(initialState);
+    this.config = {};
+  }
+
+  // 导出会话
+  exportSession(): string {
+    return JSON.stringify({
+      sessionId: this.state.sessionId,
+      messages: this.state.messages,
+      config: this.config,
+      exportTime: Date.now()
+    });
+  }
+
+  // 导入会话
+  importSession(data: string): void {
+    try {
+      const session = JSON.parse(data);
+      this.setState({
+        sessionId: session.sessionId || generateId(),
+        messages: session.messages || [],
+        error: null
+      });
+      if (session.config) {
+        this.config = session.config;
+      }
+    } catch (error) {
+      console.error('Failed to import session:', error);
+      this.setError(error as Error);
+    }
+  }
+}

package/packages/core/src/store/ModelConfigStore.ts

@@ -0,0 +1,136 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { BaseStore } from './base.js';
+import { ModelConfig } from '../types/index.js';
+
+// 初始状态
+const initialConfig: ModelConfig = {
+  provider: 'openai',
+  model: 'gpt-3.5-turbo',
+  params: {
+    temperature: 0.7,
+    topP: 1,
+    maxTokens: 2048
+  }
+};
+
+export class ModelConfigStore extends BaseStore<ModelConfig> {
+  constructor() {
+    super({ ...initialConfig });
+  }
+
+  // 设置提供商
+  setProvider(provider: ModelConfig['provider']): void {
+    this.setState({ provider });
+    // 根据提供商自动设置默认端点
+    this.setDefaultEndpoint(provider);
+  }
+
+  // 设置模型
+  setModel(model: string): void {
+    this.setState({ model });
+  }
+
+  // 设置 API 端点
+  setApiEndpoint(endpoint: string): void {
+    this.setState({ apiEndpoint: endpoint });
+  }
+
+  // 设置 API Key
+  setApiKey(apiKey: string): void {
+    this.setState({ apiKey });
+  }
+
+  // 设置请求头
+  setHeaders(headers: Record<string, string>): void {
+    this.setState({ headers: { ...this.state.headers, ...headers } });
+  }
+
+  // 设置参数
+  setParams(params: ModelConfig['params']): void {
+    this.setState({ 
+      params: { ...this.state.params, ...params } 
+    });
+  }
+
+  // 根据提供商设置默认端点
+  private setDefaultEndpoint(provider: ModelConfig['provider']): void {
+    const endpoints: Record<string, string> = {
+      openai: 'https://api.openai.com/v1/chat/completions',
+      ernie: 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat',
+      qwen: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation',
+      spark: 'https://spark-api.xf-yun.com/v1/chat/completions',
+      hunyuan: 'https://hunyuan.tencentcloudapi.com/'
+    };
+
+    if (provider !== 'custom' && endpoints[provider]) {
+      this.setState({ apiEndpoint: endpoints[provider] });
+    }
+  }
+
+  // 获取请求头（根据提供商）
+  getRequestHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...this.state.headers
+    };
+
+    // 根据提供商添加认证头
+    switch (this.state.provider) {
+      case 'openai':
+        if (this.state.apiKey) {
+          headers['Authorization'] = `Bearer ${this.state.apiKey}`;
+        }
+        break;
+      case 'qwen':
+        if (this.state.apiKey) {
+          headers['Authorization'] = `Bearer ${this.state.apiKey}`;
+        }
+        break;
+      // 其他提供商的认证方式
+    }
+
+    return headers;
+  }
+
+  // 验证配置
+  validate(): { valid: boolean; errors: string[] } {
+    const errors: string[] = [];
+
+    if (!this.state.model) {
+      errors.push('Model is required');
+    }
+
+    if (this.state.provider !== 'custom' && !this.state.apiEndpoint) {
+      errors.push('API endpoint is required');
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors
+    };
+  }
+
+  // 重置
+  reset(): void {
+    this.setState({ ...initialConfig });
+  }
+
+  // 导出配置
+  exportConfig(): string {
+    return JSON.stringify(this.state);
+  }
+
+  // 导入配置
+  importConfig(data: string): void {
+    try {
+      const config = JSON.parse(data);
+      this.setState(config);
+    } catch (error) {
+      console.error('Failed to import config:', error);
+    }
+  }
+}