npm - ai-chat-ui-kit - Versions diffs - 0.1.0 - Mend

ai-chat-ui-kit 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/.eslintrc.cjs +74 -0
package/.github/actions/screenshot/action.yml +35 -0
package/.github/workflows/pages.yml +46 -0
package/README.md +285 -0
package/docs/README.md +176 -0
package/docs/api/components.md +344 -0
package/docs/api/core.md +349 -0
package/docs/chat-style-1-minimal.html +78 -0
package/docs/chat-style-2-neon.html +74 -0
package/docs/chat-style-3-glass.html +73 -0
package/docs/chat-style-4-terminal.html +84 -0
package/docs/chat-style-5-gradient.html +69 -0
package/docs/chat-style-6-corporate.html +116 -0
package/docs/examples/basic-chat.md +291 -0
package/docs/examples/custom-plugins.md +431 -0
package/docs/examples/multi-model.md +466 -0
package/docs/guide/api-adapters.md +431 -0
package/docs/guide/getting-started.md +244 -0
package/docs/guide/headless-mode.md +508 -0
package/docs/guide/plugins.md +416 -0
package/docs/guide/themes.md +327 -0
package/docs/index.html +256 -0
package/docs/theme-preview-1-minimal.html +74 -0
package/docs/theme-preview-2-neon.html +73 -0
package/docs/theme-preview-3-glass.html +77 -0
package/docs/theme-preview-4-terminal.html +86 -0
package/docs/theme-preview-5-gradient.html +79 -0
package/docs/theme-preview-6-corporate.html +71 -0
package/examples/index.html +414 -0
package/examples/react-app/App.tsx +131 -0
package/examples/react-app/index.html +12 -0
package/examples/react-app/main.tsx +15 -0
package/examples/react-app/package.json +24 -0
package/examples/vue-app/index.html +12 -0
package/examples/vue-app/package.json +22 -0
package/examples/vue-app/src/App.vue +145 -0
package/examples/vue-app/src/main.ts +9 -0
package/package.json +44 -0
package/packages/components/package.json +25 -0
package/packages/components/src/chat/chat.css +80 -0
package/packages/components/src/chat/chat.ts +236 -0
package/packages/components/src/index.ts +36 -0
package/packages/components/src/input/input.css +52 -0
package/packages/components/src/input/input.ts +116 -0
package/packages/components/src/markdown/markdown.css +118 -0
package/packages/components/src/markdown/markdown.ts +229 -0
package/packages/components/src/message/message.css +56 -0
package/packages/components/src/message/message.ts +72 -0
package/packages/components/src/styles/global.css +43 -0
package/packages/components/src/tool-call/tool-call.css +98 -0
package/packages/components/src/tool-call/tool-call.ts +171 -0
package/packages/components/src/types.ts +55 -0
package/packages/components/src/utils/helpers.ts +128 -0
package/packages/components/tsconfig.json +25 -0
package/packages/components/tsup.config.ts +18 -0
package/packages/core/package.json +47 -0
package/packages/core/pnpm-lock.yaml +2032 -0
package/packages/core/pnpm-workspace.yaml +2 -0
package/packages/core/src/api/adapters.ts +717 -0
package/packages/core/src/api/base.ts +210 -0
package/packages/core/src/api/index.ts +54 -0
package/packages/core/src/index.ts +93 -0
package/packages/core/src/parser/latex.ts +274 -0
package/packages/core/src/parser/markdown.test.ts +58 -0
package/packages/core/src/parser/markdown.ts +206 -0
package/packages/core/src/parser/mermaid.ts +276 -0
package/packages/core/src/plugins/PluginManager.ts +232 -0
package/packages/core/src/plugins/builtin.ts +406 -0
package/packages/core/src/store/ChatStore.ts +163 -0
package/packages/core/src/store/ModelConfigStore.ts +136 -0
package/packages/core/src/store/ToolCallStore.ts +164 -0
package/packages/core/src/store/base.ts +75 -0
package/packages/core/src/types/index.ts +133 -0
package/packages/core/tsup.config.ts +18 -0
package/packages/themes/package.json +33 -0
package/packages/themes/src/corporate/index.ts +52 -0
package/packages/themes/src/corporate/theme.css +228 -0
package/packages/themes/src/glass/index.ts +52 -0
package/packages/themes/src/glass/theme.css +237 -0
package/packages/themes/src/gradient/index.ts +53 -0
package/packages/themes/src/gradient/theme.css +218 -0
package/packages/themes/src/index.ts +13 -0
package/packages/themes/src/minimal/index.ts +52 -0
package/packages/themes/src/minimal/theme.css +198 -0
package/packages/themes/src/neon/index.ts +52 -0
package/packages/themes/src/neon/theme.css +233 -0
package/packages/themes/src/terminal/index.ts +52 -0
package/packages/themes/src/terminal/theme.css +235 -0
package/packages/themes/src/types.ts +10 -0
package/packages/themes/src/vite-env.d.ts +9 -0
package/packages/themes/tsup.config.ts +21 -0
package/pnpm-workspace.yaml +4 -0
package/tsconfig.json +27 -0
package/vite.config.ts +25 -0
package/vitest.config.ts +28 -0

