npm package: @jhit/deep-chat
Description: 巨信智能助理是一个 JavaScript 聊天组件，用于实现弹窗聊天功能。 该组件支持自定义配置、样式和交互逻辑，能够快速集成到现有的项目中。
Latest version: 0.1.1

# 巨信智能助理

巨信智能助理是一个 JavaScript 聊天组件，用于实现弹窗聊天功能。
该组件支持自定义配置、样式和交互逻辑，能够快速集成到现有的项目中。

## 安装

```shell
npm i @jhit/deep-chat
```

> 一般情况下，不使用上述安装方式，而是通过`script`方式本地引入

## 使用

- 请务必确保`window.onload`页面加载完成之后，再进行初始化
- 初始化`jhitChat`组件需要传入一个配置对象`config`
- `new JhitChat(config)`返回的是一个`deep-chat`实例对象，参见：[Deep-Chat 官方文档]

```html
<!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对象 |

你可以全局监听这两个事件，代码如下

```js
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 | 自定义连接函数。                               |

> 注意事项

1. 请确保所有必需的配置项已正确填写。
2. `token` 为敏感信息，请妥善保管，避免泄露。
3. 弹窗和按钮样式可以根据实际需求进行自定义。

## 常见问题

### 1. 为什么弹窗没有显示？

- 确保 `chat.openPopup()` 已正确调用。（目前有bug,请加一个定时器，后期我做优化）
- 检查是否正确配置了 `popupStyle` 和 `buttonStyle`。

### 2. 安卓端聊天键盘弹起后，输入框的位置存在错位

- 这个还需要一点时间做优化

> 巨信杭分
> 2024-12-21

[Deep-Chat 官方文档]: https://deepchat.dev