@binlun/chat-ai

v0.2.5

Published

a year ago

> 交互式问答组件

0High
0Medium
0Low

a364378948

chat-ai组件

交互式问答组件

组件安装

npm install --registry=http://registry.npm.lishicloud.com/ @lishi/chat-ai --save

使用示例

<chat-ai 
  :requestOptions="getRequestOptions"
  :storage="{ key: key }"
  :filterWords="filterWords"
  :transformResponse="transformResponse"
>
  <template #empty>
    <!-- slot: 自定义没有聊天时的空状态 -->
  </template>

  <template #source="item">
    <!-- slot: 自定义回答来源 -->
  </template>
</chat-ai>

import ChatAi from '@lishi/chat-ai'
import '@lishi/chat-ai/lib/style.css'

const key = '' // 最好是取用户唯一标识，因为是根据该key值存储用户会话, 防止不同的用户聊天记录互混

// 自定义会话请求参数
function getRequestOptions({ data: { prompt } }) {
  return {
    url: '/xz-chatx/api/saas/chat/dialog',
    headers: { 'Xz-Token': 'xxxxx' },
    data: { question: prompt }
  }
}

// 敏感词
async function filterWords({ prompt, promptRef }) {
  const { data } = await sensitiveCheckApi({ content: prompt })

  if (data.matchResult) {
    message.error('您的问题中包含敏感词，请修改后再试')
    return false // 返回 false 表示不发送请求
  }
}

// 用于响应数据转换，其中 `text` 字段是必须的
function formatData(data) {
  return {
    text: data.text, // 回答内容
    source: data.fileSource?.sourceFileList, // 回答的来源
  }
}

接口文档

属性

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | | -------- | :------: | :------: | :------------------: | :----------- | | hasLayout | Boolean | option | true | 是否显示(左侧)布局 | | feature | Object | option | 查看下方说明 | 开启的功能 | | storage | Object | option | 查看下方说明 | 当开启了聊天记录存储到 storage 功能时(feature.chatSaveToStorage = true) | | exportImageWatermark | Object | option | 查看下方说明 | 导出图片的水印设置(feature.exportImage = true) | | filterWords | Function | option | async ({ promptRef, prompt }) => true | 用于处理敏感词, 返回false不会发送问答请求 | | placeholder | String, Function | option | '来说点什么吧...（Shift + Enter = 换行）' | 输入框的placeholder，支持函数形式: (isMobile) => xxx | | requestOptions | Function, Object | option | {} | 自定义会话请求(参数) | | transformResponse | Function, Null | option | null | 自定义后端不断推送的数据的转化逻辑，返回的结果会传入formatData中再处理 | | formatData | Function | option | (data) => ({ text: data.text, replayOptions: {}, source: 查看下方说明 }) | 处理返回的数据，其中text必须返回; source: 来源; replayOptions: 当feature.isUsingContext为true，该参数会保存在下一次问答 requestOptions({ data: { prompt, options } }) options中 | | chatImg | String | option | '' | ai头像 | | userImg | String | option | '' | 用户头像 | | inputProps | Object | option | {} | 输入框(textarea)属性 | | fileLinkClassName | String | option | "js-file-link" | 回答内容中来源链接的类名 |

feature

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | | -------- | :------: | :------: | :------------------: | :----------- | | chatSaveToStorage | Boolean | false | true | 聊天记录是否保存到 storage | | isUsingContext | Boolean | false | true | 请求是否携带之前的聊天记录 | | clearChat | Boolean | false | true | 清空聊天记录功能 | | exportImage | Boolean | false | true | 导出聊天记录为图片功能 | | delChat | Boolean | false | true | 删除单条聊天记录功能 | | copyChat | Boolean | false | true | 复制单条聊天记录功能 | | retryReply | Boolean | false | true | 重新获取回复功能 | | stopReply | Boolean | false | true | 停止响应功能 | | source | Boolean | false | true | 是否显示来源 |

storage

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | | -------- | :------: | :------: | :------------------: | :----------- | | key | String | false | 'CHATAISTATE' | 不同的用户应该有不同的key，防止聊天记录不对应 | | expire | Number | false | null | 聊天记录保存的时间 | | maxCount | Number | false | 50 | 一个会话保存的最大聊天记录数, 0表示不限制, ps: 该值最好是偶数 |

exportImageWatermark

| 属性 | 类型 | 必填 | 默认值 | 功能/备注 | | -------- | :------: | :------: | :------------------: | :----------- | | text | String | false | '力石科技' | 导出图片的水印文本，空表示没有水印 | | font | String | false | '14px microsoft yahei' | 字体 | | color | String | false | 'rgba(238, 36, 5, 0.1)' | 颜色 | | spaceX | Number | false | 160 | x轴间隔 | | spaceY | Number | false | 120 | y轴间隔 | | angle | 角度 | false | -25 * Math.PI / 180 | 倾斜角度 |

source

// 示例
function formatData(data) {
  return {
    text: data.text,
    source: [ // 来源
      { 
        fileUrl: 'http://127.0.0.1:3005/pdf-file',     // 文档地址
        fileName: '富文本哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈', // 文档名称
        showName: '富文本showName', // 回答来源中显示的名称，不设置默认取fileName字段
        tooltip: '富文本tooltip',   // 回答来源中tooltip显示的内容，不设置不显示
        id: 1,                     // 回答内容中的来源引用要和此处关联
        page: 2,                   // 要跳转的页码
        keyword: '中文内容较少'     // 匹配的内容
      },
      { fileUrl: 'http://127.0.0.1:3005/pdf-example', fileName: 'example', id:2, page: 2, keyword: 'Every compiled trace contains' },
    ]
  }
}

依赖项

ant-desigin-vue， 
copy-to-clipboard,
highlight.js, 
markdown-it-link-attributes, 
markdown-it
localforage
html2canvas
@microsoft/fetch-event-source
pdf.js

本地调试

可以在 service 目录下启动 node ./index.js

打包

运行 npm run build 来打包
bundle的入口在vite.build.config.ts的entry字段中配置
打包以后生成lib/bundle.es.js和lib/bundle.umd.js

发布

通过npm来发布
npm login --registry=http://registry.npm.lishicloud.com/ 登录npm系统
npm publish --registry=http://registry.npm.lishicloud.com/ 发布到npm上
在浏览器中输入 http://registry.npm.lishicloud.com/ 查看发布的包
参考资料： https://hu379y.yuque.com/docs/share/ad90b7ff-e70d-4b46-bd5a-34db014884e0

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme