前端接入指引

1. 安装组件

npm install git+https://gitlab.51qqt.com/qinzhonghe/q-agent-web.git

2. 使用组件

2.1.初始化组件

初始化过程中需要传入一些必要的配置参数，如API地址、认证信息等。示例代码如下：

<script setup>
import { Initialize} from 'qagent-web-sdk';
import { message } from 'ant-design-vue';

Initialize(
    "http://127.0.0.1:5001", // API地址
    "X-Access-Token", // 权限认证字段
    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzYyNDI2MDcsImFjY291bnQiOiJXSEhmZWpNcE5Od0tvam8zcThYdWVzdkNlUElTMFpVNmhWTUV0MGQ3UWFjPSJ9.-D7mMVAxkAF3KA7O499QuR7GxQoM87gCuhpw66bZ9sI" // jwt
    );
</script>

参数说明:

• API地址: 后端服务的地址
• 权限认证字段: 用于身份验证的字段名
• jwt: JSON Web Token，用于身份验证

jwt应当通过登录接口获取

2.2.知识库管理

该组件包含知识库的增删改查功能，通过表格展示知识库列表，并提供新增、编辑、删除等操作按钮。使用步骤如下： 在页面中引入组件：

<template>
    <div>
        <QAgentKnowledgeBaseVue />
    </div>
</template>

<script setup>
import { QAgentKnowledgeBaseVue, Initialize } from 'qagent-web-sdk';
Initialize(
    "http://127.0.0.1:5001",
    "X-Access-Token",
    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzYyNDI2MDcsImFjY291bnQiOiJXSEhmZWpNcE5Od0tvam8zcThYdWVzdkNlUElTMFpVNmhWTUV0MGQ3UWFjPSJ9.-D7mMVAxkAF3KA7O499QuR7GxQoM87gCuhpw66bZ9sI"
);
</script>

页面效果：

2.3.智能助手管理

在页面中引入组件：

<template>
    <div>
        <QAgentAssistantVue />
    </div>
</template>

<script setup>
import { QAgentAssistantVue, Initialize } from 'qagent-web-sdk';
Initialize(
    "http://127.0.0.1:5001",
    "X-Access-Token",
    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzYyNDI2MDcsImFjY291bnQiOiJXSEhmZWpNcE5Od0tvam8zcThYdWVzdkNlUElTMFpVNmhWTUV0MGQ3UWFjPSJ9.-D7mMVAxkAF3KA7O499QuR7GxQoM87gCuhpw66bZ9sI"
);
</script>

页面效果如下：

2.4.智能助手管理

在页面中引入组件：

<template>
    <div>
        <QAgentChatVue assistantLogo="src/assets/vue.svg" userLogo="src/assets/vue.svg" title="QAgent"
            conversionTitle='Hello,QAgent Chat' description='基于RAG和LLM的智能助手' assistantId='7270642231042809856' />
    </div>
</template>

<script setup>
import { QAgentChatVue, Initialize } from 'qagent-web-sdk';
Initialize(
    "http://127.0.0.1:5001",
    "X-Access-Token",
    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzYyNDI2MDcsImFjY291bnQiOiJXSEhmZWpNcE5Od0tvam8zcThYdWVzdkNlUElTMFpVNmhWTUV0MGQ3UWFjPSJ9.-D7mMVAxkAF3KA7O499QuR7GxQoM87gCuhpw66bZ9sI"
);
</script>

QAgentChatVue参数说明:

• assistantLogo: 助手logo

• userLogo: 用户logo

• title: 助手名称

• conversionTitle: 对话标题

• assistantId: 助手id,从助手列表获取

页面效果如下:

2.5.文件上传回调组件

在文件上传之后，通过回调函数将文件提交到知识库并进行向量化处理

• 假设文件上传的页面为Upload.vue,代码如下:

<template>
    <a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      :multiple="true"
      action="http://127.0.0.1:5001/api/v1/srm/agent/public/upload"
      @change="handleChange"
      @drop="handleDrop"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">Click or drag file to this area to upload</p>
      <p class="ant-upload-hint">
        Support for a single or bulk upload. Strictly prohibit from uploading company data or other
        band files
      </p>
    </a-upload-dragger>
  </template>
  <script setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { InboxOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
  onUploadSuccess: {
    type: Function,
    default: (response) => {}, // 默认值为空函数
  },
});
  const fileList = ref([]);
  const handleChange = info => {
    const status = info.file.status;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      console.log('Response:', info.file.response); // 后端返回的数据
      if (info.file.response.code === 0) {
        props.onUploadSuccess(info.file.response);
        message.success(`${info.file.name} file uploaded successfully.`);
    } else {
        
        message.error(`${info.file.name} file upload failed.`);
    }

    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };
  function handleDrop(e) {
    console.log(e);
  }
  </script>

则回调函数的使用方式如下:

<template>
    <div>
        <QAgentUpload :onUploadSuccess="onUploadSuccess"/>
    </div>
</template>

<script setup>
import { SubmitDocumentEmbed } from 'qagent-web-sdk';
import QAgentUpload from './Upload.vue';

Initialize(
    "http://127.0.0.1:5001",
    "X-Access-Token",
    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MzYyNDI2MDcsImFjY291bnQiOiJXSEhmZWpNcE5Od0tvam8zcThYdWVzdkNlUElTMFpVNmhWTUV0MGQ3UWFjPSJ9.-D7mMVAxkAF3KA7O499QuR7GxQoM87gCuhpw66bZ9sI"
);
const onUploadSuccess=(response)=> {
    // 传入知识库名称和文件url或者对象存储的key
    SubmitDocumentEmbed("磐石系统08", response.data.url).then((res) => {
        console.log(res);
    }).catch((err) => {
        console.log("SubmitDocumentEmbed",err);
        message.error(err);
    });

}
</script>

3.运行demo

3.1.修改配置

启动demo前，需要修改qagent-web-demo/src/components/HelloWorld.vue 配置主要是修改Initialize的参数

3.2.启动demo

npm run dev