dwk-sse-web
v1.4.0
Published
一个基于Vue3的聊天组件库，支持在Vue项目中导入使用，也支持在普通HTML页面中通过脚本标签直接引入使用。
Readme
DWK SSE Chat
一个基于Vue3的聊天组件库，支持在Vue项目中导入使用，也支持在普通HTML页面中通过脚本标签直接引入使用。
特性
- 支持多种使用方式（Vue组件、JS库）
- 悬浮球式聊天窗口
- 支持拖拽和边缘吸附
- 支持全屏/小窗模式切换
- 美观的UI和流畅的动画
安装
在Vue项目中使用
# npm
npm install dwk-sse-chat
# yarn
yarn add dwk-sse-chat
# pnpm
pnpm add dwk-sse-chat在HTML页面中直接使用
<script src="https://你的域名/chat.js"></script>使用方法
方式一：在Vue项目中直接使用组件
<script setup>
import { ChatWindows } from 'dwk-sse-chat';
import { onMounted } from 'vue';
// 初始化配置
onMounted(() => {
window.dispatchEvent(new CustomEvent('chatConfigUpdate', {
detail: {
robotname: 'AI助手',
dwk_token: '你的token',
title: '聊天助手',
baseUrl: 'http://你的API地址'
}
}));
});
</script>
<template>
<ChatWindows />
</template>方式二：在Vue项目中使用Chat类
import { Chat } from 'dwk-sse-chat';
// 初始化聊天组件
const chat = new Chat({
robotname: 'AI助手',
dwk_token: '你的token',
title: '聊天助手',
baseUrl: 'http://你的API地址'
});
// 打开聊天窗口
chat.show();
// 隐藏聊天窗口
chat.hide();
// 发送消息
chat.sendMessage('你好，AI助手！');方式三：在HTML页面中使用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>聊天组件示例</title>
</head>
<body>
<h1>聊天组件示例</h1>
<!-- 引入聊天组件 -->
<script src="https://你的域名/chat.js"></script>
<script>
// 初始化聊天组件
var chat = new Chat({
robotname: "AI助手",
dwk_token: "你的token",
title: "聊天助手",
baseUrl: "http://你的API地址",
isFullScreen: false
});
// 可以通过JS控制组件
// chat.show(); // 显示聊天窗口
// chat.hide(); // 隐藏聊天窗口
// chat.sendMessage('你好'); // 发送消息
</script>
</body>
</html>配置选项
| 选项 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|------|------| | robotname | string | 否 | 'AI助手' | 机器人名称 | | dwk_token | string | 是 | - | 认证token | | title | string | 否 | 'DWK SSE Chat' | 聊天窗口标题 | | baseUrl | string | 是 | - | API基础URL | | isFullScreen | boolean | 否 | false | 是否以全屏模式显示 |
API方法
show()
显示聊天窗口。
chat.show();hide()
隐藏聊天窗口。
chat.hide();sendMessage(message)
发送一条消息。
chat.sendMessage('你好，AI助手！');updateConfig(config)
更新配置。
chat.updateConfig({
title: '新标题',
isFullScreen: true
});开发
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建库
npm run build