@tencentcloud/ai-desk-customer-vue 1.5.1 → 1.5.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.5.3 @2025.7.10
+
+### Features
+- 支持多客服号。
+- 支持引用消息。
+
+## 1.5.2 @2025.7.2
+
+### Features
+- 新增参数 `bottomQuickOrder`，配置后可展示底部快捷订单。
+
+### Fixed
+- markdown 链接展示问题。
+
 ## 1.5.1 @2025.6.23
 
 ### Fixed

package/README.md

@@ -1,10 +1,10 @@
 ## 介绍
 
-智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用 AI 为您的产品增收提效。
+智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用智能客服为您的产品增收提效，提升用户满意度和付费转化。
 
 ## 效果展示
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/2f5444f4095b11f0990f52540099c741.png)
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/0a01bc0b572411f095485254005ef0f7.png)
 
 
 ## 开发环境要求
@@ -81,7 +81,7 @@ npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-co
 > **说明：**
 >
 
-> Vite 需要[**Node.js**](https://nodejs.org/en/)** 版本 18+，20+。**当您的包管理器发出警告时，请注意升级您的 Node 版本，详情请参考 [vite 官网](https://cn.vitejs.dev/guide/)。
+> Vite 需要[**Node.js**](https://nodejs.org/en/)** 版本 18+，20+。**当您的包管理器发出警告时，请注意升级您的 Node 版本，详情请参考 [Vite 官网](https://cn.vitejs.dev/guide/)。
 >
 
 
@@ -176,7 +176,7 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 ``` javascript
 <template>
   <CustomerServiceChat
-      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
   />
 </template>
 <script setup lang="ts">
@@ -199,7 +199,7 @@ onMounted(() => {
 <template>
   <div id="app">
     <CustomerServiceChat
-        :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -225,7 +225,7 @@ onMounted(() => {
 <template>
   <div id="app">
     <CustomerServiceChat
-        :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -282,11 +282,12 @@ export * from "@vue/composition-api";
 ### 步骤4： 获取 SDKAppID 、userID 、 userSig
 
 设置`App.vue`中的 `SDKAppID`、`userID`、`userSig` 。
-- SDKAppID 信息，可在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 单击**应用管理** > **创建新应用**，并选择**客服服务 Desk** > **智能客服**， [开通智能客服](https://console.cloud.tencent.com/im/ai-desk) 后获取。
+- SDKAppID 信息，可在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 单击**应用管理** > **创建新应用**，并选择**智能客服 Desk**， [开通智能客服](https://console.cloud.tencent.com/im/ai-desk) 后获取。
 
-  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/7ac165770ae411f088bd525400e889b2.png)
 
-  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/c5699ccc0ae411f0b3015254001c06ec.png)
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/328524a8533011f0abce52540099c741.png)
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/bd6edb6a572911f0922d5254007c27c5.png)
 
 - userID 信息，可本地生成一个随机的字符串，例如 test-1234。
 
@@ -359,7 +360,7 @@ npm run dev
 
 ### 国际化界面语言
 
-从 v1.0.0 起，UIKit 支持以下界面语言：
+UIKit 支持以下界面语言：
 <table>
 <tr>
 <td rowspan="1" colSpan="1" >语言代码（userLang）</td>
@@ -432,22 +433,24 @@ npm run dev
 如果您的业务需要出海，且用户语言以英语为主，可在引入智能客服时设置`userLang="en"`。如果您不指定`userLang`, UIKit 会使用浏览器设置的语言。
 ``` javascript
 <template>
-    <CustomerServiceChat style="height: 100%;"
-        userLang="en"
-    />
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    userLang="en"
+  />
 </template>
 ```
 
 如果您需要支持动态切换用户语言，可使用`TUICustomerServer.changeLanguage`接口，并通过切换 页面/组件 key 的方式，实现语言动态修改与展示。
 ``` javascript
 <template>
-    <CustomerServiceChat style="height: 100%;"
-        :key="locale"
-        :userLang="locale"
-    />
+  <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-uniapp';
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
 import { onMounted, ref } from "vue";
 
 const locale = ref('en');
@@ -462,79 +465,321 @@ const changeLanguage = (language: string) => {
 </style>
 ```
 
-### 工具栏快捷 button
+### 用户端带昵称和头像登录
+
+如果人工客服在工作台接待用户咨询时，希望能看到用户的昵称、头像等信息以提升沟通效率，效果如下图所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/8d0d240f572311f09fd0525400bf7822.png)
 
-如果您想实现输入框上方增加快捷 button，方便用户使用，比如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
+
+请使用 `initWithProfile` 接口初始化，传入昵称和头像即可。
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: '张三 1852010****',
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+})
+```
+
+### 工具栏快捷按钮
+
+如果您想实现输入框上方增加快捷按钮，方便用户使用，例如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/b727aeef19cd11f0abe05254005ef0f7.png)
 
+
+`toolbarButtonList` 是一个包含了一个或多个配置的数组，配置的描述如下：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >参数</td>
+
+<td rowspan="1" colSpan="1" >类型</td>
+
+<td rowspan="1" colSpan="1" >是否必填</td>
+
+<td rowspan="1" colSpan="1" >说明</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 标题。</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 图标 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：客服组件内置功能。<br>- 0：非内置功能。</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" >当 isPreset 为 1 时，可选值如下：<br>- humanService：人工服务。<br>- serviceRating：服务评价。<br>- endHumanService：结束对话。</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：渲染。<br>- 0：不渲染。</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" >当 isPreset 为 0 时，填入文本内容或者 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：点击 button 后客服组件发送 content 对应的文本。<br>- 2：点击 button 后客服组件打开 content 对应的 url（小程序打开 url 可能会受限，请提前参考相关文档解决）。</td>
+</tr>
+</table>
+
 ``` javascript
 <template>
-    <CustomerServiceChat style="height: 100%;"
-        :toolbarButtonList="toolbarButtonList"
-    />
+  <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-uniapp';
-import { ref } from "vue";
-
-const toolbarButtonList = ref([
-  { 
-    title: '人工客服', 
-    renderCondition: () => {
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      TUICustomerServer.sendTextMessage({
-        to: '@customer_service_account',
-        conversationType: 'C2C',
-        payload: {
-          text: '人工客服'
-        }
-      });
-    }
-  },
-  {
-    title: '发送订单',
-    renderCondition: () => {
-      return true;
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from 'vue';
+
+const toolbarButtonList = [
+  {"title":"人工服务","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":"服务评价","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":"结束对话","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},
+  {"type":1,"title":"智能客服","content":"智能客服","isPreset":0,"isEnabled":1}
+];
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
+  const userID = ''; // Your userID，可复用您 app 的账号体系，或随机生成
+  const userSig = ''; // Your userSig，接入阶段可控制台生成，生产阶段请务必由服务端生成
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
+</script>
+<style scoped>
+</style>
+```
+
+### 底部快捷订单
+
+> **说明：**
+>
+
+> 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.2 或更高版本。
+>
+
+
+如果您想实现打开客服会话时在聊天区域底部展示快捷订单，可以配置 `bottomQuickOrder`，效果如下所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d9eb994a572211f0b3f05254001c06ec.png)
+
+
+`bottomQuickOrder` 的参数描述如下：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >参数</td>
+
+<td rowspan="1" colSpan="1" >类型</td>
+
+<td rowspan="1" colSpan="1" >是否必填</td>
+
+<td rowspan="1" colSpan="1" >说明</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" >订单标题，对应上图的“智能客服高级版”。</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" >订单描述，对应上图的“3000/月”。</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" >订单图片 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" >当客服坐席收到订单消息时，点击可打开此 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" >自定义配置，例如“订单号”，“订单时间”等信息。</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: "高级版智能客服（包含3个客服许可）",
+  desc: "¥3000/月",
+  pic: "https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
+  url: 'https://cloud.tencent.com/document/product/269/97537',
+  customField: [
+    {
+      name: '订单号',
+      value: '11111111111111111111'
     },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      TUICustomerServer.sendCustomMessage({
-        to: '@customer_service_account',
-        conversationType: 'C2C',
-        payload: {
-          data: JSON.stringify({
-            src: '22',
-            customerServicePlugin: 0,
-            content: {
-              desc: "¥3000/月",
-              header: "高级版智能客服",
-              pic: "https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
-              url: "https://cloud.tencent.com/document/product/269/116070"
-            }
-          }),
-        }
-      });
+    {
+      name: '下单时间',
+      value: '2025-07-02 16:23'
     }
-  }
-]);
+  ]
+};
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
+  const userID = ''; // Your userID，可复用您 app 的账号体系，或随机生成
+  const userSig = ''; // Your userSig，接入阶段可控制台生成，生产阶段请务必由服务端生成
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
 </script>
