@tencentcloud/ai-desk-customer-vue 1.5.10 → 1.5.11

package/README_EN.md

@@ -0,0 +1,873 @@
+[简体中文](./README.md) / [English](./README_EN.md)
+## Introduction
+
+Customer Service Desk Web UIKit. Using this UIKit, you can integrate the capabilities of Customer Service into your Web or Hybrid projects within one day. Minimize the integration, and use AI to increase revenue and improve efficiency for your products.
+
+## Preview
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100028039218/86fecf427ce711f09cab525400bf7822.png)
+
+## Customer Service Desk
+
+For more detailed information about Customer Service Desk, please visit [Tencent Cloud Customer Service Desk](https://www.tencentcloud.com/document/product/1229/72679?lang=en&pg=).
+
+## Developer Environment Requirements
+- Vue (fully support Vue2 & Vue3, please choose your matched Vue version access guide when accessing below)
+
+- TypeScript (if you are a JavaScript Project, please see [Common Issues - How to integrate TUIKit component in a JavaScript project](https://write.woa.com/#0404ab84-2adf-41d1-80a9-c636f742a371) to configure TypeScript Progressive Support)
+
+- sass (sass-loader version ≤ 10.1.1)
+
+- node(node.js ≥ 16.0.0)
+
+- npm (version should match the node version)
+
+
+## UIKit Integration
+
+### Step 1: Project Creation
+
+Supports the use of [webpack](#vue-cli) or [vite](vite) to create a project, configured with Vue3/Vue2 + TypeScript + sass. The following is several project setup examples:
+
+
+<span id="vue-cli"></span>
+#### vue-cli
+
+> **Note:**
+> 
+> 1. Ensure your `@vue/cli` version is above **5.0.0**. You can use the following example code to upgrade `@vue/cli` to v5.0.8.
+> 2. If your project was created with a `@vue/cli` lower version, and there is an error after seamless integration with UIKit, see [common issues](https://write.woa.com/#04a7d474-e04a-4765-910f-9bbfe4e3ced9) for problem-solving.
+
+
+Create a project using vue-cli, configured with Vue2/Vue3 + TypeScript + sass.
+
+If you have not installed vue-cli or the vue-cli version is lower than 5.0.0, you can install it in terminal or cmd in the following ways:
+
+``` bash
+npm install -g @vue/cli@5.0.8 sass sass-loader@10.1.1
+```
+Create a project using vue-cli and choose the selected configuration in the figure below.
+
+``` bash
+vue create ai-desk-example
+```
+
+Ensure to select the following configuration:
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/f2327fbe352211ef9397525400fdb830.png)
+
+After creation, switch to the project directory.
+``` bash
+cd ai-desk-example
+```
+
+If you are a vue 2 project, configure the environment based on the vue version used by you. Ignore it for vue 3 projects.
+
+##### vue2.7
+``` bash
+npm i vue@2.7.9 vue-template-compiler@2.7.9
+```
+
+##### Vue 2.6 and Below
+``` bash
+npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
+```
+<span id="vite"></span>
+#### vite
+
+> **Note:**
+> 
+> Warning: Vite requires [**Node.js**](https://nodejs.org/en/)** version 18+ or 20+.** When your package manager issues a warning, please upgrade your Node Version. For details, refer to [Vite Official Website](https://cn.vitejs.dev/guide/).
+
+Create a project using vite, configured with Vue + TypeScript as the figure below.
+``` bash
+npm create vite@latest
+```
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/94f4888bf42911efa8355254001c06ec.png)
+
+Switch to the project directory afterward and install the project dependencies.
+``` bash
+cd ai-desk-example
+npm install
+```
+
+Install plugin required sass environment dependency.
+``` bash
+npm i -D sass sass-loader
+```
+
+Purge default project styles to avoid styling issues.
+
+
+###### MacOS
+``` bash
+echo -n > src/style.css
+```
+
+###### Windows (PowerShell)
+``` bash
+Clear-Content -Path src/style.css
+```
+
+###### Windows (CMD)
+``` bash
+echo. > src\style.css
+```
+
+### Step 2: Download UI Component
+
+Download the UI component via npm and copy it to the src directory of your project.
+
+
+
+#### MacOS
+
+
+``` bash
+npm i @tencentcloud/ai-desk-customer-vue@latest
+
+mkdir -p ./src/ai-desk-customer-vue && rsync -av --exclude={'node_modules','excluded-list.txt'} ./node_modules/@tencentcloud/ai-desk-customer-vue/ ./src/ai-desk-customer-vue
+```
+
+#### Windows (CMD)
+
+``` bash
+npm i @tencentcloud/ai-desk-customer-vue@latest
+
+xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-vue /i /e /exclude:.\node_modules\@tencentcloud\ai-desk-customer-vue\excluded-list.txt
+```
+
+### Step 3: Import UI Component
+
+##### You can simply use the UI components on the page that needs to be displayed.
+
+##### For example, by implementing the following code in the App.vue file, you can quickly set up a customer service consultation interface (the following example code is supported on both Web and H5 platforms):
+
+> **Note:**
+> 
+> The following example code uses setup syntax. If your project does not use setup syntax, please register the component according to the standard method of Vue3/Vue2.
+
+###### vue3
+``` javascript
+<template>
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+  />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from "vue";
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID, the application ID with customer service Desk enabled
+  const userID = ''; // Your userID, reusable account system of your app or randomly generated
+  const userSig = ''; // Your userSig, can be generated by the console during the integration stage, and must be generated by the server during the production stage
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
+</script>
+<style scoped>
+</style>
+```
+
+###### vue2.7
+``` javascript
+<template>
+  <div id="app">
+    <CustomerServiceChat
+      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import vue from './ai-desk-customer-vue/adapter-vue';
+
+const { onMounted } = vue;
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID
+  const userID = ''; // Your userID
+  const userSig = ''; // Your userSig
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
+</script>
+<style lang="scss">
+</style>
+```
+
+#### Vue 2.6 and Below
+``` javascript
+<template>
+  <div id="app">
+    <CustomerServiceChat
+      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import vue from './ai-desk-customer-vue/adapter-vue';
+
+const { onMounted } = vue;
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID
+  const userID = ''; // Your userID
+  const userSig = ''; // Your userSig
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
+</script>
+<style lang="scss">
+</style>
+```
+1. Introduce VueCompositionAPI in `main.ts/main.js`.
+
+``` javascript
+import VueCompositionAPI from "@vue/composition-api";
+Vue.use(VueCompositionAPI);
+```
+2. Add in `vue.config.js`. If not, please create this file.
+
+``` javascript
+const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
+module.exports = {
+  parallel: false, // disable thread-loader, which is not compactible with this plugin
+  configureWebpack: {
+    plugins: [
+      ScriptSetup({
+        /* options */
+      }),
+    ],
+  },
+  chainWebpack(config) {
+    // disable type check and let `vue-tsc` handles it
+    config.plugins.delete("fork-ts-checker");
+  },
+};
+```
+3. At the end of the `src/ai-desk-customer-vue/adapter-vue-web.ts` file, replace export source:
+
+``` javascript
+// Initial writing
+export * from "vue";
+// replace with
+export * from "@vue/composition-api";
+```
+
+### Step 4: Obtain SDKAppID, UserID, UserSig
+
+Set the `SDKAppID`, `userID`, and `userSig` in `App.vue`.
+- SDKAppID information can be obtained by clicking Application Management > Add application in the Cloud Contact Center console and choosing Customer Service Desk > Add application, and then enabling Customer Service.
+
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100028039218/63c35d647cd911f0914f52540099c741.png)
+
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100028039218/66fd19d47cd911f09a9a5254001c06ec.png)
+
+- userID information. A random string can be locally generated, such as test-1234.
+
+> **Note:**
+> 
+>   - userID can only contain printable ASCII characters
+>   - userID cannot contain the string `administrator`.
+>   - userID cannot contain the ID of a customer service agent.
+>   - userID length cannot exceed 45 bytes.
+
+- userSig info, click [UserSig Tools](https://console.tencentcloud.com/ccc/tool-usersig), fill in the created userID to generate userSig.
+
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100042744456/768008a462b711f097ec52540044a08e.png)
+
+
+### Step 5: Start a Project, initiate your first customer service inquiry
+
+Execute the following command to start the project.
+
+
+#### vue-cli
+
+> **Note:**
+> 
+> Since vue-cli enables webpack global overlay error message prompts by default, for a better experience, **it is recommended to disable global overlay error prompts.**
+> 
+> Add the following code to vue.config.js
+> 
+> ##### Webpack4 and Above
+> `module.exports = defineConfig({`
+> `  devServer: {`
+> `    client: {`
+> `      overlay: false,`
+> `    },`
+> `  },`
+> `});`
+> ##### webpack3
+> `module.exports = {`
+> `  devServer: {`
+> `    overlay: false,`
+> `  },`
+> `};`
+> 
+> Disable TypeScript detection for ai-desk-customer-vue in tsconfig.json.
+> 
+> `{`
+> `    "exclude": [`
+> `      "node_modules",`
+> `      "src/ai-desk-customer-vue",`
+> `    ]`
+> `}`
+
+
+``` bash
+npm run serve
+```
+
+#### vite
+
+``` bash
+npm run dev
+```
+
+## Advanced Feature
+
+### Internationalized Interface
+
+UIKit components support the following languages:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Language Code (UserLang)</td>
+
+<td rowspan="1" colSpan="1" >Language</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_cn</td>
+
+<td rowspan="1" colSpan="1" >Simplified Chinese</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >en</td>
+
+<td rowspan="1" colSpan="1" >English</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_tw</td>
+
+<td rowspan="1" colSpan="1" >Traditional Chinese</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ja</td>
+
+<td rowspan="1" colSpan="1" >Japanese</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >id</td>
+
+<td rowspan="1" colSpan="1" >Indonesian</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ms</td>
+
+<td rowspan="1" colSpan="1" >Malaysian</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >vi</td>
+
+<td rowspan="1" colSpan="1" >Vietnamese</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >th</td>
+
+<td rowspan="1" colSpan="1" >Thai</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >fil</td>
+
+<td rowspan="1" colSpan="1" >Filipino</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ru</td>
+
+<td rowspan="1" colSpan="1" >Russian</td>
+</tr>
+</table>
+
+
+If your business needs to go global and the user language is mainly English, you can set `userLang="en"` when using customer service. If you do not specify `userLang`, UIKit will use the language in browser settings.
+``` javascript
+<template>
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    userLang="en"
+  />
+</template>
+```
+
+If you need to support dynamic user language switching, use the `TUICustomerServer.changeLanguage` API and trigger a re-render by modifying the page/component key. This ensures language updates are applied immediately.
+``` javascript
+<template>
+  <CustomerServiceChat 
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :key="locale"
+    :userLang="locale"
+  />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted, ref } from "vue";
+
+const locale = ref('en');
+
+const changeLanguage = (language: string) => {
+  TUICustomerServer.changeLanguage(language).then(() => {
+    locale.value = language;
+  });
+}
+</script>
+<style scoped lang="scss">
+</style>
+```
+
+### Client-Side Login with Nickname and Avatar
+
+If the agent wants to see the user's nickname, avatar, and other information during reception on the workstation to enhance communication efficiency, the effect is as shown below:
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100028039218/8ba3a5147cdc11f09a9a5254001c06ec.png)
+
+
+Please use the `initWithProfile` API to initialize, input Nickname and avatar just.
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: 'John 1852010****',
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+})
+```
+
+### Toolbar Button
+
+If you want to add shortcut buttons above the input box to facilitate users' use, such as adding "transfer to agent" and "Order message", you can set `toolbarButtonList` when deploying Desk UIKit. The effect is as shown below:
+
+<img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100028039218/5ae4403a7cdd11f0bd33525400454e06.png" width="450px"></img>
+
+
+`toolbarButtonList` is an array containing one or more items. The description is as follows:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Parameter</td>
+
+<td rowspan="1" colSpan="1" >Type</td>
+
+<td rowspan="1" colSpan="1" >Required or Not</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >title</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >button Title</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >icon</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >Button Icon URL</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >isPreset</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >- 1: Built-in feature of the customer service component.<br>- 0: Non-built-in feature.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >presetId</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >When isPreset is 1, valid values include:<br>- humanService: manual service.<br>- serviceRating: service evaluation<br>- endHumanService: End the session.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >isEnabled</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >- 1: Render.<br>- 0: No render.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >content</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >When isPreset is 0, please fill in text content or url.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >type</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >- 1: the component sends the corresponding text of the content.<br>- 2: the component opens the corresponding url.<br>- **3 - trigger the specified task flow.**<br>- **4 -transfer to the specified agents or specified agent group.**</td>
+</tr>
+</table>
+
+``` javascript
+<template>
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :toolbarButtonList="toolbarButtonList"
+  />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from 'vue';
+
+const toolbarButtonList = [
+  {"title":"manual service","icon":"https://tccc-im-agent-avatar-1258344699.cos.ap-nanjing.myqcloud.com/toolbar_button_1.png","type":1,"content":"","isPreset":1,"presetId":"humanService","isEnabled":1},
+  {"title":"service evaluation","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_2.png","type":1,"content":"","isPreset":1,"presetId":"serviceRating","isEnabled":1},
+  {"title":"End Session","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_3.png","type":1,"content":"","isPreset":1,"presetId":"endHumanService","isEnabled":1},
+  // Send text
+  {"title":"smart customer service","type":1,"content":"smart customer service","isPreset":0,"isEnabled":1},
+  // Trigger the specified task flow, taskFlowID is the task flow id, if description is empty it will not be displayed in the message list
+  {"title":"Trigger the specified task flow","type":3,"content":{"taskFlowID":3226, "description":"your description"},"isPreset":0,"isEnabled":1},
+  // Transfer to specified agents, specificMemberList is the agent account list
+  {"title":"Transfer to specified agent","type":4,"content":{"specificMemberList":["agent_01@email.com"], "description":"your description"},"isPreset":0,"isEnabled":1},
+  // Transfer to specified agent group, groupID is the customer service agent group ID
+  {"title":"Transfer to specified agent group","type":4,"content":{"groupID":111, "description":"your description"},"isPreset":0,"isEnabled":1}
+];
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID, the application ID with customer service Desk enabled
+  const userID = ''; // Your userID, reusable account system of your app or randomly generated
+  const userSig = ''; // Your userSig, can be generated by the console during the integration stage, and must be generated by the server during the production stage
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
+</script>
+<style scoped>
+</style>
+```
+
+### Bottom Quick Order
+
+> **Note:**
+> 
+> Upgrade [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) to v1.5.2 or higher.
+> 
+
+
+If you want to show a quick order at the bottom of the chat area when opening a customer service conversation, you can configure `bottomQuickOrder`. The effect is as shown below:
+
+<img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100028039218/b214a6697cde11f0bd33525400454e06.png" width="400px"></img>
+
+
+`Parameter description of bottomQuickOrder` is as follows:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Parameter</td>
+
+<td rowspan="1" colSpan="1" >Type</td>
+
+<td rowspan="1" colSpan="1" >Required or Not</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >header</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >Order title, corresponding to "Product Card" in the image above.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >desc</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >Order description, corresponding to "$30" in the image above.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >pic</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >Order image url.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >url</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >When the customer service agent receives the order message, click to open the webpage corresponding to this url.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >customField</td>
+
+<td rowspan="1" colSpan="1" >Array</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >Custom configuration, such as "order ID", "order time", etc.</td>
+</tr>
+</table>
+
+``` javascript
+<template>
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :bottomQuickOrder="bottomQuickOrder"
+  />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from 'vue';
+
+const bottomQuickOrder = {
+  header: "Product Card",
+  desc: "$30",
+  pic: "https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
+  url: 'https://your_url.com',
+  customField: [
+    {
+      name: 'Order ID',
+      value: '11111111111111111111'
+    },
+    {
+      name: 'Order Time',
+      value: '2025-07-02 16:23'
+    }
+  ]
+};
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID
+  const userID = ''; // Your userID
+  const userSig = ''; // Your userSig
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
+</script>
+<style scoped>
+</style>
+```
+
+### Transferring to Designated Agent or Agent Group
+
+> **Note:**
+> 
+> Upgrade [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) to v1.5.6 or higher.
+> 
+
+
+If your application needs to automatically transfer to a specified agent or agent group after logging in, see the following code implementation.
+
+
+
+【Transfer to Designated Agent】
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: 'John 1852010****'
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+}).then(() => {
+  TUICustomerServer.transferToHuman({
+    specificMemberList: ['agent_account_1', 'agent_account_2'], // replace with your agent accounts
+    description: 'your description'
+  });
+});
+```
+
+【Transfer to Agent Group】
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: 'John 1852010****'
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+}).then(() => {
+  TUICustomerServer.transferToHuman({
+    groupID: 0, // replace with your customer service agent group ID
+    description: 'your description'
+  });
+});
+```
+
+### Trigger Specified Task Flow
+
+> **Note:**
+> 
+> Upgrade [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) to v1.5.6 or higher.
+> 
+
+
+If your application needs to automatically trigger the specified task flow after logging in, refer to the following code implementation.
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: 'John 1852010****'
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+}).then(() => {
+  TUICustomerServer.transferToTaskFlow({
+    taskFlowID: 0, // replace with your task flow id
+    description: 'your description'
+  });
+});
+```
+
+### Multiple Customer Service Accounts
+
+> **Note:**
+> 
+> Upgrade [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) to v1.5.3 or higher.
+> 
+
+
+If your application requires multiple customer service accounts to provide users with exclusive customer service features for improved service quality and fast response speed, you can implement the Multiple Customer Service Accounts feature provided by UIKit.
+``` javascript
+// 1. Pass the custom customer service account ID from the business side to UIKit before initialization
+TUICustomerServer.setCustomerServiceIDList(['customerServiceID_001', 'customerServiceID_002', 'customerServiceID_003']);
+// 2. During initialization, include the customer service account ID to start conversation, such as 'customerServiceID_002'
+// If no customer service account ID is specified to start conversation, UIKit uses the first element in the multiple customer service accounts list by default
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: 'John 1562010****',
+  avatar: 'your avatar url',
+  customerServiceID: 'customerServiceID_002',
+});
+```
+
+> **Note:**
+> 
+> To customize a customer service account, please use [REST API > Create Customer Service Account](https://www.tencentcloud.com/document/product/1229/68817).
+> 
+
+
+### Client-Side Proactively Ending Conversation
+
+> **Note:**
+> 
+> The client-side can proactively end the conversation by sending a custom message, applicable to the following 3 cases:
+> 
+> 1. User requests to transfer to agent and enters the queue. Sending this message can end the queue.
+> 2. The customer service mode is manual service. After the user requests agent service and the customer service is successfully allocated, the user waits for the customer service to confirm the reception. Sending this message can end the wait.
+> 3. Transfer to an agent and successfully connect to customer service. Send this message to end the conversation.
+
+``` javascript
+TUICustomerServer.sendCustomMessage({
+  to: '@customer_service_account',
+  conversationType: 'C2C',
+  payload: {
+    data: JSON.stringify({
+      src: '27',
+      customerServicePlugin: 0,
+    }),
+  },
+}, { onlineUserOnly: true });
+```
+
+## FAQs
+
+##### What Is UserSig? How do I Generate a UserSig?
+
+UserSig is the password for user login to IM. It is essentially an encrypted ciphertext of UserID and other information.
+
+The UserSig issuance method involves integrating the UserSig calculation code into your server and providing a project-oriented API. When UserSig is required, your project initiates a request to the business server to obtain a dynamic UserSig. For more details, see [UserSig generation by the server](https://www.tencentcloud.com/zh/document/product/1047/34385?lang=zh).
+
+##### How to Integrate the UIKit Component Into a JS Project
+
+UIKit only supports running in the ts environment. You can progressively configure typescript to allow existing js code in your project to coexist with ts code in UIKit.
+
+
+
+##### vue-cli
+
+Please execute in the project root directory created by your vue-cli scaffold:
+``` bash
+vue add typescript
+```
+
+Then configure the options as follows (to ensure simultaneous support for existing js code and ts code in UIKit, be sure to strictly follow the five options below)![260706614-5e2fc00b-ace5-4843-bef6-c0e234225b5d.png (1514×360)](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/1f8ad8d0f43211ef920e5254005ef0f7.png)
+
+**After completing the above steps, rerun the project.**
+
+###### Vite
+
+Please execute in the project root directory created by your vite.
+``` bash
+npm install -D typescript
+```
+
+##### Runtime Error: Uncaught TypeError: Marked__WEBPACK_IMPORTED_MODULE_0_ Marked Is Not a Constructor
+
+If the following error occurs during operation, it means your current Vue CLI project environment version is low, and you must downgrade the marked version used in UIKit to 5.1.2.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/104ee490098211f0990f52540099c741.png)
+
+
+Please use the following script in your project root directory to downgrade the marked version:
+``` bash
+npm i marked@5.1.2 --legacy-peer-deps
+```
+
+##### Compilation Error: node_modules/marked/lib/marked.esm.js: Class private methods are not enabled.
+
+If the following error occurs during operation, it means your current marked version is outdated. Please upgrade the marked version to 6.0.0.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/32a9c4c9f43111efbda7525400454e06.png)
+
+
+Please use the following script in your project root directory to upgrade the marked version:
+``` bash
+npm i marked@6.0.0 --legacy-peer-deps
+```
+