Lby-chatbot NPM

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)：请求url
model (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             # 使用说明