ot-ai-chat

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

使用

1、HTML直接引入方式

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

2、VUE项目使用

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

注：如果你的项目中没有安装markdown-it、markdown-it-math、mathup、@microsoft/fetch-event-source库，请自行安装，因为ot-ai-chat组件依赖它们。参考： npm install markdown-it [email protected] 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'

export default {
    name: 'HelloWorld',
    components: { OtAiChat },
    data() {
        return {}
    },
    methods: {}
}
</script>
<!-- 使用组件 -->
<ot-ai-chat action="http://xxx"></ot-ai-chat>

属性

|名称|类型|说明| |---|---|---| |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信息或错误信息|请求完成事件|