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

package/CHANGELOG.md

@@ -1,5 +1,7 @@
-## [1.0.0] (2024-12-25)
+## [1.0.0] (2025-4-10)
 
 ### Features
-
-- web 客服插件首发
+- 国际化语言，支持简体中文、繁体中文、英语、日语、马来西亚语、印尼语、越南语、泰语、俄语、菲律宾语。
+- 登录失败和账号被踢出增加提示。
+- 优化样式和移动端 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,45 @@ 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' }"
+      :toolbarButtonList="toolbarButtonList"
+  />
 </template>
 <script setup lang="ts">
-    import { CustomerServiceChat } from './ai-desk-customer-vue';
+import TUICustomerServer from './ai-desk-customer-vue/server';
+import { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted, ref } from "vue";
+import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
+
+// 配置工具栏 button list，例如【转人工】
+const toolbarButtonList = ref([
+  {
+    title: '转人工',
+    renderCondition: () => {
+      // return true 即渲染，您可以在这里控制 button 显隐时机
+      return true;
+    },
+    clickEvent: () => {
+      // 点击 button 后的回调
+      if (TUIChatEngine.isReady()) {
+        TUIChatService.sendTextMessage({
+          to: '@customer_service_account',
+          conversationType: TUIChatEngine.TYPES.CONV_C2C,
+          payload: {
+            text: '转人工'
+          }
+        });
+      }
+    }
+  }
+]);
+
+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 +225,50 @@ 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' }"
+        :toolbarButtonList="toolbarButtonList"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import { CustomerServiceChat } from "./ai-desk-customer-vue";
+import TUICustomerServer from './ai-desk-customer-vue/server';
+import { CustomerServiceChat } from './ai-desk-customer-vue';
+import vue from './ai-desk-customer-vue/adapter-vue';
+import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
+
+const { ref, onMounted } = vue;
+
+// 配置工具栏 button list，例如【转人工】
+const toolbarButtonList = ref([
+  {
+    title: '转人工',
+    renderCondition: () => {
+      // return true 即渲染，您可以在这里控制 button 显隐时机
+      return true;
+    },
+    clickEvent: () => {
+      // 点击 button 后的回调
+      if (TUIChatEngine.isReady()) {
+        TUIChatService.sendTextMessage({
+          to: '@customer_service_account',
+          conversationType: TUIChatEngine.TYPES.CONV_C2C,
+          payload: {
+            text: '转人工'
+          }
+        });
+      }
+    }
+  }
+]);
+
+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 +277,53 @@ 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' }"
+        :toolbarButtonList="toolbarButtonList"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import { CustomerServiceChat } from "./ai-desk-customer-vue";
+import TUICustomerServer from './ai-desk-customer-vue/server';
+import { CustomerServiceChat } from './ai-desk-customer-vue';
+import vue from './ai-desk-customer-vue/adapter-vue';
+import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
+
+const { ref, onMounted } = vue;
+
+// 配置工具栏 button list，例如【转人工】
+const toolbarButtonList = ref([
+  {
+    title: '转人工',
+    renderCondition: () => {
+      // return true 即渲染，您可以在这里控制 button 显隐时机
+      return true;
+    },
+    clickEvent: () => {
+      // 点击 button 后的回调
+      if (TUIChatEngine.isReady()) {
+        TUIChatService.sendTextMessage({
+          to: '@customer_service_account',
+          conversationType: TUIChatEngine.TYPES.CONV_C2C,
+          payload: {
+            text: '转人工'
+          }
+        });
+      }
+    }
+  }
+]);
+
+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 +359,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 +382,15 @@ export * from "@vue/composition-api";
 【vue-cli】
 
 > **说明：**
-> 
+>
 
 > 由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示，为了您有更好的体验，**建议您关闭全局 overlay 报错提示。**
-> 
+>
 
 > 在 vue.config.js 中添加以下代码
-> 
+>
 
-> 
+>
 
 【webpack4及以上】
 > `module.exports = defineConfig({`
@@ -316,10 +407,10 @@ export * from "@vue/composition-api";
 > `    overlay: false,`
 > `  },`
 > `};`
-> 
+>
 
 > 在 tsconfig.json 中关闭 ai-desk-customer-vue  的ts检测。
-> 
+>
 > `{`
 > `    "exclude": [`
 > `      "node_modules",`
@@ -374,6 +465,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 +491,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';

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

@@ -2,7 +2,7 @@
   <ToolbarItemContainer
     ref="container"
     :iconFile="faceIcon"
-    title="表情"
+    :title="TUITranslateService.t('表情')"
     @onDialogShow="onDialogShow"
     @onDialogClose="onDialogClose"
     :isH5EmojiShow="props.isH5EmojiShow"
@@ -20,6 +20,7 @@ import {
   TUIStore,
   StoreName,
   IConversationModel,
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import vue from '../../../../adapter-vue';
 import faceIcon from '../../../../assets/face.png';

package/components/CustomerServiceChat/message-input-toolbar/file-upload/index.vue

@@ -1,7 +1,7 @@
 <template>
   <ToolbarItemContainer
     :iconFile="isH5?fileIconH5:fileIcon"
-    title="文件"
+    :title="TUITranslateService.t('文件')"
     iconWidth='21px'
     iconHeight='18px'
     :needDialog="false"
@@ -10,7 +10,7 @@
     <div :class="['file-upload', !isPC && 'file-upload-h5']">
       <input
         ref="inputRef"
-        title="文件"
+        :title="TUITranslateService.t('文件')"
         type="file"
         data-type="file"
         accept="*"
@@ -27,6 +27,7 @@ import {
   IConversationModel,
   SendMessageParams,
   SendMessageOptions,
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import vue from '../../../../adapter-vue';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';

package/components/CustomerServiceChat/message-input-toolbar/image-upload/index.vue

@@ -13,7 +13,7 @@
     >
       <input
         ref="inputRef"
-        title="图片"
+        :title="TUITranslateService.t('图片')"
         type="file"
         accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp,image/webp,video/mov,video/mp4"
         @change="sendImageInWeb"
@@ -29,6 +29,7 @@ import {
   IConversationModel,
   SendMessageParams,
   SendMessageOptions,
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import vue from '../../../../adapter-vue';
@@ -58,11 +59,11 @@ const currentConversation = ref<IConversationModel>();
 const IMAGE_TOOLBAR_SHOW_MAP = {
   web_album: {
     icon: imageIcon,
-    title: '图片',
+    title: TUITranslateService.t("图片"),
   },
   uni_album: {
     icon: imageUniIcon,
-    title: '图片',
+    title: TUITranslateService.t("图片"),
   }
 };
 

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

@@ -50,8 +50,8 @@ const { ref, onMounted, onUnmounted, watch } = vue;
 
 interface IProps {
   displayType: ToolbarDisplayType;
-  isH5EmojiShow:boolean;
-  isH5ToolShow:boolean;
+  isH5EmojiShow?:boolean;
+  isH5ToolShow?:boolean;
 }
 interface IEmits {
   (e: 'scrollToLatestMessage'): void;