package/docs/examples/basic-chat.md ADDED Viewed

@@ -0,0 +1,291 @@
+# 基本聊天示例
+本示例将指导您创建一个最基本的聊天功能。
+## 原生 HTML 示例
+### 1. 创建 HTML 文件
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Chat - 基本示例</title>
+  <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: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <ai-chat id="chat"></ai-chat>
+  </div>
+  <script type="module">
+    // 导入组件和主题
+    import '@ai-chat/components';
+    import '@ai-chat/themes/default';
+    // 获取组件实例
+    const chat = document.getElementById('chat');
+    // 设置消息处理回调
+    chat.setMessageHandler(async (message) => {
+      // 模拟 AI 回复延迟
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      // 返回 AI 回复
+      return `您说的是："${message}"。这是 AI 的回复。`;
+    });
+    // 添加欢迎消息
+    chat.addMessage({
+      role: 'assistant',
+      content: '你好！我是 AI 助手，有什么可以帮助你的吗？'
+    });
+  </script>
+</body>
+</html>
+```
+### 2. 运行
+在浏览器中打开 HTML 文件即可使用。
+## React 示例
+### 1. 安装依赖
+```bash
+pnpm add @ai-chat/core @ai-chat/components @ai-chat/themes
+```
+### 2. 创建聊天组件
+```tsx
+// ChatApp.tsx
+import React, { useEffect, useRef, useState } from 'react';
+import '@ai-chat/components';
+import '@ai-chat/themes/default';
+const ChatApp: React.FC = () => {
+  const chatRef = useRef<HTMLElement>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  useEffect(() => {
+    if (chatRef.current) {
+      // 设置消息处理回调
+      (chatRef.current as any).setMessageHandler(async (message: string) => {
+        // 模拟 AI 回复延迟
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        // 返回 AI 回复
+        return `您说的是："${message}"。这是 AI 的回复。`;
+      });
+      // 添加欢迎消息
+      (chatRef.current as any).addMessage({
+        role: 'assistant',
+        content: '你好！我是 AI 助手，有什么可以帮助你的吗？'
+      });
+    }
+  }, []);
+  return (
+    <div style={{ height: '100vh' }}>
+      <ai-chat ref={chatRef}></ai-chat>
+    </div>
+  );
+};
+export default ChatApp;
+```
+### 3. 在 App 中使用
+```tsx
+// App.tsx
+import React from 'react';
+import ChatApp from './ChatApp';
+function App() {
+  return <ChatApp />;
+}
+export default App;
+```
+### 4. 运行
+```bash
+npm start
+# 或
+pnpm dev
+```
+## Vue 3 示例
+### 1. 安装依赖
+```bash
+pnpm add @ai-chat/core @ai-chat/components @ai-chat/themes
+```
+### 2. 创建聊天组件
+```vue
+<!-- ChatApp.vue -->
+<template>
+  <div style="height: 100vh">
+    <ai-chat ref="chatRef"></ai-chat>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import '@ai-chat/components';
+import '@ai-chat/themes/default';
+const chatRef = ref<HTMLElement>();
+onMounted(() => {
+  if (chatRef.value) {
+    // 设置消息处理回调
+    (chatRef.value as any).setMessageHandler(async (message: string) => {
+      // 模拟 AI 回复延迟
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      // 返回 AI 回复
+      return `您说的是："${message}"。这是 AI 的回复。`;
+    });
+    // 添加欢迎消息
+    (chatRef.value as any).addMessage({
+      role: 'assistant',
+      content: '你好！我是 AI 助手，有什么可以帮助你的吗？'
+    });
+  }
+});
+</script>
+```
+### 3. 在 App 中使用
+```vue
+<!-- App.vue -->
+<template>
+  <ChatApp />
+</template>
+<script setup lang="ts">
+import ChatApp from './components/ChatApp.vue';
+</script>
+```
+### 4. 运行
+```bash
+npm run dev
+# 或
+pnpm dev
+```
+## 连接真实 API
+### 使用 fetch
+```typescript
+chat.setMessageHandler(async (message) => {
+  const response = await fetch('/api/chat', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message })
+  });
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  const data = await response.json();
+  return data.reply;
+});
+```
+### 使用 axios
+```typescript
+import axios from 'axios';
+chat.setMessageHandler(async (message) => {
+  const response = await axios.post('/api/chat', { message });
+  return response.data.reply;
+});
+```
+### 使用 OpenAI API
+```typescript
+chat.setMessageHandler(async (message) => {
+  const response = await fetch('https://api.openai.com/v1/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
+    },
+    body: JSON.stringify({
+      model: 'gpt-3.5-turbo',
+      messages: [
+        { role: 'user', content: message }
+      ]
+    })
+  });
+  const data = await response.json();
+  return data.choices[0].message.content;
+});
+```
+## 自定义样式
+### 覆盖 CSS 变量
+```css
+:root {
+  --ai-primary: #your-primary-color;
+  --ai-message-user-bg: #your-user-msg-bg;
+  --ai-message-ai-bg: #your-ai-msg-bg;
+}
+```
+### 使用不同主题
+```typescript
+// 默认主题
+import '@ai-chat/themes/default';
+// 气泡主题
+import '@ai-chat/themes/bubble';
+// 扁平主题
+import '@ai-chat/themes/flat';
+```
+## 下一步
+- [自定义插件](../guide/plugins.md)
+- [多模型支持](./multi-model.md)
+- [主题定制](../guide/themes.md)

package/docs/examples/custom-plugins.md ADDED Viewed

@@ -0,0 +1,431 @@
+# 自定义插件示例
+本示例将指导您创建和使用自定义插件。
+## 插件 1：消息前缀插件
+为所有用户消息添加前缀（如时间戳、用户名等）。
+### 创建插件
+```typescript
+// plugins/message-prefix.ts
+import { ChatPlugin, PluginContext, Message } from '@ai-chat/core';
+interface MessagePrefixPluginOptions {
+  prefix: string; // 前缀模板
+  position: 'before' | 'after'; // 前缀位置
+}
+export class MessagePrefixPlugin implements ChatPlugin {
+  name = 'message-prefix';
+  private prefix: string;
+  private position: 'before' | 'after';
+  constructor(options: MessagePrefixPluginOptions) {
+    this.prefix = options.prefix;
+    this.position = options.position || 'before';
+  }
+  beforeSend(message: string, context: PluginContext): string {
+    const processedMessage =
+      this.position === 'before'
+        ? `${this.prefix}${message}`
+        : `${message}${this.prefix}`;
+    return processedMessage;
+  }
+}
+```
+### 使用插件
+```typescript
+// main.ts
+import { createChatStore } from '@ai-chat/core';
+import { MessagePrefixPlugin } from './plugins/message-prefix';
+// 创建插件实例
+const prefixPlugin = new MessagePrefixPlugin({
+  prefix: '[User] ',
+  position: 'before',
+});
+// 注册插件
+const chatStore = createChatStore({
+  plugins: [prefixPlugin],
+  onMessage: async (message) => {
+    // message 已经包含前缀
+    console.log('Message with prefix:', message);
+    return `AI 回复：${message}`;
+  },
+});
+```
+## 插件 2：消息翻译插件
+在发送前将消息翻译成英文，或将 AI 回复翻译成中文。
+### 创建插件
+```typescript
+// plugins/translator.ts
+import { ChatPlugin } from '@ai-chat/core';
+interface TranslatorPluginOptions {
+  translateInput?: boolean; // 是否翻译输入
+  translateOutput?: boolean; // 是否翻译输出
+  targetLang?: string; // 目标语言
+}
+export class TranslatorPlugin implements ChatPlugin {
+  name = 'translator';
+  private options: TranslatorPluginOptions;
+  constructor(options: TranslatorPluginOptions = {}) {
+    this.options = {
+      translateInput: true,
+      translateOutput: false,
+      targetLang: 'en',
+      ...options,
+    };
+  }
+  async beforeSend(message: string): Promise<string> {
+    if (!this.options.translateInput) return message;
+    // 调用翻译 API
+    const translated = await this.translate(message, this.options.targetLang!);
+    return translated;
+  }
+  async afterReceive(message: string): Promise<string> {
+    if (!this.options.translateOutput) return message;
+    // 调用翻译 API
+    const translated = await this.translate(message, 'zh');
+    return translated;
+  }
+  private async translate(text: string, targetLang: string): Promise<string> {
+    // 使用 Google Translate API 或其他翻译服务
+    const response = await fetch('https://translation.googleapis.com/language/translate/v2', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        q: text,
+        target: targetLang,
+      }),
+    });
+    const data = await response.json();
+    return data.data.translations[0].translatedText;
+  }
+}
+```
+### 使用插件
+```typescript
+import { TranslatorPlugin } from './plugins/translator';
+const translatorPlugin = new TranslatorPlugin({
+  translateInput: true, // 将用户输入翻译成英文
+  translateOutput: true, // 将 AI 回复翻译成中文
+  targetLang: 'en',
+});
+const chatStore = createChatStore({
+  plugins: [translatorPlugin],
+  onMessage: async (message) => {
+    // message 已经是英文
+    const response = await callOpenAI(message);
+    return response; // 将被插件翻译成中文
+  },
+});
+```
+## 插件 3：消息持久化插件
+将聊天记录保存到 localStorage 或 IndexedDB。
+### 创建插件
+```typescript
+// plugins/persistence.ts
+import { ChatPlugin, PluginContext, Message } from '@ai-chat/core';
+interface PersistencePluginOptions {
+  storage?: 'localStorage' | 'sessionStorage' | 'indexedDB';
+  key?: string;
+  maxMessages?: number;
+}
+export class PersistencePlugin implements ChatPlugin {
+  name = 'persistence';
+  private storage: Storage;
+  private key: string;
+  private maxMessages: number;
+  constructor(options: PersistencePluginOptions = {}) {
+    this.storage =
+      options.storage === 'sessionStorage'
+        ? sessionStorage
+        : localStorage;
+    this.key = options.key || 'chat-messages';
+    this.maxMessages = options.maxMessages || 100;
+  }
+  init(context: PluginContext) {
+    // 加载已保存的消息
+    const savedMessages = this.loadMessages();
+    if (savedMessages.length > 0) {
+      savedMessages.forEach(msg => {
+        context.addMessage(msg);
+      });
+    }
+    // 监听消息变化，自动保存
+    context.on('message-updated', () => {
+      const messages = context.getMessages();
+      this.saveMessages(messages);
+    });
+  }
+  private saveMessages(messages: Message[]): void {
+    const toSave = messages.slice(-this.maxMessages); // 只保存最近 N 条
+    this.storage.setItem(this.key, JSON.stringify(toSave));
+  }
+  private loadMessages(): Message[] {
+    const saved = this.storage.getItem(this.key);
+    if (!saved) return [];
+    try {
+      return JSON.parse(saved);
+    } catch {
+      return [];
+    }
+  }
+  // 导出聊天记录
+  exportMessages(): string {
+    const messages = this.loadMessages();
+    return JSON.stringify(messages, null, 2);
+  }
+  // 清除聊天记录
+  clearMessages(): void {
+    this.storage.removeItem(this.key);
+  }
+}
+```
+### 使用插件
+```typescript
+import { PersistencePlugin } from './plugins/persistence';
+const persistencePlugin = new PersistencePlugin({
+  storage: 'localStorage',
+  key: 'my-chat-history',
+  maxMessages: 50,
+});
+const chatStore = createChatStore({
+  plugins: [persistencePlugin],
+  onMessage: async (message) => {
+    return `AI 回复：${message}`;
+  },
+});
+// 导出聊天记录
+const exported = persistencePlugin.exportMessages();
+console.log(exported);
+// 清除聊天记录
+persistencePlugin.clearMessages();
+```
+## 插件 4：字数统计插件
+统计消息字数、字符数等。
+### 创建插件
+```typescript
+// plugins/word-counter.ts
+import { ChatPlugin, PluginContext } from '@ai-chat/core';
+interface WordCountStats {
+  totalMessages: number;
+  totalWords: number;
+  totalCharacters: number;
+  averageWordsPerMessage: number;
+}
+export class WordCounterPlugin implements ChatPlugin {
+  name = 'word-counter';
+  private context!: PluginContext;
+  private stats: WordCountStats = {
+    totalMessages: 0,
+    totalWords: 0,
+    totalCharacters: 0,
+    averageWordsPerMessage: 0,
+  };
+  init(context: PluginContext) {
+    this.context = context;
+  }
+  afterReceive(message: string): string {
+    // 更新统计
+    this.stats.totalMessages++;
+    this.stats.totalCharacters += message.length;
+    this.stats.totalWords += message.trim().split(/\s+/).length;
+    this.stats.averageWordsPerMessage =
+      this.stats.totalWords / this.stats.totalMessages;
+    // 触发统计更新事件
+    this.context.emit('stats-updated', { ...this.stats });
+    return message;
+  }
+  // 获取统计信息
+  getStats(): WordStats {
+    return { ...this.stats };
+  }
+  // 重置统计
+  resetStats(): void {
+    this.stats = {
+      totalMessages: 0,
+      totalWords: 0,
+      totalCharacters: 0,
+      averageWordsPerMessage: 0,
+    };
+    this.context.emit('stats-updated', { ...this.stats });
+  }
+}
+```
+### 使用插件
+```typescript
+import { WordCounterPlugin } from './plugins/word-counter';
+const wordCounterPlugin = new WordCounterPlugin();
+const chatStore = createChatStore({
+  plugins: [wordCounterPlugin],
+  onMessage: async (message) => {
+    return `AI 回复：${message}`;
+  },
+});
+// 监听统计更新
+wordCounterPlugin.context.on('stats-updated', (stats) => {
+  console.log('Stats updated:', stats);
+});
+// 获取统计信息
+const stats = wordCounterPlugin.getStats();
+console.log(stats);
+```
+## 插件 5：敏感信息脱敏插件
+检测并脱敏敏感信息（如手机号、邮箱、身份证号等）。
+### 创建插件
+```typescript
+// plugins/sensitive-info-mask.ts
+import { ChatPlugin } from '@ai-chat/core';
+interface SensitiveInfoMaskOptions {
+  maskPhone?: boolean;
+  maskEmail?: boolean;
+  maskIDCard?: boolean;
+  maskBankCard?: boolean;
+  maskCustom?: Array<{ regex: RegExp; replacement: string }>;
+}
+export class SensitiveInfoMaskPlugin implements ChatPlugin {
+  name = 'sensitive-info-mask';
+  private rules: Array<{ regex: RegExp; replacement: string }> = [];
+  constructor(options: SensitiveInfoMaskOptions = {}) {
+    if (options.maskPhone) {
+      this.rules.push({
+        regex: /(\+?86\s?)?1[3-9]\d{9}/g,
+        replacement: '*** *** ****',
+      });
+    }
+    if (options.maskEmail) {
+      this.rules.push({
+        regex: /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,
+        replacement: '***@***.***',
+      });
+    }
+    if (options.maskIDCard) {
+      this.rules.push({
+        regex: /(\d{6})(\d{8})(\d{4})/g,
+        replacement: '$1********$3',
+      });
+    }
+    if (options.maskBankCard) {
+      this.rules.push({
+        regex: /\d{16,19}/g,
+        replacement: '**** **** **** ****',
+      });
+    }
+    if (options.maskCustom) {
+      this.rules.push(...options.maskCustom);
+    }
+  }
+  beforeSend(message: string): string {
+    let masked = message;
+    for (const rule of this.rules) {
+      masked = masked.replace(rule.regex, rule.replacement);
+    }
+    return masked;
+  }
+}
+```
+### 使用插件
+```typescript
+import { SensitiveInfoMaskPlugin } from './plugins/sensitive-info-mask';
+const maskPlugin = new SensitiveInfoMaskPlugin({
+  maskPhone: true,
+  maskEmail: true,
+  maskIDCard: true,
+});
+const chatStore = createChatStore({
+  plugins: [maskPlugin],
+  onMessage: async (message) => {
+    // message 已经脱敏
+    return `AI 回复：${message}`;
+  },
+});
+```
+## 下一步
+- [多模型支持](./multi-model.md)
+- [基本聊天](./basic-chat.md)
+- [插件开发指南](../guide/plugins.md)