ai-chat-ui-kit 0.1.0

package/packages/components/src/input/input.ts

@@ -0,0 +1,116 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './input.css';
+
+@customElement('ai-input')
+export class AiInput extends LitElement {
+  @property({ type: Boolean })
+  headless = true;
+
+  @property({ type: Boolean })
+  disabled = false;
+
+  @property({ type: String })
+  placeholder = '输入消息...';
+
+  @property({ type: String, attribute: 'send-text' })
+  sendText = '发送';
+
+  @state()
+  private value = '';
+
+  private textarea?: HTMLTextAreaElement;
+
+  // 默认 light DOM
+  createRenderRoot() {
+    if (this.headless) {
+      return this;
+    }
+    return super.createRenderRoot();
+  }
+
+  firstUpdated() {
+    this.textarea = this.renderRoot.querySelector('textarea') as HTMLTextAreaElement;
+  }
+
+  render() {
+    return html`
+      <div class="ai-input">
+        <div class="ai-input__wrapper">
+          <textarea
+            class="ai-input__textarea"
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+            rows="1"
+          ></textarea>
+          <button
+            class="ai-input__send"
+            ?disabled=${this.disabled || !this.value.trim()}
+            @click=${this.handleSend}
+          >
+            ${this.sendText}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  private handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    this.value = target.value;
+    this.adjustHeight(target);
+
+    this.dispatchEvent(
+      new CustomEvent('input-change', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      this.handleSend();
+    }
+  }
+
+  private handleSend() {
+    if (!this.value.trim() || this.disabled) return;
+
+    this.dispatchEvent(
+      new CustomEvent('send', {
+        detail: { content: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+
+    this.value = '';
+    if (this.textarea) {
+      this.textarea.style.height = 'auto';
+    }
+  }
+
+  private adjustHeight(textarea: HTMLTextAreaElement) {
+    textarea.style.height = 'auto';
+    const maxHeight = 120;
+    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+    textarea.style.height = `${newHeight}px`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ai-input': AiInput;
+  }
+}

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

@@ -0,0 +1,118 @@
+/**
+ * @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

@@ -0,0 +1,229 @@
+/**
+ * @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

@@ -0,0 +1,56 @@
+/**
+ * @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

@@ -0,0 +1,72 @@
+/**
+ * @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

@@ -0,0 +1,43 @@
+/**
+ * @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);
+}