# 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
<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/stenci-ai-chat/dist/stenci-ai-chat/stenci-ai-chat.esm.js"></script>
</head>
<body>
  <ai-chat id="chat"></ai-chat>
  
  <script>
    const chat = document.getElementById('chat');
    chat.messages = [
      {
        id: '1',
        type: 'text',
        content: '你好！欢迎使用 AI 聊天组件。',
        timestamp: Date.now(),
        isUser: false
      }
    ];
  </script>
</body>
</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 (
    <ai-chat
      messages={messages}
      show-timestamp={true}
      show-user-avatar={true}
      show-ai-avatar={true}
      onMessageClick={handleMessageClick}
    />
  );
}
```

### 在 Vue 中使用

```vue
<template>
  <ai-chat
    :messages="messages"
    :show-timestamp="true"
    :show-user-avatar="true"
    :show-ai-avatar="true"
    @messageClick="handleMessageClick"
  />
</template>

<script>
import 'stenci-ai-chat/dist/stenci-ai-chat/stenci-ai-chat.css';

export default {
  data() {
    return {
      messages: [
        {
          id: '1',
          type: 'text',
          content: '你好！欢迎使用 AI 聊天组件。',
          timestamp: Date.now(),
          isUser: false
        }
      ]
    };
  },
  methods: {
    handleMessageClick(message) {
      console.log('Message clicked:', message);
    }
  }
};
</script>
```

### 在 Angular 中使用

```typescript
import { Component } from '@angular/core';
import 'stenci-ai-chat/dist/stenci-ai-chat/stenci-ai-chat.css';

@Component({
  selector: 'app-root',
  template: `
    <ai-chat
      [messages]="messages"
      [showTimestamp]="true"
      [showUserAvatar]="true"
      [showAiAvatar]="true"
      (messageClick)="handleMessageClick($event)"
    ></ai-chat>
  `
})
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 支持