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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.5.4 @2025.7.24
+
+### Features
+- 支持直接转指定人工或者客服分组，支持转指定任务流，提升交互体验。
+- 支持点击分支选项打开 url。
+- 新增参数 `enableMultilingual` 和 `langList`，支持多语言切换。
+- 支持手动结束机器人会话并对机器人评分。
+- 优化欢迎卡片样式。
+
+### Fixed
+- 人工会话状态可能不准确的问题。
+
 ## 1.5.3 @2025.7.10
 
 ### Features

package/assets/language_arrow_down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.999 7.26559L8.88284 4.16016L9.6156 4.84063L5.99895 8.7352L2.38281 4.84061L3.11563 4.16018L5.999 7.26559Z" fill="#727A8A" stroke="#727A8A" stroke-width="0.5"/>
+</svg>

package/assets/language_check.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.96 6.81396L8.76147 14.2847L4.05078 9.57397L4.62573 9.00024L5.20068 8.42529L8.7395 11.9641L14.7905 5.68604L15.96 6.81396Z" fill="#4086FF"/>
+</svg>

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

@@ -1,17 +1,49 @@
 <template>
   <div :class="['chat-header', !isPC && 'chat-header-h5']">
-    <div
-      v-if="!isPC && props.canCloseChat"
-      :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
-      @click="closeChat(currentConversation.conversationID)"
-    >
-      <Icon :file="backSVG" />
+    <div class="chat-header-name">
+      <div
+        v-if="!isPC && props.canCloseChat"
+        :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
+        @click="closeChat(currentConversation.conversationID)"
+      >
+        <Icon :file="backSVG" />
+      </div>
+      <div class="chat-header-container">
+        <Icon v-if="!isPC" width="32px" :file="customerAvatarMobile" />
+        <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
+          {{ currentConversationName }}
+        </div>
+      </div>
     </div>
-    <div class="chat-header-container">
-      <Icon v-if="!isPC" style="width:32px;" :file="customerAvatarMobile" />
-      <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
-         {{ currentConversationName }}
+    <div v-if="props.enableMultilingual === 1" class="language-selector">
+      <div class="selected-language-option" @click="toggleDropdown">
+        {{ currentLanguageOption.name }}
+        <span class="arrow" :class="{ 'arrow-up': showDropdown }">
+          <Icon :file="arrowDown" width="12px" height="12px" />
+        </span>
       </div>
+      
+      <transition name="fade">
+        <div v-if="showDropdown" class="dropdown-popup">
+          <div 
+            v-for="option in languageOptionList" 
+            :key="option.code"
+            :class="['dropdown-item',currentLanguageOption.code === option.code ? 'dropdown-item-selected' : '']"
+            @click="selectLanguage(option)"
+          >
+            <div class="language">
+              <div class="language-code">
+                {{ option.codeForShow }}
+              </div>
+              <div class="language-name">
+                {{ option.name }}
+              </div>
+            </div>
+            
+            <Icon v-if="currentLanguageOption.code === option.code" :file="languageSelectedIcon" width="20px" height="20px" />
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -25,24 +57,51 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../common/Icon.vue';
 import backSVG from '../../../assets/back.svg';
+import arrowDown from '../../../assets/language_arrow_down.svg';
 import customerAvatarMobile from '../../../assets/customer_avatar_mobile.png';
+import languageSelectedIcon from '../../../assets/language_check.svg';
 import { isPC } from '../../../utils/env';
 import state from '../../../utils/state';
+import { SUPPORTED_LANGUAGES } from '../../../constant';
 const { ref, onMounted, onUnmounted } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
+  currentLang?: string;
+  enableMultilingual: number;
+  langList?: Array<string>;
+}
+interface ILanguage {
+  name: string;
+  code: string;
+  codeForShow: string;
 }
 
-const emits = defineEmits(['closeChat']);
+const emits = defineEmits(['closeChat','changeLanguage']);
 const currentConversation = ref<IConversationModel>();
 const currentConversationName = ref('');
 const isTyping = ref(false);
