ai-chat-ui-kit 0.1.0

package/examples/vue-app/src/App.vue

@@ -0,0 +1,145 @@
+<!--
+  @generated-by AI: edenxpzhang
+  @generated-date 2026-05-13
+-->
+<template>
+  <div class="container">
+    <header class="header">
+      <h1 class="title">🤖 AI Chat - Vue 示例</h1>
+      <div class="theme-buttons">
+        <button
+          :class="['theme-btn', { active: theme === 'default' }]"
+          @click="handleThemeChange('default')"
+        >
+          默认主题
+        </button>
+        <button
+          :class="['theme-btn', { active: theme === 'bubble' }]"
+          @click="handleThemeChange('bubble')"
+        >
+          气泡主题
+        </button>
+        <button
+          :class="['theme-btn', { active: theme === 'flat' }]"
+          @click="handleThemeChange('flat')"
+        >
+          扁平主题
+        </button>
+      </div>
+    </header>
+    <main class="chat-container">
+      <ai-chat ref="chatRef" class="chat"></ai-chat>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import '@ai-chat/components';
+import '@ai-chat/themes/default';
+
+const chatRef = ref<HTMLElement>();
+const theme = ref<'default' | 'bubble' | 'flat'>('default');
+
+onMounted(() => {
+  if (chatRef.value) {
+    // 设置消息处理回调
+    (chatRef.value as any).setMessageHandler(async (message: string) => {
+      // 模拟 AI 回复延迟
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      return `AI 回复：${message}`;
+    });
+
+    // 添加欢迎消息
+    (chatRef.value as any).addMessage({
+      role: 'assistant',
+      content: '你好！我是 AI 助手。有什么可以帮助你的吗？'
+    });
+  }
+});
+
+// 切换主题
+const handleThemeChange = (newTheme: 'default' | 'bubble' | 'flat') => {
+  theme.value = newTheme;
+  console.log(`切换到 ${newTheme} 主题`);
+  // 在实际使用中，这里应该动态加载对应的主题 CSS
+  // 可以通过动态导入实现：
+  // import(`@ai-chat/themes/${newTheme}`);
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+#app {
+  height: 100%;
+}
+</style>
+
+<style scoped>
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  padding: 16px 24px;
+  background: #1677ff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.theme-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.theme-btn {
+  padding: 6px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: transparent;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+
+.theme-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.theme-btn.active {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: white;
+}
+
+.chat-container {
+  flex: 1;
+  height: 0;
+  overflow: hidden;
+}
+
+.chat {
+  height: 100%;
+  display: block;
+}
+</style>

package/examples/vue-app/src/main.ts

@@ -0,0 +1,9 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "ai-chat-ui-kit",
+  "version": "0.1.0",
+  "description": "AI Chat UI Kit - Web Components based chat UI with headless mode",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build:core": "pnpm --filter @ai-chat/core run build",
+    "build:components": "pnpm --filter @ai-chat/components run build",
+    "build:themes": "pnpm --filter @ai-chat/themes run build",
+    "build": "pnpm run build:core && pnpm run build:components && pnpm run build:themes",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint packages/*/src --ext .ts,.tsx",
+    "clean": "rimraf packages/*/dist"
+  },
+  "keywords": [
+    "ai",
+    "chat",
+    "web-components",
+    "lit",
+    "headless",
+    "cross-framework"
+  ],
+  "author": "eden_zxpzhang",
+  "license": "MIT",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitest/ui": "^1.0.0",
+    "eslint": "^8.0.0",
+    "jsdom": "^24.0.0",
+    "rimraf": "^5.0.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/packages/components/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ai-chat/components",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "dependencies": {
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^7.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@ai-chat/core": {
+      "optional": true
+    }
+  }
+}

package/packages/components/src/chat/chat.css

