lby-chatbot
v1.0.18
Published
Vue2 & UMD 兼容的 AI 智能聊天组件
Readme
lby-chatbot
鲁班AI智能聊天机器人
安装
使用 npm 安装：
npm install lby-chatbot兼容性
该组件兼容 Vue 2 项目和浏览器umd项目。
使用
在 Vue 2 项目中使用
在
main.js中引入并注册组件：import Vue from 'vue'; import App from './App.vue'; import LbyChatbot from 'lby-chatbot'; Vue.config.productionTip = false; Vue.component('LbyChatbot', LbyChatbot); new Vue({ render: h => h(App), }).$mount('#app');在组件中使用：
<template> <div> <LbyChatbot /> </div> </template> <script> export default { name: 'ExampleComponent', }; </script>
在浏览器中使用
<script src="https://unpkg.com/vue@2"></script>
<script src="./lby-chatbot.umd.js"></script>
<body>
<div id="chatbot-app"></div>
</body>
<script>
var app = new Vue({
el: '#chatbot-app',
template: '<div><LbyChatbot /></div>', // 使用 LbyChatbot 组件
})配置字段说明
libs/config 文件包含了 lby-chatbot 组件的默认配置。以下是各个配置字段的说明：
配置字段
requestUrl(string)：请求urlmodel(string)：模型 默认值为Luban-L1-Qwen。name(string): 机器人名称，默认值为鲁班AI。description(string): 机器人描述，默认值为自然语言模型人工智能对话。btnPos(object): 按钮位置配置。right(number): 按钮距离右侧的距离，默认值为18。bottom(number): 按钮距离底部的距离，默认值为18。
chatPos(object): 按钮位置配置。right(number): 聊天框距离右侧的距离，默认值为68。bottom(number): 聊天框距离底部的距离，默认值为18。
isAndChatDrag(boolean)：聊天框是否跟随按钮拖动，默认值为true。
默认配置
如果组件传入的字段为空，则使用以下默认配置：
export default {
requestUrl: '',
model: "Luban-L1-Qwen",
name: '鲁班AI',
description: '自然语言模型人工智能对话',
btnPos: {
right: 18,
bottom: 18,
},
chatPos: {
right: 68,
bottom: 18
},
isAndChatDrag: true
};示例
在使用组件时，可以传入自定义配置。如果某个字段未传入或为空，则会使用上述默认配置。例如：
import Vue from 'vue';
import App from './App.vue';
import LbyChatbot from 'lby-chatbot';
Vue.config.productionTip = false;
Vue.component('LbyChatbot', LbyChatbot);
new Vue({
render: h => h(App),
}).$mount('#app');在组件中使用：
<template>
<div>
<LbyChatbot :config="customConfig" />
</div>
</template>
<script>
export default {
name: 'ExampleComponent',
data() {
return {
customConfig: {
requestUrl: '',
model: "Luban-L1-Qwen",
name: 'My Chatbot',
description: '这是一个自定义描述',
btnPos: {
right: 20,
bottom: 20,
},
chatPos: {
right: 68,
bottom: 18
},
isAndChatDrag: true
},
};
},
};
</script>在上述示例中，如果 customConfig 中的某个字段未传入或为空，则会使用默认配置。
功能
- 发送消息：在输入框中输入消息并按下回车键或点击发送按钮。
- 查看回复：机器人会根据您的消息进行回复，并显示在聊天窗口中。
运行调试
克隆仓库到本地：
git clone http://192.168.7.240/lb_team/lby-chatbot.git cd lby-chatbot安装依赖：
npm install
运行
启动开发服务器：
npm run dev打开浏览器并访问：
http://localhost:3000
打包
npm run build打包结果在dist/目录下。
目录结构
lby-chatbot/
├── public/ # 静态资源
├── src/ # 源代码
│ ├── assets/ # 资源文件
│ ├── components/ # 组件
│ ├── App.vue # 主组件
│ ├── main.js # 入口文件
├── .gitignore # Git 忽略文件
├── package.json # 项目配置文件
├── README.md # 使用说明贡献
欢迎提交问题和拉取请求来帮助我们改进项目。
许可证
本项目基于 MIT 许可证开源。