@tencentcloud/ai-desk-customer-vue 0.7.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
-## [1.0.0] (2024-12-25)
+## [1.0.1] (2025-4-16)
 
 ### Features
+- 简化接入。
+- TUICustomerServer 新增 sendTextMessage/sendCustomMessage/changeLanguage 等接口。
 
-- web 客服插件首发
+## [1.0.0] (2025-4-10)
+
+### Features
+- 国际化语言，支持简体中文、繁体中文、英语、日语、马来西亚语、印尼语、越南语、泰语、俄语、菲律宾语。
+- 登录失败和账号被踢出增加提示。
+- 优化样式和移动端 H5 适配。
+- 优化交互体验。

package/README.md

@@ -4,7 +4,7 @@
 
 ## 效果展示
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d0637be3f42811efa8355254001c06ec.png)
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/2f5444f4095b11f0990f52540099c741.png)
 
 
 ## 开发环境要求
@@ -29,14 +29,14 @@
 
 【vue-cli】
 
-> **注意：**
-> 
-
-> 请您务必保证您的** @vue/cli 版本在 5.0.0** 以上，您可使用以下示例代码升级您的 @vue/cli 版本至 v5.0.8。
-> 
+> **说明：**
+>
+> 1. 请确保您的`@vue/cli`版本在 **5.0.0** 以上，您可使用以下示例代码升级`@vue/cli`版本至 v5.0.8。
+> 2. 如果您的项目由较低版本的`@vue/cli`创建，集成 UIKit 后运行项目如有报错，请查阅[常见问题](https://cloud.tencent.com/document/product/269/102783#04a7d474-e04a-4765-910f-9bbfe4e3ced9)解决。
 
 
 使用 vue-cli 方式创建项目， 配置 Vue2 / Vue3 + TypeScript + sass。
+
 如果您尚未安装 vue-cli 或者 vue-cli 版本低于 5.0.0 ，可以在 terminal 或 cmd 中采用如下方式进行安装：
 
 
@@ -79,10 +79,10 @@ npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-co
 【vite】
 
 > **说明：**
-> 
+>
 
 > Vite 需要[**Node.js**](https://nodejs.org/en/)** 版本 18+，20+。**当您的包管理器发出警告时，请注意升级您的 Node 版本，详情请参考 [vite 官网](https://cn.vitejs.dev/guide/)。
-> 
+>
 
 
 使用 vite 方式创建项目，按照下图选项配置 Vue + TypeScript 。
@@ -134,13 +134,13 @@ echo. > src\style.css
 
 【shell】
 ``` bash
-npm i @tencentcloud/ai-desk-customer-vue
+npm i @tencentcloud/ai-desk-customer-vue@latest
 ```
 
 
 【shell】
 ``` bash
-mkdir -p ./src/ai-desk-customer-vue && rsync -av --exclude={'node_modules','package.json','excluded-list.txt','srcipt'} ./node_modules/@tencentcloud/ai-desk-customer-vue/ ./src/ai-desk-customer-vue
+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  端】
@@ -148,7 +148,7 @@ mkdir -p ./src/ai-desk-customer-vue && rsync -av --exclude={'node_modules','pack
 
 【shell】
 ``` bash
-npm i @tencentcloud/ai-desk-customer-vue
+npm i @tencentcloud/ai-desk-customer-vue@latest
 ```
 
 
@@ -164,10 +164,10 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 ##### 例如：在 App.vue 页面中实现以下代码，即可快速搭建客服咨询界面（以下示例代码同时支持 Web 端与 H5 端）：
 
 > **说明：**
-> 
+>
 
 > 以下示例代码使用了 setup 语法，如果您的项目没有使用 setup 语法，请按照 Vue3/Vue2 的标准方式注册组件。
-> 
+>
 
 
 
@@ -176,14 +176,19 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 ``` javascript
 <template>
   <CustomerServiceChat
-    :SDKAppID=""
-    userID=""
-    userSig=""
-    :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">
-    import { CustomerServiceChat } from './ai-desk-customer-vue';
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from "vue";
+
+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>
@@ -194,20 +199,24 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 <template>
   <div id="app">
     <CustomerServiceChat
-    :SDKAppID=""
-    userID=""
-    userSig=""
-    :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>
 <script lang="ts" setup>
-import { CustomerServiceChat } from "./ai-desk-customer-vue";
+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">
-body {
-  margin: 0;
-}
 </style>
 ```
 
@@ -216,23 +225,27 @@ body {
 <template>
   <div id="app">
     <CustomerServiceChat
-    :SDKAppID=""
-    userID=""
-    userSig=""
-    :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>
 <script lang="ts" setup>
-import { CustomerServiceChat } from "./ai-desk-customer-vue";
+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">
-body {
-  margin: 0;
-}
 </style>
 ```
-1. 在 `main.ts/mian.js `中引入 VueCompositionAPI。
+1. 在 `main.ts/main.js `中引入 VueCompositionAPI。
 
 ``` javascript
 import VueCompositionAPI from "@vue/composition-api";
@@ -268,18 +281,18 @@ export * from "@vue/composition-api";
 
 ### 步骤4： 获取 SDKAppID 、userID 、 userSig
 
-设置` App.vue `中 CustomerServiceChat 组件的 props 属性 SDKAppID、userID、userSig 。
-- SDKAppID 信息，可通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取:
+设置`App.vue`中的 `SDKAppID`、`userID`、`userSig` 。
+- 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/100027984635/98fbf9465ebf11ef8f105254002693fd.png)
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/7ac165770ae411f088bd525400e889b2.png)
 
-- userID 信息，可通过单击 [ 即时通信 IM 控制台 -【账号管理】](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，即可创建账号并获取 userID。
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/c5699ccc0ae411f0b3015254001c06ec.png)
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/98fee9bb5ebf11efb927525400fdb830.png)
+- userID 信息，可本地生成一个随机的字符串，例如 test-1234。
 
-- userSig 信息，可单击 [ 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验](https://console.cloud.tencent.com/im/tool-usersig)，填写创建的 userID，即可生成 userSig。
+- userSig 信息，可单击 [即时通信 IM 控制台 > UserSig生成校验](https://console.cloud.tencent.com/im/tool-usersig)，填写创建的 userID，即可生成 userSig。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/9907771d5ebf11efb66652540055f650.png)
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/dbfdb4ca0ae411f088bd525400e889b2.png)
 
 
 ### 步骤5：启动项目，发起您的第一条客服咨询
@@ -291,15 +304,15 @@ export * from "@vue/composition-api";
 【vue-cli】
 
 > **说明：**
-> 
+>
 
 > 由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示，为了您有更好的体验，**建议您关闭全局 overlay 报错提示。**
-> 
+>
 
 > 在 vue.config.js 中添加以下代码
-> 
+>
 
-> 
+>
 
 【webpack4及以上】
 > `module.exports = defineConfig({`
@@ -316,10 +329,10 @@ export * from "@vue/composition-api";
 > `    overlay: false,`
 > `  },`
 > `};`
-> 
+>
 
 > 在 tsconfig.json 中关闭 ai-desk-customer-vue  的ts检测。
-> 
+>
 > `{`
 > `    "exclude": [`
 > `      "node_modules",`
@@ -342,6 +355,177 @@ npm run serve
 npm run dev
 ```
 
+## 高级特性
+
+### 国际化界面语言
+
+从 v1.0.0 起，UIKit 支持以下界面语言：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >语言代码（userLang）</td>
+
+<td rowspan="1" colSpan="1" >语言</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_cn</td>
+
+<td rowspan="1" colSpan="1" >简体中文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >en</td>
+
+<td rowspan="1" colSpan="1" >英文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_tw</td>
+
+<td rowspan="1" colSpan="1" >繁体中文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ja</td>
+
+<td rowspan="1" colSpan="1" >日语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >id</td>
+
+<td rowspan="1" colSpan="1" >印尼语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ms</td>
+
+<td rowspan="1" colSpan="1" >马来语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >vi</td>
+
+<td rowspan="1" colSpan="1" >越南语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >th</td>
+
+<td rowspan="1" colSpan="1" >泰语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >fil</td>
+
+<td rowspan="1" colSpan="1" >菲律宾语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ru</td>
+
+<td rowspan="1" colSpan="1" >俄语</td>
+</tr>
+</table>
+
+
+如果您的业务需要出海，且用户语言以英语为主，可在引入智能客服时设置`userLang="en"`。如果您不指定`userLang`, UIKit 会使用浏览器设置的语言。
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        userLang="en"
+    />
+</template>
+```
+
+如果您需要支持动态切换用户语言，可使用`TUICustomerServer.changeLanguage`接口，并通过切换 页面/组件 key 的方式，实现语言动态修改与展示。
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        :key="locale"
+        :userLang="locale"
+    />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat }  from '../../ai-desk-customer-uniapp';
+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>
+```
+
+### 工具栏快捷 button
+
+如果您想实现输入框上方增加快捷 button，方便用户使用，比如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/b727aeef19cd11f0abe05254005ef0f7.png)
+
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        :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;
+    },
+    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"
+            }
+          }),
+        }
+      });
+    }
+  }
+]);
+</script>
+<style scoped lang="scss">
+</style>
+```
+
 ## 常见问题
 
 ##### 什么是 UserSig？如何生成 UserSig？
@@ -374,6 +558,18 @@ vue add typescript
 npm install -D typescript
 ```
 