-
+const showDropdown = ref(false);
+const languageOptionList = ref<Array<ILanguage>>([]);
+const currentLanguageOption = ref<ILanguage>({name:'',code:'',codeForShow:''});
+ 
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
+  currentLang: '',
+  enableMultilingual: 0,
+  langList: () => [],
 });
 
+if (props.enableMultilingual === 1) {
+  languageOptionList.value = props.langList
+  .map(key => ({
+    code: key,
+    codeForShow: SUPPORTED_LANGUAGES[key].codeForShow,
+    name: SUPPORTED_LANGUAGES[key].name,
+  }));
+  currentLanguageOption.value = languageOptionList.value.find(option => option.code === props.currentLang);
+}
+
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdated,
@@ -84,8 +143,24 @@ function onTypingStatusUpdated(status: boolean) {
     }
   }
 }
+
+function toggleDropdown() {
+  showDropdown.value = !showDropdown.value
+}
+
+function selectLanguage(languageOption) {
+  showDropdown.value = false;
+  currentLanguageOption.value = languageOption;
+  emits('changeLanguage', languageOption.code);
+}
 </script>
 <style lang="scss" scoped>
+.chat-header-name {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-width: 0;
+}
 .chat-header {
   display: flex;
   min-width: 0;
@@ -93,9 +168,12 @@ function onTypingStatusUpdated(status: boolean) {
   align-items: center;
   justify-content: space-between;
   border-bottom:1px solid #f3f4f7;
+  font-family: PingFangSC-Regular;
+  width: 100%;
 
   &-container {
     display: flex;
+    flex: 1;
     min-width: 0;
     flex-direction: row;
     justify-content: flex-start;
@@ -113,6 +191,7 @@ function onTypingStatusUpdated(status: boolean) {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    min-width: 0;
   }
 
   &-back,
@@ -137,7 +216,130 @@ function onTypingStatusUpdated(status: boolean) {
   }
 
   &-content {
-    text-align: center;
+    margin: 0 20px 0 10px;
   }
 }
+
+.language-selector {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.selected-language-option {
+  padding: 8px 6px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 12px;
+  color: #0F1014;
+  gap: 5px;
+}
+
+.arrow {
+  transition: transform 0.2s;
+  font-size: 12px;
+}
+
+.arrow-up {
+  transform: rotate(180deg);
+}
+
+.dropdown-popup {
+  position: absolute;
+  top: 100%;
+  right: 10px;
+  font-size: 12px;
+  max-width: 200px;
+  max-height: 400px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0px 1px 8px 0px var(---Black-8, rgba(0, 0, 0, 0.06)), 0px 4px 12px 0px var(---Black-8, rgba(0, 0, 0, 0.06)), 0px 10px 30px 0px var(---Black-8, rgba(0, 0, 0, 0.06));
+  z-index: 1000;
+  margin-top: 4px;
+  padding: 8px 0px;
+  overflow-y: auto;
+  scrollbar-width: 4px;
+  scrollbar-color: #E7EAEF;
+}
+
+.dropdown-popup::-webkit-scrollbar {
+  width: 4px;
+}
+.dropdown-popup::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dropdown-popup::-webkit-scrollbar-thumb {
+  background-color: #E7EAEF;
+  border-radius: 2px;
+}
+
+.dropdown-item {
+  transition: background-color 0.2s;
+  display: flex;
+  flex-direction: row;
+  padding: 5px 12px;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  .language {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    font-size: 12px;
+    .language-code {
+      color: #71798A;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 2px;
+      border: 1px solid rgba(114, 122, 138, 0.20);
+      padding: 0 8px;
+      font-weight: 600;
+      min-width: 12px;
+      flex-shrink: 0;
+    }
+    .language-name {
+      color: #0F1014;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0; 
+    }
+  }
+}
+
+.dropdown-item:hover,.dropdown-item-selected {
+  background-color: #F2F6FF;
+}
+
+.dropdown-item-selected {
+  position: relative;
+}
+
+.dropdown-item-selected::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #F2F6FF;
+  z-index: -1;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
 </style>

package/components/CustomerServiceChat/index-web.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
+  <div :class="['tui-chat', !isPC && 'tui-chat-h5']" :key="currentLanguage">
     <div
       v-if="currentConversationID"
       :class="['tui-chat', !isPC && 'tui-chat-h5']"
@@ -10,7 +10,11 @@
           !isPC && 'tui-chat-H5-header'
         ]"
         :canCloseChat="props.canCloseChat"
+        :enableMultilingual="props.enableMultilingual"
+        :langList="languageForShowList"
+        :currentLang="currentLanguage"
         @closeChat="closeChat"
+        @changeLanguage="changeLanguage"
       />
       <MessageList
         ref="messageListRef"
@@ -99,14 +103,13 @@ 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, 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,isNonEmptyObject } from '../../utils/utils';
-
+import { getCountryForTimezone } from 'countries-and-timezones';
 const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
@@ -129,6 +132,8 @@ interface IProps {
   showReadStatus?: number;
   showTyping?: number;
   bottomQuickOrder?: QuickOrderModel;
+  enableMultilingual?: number;
+  langList?: Array<string>;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -144,6 +149,10 @@ const toolShowH5 = ref(false);
 const languages = Object.keys(TUILocales);
 const quoteMessage = ref<IMessageModel>();
 const showBottomQuickOrder = ref(false);
+const currentLanguage = ref('');
+const languageForShowList = ref<Array<string>>([]);
+let timezone = '';
+let countryID = '';
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
   SDKAppID: 0,
@@ -161,6 +170,8 @@ const props = withDefaults(defineProps<IProps>(), {
   staffNickName: '',
   userNickName: '',
   showTyping: 0,
+  enableMultilingual: 0,
+  langList: () => [],
 });
 
 const loginCustomerUIKit = () => {
@@ -185,6 +196,12 @@ const loginCustomerUIKit = () => {
   })
 }
 
+const getTimeZoneAndCountry = () => {
+  timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const country = getCountryForTimezone(timezone);
+  countryID = country && country.id ? country.id : '';
+}
+
 const convertLanguageToLowercase = (language) => {
   let lowercase = language.toLowerCase();
   if (lowercase === 'zh-cn' || lowercase === 'zh_cn') {
@@ -195,27 +212,52 @@ const convertLanguageToLowercase = (language) => {
   return lowercase;
 }
 
+const getValidLanguage = (language: string) => {
+  let validLanguage = '';
+  if (props.enableMultilingual === 1 && languageForShowList.value.length !== 0) {
+    if (languageForShowList.value.includes(language)) {
+      validLanguage = language;
+    } else {
+      // choose default language (languageForShowList.value[0] for uikit) if language is not supported
+      validLanguage = languageForShowList.value[0];
+    }
+  } else if (languages.includes(language)) {
+    validLanguage = language;
+  } else {
+    if (props.userLang !== ''){
+      Log.w(`userLang:${props.userLang} is not supported`);
+    }
+    validLanguage = 'en';
+  }
+  return validLanguage;
+}
+
 const initLanguage = () => {
   Log.i(`initLanguage ${props.userLang}`);
   TUITranslateService.provideLanguages({ ...TUILocales });
   TUITranslateService.useI18n();
+  if (props.enableMultilingual === 1) {
+    languageForShowList.value = props.langList.filter(language => languages.includes(language));
+  }
   let language;
-  if (props.userLang !== '') {
-    let userLang = convertLanguageToLowercase(props.userLang);
-    if (!languages.includes(userLang)) {
-      Log.w(`userLang:${props.userLang} is not supported`);
-      language = 'en';
-    } else {
-      language = userLang;
+  try {
+    const prevLanguage = localStorage.getItem('AIDesk_language');
+    if (prevLanguage) {
+      language = prevLanguage;
     }
-  } else {
-    let navigatorLang = convertLanguageToLowercase(navigator.language);
-    if (!languages.includes(navigatorLang)) {
-      language = 'en';
+  } catch {
+    Log.w('No Previous Language');
+  }
+  if (!language) {
+    if (props.userLang !== '') {
+      let userLang = convertLanguageToLowercase(props.userLang);
+      language = getValidLanguage(userLang);
     } else {
-      language = navigatorLang;
+      let navigatorLang = convertLanguageToLowercase(navigator.language);
+      language = getValidLanguage(navigatorLang);
     }
-  }
+  } 
+  currentLanguage.value = language;
   state.set('currentLanguage', language);
   TUITranslateService.changeLanguage(language);
 }
@@ -245,7 +287,7 @@ try {
   const userContext = TUILogin.getContext();
   if (userContext.userID == '' && props.SDKAppID !==0 && props.userID !=='' && props.userSig !==''){
     loginCustomerUIKit();
-    if (props.robotLang && !isSupportedLang(props.robotLang)) {
+    if (props.robotLang && !languages.includes(props.robotLang)) {
       Log.w(`robotLang:${props.robotLang} is not supported`);
     }
   }
@@ -253,6 +295,7 @@ try {
   setAvatarNickName();
   setShowReadStatus();
   setShowTyping();
+  getTimeZoneAndCountry();
   if (isNonEmptyObject(props.bottomQuickOrder)) {
     showBottomQuickOrder.value = true;
   }
@@ -356,14 +399,7 @@ function onCurrentConversationIDUpdate(conversationID: string) {
   currentConversationID.value = conversationID;
 
   // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
-  TUICore.callService({
-    serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
-    method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
-    params: {
-      conversationID: conversationID,
-      robotLang: props.robotLang && isSupportedLang(props.robotLang) ? props.robotLang : undefined,
-    },
-  });
+  activeConversation();
 }
 
 function emojiShow(){
@@ -402,6 +438,31 @@ function onQuoteMessageUpdated(options?: {
 function closeBottomQuickOrder() {
   showBottomQuickOrder.value = false;
 }
+
+function changeLanguage(languageCode: string) {
+  Log.l(`multilingual: change language to ${languageCode}`);
+  TUITranslateService.changeLanguage(languageCode).then(() => {
+    currentLanguage.value = languageCode;
+    try {
+      localStorage.setItem('AIDesk_language', languageCode);
+    } catch {
+      Log.w("Failed to set language to localStorage.");
+    }
+    activeConversation();
+  });
+}
+function activeConversation() {
+  TUICore.callService({
+    serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
+    method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
+    params: {
+      conversationID: currentConversationID.value,
+      robotLang: props.robotLang && languages.includes(props.robotLang) ? props.robotLang : currentLanguage.value === 'zh_tw' ? 'zh-TW' : currentLanguage.value,
+      country: countryID,
+      timezone: timezone,
+    },
+  });
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

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

@@ -1,7 +1,7 @@
 <template>
   <ToolbarItemContainer
-    :iconFile="isH5?fileIconH5:fileIcon"
-    :title="TUITranslateService.t('文件')"
+    :iconFile="isH5 ? fileIconH5 : fileIcon"
+    :title="props.title || TUITranslateService.t('文件')"
     iconWidth='20px'
     iconHeight='20px'
     :needDialog="false"
@@ -10,7 +10,7 @@
     <div :class="['file-upload', !isPC && 'file-upload-h5']">
       <input
         ref="inputRef"
-        :title="TUITranslateService.t('文件')"
+        :title="props.title || TUITranslateService.t('文件')"
         type="file"
         data-type="file"
         accept="*"
@@ -39,6 +39,12 @@ import Log from '../../../../utils/logger';
 import { Toast, TOAST_TYPE } from '../../../common/Toast/index-web';
 const { ref } = vue;
 
+const props = defineProps({
+  title: {
+    type: String,
+  },
+});
+
 const inputRef = ref();
 const currentConversation = ref<IConversationModel>();
 
@@ -56,11 +62,15 @@ const sendFileMessage = (e: any) => {
   if (e?.target?.files?.length <= 0) {
     return;
   }
+  const file = e.target.files[0];
+  if (!file || !file.size) {
+    return;
+  }
   const options = {
     to: getTo(currentConversation?.value),
     conversationType: currentConversation?.value?.type,
     payload: {
-      file: e?.target,
+      file: e.target,
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   } as SendMessageParams;

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

@@ -13,7 +13,7 @@
     >
       <input
         ref="inputRef"
-        :title="TUITranslateService.t('图片')"
+        :title="props.title || TUITranslateService.t('图片')"
         type="file"
         accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp,image/webp,video/mov,video/mp4"
         @change="sendImageInWeb"
@@ -31,7 +31,6 @@ import {
   SendMessageOptions,
   TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
-import { TUIGlobal } from '@tencentcloud/universal-api';
 import vue from '../../../../adapter-vue';
 import { isPC, isH5 } from '../../../../utils/env';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
@@ -50,9 +49,12 @@ const props = defineProps({
     type: String,
     default: 'album',
   },
-  isH5ToolShow:{
-    type:Boolean,
-    default:false,
+  isH5ToolShow: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
   }
 });
 
@@ -61,11 +63,11 @@ const currentConversation = ref<IConversationModel>();
 const IMAGE_TOOLBAR_SHOW_MAP = {
   web_album: {
     icon: imageIcon,
-    title: TUITranslateService.t("图片"),
+    title: props.title || TUITranslateService.t("图片"),
   },
   uni_album: {
     icon: imageUniIcon,
-    title: TUITranslateService.t("图片"),
+    title: props.title || TUITranslateService.t("图片"),
   }
 };
 
@@ -95,15 +97,16 @@ const sendImageInWeb = (e: any) => {
     return;
   }
   const file = e.target.files[0];
-  console.log("file")
-  console.log(file)
-    if (file.type.startsWith('image/')) {
-      // 处理图片文件
-      sendImageMessage(e?.target);
-    } else if (file.type.startsWith('video/')) {
-      // 处理视频文件
-      sendVideoMessage(e?.target);
-    }
+  if (!file || !file.size) {
+    return;
+  }
+  if (file.type.startsWith('image/')) {
+    // 处理图片文件
+    sendImageMessage(e.target);
+  } else if (file.type.startsWith('video/')) {
+    // 处理视频文件
+    sendVideoMessage(e.target);
+  }
 
   e.target.value = '';
 };

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

@@ -40,10 +40,10 @@
           :isH5EmojiShow="isH5EmojiShow"
           @sendMessage="sendMessage"
         />
-        <ImageUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.IMAGE && item.isEnabled === 1" imageSourceType="album" :isH5ToolShow="isH5ToolShow"/>
-        <FileUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.FILE && item.isEnabled === 1" :isH5ToolShow="isH5ToolShow"/>
-        <VideoUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.VIDEO && item.isEnabled === 1" videoSourceType="album" :isH5ToolShow="isH5ToolShow"/>
-        <RatingTool v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.RATING && item.isEnabled === 1 && isInHumanService" :isH5ToolShow="isH5ToolShow"/>
+        <ImageUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.IMAGE && item.isEnabled === 1" imageSourceType="album" :isH5ToolShow="isH5ToolShow" :title="item.title"/>
+        <FileUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.FILE && item.isEnabled === 1" :isH5ToolShow="isH5ToolShow" :title="item.title"/>
+        <VideoUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.VIDEO && item.isEnabled === 1" videoSourceType="album" :isH5ToolShow="isH5ToolShow" :title="item.title"/>
+        <RatingTool v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.RATING && item.isEnabled === 1 && isInHumanService" :isH5ToolShow="isH5ToolShow" :title="item.title"/>
         <UserDefineTool
           v-else-if="item.isEnabled === 1 && item.isPreset === 0 && item.presetId !== INPUT_TOOLBAR_TYPE.EMOJI"
           :isH5ToolShow="isH5ToolShow"