hxy-stencil-ai-chat
v1.0.25
Published
A mobile-first AI chat component library built with Stencil, supporting text, markdown, and echarts rendering
Maintainers
uestchxyReadme
Stencil AI Chat Component Library
一个基于 Stencil 构建的移动端 AI 聊天组件库，支持文本、Markdown 和 ECharts 渲染。
特性
- 🚀 移动端优先设计 - 专为移动设备优化的触摸交互
- 📱 响应式布局 - 自适应不同屏幕尺寸
- 🎨 多种内容类型 - 支持文本、Markdown、ECharts 图表渲染
- 🔧 高度可定制 - 支持自定义渲染器和样式
- 🌐 框架无关 - 可在 React、Vue、Angular 等框架中使用
- 📦 轻量级 - 基于 Web Components 标准
- 🎯 TypeScript 支持 - 完整的类型定义
安装
npm install stenci-ai-chat快速开始
在 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 中使用
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 中使用
<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 中使用
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)
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 点击参数 |
使用示例
文本消息
const textMessage = {
id: '1',
type: 'text',
content: '这是一条文本消息，支持自动链接识别：https://github.com',
timestamp: Date.now(),
isUser: false
};Markdown 消息
const markdownMessage = {
id: '2',
type: 'markdown',
content: `# 标题
这是一个 **粗体** 文本和 *斜体* 文本。
\`\`\`javascript
function hello() {
console.log('Hello, World!');
}
\`\`\`
- 列表项 1
- 列表项 2
- 列表项 3`,
timestamp: Date.now(),
isUser: false
};ECharts 图表消息
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
};自定义渲染器
// 注册自定义渲染器
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 变量定制：
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+
开发
# 安装依赖
npm install
# 启动开发服务器
npm start
# 构建项目
npm run build
# 运行测试
npm test许可证
MIT License
贡献
欢迎提交 Issue 和 Pull Request！
更新日志
1.0.0
- 初始版本发布
- 支持文本、Markdown、ECharts 渲染
- 移动端优化
- 完整的 TypeScript 支持