-<style scoped lang="scss">
+<style scoped>
 </style>
 ```
 
+### 多客服号
+
+> **说明：**
+>
+
+> 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.3 或更高版本。
+>
+
+
+如果您的应用内需要多个客服号，为用户提供专属客服功能，以提高服务质量和响应速度，可用 UIKit 提供的多客服号功能实现。效果如下所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d26c67b65ca811f09fd0525400bf7822.png)
+
+``` javascript
+// 1. 初始化前将业务侧自定义的客服号 ID 传递给 UIKit
+// 自定义客服号请使用 restapi - https://cloud.tencent.com/document/product/269/111798
+TUICustomerServer.setCustomerServiceIDList(['customerServiceID_001', 'customerServiceID_002', 'customerServiceID_003']);
+// 2. 初始化时，带上要发起会话的客服号 ID，比如 'customerServiceID_002'
+// 如果不带上要发起会话的客服号 ID，则 UIKit 默认使用多客服号列表的第 1 个元素
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: '张三 1562010****',
+  avatar: 'your avatar url',
+  customerServiceID: 'customerServiceID_002',
+});
+```
+
+### 用户端主动结束人工会话
+
+> **说明：**
+>
+
+> 用户端可以通过发送自定义消息的方式实现主动结束会话，适用于以下 3 种情况：
+>
+> 1. 用户转人工触发排队，发送此消息可以结束排队。
+> 2. 客服接待方式为手动接待，用户转人工分配客服成功后等待客服确认接待，发送此消息可以结束等待。
+> 3. 用户转人工且成功接入人工客服，发送此消息可以结束本次会话。
+
+``` javascript
+TUICustomerServer.sendCustomMessage({
+  to: '@customer_service_account',
+  conversationType: 'C2C',
+  payload: {
+    data: JSON.stringify({
+      src: '27',
+      customerServicePlugin: 0,
+    }),
+  },
+}, { onlineUserOnly: true });
+```
+
 ## 常见问题
 
 ##### 什么是 UserSig？如何生成 UserSig？
 
 UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
 
-UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
+UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#formal)。
 
-##### js 工程如何接入 TUIKit 组件?
+##### JS 工程如何接入 TUIKit 组件?
 
 UIKit 仅支持 ts 环境运行，您可以通过渐进式配置 typescript 来使您项目中已有的 js 代码 与 UIKit 中 ts 代码共存。
 
@@ -551,7 +796,7 @@ vue add typescript
 
 **完成以上步骤后，请重新运行项目！**
 
-【vite】
+【Vite】
 
 请在您 vite 创建的工程根目录执行：
 ``` bash