+##### 运行报错：Uncaught TypeError: marked__WEBPACK_IMPORTED_MODULE_0_ Marked is not a constructor
+
+如果您运行过程中出现如下错误，说明您当前 Vue CLI 构建的项目环境版本较低，需要降低 uikit 中使用的 marked 版本至 5.1.2。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/104ee490098211f0990f52540099c741.png)
+
+
+请在您项目的 根目录 使用以下脚本降低 marked 版本：
+``` bash
+npm i marked@5.1.2 --legacy-peer-deps
+```
+
 ##### 编译报错 node_modules/marked/lib/marked.esm.js: Class private methods are not enabled.
 
 如果您运行过程中出现如下错误，说明您当前使用的 marked 版本过低，请升级 marked 版本至 6.0.0。
@@ -388,4 +584,4 @@ npm i marked@6.0.0 --legacy-peer-deps
 
 ## 交流与反馈
 
-[点此进入 IM 社群](https://zhiliao.qq.com/s/c5GY7HIM62CK)，享有专业工程师的支持，解决您的难题。
+[点此进入 IM 社群](https://zhiliao.qq.com/s/c5GY7HIM62CK)，享有专业工程师的支持，解决您的难题。

package/components/CustomerServiceChat/chat-header/index-web.vue

@@ -11,7 +11,7 @@
     <div class="chat-header-container">
       <Icon v-if="!isPC" style="width:32px;" :file="customerAvatarMobile" />
       <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
-         {{ isPC?  currentConversationName :'Hi，我是'+ currentConversationName }}
+         {{ isPC?  currentConversationName : TUITranslateService.t('AIDesk.Hi，我是') + currentConversationName }}
       </div>
     </div>
   </div>
@@ -31,7 +31,7 @@ import { isPC } from '../../../utils/env';
 const { ref, onMounted, onUnmounted } = vue;
 
 interface IProps {
-  canCloseChat: boolean;
+  canCloseChat?: boolean;
 }
 
 const emits = defineEmits(['closeChat']);

package/components/CustomerServiceChat/index-web.vue

@@ -38,8 +38,8 @@
           'tui-chat-message-input',
           !isPC && 'tui-chat-h5-message-input'
         ]"
-        :isMuted="false"
-        :muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
+        :isMuted="isMuted"
+        :muteText="muteText"
         :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
         :inputToolbarDisplayType="inputToolbarDisplayType"
         @changeToolbarDisplayType="changeToolbarDisplayType"
@@ -76,26 +76,28 @@
 <script lang="ts" setup>
 import vue from '../../adapter-vue';
 import {
-  TUITranslateService,
+  IMessageModel,
+  StoreName,
+  TUIChatEngine,
   TUIConversationService,
   TUIStore,
-  StoreName,
-  IMessageModel,
-  TUIChatEngine
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
-import TUICore, { TUIConstants, TUILogin } from '@tencentcloud/tui-core';
+import TUICore, {TUIConstants, TUILogin} from '@tencentcloud/tui-core';
 import ChatHeader from './chat-header/index-web.vue';
 import MessageList from './message-list/index-web.vue';
 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 { isPC, isH5} from '../../utils/env';
-import { ToolbarButtonModel, ToolbarDisplayType } from '../../interface';
-import { isSupportedLang } from '../../utils/';
+import {isH5, isPC} from '../../utils/env';
+import {ToolbarButtonModel, ToolbarDisplayType} 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';
 
-const { ref, onMounted, onUnmounted, computed } = vue;
+const { ref, onMounted, onUnmounted, computed, nextTick } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
@@ -103,6 +105,7 @@ interface IProps {
   userID?:string;
   userSig?:string;
   robotLang?:string;
+  userLang?:string;
   toolbarButtonList?:ToolbarButtonModel[];
 }
 
@@ -111,15 +114,19 @@ const emits = defineEmits(['closeChat']);
 const currentConversationID = ref();
 const inputToolbarDisplayType = ref<ToolbarDisplayType>('none');
 const messageInputRef = ref();
+const isMuted = ref(false);
+const muteText = ref('');
 const messageListRef = ref<InstanceType<typeof MessageList>>();
 const emojiOpen = ref(false);
 const toolShowH5 = ref(false);
+const langauges = Object.keys(TUILocales);
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
   SDKAppID: 0,
   userID: '',
   userSig: '',
   robotLang: '',
+  userLang:'',
   toolbarButtonList:() => [] as ToolbarButtonModel[]
 });
 
