npm package: @qqt-product/agent-web-sdk
Description: ```bash npm install git+https://gitlab.51qqt.com/qinzhonghe/q-agent-web.git ```
Latest version: 0.0.7

# 前端接入指引

## 1. 安装组件 

```bash
npm install git+https://gitlab.51qqt.com/qinzhonghe/q-agent-web.git
```

## 2. 使用组件  

### 2.1.初始化组件

初始化过程中需要传入一些必要的配置参数，如API地址、认证信息等。示例代码如下：
```javascript
<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.知识库管理

该组件包含知识库的增删改查功能，通过表格展示知识库列表，并提供新增、编辑、删除等操作按钮。使用步骤如下：
在页面中引入组件：
```vue
<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>
```
页面效果：
![alt text](docs/kb_demo.gif)

### 2.3.智能助手管理
在页面中引入组件：
```vue
<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>
```
页面效果如下：

![image](docs/assistant.gif)

### 2.4.智能助手管理
在页面中引入组件：  

```vue
<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,从助手列表获取


页面效果如下:  
![QAgentChatVue](docs/chat.gif)

### 2.5.文件上传回调组件  
在文件上传之后，通过回调函数将文件提交到知识库并进行向量化处理
- 假设文件上传的页面为`Upload.vue`,代码如下:  
```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>
```  

则回调函数的使用方式如下:

```vue
<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  

```bash
npm run dev
```