package/components/CustomerServiceChat/emoji-config/index.ts

@@ -2,9 +2,10 @@ import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { CUSTOM_BASIC_EMOJI_URL, CUSTOM_BIG_EMOJI_URL, CUSTOM_BASIC_EMOJI_URL_MAPPING, CUSTOM_BIG_EMOJI_GROUP_LIST } from './custom-emoji';
 import { DEFAULT_BASIC_EMOJI_URL, BIG_EMOJI_GROUP_LIST, DEFAULT_BASIC_EMOJI_URL_MAPPING, BASIC_EMOJI_NAME_TO_KEY_MAPPING, DEFAULT_BIG_EMOJI_URL } from './default-emoji';
 import { default as emojiCNLocales } from './locales/zh_cn';
+import { default as emojiENLocales } from './locales/en';
 import { IEmojiGroupList } from '../../../interface';
 import { EMOJI_TYPE } from '../../../constant';
-import { isWeChat } from '../../../utils/env';
+import state from '../../../utils/state.js';
 
 const hasCustomBasicEmoji = CUSTOM_BASIC_EMOJI_URL && Object.keys(CUSTOM_BASIC_EMOJI_URL_MAPPING).length;
 
@@ -32,7 +33,7 @@ const EMOJI_GROUP_LIST: IEmojiGroupList = [
  */
 const convertKeyToEmojiName = (key: string): string => {
   // WeChat does not support emoji translation
-  return isWeChat ? emojiCNLocales[key] : TUITranslateService.t(`Emoji.${key}`);
+  return state.get('currentLanguage') == 'zh' ? emojiCNLocales[key] : emojiENLocales[key];
 };
 
 /**

package/components/CustomerServiceChat/index-web.vue

@@ -17,9 +17,12 @@
         :class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']"
         @handleEditor="handleEditor"
         @closeInputToolBar="() => changeToolbarDisplayType('none')"
+        :bottomQuickOrder="props.bottomQuickOrder"
+        :showBottomQuickOrder="showBottomQuickOrder"
+        @closeBottomQuickOrder="closeBottomQuickOrder"
       />
       <MessageToolbarButton
-        v-if="!(isH5 && Boolean(quoteMessage))"
+        v-if="!isH5 || (!Boolean(quoteMessage) && !showBottomQuickOrder)"
         :toolbarButtonList="props.toolbarButtonList"
       />
       <MessageInputToolbar
@@ -95,16 +98,16 @@ import MessageInput from './message-input/index-web.vue';
 import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
 import { isH5, isPC } from '../../utils/env';
-import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel } from '../../interface';
+import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel, QuickOrderModel } from '../../interface';
 import { isSupportedLang } from '../../utils/';
 import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
 import { Toast, TOAST_TYPE } from '../common/Toast/index-web';
 import state from '../../utils/state.js';
-import { switchReadStatus } from '../../utils/utils';
+import { switchReadStatus,isNonEmptyObject } from '../../utils/utils';
 
-const { ref, onMounted, onUnmounted, computed, nextTick } = vue;
+const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
@@ -125,6 +128,7 @@ interface IProps {
   inputToolbarList?: InputToolbarModel[];
   showReadStatus?: number;
   showTyping?: number;
+  bottomQuickOrder?: QuickOrderModel;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -139,6 +143,7 @@ const emojiOpen = ref(false);
 const toolShowH5 = ref(false);
 const languages = Object.keys(TUILocales);
 const quoteMessage = ref<IMessageModel>();
+const showBottomQuickOrder = ref(false);
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
   SDKAppID: 0,
@@ -211,6 +216,7 @@ const initLanguage = () => {
       language = navigatorLang;
     }
   }
+  state.set('currentLanguage', language);
   TUITranslateService.changeLanguage(language);
 }
 
@@ -247,6 +253,9 @@ try {
   setAvatarNickName();
   setShowReadStatus();
   setShowTyping();
+  if (isNonEmptyObject(props.bottomQuickOrder)) {
+    showBottomQuickOrder.value = true;
+  }
 } catch (e) {
   console.log(e)
 }
@@ -389,6 +398,10 @@ function onQuoteMessageUpdated(options?: {
     quoteMessage.value = undefined;
   }
 }
+
+function closeBottomQuickOrder() {
+  showBottomQuickOrder.value = false;
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

package/components/CustomerServiceChat/message-input/index-web.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="message-input-wrapper">
-    <MessageInputQuote />
+    <MessageInputQuote 
+      @getQuoteMessageCloudCustomData="getQuoteMessageCloudCustomData"
+    />
     <div
       :class="[
         'message-input-container',
@@ -96,6 +98,7 @@ const editor = ref<InstanceType<typeof MessageInputEditor>>();
 const currentConversation = ref<IConversationModel>();
 const h5Dialog = ref<HTMLElement>();
 const showSendButton = ref(false);
+let quoteMessageCloudCustomData:string = '';
 
 onMounted(() => {
   // document.addEventListener('click', handleClick);
@@ -136,13 +139,17 @@ const sendMessage = async () => {
     }
     return editor;
   });
-  await sendMessages(editorContentList, currentConversation.value);
+  await sendMessages(editorContentList, currentConversation.value, quoteMessageCloudCustomData);
   // 注意这里不要 emit 'sendMessage'，避免写出死循环
   emit('messageSent');
   editor.value?.resetEditor();
   showSendButton.value = false;
 };
 
+const getQuoteMessageCloudCustomData = (cloudCustomData: string) => {
+  quoteMessageCloudCustomData = cloudCustomData;
+};
+
 const insertEmoji = (emoji: any) => {
   editor.value?.addEmoji(emoji);
   showSendButton.value = true;

package/components/CustomerServiceChat/message-input/message-input-editor-web.vue

@@ -121,6 +121,17 @@ function onQuoteMessageUpdated(options?: {
   type: string;
 }) {
   currentQuoteMessage.value = options;
+  if (options && options.message) {
+    focusEditor();
+  }
+}
+
+function focusEditor() {
+  if (isH5 && editorDom.value) {
+    editorDom.value.focus();
+  } else if (editor) {
+    editor.commands.focus()
+  }
 }
 
 onMounted(() => {