ai-chat-ui-kit 0.1.0 → 0.1.1

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

@@ -1,145 +0,0 @@
-<!--
-  @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

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

package/packages/components/package.json

@@ -1,25 +0,0 @@
-{
-  "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

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

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

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

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

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

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