@@ -0,0 +1,80 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ *
+ * 仅作为最小内置兜底样式（当用户没引入任何主题时仍能正常显示）。
+ * 任何视觉风格（颜色/圆角/阴影/字体）都应由主题包接管，本文件不应硬编码风格细节。
+ */
+
+ai-chat {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+ai-chat .ai-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  color: #333;
+  background: #fff;
+}
+
+ai-chat .ai-chat__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  flex-shrink: 0;
+}
+
+ai-chat .ai-chat__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+ai-chat .ai-chat__title-group {
+  flex: 1;
+  min-width: 0;
+}
+
+ai-chat .ai-chat__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.3;
+}
+
+ai-chat .ai-chat__subtitle {
+  font-size: 12px;
+  margin: 2px 0 0;
+  opacity: 0.7;
+}
+
+ai-chat .ai-chat__messages {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+ai-chat .ai-chat__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  color: #999;
+  font-size: 13px;
+}

package/packages/components/src/chat/chat.ts

@@ -0,0 +1,236 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { LitElement, html, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './chat.css';
+
+// 导入共享类型
+import { Message, ModelConfig } from '../types.js';
+
+@customElement('ai-chat')
+export class AiChat extends LitElement {
+  // 默认 light DOM，让外部主题 CSS 能命中
+  @property({ type: Boolean })
+  headless = true;
+
+  @property({ type: String })
+  theme = 'default';
+
+  @property({ type: String, attribute: 'header-title' })
+  headerTitle = 'AI Assistant';
+
+  @property({ type: String, attribute: 'header-subtitle' })
+  headerSubtitle = '在线 · 随时为您服务';
+
+  @property({ type: String, attribute: 'header-avatar' })
+  headerAvatar = '🤖';
+
+  @property({ type: Boolean, attribute: 'hide-header' })
+  hideHeader = false;
+
+  @property({ type: Object })
+  config?: ModelConfig;
+
+  @state()
+  private messages: Message[] = [];
+
+  @state()
+  private isLoading = false;
+
+  // 默认禁用 Shadow DOM（让全局主题 CSS 能命中所有内部元素）
+  createRenderRoot() {
+    if (this.headless) {
+      return this;
+    }
+    return super.createRenderRoot();
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('theme')) {
+      this.applyTheme();
+    }
+  }
+
+  private applyTheme() {
+    document.documentElement.setAttribute('data-theme', this.theme);
+  }
+
+  render() {
+    return html`
+      <div class="ai-chat" data-theme=${this.theme}>
+        <slot name="header">
+          ${this.hideHeader
+            ? ''
+            : html`
+                <header class="ai-chat__header">
+                  <div class="ai-chat__avatar">${this.headerAvatar}</div>
+                  <div class="ai-chat__title-group">
+                    <h3 class="ai-chat__title">${this.headerTitle}</h3>
+                    <p class="ai-chat__subtitle">${this.headerSubtitle}</p>
+                  </div>
+                  <slot name="header-actions"></slot>
+                </header>
+              `}
+        </slot>
+
+        <div class="ai-chat__messages">
+          ${this.messages.length === 0
+            ? html`<div class="ai-chat__empty">开始对话吧</div>`
+            : this.messages.map(
+                (message) => html`
+                  <ai-message
+                    .message=${message}
+                    .theme=${this.theme}
+                    ?headless=${this.headless}
+                  ></ai-message>
+                `
+              )}
+          ${this.isLoading
+            ? html`
+                <div class="ai-typing-indicator">
+                  <span class="ai-typing-indicator__dot"></span>
+                  <span class="ai-typing-indicator__dot"></span>
+                  <span class="ai-typing-indicator__dot"></span>
+                </div>
+              `
+            : ''}
+        </div>
+
+        <ai-input
+          .disabled=${this.isLoading}
+          ?headless=${this.headless}
+          @send=${this.handleSend}
+          @input-change=${this.handleInputChange}
+        ></ai-input>
+
+        <slot name="footer"></slot>
+      </div>
+    `;
+  }
+
+  private handleSend(event: CustomEvent) {
+    const content = event.detail.content;
+    this.sendMessage(content);
+  }
+
+  private handleInputChange(event: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('input-change', {
+        detail: event.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private messageIdCounter = 0;
+
+  /**
+   * 生成唯一的消息 ID
+   */
+  private generateMessageId(): string {
+    this.messageIdCounter++;
+    return `msg-${Date.now()}-${this.messageIdCounter}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  /**
+   * 发送消息
+   */
+  sendMessage(content: string): void {
+    if (!content.trim()) return;
+
+    const userMessage: Message = {
+      id: this.generateMessageId(),
+      role: 'user',
+      content,
+      timestamp: Date.now(),
+    };
+
+    this.messages = [...this.messages, userMessage];
+    this.isLoading = true;
+
+    this.dispatchEvent(
+      new CustomEvent('message-sent', {
+        detail: { message: userMessage },
+        bubbles: true,
+        composed: true,
+      })
+    );
+
+    // 模拟 AI 回复（实际应调用 API）
+    setTimeout(() => {
+      const aiMessage: Message = {
+        id: this.generateMessageId(),
+        role: 'assistant',
+        content: `回复：${content}`,
+        timestamp: Date.now(),
+      };
+
+      this.messages = [...this.messages, aiMessage];
+      this.isLoading = false;
+
+      this.dispatchEvent(
+        new CustomEvent('message-received', {
+          detail: { message: aiMessage },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }, 1000);
+  }
+
+  /**
+   * 添加预设消息（用于演示/初始化）
+   */
+  addMessage(message: Partial<Message> & { role: Message['role']; content: string }): void {
+    const full: Message = {
+      id: message.id ?? this.generateMessageId(),
+      role: message.role,
+      content: message.content,
+      timestamp: message.timestamp ?? Date.now(),
+      toolCalls: message.toolCalls,
+    };
+    this.messages = [...this.messages, full];
+  }
+
+  /**
+   * 清空消息
+   */
+  clearMessages(): void {
+    this.messages = [];
+  }
+
+  /**
+   * 导出会话
+   */
+  exportSession(): string {
+    return JSON.stringify(this.messages, null, 2);
+  }
+
+  /**
+   * 导入会话
+   */
+  importSession(data: string): void {
+    try {
+      const messages = JSON.parse(data) as Message[];
+      this.messages = messages;
+    } catch (error) {
+      this.dispatchEvent(
+        new CustomEvent('error', {
+          detail: { error: 'Failed to import session' },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ai-chat': AiChat;
+  }
+}

package/packages/components/src/index.ts

@@ -0,0 +1,36 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+// 导入所有组件
+import { AiChat } from './chat/chat.js';
+import { AiMessage } from './message/message.js';
+import { AiInput } from './input/input.js';
+import { AiToolCall } from './tool-call/tool-call.js';
+import { AiMarkdown } from './markdown/markdown.js';
+
+// 导出组件类
+export { AiChat, AiMessage, AiInput, AiToolCall, AiMarkdown };
+
+// 批量注册组件
+export function registerComponents(): void {
+  if (!customElements.get('ai-chat')) {
+    customElements.define('ai-chat', AiChat);
+  }
+  if (!customElements.get('ai-message')) {
+    customElements.define('ai-message', AiMessage);
+  }
+  if (!customElements.get('ai-input')) {
+    customElements.define('ai-input', AiInput);
+  }
+  if (!customElements.get('ai-tool-call')) {
+    customElements.define('ai-tool-call', AiToolCall);
+  }
+  if (!customElements.get('ai-markdown')) {
+    customElements.define('ai-markdown', AiMarkdown);
+  }
+}
+
+// 自动注册（如果直接导入此模块）
+registerComponents();

package/packages/components/src/input/input.css

@@ -0,0 +1,52 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ *
+ * 兜底样式 —— 实际视觉由主题接管
+ */
+
+ai-input {
+  display: block;
+}
+
+ai-input .ai-input {
+  padding: 12px 16px;
+}
+
+ai-input .ai-input__wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+ai-input .ai-input__textarea {
+  flex: 1;
+  resize: none;
+  outline: none;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 40px;
+  max-height: 120px;
+  background: #fff;
+  color: inherit;
+}
+
+ai-input .ai-input__send {
+  flex-shrink: 0;
+  padding: 10px 18px;
+  border: none;
+  border-radius: 8px;
+  background: #1677ff;
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+ai-input .ai-input__send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}