1.0.7 • Published 1 year ago
@koi-br/web-ai-chat v1.0.7
Web AI Chat Window
一个轻量级的网页AI聊天窗口组件，支持页面数据展示和实时对话功能。
安装
NPM
npm install @koi-br/web-ai-chatYarn
yarn add @koi-br/web-ai-chatCDN
<!-- 引入样式和脚本 -->
<link rel="stylesheet" href="https://unpkg.com/@koi-br/web-ai-chat@latest/dist/styles.css">
<script src="https://unpkg.com/@koi-br/web-ai-chat@latest/dist/index.umd.js"></script>API密钥获取
要使用Web AI Chat，您需要一个有效的API密钥。您可以通过以下方式获取：
- 访问 OpenAI平台
- 注册或登录您的OpenAI账户
- 在API密钥页面点击"Create new secret key"
- 复制生成的密钥并妥善保管
注意：
- API密钥属于敏感信息，请勿直接在前端代码中暴露
- 建议通过后端服务器中转API请求，保护您的密钥安全
- 首次使用需要绑定支付方式，API调用会产生相应费用
使用方法
ES Module
import { WebAIChat } from '@koi-br/web-ai-chat';
import '@koi-br/web-ai-chat/dist/styles.css';
const chat = new WebAIChat({
container: '#chat-container',
apiKey: 'your-api-key'
});
await chat.init();CommonJS
const { WebAIChat } = require('@koi-br/web-ai-chat');
require('@koi-br/web-ai-chat/dist/styles.css');
const chat = new WebAIChat({
container: '#chat-container',
apiKey: 'your-api-key'
});
chat.init();UMD (浏览器直接使用)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@koi-br/web-ai-chat@latest/dist/styles.css">
</head>
<body>
<div id="chat-container"></div>
<script src="https://unpkg.com/@koi-br/web-ai-chat@latest/dist/index.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
try {
// 使用 WebAIChatModule.WebAIChat 构造函数
const chat = new WebAIChatModule.WebAIChat({
container: '#chat-container',
apiKey: 'your-api-key'
});
await chat.init();
} catch (error) {
console.error('Chat initialization failed:', error);
}
});
</script>
</body>
</html>配置选项
interface ChatConfig {
container: string; // 容器选择器（必需）
apiKey: string; // API密钥（必需）
height?: number; // 聊天窗口高度，默认 500
width?: number; // 聊天窗口宽度，默认 350
theme?: 'light'|'dark'; // 主题，默认 'light'
}方法
init()
初始化聊天窗口。
send(message: string)
发送消息。
clear()
清空聊天记录。
setTheme(theme: 'light' | 'dark')
切换主题。
事件监听
// 监听消息事件
chat.on('message', (message) => {
console.log('New message:', message);
});
// 监听错误事件
chat.on('error', (error) => {
console.error('Error:', error);
});许可证
MIT