ot-ai-chat-v3

ot-ai-chat-v3是基于vue3的通用ai对话组件（对应vue2版本的ot-ai-chat组件），支持流式（SSE）和非流式输出。支持对话记录缓存。支持将回复的markdown内容解析成html，提供代码高亮样式。 在你的项目中使用此组件，可以应用到接入大模型、dify知识库、工作流的功能，你几乎完全不用关心前端的请求、样式等，而仅需要关心服务端的实现。

使用

1、HTML直接引入方式

<!-- 引入Vue -->
<script src="[email protected]"></script>
<!-- 引入组件 -->
<script src="ot-ai-chat-v3.umd.js"></script>
<!-- 使用组件 -->
<ot-ai-chat action="http://xxx"></ot-ai-chat>

2、VUE项目使用

npm安装： npm install ot-ai-chat-v3 --save

注：如果你的项目中没有安装markdown-it、markdown-it-math、highlight.js、mathup、@microsoft/fetch-event-source库，请自行安装，因为ot-ai-chat组件依赖它们。参考： npm install markdown-it markdown-it-math highlight.js mathup @microsoft/fetch-event-source --save

使用示例：

<template>
    <div style="height: 700px;width:700px;">
        <ot-ai-chat action="http://xxx"></ot-ai-chat>
    </div>
</template>

<script>
<!-- 引入组件 -->
import { OtAiChat } from 'ot-ai-chat-v3'

export default {
    name: 'HelloWorld',
    components: { OtAiChat },
    data() {
        return {}
    },
    methods: {}
}
</script>

属性

| 名称 | 类型 | 说明 | | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | action | String | 请求的接口地址，必填。注意：接口必须按此格式返回数据：{"reasoning_content":"思考内容", "content":"回复内容”} | | stream | Boolean | 是否流式输出，默认值：true | | input-param-name | String | 用户输入对应的接口参数名称，默认值：query | | title | String | 顶部标题，默认值：智能小助手 | | placeholder | String | 输入框提示语，默认值：请输入你想咨询的问题 | | welcom-msg | String | 当对话记录为空时，默认显示的消息内容，默认值：Hi，我是智能小助手，您可以向我提问。 | | show-header | Boolean | 是否显示标题栏，默认值：true | | show-input | Boolean | 是否显示输入栏，默认值：true | | cache | Boolean | 是否缓存对话记录，默认值：true | | extra-data | Object | 除inputParamName对应的参数外，额外的请求参数，会一并传递到接口。比如用户输入“你是谁”，inputParamName对应的参数名为query，extraData为：{a:1}，那么请求接口时传递的参数就是：{query:'你是谁',a:1} | | shadow | Boolean | 是否显示阴影样式，默认值：true | | border | Boolean | 是否显示边框，默认值：true | | extra-deaders | Object | 自定义请求头 | | cache-db-name | String | 缓存的数据库名，默认值：ontallaichat |

方法

| 名称 | 参数 | 说明 | | -------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------- | | startQuery | - | 开始发送请求，等于点击发送消息按钮 | | stopQuery | - | 流式输出模式下未完成请求时可停止请求，等于点击停止按钮 | | clearMsg | - | 清除对话记录 | | scrollToBottom | - | 对话区滚动到最底部。比如你的项目中初始时隐藏对话组件的，如果你想在显示组件时显示最新的消息，就需要调用此方法滚动到对话区最底部。 |

事件

| 名称 | 参数 | 说明 | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | query-completed | Object 成功：{status:'success',data:{reason:'思考内容',content:'回复内容'}} 出错：{status:'error',data:xx}，data可能是response信息或错误信息 | 请求完成事件 |