@@ -135,10 +142,49 @@ const loginCustomerUIKit = () => {
     TUIConversationService.switchConversation(conversationID);
     TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
   }).catch((error) => {
+    Toast({
+      message: TUITranslateService.t('TUIChat.登录失败'),
+      type: TOAST_TYPE.ERROR,
+      duration: 30000,
+    });
     console.log(error);
   })
 }
 
+const convertLanguageToLowercase = (language) => {
+  let lowercase = language.toLowerCase();
+  if (lowercase === 'zh-cn' || lowercase === 'zh_cn') {
+    lowercase = 'zh';
+  } else if (lowercase === 'zh-tw' || lowercase === 'zh-hk') {
+    lowercase = 'zh_tw';
+  }
+  return lowercase;
+}
+
+const initLanguage = () => {
+  Log.i(`initLanguage ${props.userLang}`);
+  TUITranslateService.provideLanguages({ ...TUILocales });
+  TUITranslateService.useI18n();
+  let language;
+  if (props.userLang !== '') {
+    let userLang = convertLanguageToLowercase(props.userLang);
+    if (!langauges.includes(userLang)) {
+      Log.w(`userLang:${props.userLang} is not supported`);
+      language = 'en';
+    } else {
+      language = userLang;
+    }
+  } else {
+    let navigatorLang = convertLanguageToLowercase(navigator.language);
+    if (!langauges.includes(navigatorLang)) {
+      language = 'en';
+    } else {
+      language = navigatorLang;
+    }
+  }
+  TUITranslateService.changeLanguage(language);
+}
+
 try {
   const userContext = TUILogin.getContext();
   if(userContext.userID == '' && props.SDKAppID!==0 && props.userID!=='' && props.userSig!==''){
@@ -147,6 +193,7 @@ try {
       Log.w(`robotLang:${props.robotLang} is not supported`);
     }
   }
+  initLanguage();
 } catch (e) {
   console.log(e)
 }
