0.1.1 • Published 7 months ago
@jhit/deep-chat v0.1.1
巨信智能助理
巨信智能助理是一个 JavaScript 聊天组件，用于实现弹窗聊天功能。 该组件支持自定义配置、样式和交互逻辑，能够快速集成到现有的项目中。
安装
npm i @jhit/deep-chat一般情况下，不使用上述安装方式，而是通过
script方式本地引入
使用
- 请务必确保
window.onload页面加载完成之后，再进行初始化 - 初始化
jhitChat组件需要传入一个配置对象config new JhitChat(config)返回的是一个deep-chat实例对象，参见：Deep-Chat 官方文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>巨信智能助理</title>
<script src="dist/index.umd.cjs" ></script>
<script>
window.onload = function() {
const chat = new JhitChat({
apiConfig: {
baseUrl: 'url/to/api/base/path',
token: 'Bearer TOKEN',
userName: '张三',
areaName: '联络总站'
}
})
// 获取按钮并添加点击事件监听器
const reportButton = document.getElementById('reportButton')
reportButton.addEventListener('click', async e => {
e.stopPropagation()
await chat.openPopup() // 等待openPopup方法里的异步操作完成
const DeepChat = await chat.getDeepChatComponent()
setTimeout(() => {
const DeepChat = chat.getDeepChatComponent()
if (DeepChat) {
DeepChat.submitUserMessage({
text: '代表建议是否可以多人一起提出？', // 这就是传参
role: 'user'
})
}
}, 500)
})
}
</script>
</head>
<body ontouchstart>
<h1>巨信智能助理</h1>
<button id="reportButton">点击测试发送消息给巨信智能助理</button>
</body>
</html>事件
| 名称 | 说明 |
|---|---|
| popupOpen | 打开弹窗，对外抛出deep-chat对象 |
| popupClosed | 关闭弹窗，对外抛出deep-chat对象 |
你可以全局监听这两个事件，代码如下
document.addEventListener('popupOpen', (event) => {
console.log('弹窗组件加载完成,并打开组件,并对外抛出deep-chat对象', event.detail.component);
});
// 监听弹窗关闭事件
document.addEventListener('popupClosed', (event) => {
console.log('弹窗已关闭', event.detail.component);
});配置
| 参数 | 类型 | 说明 |
|---|---|---|
| apiConfig | Object | 接口配置 |
| apiConfig.baseUrl | String | 接口基准URL |
| apiConfig.token | String | 认证所需的 Bearer Token |
| apiConfig.body | Object | 请求体参数，包含用户信息 |
| popupStyle | Object | 弹窗样式配置 |
| popupStyle.backgroundColor | String | 弹窗背景颜色 |
| popupStyle.borderRadius | String | 弹窗圆角半径 |
| popupStyle.boxShadow | String | 弹窗阴影效果 |
| buttonStyle | Object | 按钮样式配置 |
| buttonStyle.backgroundColor | String | 按钮背景颜色 |
| buttonStyle.color | String | 按钮文字颜色 |
| buttonStyle.buttonText | String | 按钮显示的文本 |
| chatConfig | Object | 聊天配置：聊天信息样式，麦克风样式，输入框样式 |
| stream | Boolean | 是否启用流式输出效果，是否启用打字机效果 |
| connectConfig | Function | 自定义连接函数。 |
注意事项
- 请确保所有必需的配置项已正确填写。
token为敏感信息，请妥善保管，避免泄露。- 弹窗和按钮样式可以根据实际需求进行自定义。
常见问题
1. 为什么弹窗没有显示？
- 确保
chat.openPopup()已正确调用。（目前有bug,请加一个定时器，后期我做优化） - 检查是否正确配置了
popupStyle和buttonStyle。
2. 安卓端聊天键盘弹起后，输入框的位置存在错位
- 这个还需要一点时间做优化
巨信杭分 2024-12-21