@binlun/chat-ai v0.2.5

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, // 回答的来源
  }
}

接口文档

属性

feature

storage

exportImageWatermark

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