@@ -155,12 +202,18 @@ onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversationID: onCurrentConversationIDUpdate,
   });
+  TUIStore.watch(StoreName.USER, {
+    kickedOut: onKickedOut
+  });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
     currentConversationID: onCurrentConversationIDUpdate,
   });
+  TUIStore.unwatch(StoreName.USER, {
+    kickedOut: onKickedOut
+  });
 });
 
 const isInputToolbarShow = computed<boolean>(() => {
@@ -211,6 +264,13 @@ function scrollToLatestMessage() {
   messageListRef.value?.scrollToLatestMessage();
 }
 
+function onKickedOut(type: string) {
+  if (type) {
+    isMuted.value = true;
+    muteText.value = TUITranslateService.t('TUIChat.账号被强制下线');
+  }
+}
+
 function onCurrentConversationIDUpdate(conversationID: string) {
   if (!conversationID) {
     return;

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

@@ -759,7 +759,6 @@ defineExpose({
   overflow: hidden;
 
   .message-input-editor-area {
-    overflow: auto;
     user-select: text;
     hyphens: auto;
     word-break: keep-all;
@@ -878,4 +877,11 @@ defineExpose({
     pointer-events: none;
   }
 }
+
+.message-input-mute {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+  text-align: center;
+}
 </style>

package/components/CustomerServiceChat/message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue

@@ -17,7 +17,7 @@
         </ul>
         <div class="sendButtonContainer">
             <div class="sendButton" @click="sendMessage">
-                发送
+              {{ TUITranslateService.t("发送") }}
             </div>
         </div>
     </div>
@@ -32,6 +32,7 @@ import {
   TUIStore,
   StoreName,
   IConversationModel,
+  TUITranslateService,
   SendMessageParams,
 } from '@tencentcloud/chat-uikit-engine';
 import {

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue

@@ -61,7 +61,7 @@
         class="send-btn"
         @click="sendMessage"
       >
-        发送
+      {{ TUITranslateService.t("发送") }}
       </li>
     </ul>
   </div>
@@ -74,6 +74,7 @@ import {
   StoreName,
   IConversationModel,
   SendMessageParams,
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
 import faceIcon from '../../../../assets/face.png';