ai-chat-ui-kit 0.1.0 → 0.1.1

package/packages/components/src/markdown/markdown.css

@@ -1,118 +0,0 @@
-/**
- * @generated-by AI: edenxpzhang
- * @generated-date 2026-05-13
- */
-:host {
-  display: block;
-}
-
-.markdown-content {
-  line-height: 1.6;
-}
-
-.markdown-content h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-  font-weight: 600;
-}
-
-.markdown-content h2 {
-  font-size: 1.5em;
-  margin: 0.83em 0;
-  font-weight: 600;
-}
-
-.markdown-content h3 {
-  font-size: 1.17em;
-  margin: 1em 0;
-  font-weight: 600;
-}
-
-.markdown-content p {
-  margin: 0.5em 0;
-}
-
-.markdown-content code {
-  background-color: var(--ai-bg-secondary, #f5f5f5);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Courier New', monospace;
-  font-size: 0.9em;
-}
-
-.markdown-content pre {
-  background-color: var(--ai-bg-secondary, #f5f5f5);
-  padding: 12px;
-  border-radius: var(--ai-border-radius, 8px);
-  overflow-x: auto;
-  margin: 0.5em 0;
-}
-
-.markdown-content pre code {
-  background-color: transparent;
-  padding: 0;
-}
-
-.markdown-content blockquote {
-  border-left: 4px solid var(--ai-border, #e8e8e8);
-  padding-left: 12px;
-  margin: 0.5em 0;
-  color: var(--ai-text-secondary, #666666);
-}
-
-.markdown-content ul,
-.markdown-content ol {
-  padding-left: 2em;
-  margin: 0.5em 0;
-}
-
-.markdown-content a {
-  color: var(--ai-primary, #1677ff);
-  text-decoration: none;
-}
-
-.markdown-content a:hover {
-  text-decoration: underline;
-}
-
-.markdown-content table {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 0.5em 0;
-}
-
-.markdown-content th,
-.markdown-content td {
-  border: 1px solid var(--ai-border, #e8e8e8);
-  padding: 8px 12px;
-  text-align: left;
-}
-
-.markdown-content th {
-  background-color: var(--ai-bg-secondary, #f5f5f5);
-  font-weight: 600;
-}
-
-/* Mermaid 图表容器 */
-.mermaid-container {
-  margin: 1em 0;
-  padding: 12px;
-  background-color: var(--ai-bg, #ffffff);
-  border: 1px solid var(--ai-border, #e8e8e8);
-  border-radius: var(--ai-border-radius, 8px);
-  overflow-x: auto;
-  text-align: center;
-}
-
-/* Latex 公式 */
-.latex-formula {
-  font-style: italic;
-  padding: 0 4px;
-}
-
-.latex-block {
-  display: block;
-  text-align: center;
-  margin: 1em 0;
-  font-size: 1.2em;
-}

package/packages/components/src/markdown/markdown.ts

@@ -1,229 +0,0 @@
-/**
- * @generated-by AI: edenxpzhang
- * @generated-date 2026-05-13
- */
-
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import './markdown.css';
-
-// 简单的 Markdown 解析器（等待 core 包完成后替换为实际导入）
-function parseMarkdown(content: string): string {
-  let html = content;
-  
-  // 代码块
-  html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
-  
-  // 行内代码
-  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-  
-  // 标题
-  html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
-  html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
-  html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>');
-  
-  // 粗体
-  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-  
-  // 斜体
-  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
-  
-  // 链接
-  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
-  
-  // 列表
-  html = html.replace(/^- (.*$)/gm, '<li>$1</li>');
-  html = html.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
-  
-  // 段落
-  html = html.replace(/^(?!<[a-z]).*$/gm, '<p>$&</p>');
-  html = html.replace(/<p><(h[1-6]|pre|ul|ol|blockquote|table)/g, '<$1');
-  html = html.replace(/<\/(h[1-6]|pre|ul|ol|blockquote|table)><\/p>/g, '</$1>');
-  
-  return html;
-}
-
-// 检测是否包含 Mermaid 图表
-function hasMermaid(content: string): boolean {
-  return /```mermaid/.test(content);
-}
-
-// 检测是否包含 Latex 公式
-function hasLatex(content: string): boolean {
-  return /\$.*?\$|\\\(.*?\\\)|\\\[.*?\\\]/.test(content);
-}
-
-@customElement('ai-markdown')
-export class AiMarkdown extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    .markdown-content {
-      line-height: 1.6;
-    }
-
-    .markdown-content h1 {
-      font-size: 2em;
-      margin: 0.67em 0;
-      font-weight: 600;
-    }
-
-    .markdown-content h2 {
-      font-size: 1.5em;
-      margin: 0.83em 0;
-      font-weight: 600;
-    }
-
-    .markdown-content h3 {
-      font-size: 1.17em;
-      margin: 1em 0;
-      font-weight: 600;
-    }
-
-    .markdown-content p {
-      margin: 0.5em 0;
-    }
-
-    .markdown-content code {
-      background-color: var(--ai-bg-secondary, #f5f5f5);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: 'Courier New', monospace;
-      font-size: 0.9em;
-    }
-
-    .markdown-content pre {
-      background-color: var(--ai-bg-secondary, #f5f5f5);
-      padding: 12px;
-      border-radius: var(--ai-border-radius, 8px);
-      overflow-x: auto;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content pre code {
-      background-color: transparent;
-      padding: 0;
-    }
-
-    .markdown-content blockquote {
-      border-left: 4px solid var(--ai-border, #e8e8e8);
-      padding-left: 12px;
-      margin: 0.5em 0;
-      color: var(--ai-text-secondary, #666666);
-    }
-
-    .markdown-content ul,
-    .markdown-content ol {
-      padding-left: 2em;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content a {
-      color: var(--ai-primary, #1677ff);
-      text-decoration: none;
-    }
-
-    .markdown-content a:hover {
-      text-decoration: underline;
-    }
-
-    .markdown-content table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content th,
-    .markdown-content td {
-      border: 1px solid var(--ai-border, #e8e8e8);
-      padding: 8px 12px;
-      text-align: left;
-    }
-
-    .markdown-content th {
-      background-color: var(--ai-bg-secondary, #f5f5f5);
-      font-weight: 600;
-    }
-
-    .mermaid-container {
-      margin: 1em 0;
-      padding: 12px;
-      background-color: var(--ai-bg, #ffffff);
-      border: 1px solid var(--ai-border, #e8e8e8);
-      border-radius: var(--ai-border-radius, 8px);
-      overflow-x: auto;
-      text-align: center;
-    }
-
-    .latex-formula {
-      font-style: italic;
-      padding: 0 4px;
-    }
-
-    .latex-block {
-      display: block;
-      text-align: center;
-      margin: 1em 0;
-      font-size: 1.2em;
-    }
-  `;
-
-  @property({ type: String })
-  content = '';
-
-  @property({ type: Array })
-  plugins: string[] = [];
-
-  render() {
-    const hasMermaidContent = hasMermaid(this.content);
-    const hasLatexContent = hasLatex(this.content);
-
-    return html`
-      <div class="markdown-content">
-        ${hasMermaidContent && this.plugins.includes('mermaid')
-          ? html`<div class="mermaid-container">Mermaid 图表（需要集成 Mermaid.js）</div>`
-          : ''}
-        ${hasLatexContent && this.plugins.includes('latex')
-          ? html`<div class="latex-block">Latex 公式（需要集成 KaTeX 或 MathJax）</div>`
-          : ''}
-        <div>${this.renderMarkdown()}</div>
-      </div>
-    `;
-  }
-
-  private renderMarkdown() {
-    const htmlContent = parseMarkdown(this.content);
-    return html`<div .innerHTML=${this.sanitizeHtml(htmlContent)}></div>`;
-  }
-
-  private sanitizeHtml(html: string): string {
-    // 简单的 HTML 清理，防止 XSS
-    // 在生产环境中应使用 DOMPurify 等库
-    const temp = document.createElement('div');
-    temp.innerHTML = html;
-    
-    // 移除 script 标签
-    const scripts = temp.querySelectorAll('script');
-    scripts.forEach(script => script.remove());
-    
-    // 移除危险的 on* 属性
-    const allElements = temp.querySelectorAll('*');
-    allElements.forEach(el => {
-      Array.from(el.attributes).forEach(attr => {
-        if (attr.name.startsWith('on')) {
-          el.removeAttribute(attr.name);
-        }
-      });
-    });
-    
-    return temp.innerHTML;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ai-markdown': AiMarkdown;
-  }
-}

package/packages/components/src/message/message.css

@@ -1,56 +0,0 @@
-/**
- * @generated-by AI: edenxpzhang
- * @generated-date 2026-05-13
- *
- * 兜底样式 —— 实际视觉由主题接管
- */
-
-ai-message {
-  display: block;
-}
-
-ai-message .ai-message {
-  display: flex;
-  gap: 8px;
-  max-width: 80%;
-}
-
-ai-message .ai-message--user {
-  flex-direction: row-reverse;
-  margin-left: auto;
-}
-
-ai-message .ai-message--assistant {
-  margin-right: auto;
-}
-
-ai-message .ai-message__avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  flex-shrink: 0;
-}
-
-ai-message .ai-message__content {
-  padding: 10px 14px;
-  border-radius: 8px;
-  line-height: 1.5;
-  word-break: break-word;
-}
-
-ai-message .ai-message__time {
-  font-size: 11px;
-  opacity: 0.55;
-  margin-top: 4px;
-}
-
-ai-message .ai-message__tool-calls {
-  margin-top: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}

package/packages/components/src/message/message.ts

@@ -1,72 +0,0 @@
-/**
- * @generated-by AI: edenxpzhang
- * @generated-date 2026-05-13
- */
-
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import './message.css';
-
-// 导入共享类型
-import { Message } from '../types.js';
-
-@customElement('ai-message')
-export class AiMessage extends LitElement {
-  @property({ type: Boolean })
-  headless = true;
-
-  @property({ type: Object })
-  message?: Message;
-
-  @property({ type: String })
-  theme = 'default';
-
-  // 默认 light DOM，让外部主题 CSS 能命中
-  createRenderRoot() {
-    if (this.headless) {
-      return this;
-    }
-    return super.createRenderRoot();
-  }
-
-  render() {
-    if (!this.message) {
-      return html``;
-    }
-
-    const isUser = this.message.role === 'user';
-    const roleModifier = isUser ? 'ai-message--user' : 'ai-message--assistant';
-    const avatarText = isUser ? '我' : 'AI';
-    const time = new Date(this.message.timestamp).toLocaleTimeString('zh-CN', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-
-    return html`
-      <div class="ai-message ${roleModifier}">
-        <div class="ai-message__avatar">${avatarText}</div>
-        <div class="ai-message__body">
-          <div class="ai-message__content">${this.message.content}</div>
-          ${this.message.toolCalls && this.message.toolCalls.length > 0
-            ? html`
-                <div class="ai-message__tool-calls">
-                  ${this.message.toolCalls.map(
-                    (toolCall) => html`
-                      <ai-tool-call .toolCall=${toolCall}></ai-tool-call>
-                    `
-                  )}
-                </div>
-              `
-            : ''}
-          <div class="ai-message__time">${time}</div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ai-message': AiMessage;
-  }
-}

package/packages/components/src/styles/global.css

@@ -1,43 +0,0 @@
-/**
- * @generated-by AI: edenxpzhang
- * @generated-date 2026-05-13
- */
-:host {
-  /* 颜色 */
-  --ai-primary: #1677ff;
-  --ai-bg: #ffffff;
-  --ai-bg-secondary: #f5f5f5;
-  --ai-text: #333333;
-  --ai-text-secondary: #666666;
-  --ai-border: #e8e8e8;
-  --ai-user-msg-bg: #1677ff;
-  --ai-user-msg-text: #ffffff;
-  --ai-ai-msg-bg: #f5f5f5;
-  --ai-ai-msg-text: #333333;
-  
-  /* 尺寸 */
-  --ai-border-radius: 8px;
-  --ai-spacing: 12px;
-  
-  /* 字体 */
-  --ai-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --ai-font-size: 14px;
-}
-
-/* 全局样式 */
-.ai-chat-container {
-  font-family: var(--ai-font-family);
-  font-size: var(--ai-font-size);
-  color: var(--ai-text);
-  background-color: var(--ai-bg);
-}
-
-.ai-message-user {
-  background-color: var(--ai-user-msg-bg);
-  color: var(--ai-user-msg-text);
-}
-
-.ai-message-ai {
-  background-color: var(--ai-ai-msg-bg);
-  color: var(--ai-ai-msg-text);
-}

package/packages/components/src/tool-call/tool-call.css

@@ -1,98 +0,0 @@
-/**
- * @generated-by AI: edenxpzhang
- * @generated-date 2026-05-13
- */
-:host {
-  display: block;
-}
-
-.tool-call {
-  border: 1px solid var(--ai-border, #e8e8e8);
-  border-radius: var(--ai-border-radius, 8px);
-  overflow: hidden;
-  font-size: 12px;
-}
-
-.tool-call-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background-color: var(--ai-bg-secondary, #f5f5f5);
-  cursor: pointer;
-  user-select: none;
-}
-
-.tool-call-header:hover {
-  background-color: var(--ai-border, #e8e8e8);
-}
-
-.tool-call-status {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.tool-call-status-pending {
-  background-color: #faad14;
-}
-
-.tool-call-status-running {
-  background-color: #1677ff;
-  animation: pulse 1.5s infinite;
-}
-
-.tool-call-status-completed {
-  background-color: #52c41a;
-}
-
-.tool-call-status-failed {
-  background-color: #ff4d4f;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.tool-call-name {
-  flex: 1;
-  font-weight: 500;
-  color: var(--ai-text, #333333);
-}
-
-.tool-call-toggle {
-  color: var(--ai-text-secondary, #666666);
-  font-size: 10px;
-}
-
-.tool-call-details {
-  padding: 12px;
-  border-top: 1px solid var(--ai-border, #e8e8e8);
-  background-color: var(--ai-bg, #ffffff);
-}
-
-.tool-call-section {
-  margin-bottom: 8px;
-}
-
-.tool-call-section:last-child {
-  margin-bottom: 0;
-}
-
-.tool-call-label {
-  font-weight: 500;
-  color: var(--ai-text-secondary, #666666);
-  margin-bottom: 4px;
-}
-
-.tool-call-content {
-  background-color: var(--ai-bg-secondary, #f5f5f5);
-  padding: 8px;
-  border-radius: 4px;
-  overflow-x: auto;
-  font-family: 'Courier New', monospace;
-  font-size: 11px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}