# Stencil AI Chat Component Library
一个基于 Stencil 构建的移动端 AI 聊天组件库，支持文本、Markdown 和 ECharts 渲染。
## 特性
- 🚀 **移动端优先设计** - 专为移动设备优化的触摸交互
- 📱 **响应式布局** - 自适应不同屏幕尺寸
- 🎨 **多种内容类型** - 支持文本、Markdown、ECharts 图表渲染
- 🔧 **高度可定制** - 支持自定义渲染器和样式
- 🌐 **框架无关** - 可在 React、Vue、Angular 等框架中使用
- 📦 **轻量级** - 基于 Web Components 标准
- 🎯 **TypeScript 支持** - 完整的类型定义
## 安装
```bash
npm install stenci-ai-chat
```
## 快速开始
### 在 HTML 中使用
```html
```
### 在 React 中使用
```jsx
import React, { useState } from 'react';
import 'stenci-ai-chat/dist/stenci-ai-chat/stenci-ai-chat.css';
function App() {
const [messages, setMessages] = useState([
{
id: '1',
type: 'text',
content: '你好！欢迎使用 AI 聊天组件。',
timestamp: Date.now(),
isUser: false
}
]);
const handleMessageClick = (message) => {
console.log('Message clicked:', message);
};
return (
);
}
```
### 在 Vue 中使用
```vue
```
### 在 Angular 中使用
```typescript
import { Component } from '@angular/core';
import 'stenci-ai-chat/dist/stenci-ai-chat/stenci-ai-chat.css';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
messages = [
{
id: '1',
type: 'text',
content: '你好！欢迎使用 AI 聊天组件。',
timestamp: Date.now(),
isUser: false
}
];
handleMessageClick(message: any) {
console.log('Message clicked:', message);
}
}
```
## 组件 API
### ai-chat
主聊天组件，用于显示聊天消息列表。
#### 属性 (Props)
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `messages` | `ChatMessage[]` | `[]` | 聊天消息列表 |
| `showTimestamp` | `boolean` | `true` | 是否显示时间戳 |
| `showUserAvatar` | `boolean` | `true` | 是否显示用户头像 |
| `showAiAvatar` | `boolean` | `true` | 是否显示AI头像 |
| `userAvatar` | `string` | `''` | 用户头像URL |
| `aiAvatar` | `string` | `''` | AI头像URL |
| `customRenderers` | `{ [key: string]: string }` | `{}` | 自定义渲染器映射 |
#### 事件 (Events)
| 事件名 | 描述 | 事件数据 |
|--------|------|----------|
| `messageClick` | 消息点击事件 | `ChatMessage` |
| `messageLongPress` | 消息长按事件 | `ChatMessage` |
#### 消息类型 (ChatMessage)
```typescript
interface ChatMessage {
id: string; // 消息唯一标识
type: 'text' | 'markdown' | 'echarts' | string; // 消息类型
content: string | any; // 消息内容
timestamp?: number; // 时间戳
isUser?: boolean; // 是否为用户消息
customRenderer?: string; // 自定义渲染器名称
}
```
### text-renderer
文本渲染组件，支持自动链接识别和代码高亮。
#### 属性 (Props)
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `content` | `string` | `''` | 要渲染的文本内容 |
| `preserveWhitespace` | `boolean` | `true` | 是否保留换行符 |
| `autoLink` | `boolean` | `true` | 是否支持链接自动识别 |
| `highlightCode` | `boolean` | `false` | 是否支持代码高亮 |
### markdown-renderer
Markdown 渲染组件，支持完整的 Markdown 语法。
#### 属性 (Props)
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `content` | `string` | `''` | 要渲染的 Markdown 内容 |
| `highlightCode` | `boolean` | `true` | 是否启用代码高亮 |
| `enableTables` | `boolean` | `true` | 是否启用表格 |
| `enableTaskLists` | `boolean` | `true` | 是否启用任务列表 |
| `enableFootnotes` | `boolean` | `true` | 是否启用脚注 |
### echarts-renderer
ECharts 图表渲染组件，支持各种图表类型。
#### 属性 (Props)
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `content` | `any` | `{}` | ECharts 配置对象 |
| `width` | `string` | `'100%'` | 图表宽度 |
| `height` | `string` | `'300px'` | 图表高度 |
| `responsive` | `boolean` | `true` | 是否响应式 |
| `showLoading` | `boolean` | `true` | 是否显示加载动画 |
| `theme` | `string` | `'default'` | 主题名称 |
#### 事件 (Events)
| 事件名 | 描述 | 事件数据 |
|--------|------|----------|
| `chartClick` | 图表点击事件 | ECharts 点击参数 |
## 使用示例
### 文本消息
```javascript
const textMessage = {
id: '1',
type: 'text',
content: '这是一条文本消息，支持自动链接识别：https://github.com',
timestamp: Date.now(),
isUser: false
};
```
### Markdown 消息
```javascript
const markdownMessage = {
id: '2',
type: 'markdown',
content: `# 标题
这是一个 **粗体** 文本和 *斜体* 文本。
\`\`\`javascript
function hello() {
console.log('Hello, World!');
}
\`\`\`
- 列表项 1
- 列表项 2
- 列表项 3`,
timestamp: Date.now(),
isUser: false
};
```
### ECharts 图表消息
```javascript
const chartMessage = {
id: '3',
type: 'echarts',
content: {
title: {
text: '销售数据统计'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '销售数据',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '产品A' },
{ value: 735, name: '产品B' },
{ value: 580, name: '产品C' }
]
}]
},
timestamp: Date.now(),
isUser: false
};
```
### 自定义渲染器
```javascript
// 注册自定义渲染器
const customRenderers = {
'custom-card': 'my-custom-card-component'
};
// 使用自定义渲染器
const customMessage = {
id: '4',
type: 'custom',
content: { title: '自定义卡片', description: '这是一个自定义渲染的消息' },
customRenderer: 'custom-card',
timestamp: Date.now(),
isUser: false
};
```
## 样式定制
组件使用 Less 编写样式，支持 CSS 变量定制：
```css
ai-chat {
--primary-color: #007AFF;
--success-color: #34C759;
--warning-color: #FF9500;
--error-color: #FF3B30;
--text-color: #000000;
--text-color-secondary: #8E8E93;
--background-color: #F2F2F7;
--border-color: #C6C6C8;
}
```
## 浏览器支持
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
## 开发
```bash
# 安装依赖
npm install
# 启动开发服务器
npm start
# 构建项目
npm run build
# 运行测试
npm test
```
## 许可证
MIT License
## 贡献
欢迎提交 Issue 和 Pull Request！
## 更新日志
### 1.0.0
- 初始版本发布
- 支持文本、Markdown、ECharts 渲染
- 移动端优化
- 完整的 TypeScript 支持