ai-chat-ui-kit 0.1.0

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

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

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

@@ -0,0 +1,171 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './tool-call.css';
+
+// 导入共享类型
+import { ToolCall } from '../types.js';
+
+@customElement('ai-tool-call')
+export class AiToolCall extends LitElement {
+  static styles = css`
+    :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;
+    }
+  `;
+
+  @property({ type: Object })
+  toolCall?: ToolCall;
+
+  @state()
+  private expanded = false;
+
+  render() {
+    if (!this.toolCall) {
+      return html``;
+    }
+
+    const statusClass = `tool-call-status-${this.toolCall.status}`;
+
+    return html`
+      <div class="tool-call">
+        <div class="tool-call-header" @click=${this.toggleExpand}>
+          <div class="tool-call-status ${statusClass}"></div>
+          <div class="tool-call-name">${this.toolCall.name}</div>
+          <div class="tool-call-toggle">
+            ${this.expanded ? '▼' : '▶'}
+          </div>
+        </div>
+        ${this.expanded
+          ? html`
+              <div class="tool-call-details">
+                <div class="tool-call-section">
+                  <div class="tool-call-label">参数</div>
+                  <div class="tool-call-content">
+                    ${JSON.stringify(this.toolCall.parameters, null, 2)}
+                  </div>
+                </div>
+                ${this.toolCall.result
+                  ? html`
+                      <div class="tool-call-section">
+                        <div class="tool-call-label">结果</div>
+                        <div class="tool-call-content">
+                          ${typeof this.toolCall.result === 'string'
+                            ? this.toolCall.result
+                            : JSON.stringify(this.toolCall.result, null, 2)}
+                        </div>
+                      </div>
+                    `
+                  : ''}
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
+  private toggleExpand() {
+    this.expanded = !this.expanded;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ai-tool-call': AiToolCall;
+  }
+}

package/packages/components/src/types.ts

@@ -0,0 +1,55 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+/**
+ * 消息角色
+ */
+export type MessageRole = 'user' | 'assistant' | 'system';
+
+/**
+ * 消息对象
+ */
+export interface Message {
+  id: string;
+  role: MessageRole;
+  content: string;
+  timestamp: number;
+  toolCalls?: ToolCall[];
+}
+
+/**
+ * 工具调用状态
+ */
+export type ToolCallStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+/**
+ * 工具调用对象
+ */
+export interface ToolCall {
+  id: string;
+  name: string;
+  parameters: Record<string, any>;
+  status: ToolCallStatus;
+  result?: any;
+}
+
+/**
+ * 模型配置
+ */
+export interface ModelConfig {
+  model: string;
+  temperature?: number;
+  maxTokens?: number;
+  topP?: number;
+}
+
+/**
+ * 会话数据（用于导入/导出）
+ */
+export interface SessionData {
+  messages: Message[];
+  config?: ModelConfig;
+  exportDate: string;
+}

package/packages/components/src/utils/helpers.ts

@@ -0,0 +1,128 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+
+/**
+ * 创建 HTML 元素
+ * @param tag 标签名
+ * @param attrs 属性对象
+ * @returns HTMLElement
+ */
+export function createElement(tag: string, attrs?: Record<string, any>): HTMLElement {
+  const element = document.createElement(tag);
+  
+  if (attrs) {
+    Object.entries(attrs).forEach(([key, value]) => {
+      if (key === 'className') {
+        element.className = value;
+      } else if (key === 'textContent') {
+        element.textContent = value;
+      } else if (key.startsWith('on')) {
+        const event = key.slice(2).toLowerCase();
+        element.addEventListener(event, value);
+      } else {
+        element.setAttribute(key, value);
+      }
+    });
+  }
+  
+  return element;
+}
+
+/**
+ * 防抖函数
+ * @param fn 要防抖的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 防抖后的函数
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout>;
+  
+  return function (this: any, ...args: Parameters<T>) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+/**
+ * 节流函数
+ * @param fn 要节流的函数
+ * @param limit 时间限制（毫秒）
+ * @returns 节流后的函数
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  fn: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle = false;
+  
+  return function (this: any, ...args: Parameters<T>) {
+    if (!inThrottle) {
+      fn.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+}
+
+/**
+ * 深拷贝对象
+ * @param obj 要拷贝的对象
+ * @returns 拷贝后的对象
+ */
+export function deepClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+  
+  if (Array.isArray(obj)) {
+    return obj.map(item => deepClone(item)) as T;
+  }
+  
+  const cloned = {} as T;
+  Object.keys(obj as object).forEach(key => {
+    (cloned as any)[key] = deepClone((obj as any)[key]);
+  });
+  
+  return cloned;
+}
+
+/**
+ * 生成 UUID v4
+ * @returns UUID 字符串
+ */
+export function generateUUID(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0;
+    const v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+/**
+ * 防抖装饰器（用于类方法）
+ * @param delay 延迟时间（毫秒）
+ */
+export function Debounce(delay: number) {
+  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+    const originalMethod = descriptor.value;
+    let timer: ReturnType<typeof setTimeout>;
+    
+    descriptor.value = function (...args: any[]) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        originalMethod.apply(this, args);
+      }, delay);
+    };
+    
+    return descriptor;
+  };
+}

package/packages/components/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "experimentalDecorators": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@ai-chat/core": ["../core/src"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/components/tsup.config.ts

@@ -0,0 +1,18 @@
+/**
+ * @generated-by AI: edenxpzhang
+ * @generated-date 2026-05-13
+ */
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/**/*.ts'],
+  outDir: 'dist',
+  format: ['esm', 'cjs'],
+  target: 'esnext',
+  splitting: true,
+  clean: true,
+  dts: true,
+  sourcemap: true,
+  treeshake: true,
+  external: ['lit', '@lit/reactive-element', 'lit-html', 'lit-element'],
+});

package/packages/core/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ai-chat/core",
+  "version": "0.1.0",
+  "description": "Core logic layer for AI Chat UI Kit (Headless)",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rimraf dist",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "ai",
+    "chat",
+    "headless",
+    "store"
+  ],
+  "author": "edenxpzhang",
+  "license": "MIT",
+  "dependencies": {
+    "marked": "^12.0.0",
+    "marked-highlight": "^2.0.0",
+    "highlight.js": "^11.9.0",
+    "mermaid": "^10.9.0",
+    "katex": "^0.16.0"
+  },
+  "devDependencies": {
+    "tsup": "^7.0.0",
+    "typescript": "^5.0.0"
+  }
+}