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

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-rating/message-rating-star.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="message-rating-star">
-    <p class="rating-head">
+    <p class="rating-head-tail">
       {{ props.ratingTemplate.head }}
     </p>
     <div class="rating-card">
@@ -49,7 +49,7 @@
     </div>
     <p
       v-if="hasReply"
-      class="rating-tail"
+      class="rating-head-tail"
       :style="{
         marginTop: 20 + 'px',
       }"
@@ -125,17 +125,15 @@ export default {
     });
 
     const setValue = (val: number) => {
-      if (hasReply.value) {
-        return;
+      if (!hasReply.value && !hasExpire.value) {
+        value.value = val;
       }
-      value.value = val;
     };
 
     const setHoverValue = (value: number) => {
-      if (hasReply.value) {
-        return;
+      if (!hasReply.value && !hasExpire.value) {
+        hoverValue.value = value;
       }
-      hoverValue.value = value;
     };
 
     const submitRatingStar = async () => {
@@ -176,16 +174,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.rating-head {
-  font-size: 14px;
-  font-weight: 400;
-  color: #999;
-}
-
-.rating-tail {
+.rating-head-tail {
   font-size: 14px;
   font-weight: 400;
   color: #999;
+  word-break: break-word;
 }
 
 .card-title {
@@ -199,11 +192,11 @@ export default {
   border-radius: 20px;
   border: 0;
   margin-top: 10px;
-  padding-top: 20px;
-  padding-bottom: 20px;
-
+  min-width: 240px;
+  padding: 10px;
   button:disabled {
     background: #d8d8d8;
+    cursor: default;
   }
 }
 

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-robot-welcome.vue

@@ -164,6 +164,7 @@ export default {
     font-weight: 500;
     color: #1c66e5;
     gap: 10px;
+    word-break: break-word;
   }
 
   .welcome-item:hover {

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-stream.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="message-stream">
-    <span v-if="isCursorBlinking" class="blinking-cursor">|</span>
-    <pre ref="preRef" :class="['message-marked']" v-html="displayedContent" />
-  </div>
-  <div v-if="image" class="rich-image-previewer" @click="closeImage">
-    <img
-        class="rich-image-preview"
-        :src="imageSrc"
-    />
+  <div>
+    <div class="message-stream">
+      <span v-if="isCursorBlinking" class="blinking-cursor">|</span>
+      <pre ref="preRef" :class="['message-marked']" v-html="displayedContent" />
+    </div>
+    <div v-if="image" class="rich-image-previewer" @click="closeImage">
+      <img
+          class="rich-image-preview"
+          :src="imageSrc"
+      />
+    </div>
   </div>
 </template>
 
@@ -146,9 +148,11 @@ const closeImage = () => {
 <style lang="scss" scoped>
 .message-stream {
   overflow-wrap: break-word;
-  word-break: keep-all;
+  word-break: normal;
   white-space: normal;
   font-size: 14px;
+  font-family: PingFangSC-Regular;
+  user-select: text;
 }
 
 .blinking-cursor {

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-timeout-warning.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    {{ props.payload.content }}
+  </div>
+</template>
+
+<script lang="ts">
+import { customerServicePayloadType } from '../../../../../../interface';
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  setup(props: Props) {
+    return {
+      props,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/styles/common.scss

@@ -125,6 +125,7 @@
   margin: 0;
   padding: 0;
   font-family: PingFangSC-Regular;
+  user-select: text;
 
   .message-marked_code-container {
     display: flex;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-plugin-web.vue

@@ -1,6 +1,7 @@
 <template>
   <MessagePluginLayout
     :message="props.message"
+    :blinkMessageIDList="props.blinkMessageIDList"
     :showStyle="pluginMessageType.showStyle"
     :bubbleClassNameList="[
       pluginMessageType.pluginType === 'room' ? 'message-bubble-room' : '',
@@ -14,8 +15,12 @@
         v-if="pluginMessageType.pluginType === 'customer'"
         :message="props.message"
         @heightChanged="onHeightChanged"
+        @messageSent="onMessageSent"
       />
     </template>
+    <template #messageTip>
+      <TimeoutWarning :payload="payload"/>
+    </template>
   </MessagePluginLayout>
 </template>
 
@@ -29,6 +34,10 @@ import {
 } from './message-desk-elements/index';
 import MessagePluginLayout from './message-plugin-layout-web.vue';
 import MessageCustomerService from './message-desk-elements/message-desk.vue';
+import { CUSTOM_MESSAGE_SRC } from '../../../../../constant';
+import TimeoutWarning from './message-desk-elements/message-timeout-warning.vue';
+import { customerServicePayloadType } from '../../../../../interface';
+import { JSONToObject } from '../../../../../utils/index';
 const { computed } = vue;
 
 interface IProps {
@@ -46,18 +55,26 @@ const emits = defineEmits([
   'handleToggleMessageItem',
   'handleH5LongPress',
   'heightChanged',
+  'messageSent',
 ]);
 const messageModel = computed(() => TUIStore.getMessageModel(props.message.ID));
 
+const payload = computed<customerServicePayloadType>(() => {
+  return props.message && JSONToObject(props.message?.payload?.data);
+});
+
 const pluginMessageType = computed<{ pluginType: string; showStyle: string }>(
   () => {
     let typeObj = { pluginType: '', showStyle: '' };
     if (isCustomerServicePluginMessage(messageModel.value as any)) {
+      const src = payload.value.src;
       typeObj = {
-        pluginType: 'customer',
+        pluginType: src === CUSTOM_MESSAGE_SRC.TIMEOUT_WARNING ? 'customer_tip' : 'customer',
         showStyle: isCustomServiceMessageInvisible(messageModel.value as any)
           ? ''
-          : 'bubble',
+          : src === CUSTOM_MESSAGE_SRC.TIMEOUT_WARNING
+            ? 'tip'
+            : 'bubble',
       };
     }
     return typeObj;
@@ -81,6 +98,9 @@ const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
 const onHeightChanged = () => {
   emits('heightChanged');
 };
+const onMessageSent = () => {
+  emits('messageSent');
+};
 </script>
 
 <style lang="scss" scoped>

package/components/CustomerServiceChat/message-list/message-elements/message-quote/index-web.vue

@@ -1,10 +1,5 @@
 <template>
   <div style="display:flex;width: fit-content;">
-    <div v-if="hasQuoteContent&&isH5" :class="{
-      'mobile-left-box': true,
-      reverse: message.flow === 'out',
-        in:message.flow === 'in',
-    }"></div>
       <div
         v-if="hasQuoteContent"
         :class="{
@@ -218,8 +213,8 @@ async function scrollToOriginalMessage() {
   padding: 12px;
   font-size: 12px;
   color: #666;
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
+  word-break: normal;
   background-color: #fbfbfb;
   border-radius: 8px;
   line-height: 16.8px;
@@ -233,12 +228,12 @@ async function scrollToOriginalMessage() {
 .reverse.reference-content {
   margin-right: 44px;
   margin-left: auto;
-  border-radius: 0 8px 8px 0;
+  border-radius: 8px;
 }
 .isMobile.reference-content.in {
   margin-right: auto;
   background: #f3f4f7;
-  border-radius: 0 8px 8px 0;
+  border-radius: 8px;
 }
 .isMobile.reverse.reference-content {
   margin-right: 10px;
@@ -247,20 +242,6 @@ async function scrollToOriginalMessage() {
   color: white;
   
 }
-.mobile-left-box {
-  display:inline-block;
-    background: #FFFFFF33;
-    width: 5px;
-    margin-top: 4px;
-  border-radius: 8px 0 0 8px;
-}
-.mobile-left-box.in {
-  display:inline-block;
-  background: #e1e2e5;    
-  width: 5px;
-    margin-top: 4px;
-  border-radius: 8px 0 0 8px;
-}
 .revoked-text {
   color: #999;
 }
@@ -274,7 +255,8 @@ async function scrollToOriginalMessage() {
 .max-double-line {
   font-family: PingFangSC-Regular;
   font-size: 14px;
-  word-break: break-all;
+  overflow-wrap: break-word;
+  word-break: normal;
   overflow: hidden;
   display: -webkit-box;
   max-height: 33px;

package/components/CustomerServiceChat/message-list/message-elements/message-text.vue

@@ -84,15 +84,6 @@ watchEffect(() => {
 }
 
 .text {
-  white-space: pre-wrap;
-  font-size: 14px;
-  text-size-adjust: none;
-  font-family: PingFangSC-Regular;
-  overflow-wrap: break-word;
-  word-break: break-all;
-}
-
-.text:lang(en) {
   white-space: pre-wrap;
   font-size: 14px;
   text-size-adjust: none;

package/components/CustomerServiceChat/message-list/message-elements/read-status/index.vue

@@ -18,24 +18,24 @@ import TUIChatEngine, {
   IMessageModel,
   TUITranslateService,
 } from '@tencentcloud/chat-uikit-engine';
+import { ReadState } from '../../../../../constant';
 const { computed, ref, onMounted, onUnmounted } = vue;
 
 interface IProps {
   message: IMessageModel;
+  prevStatus: ReadState;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
   message: () => ({} as IMessageModel),
+  prevStatus: ReadState.Unread,
 });
-const ReadStatus = true;
-
-enum ReadState {
-  Read,
-  Unread,
-  AllRead,
-  NotShow,
-  PartiallyRead,
+const isInHumanService = ref(false);
+
+interface IEmits {
+  (e: 'setStatus', status:ReadState): void;
 }
+const emits = defineEmits<IEmits>();
 
 const TYPES = TUIChatEngine.TYPES;
 // User-level read receipt toggle has the highest priority.
@@ -48,18 +48,25 @@ onMounted(() => {
   TUIStore.watch(StoreName.USER, {
     displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
   });
+  TUIStore.watch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.USER, {
     displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
   });
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
 });
 
+const onInHumanServiceUpdate = (value: boolean) => {
+  isInHumanService.value = value;
+};
+
 const isShowReadStatus = computed<boolean>(() => {
-  if (!ReadStatus) {
-    return false;
-  }
   if (!isDisplayMessageReadReceipt.value) {
     return false;
   }
@@ -127,23 +134,27 @@ const readState = computed<ReadState>(() => {
       return isPeerRead ? ReadState.Read : ReadState.Unread;
     }
   } else if (conversationType === 'GROUP') {
-    if (needReadReceipt) {
-      if (readCount === 0) {
-        return ReadState.Unread;
-      } else if (unreadCount === 0) {
-        return ReadState.AllRead;
-      } else {
-        return ReadState.PartiallyRead;
-      }
-    } else {
+    if (!needReadReceipt) {
       return ReadState.NotShow;
     }
+    if (!isInHumanService.value) {
+      return ReadState.AllRead;
+    }
+    // 特殊判断： 群里只有1人时设置已读 （未接到人工时）
+    if (readCount === 0) {
+      return props.prevStatus === ReadState.AllRead ? ReadState.AllRead : ReadState.Unread;
+    } else if (unreadCount === 0) {
+      return ReadState.AllRead;
+    } else {
+      return ReadState.PartiallyRead;
+    }
   }
   return ReadState.Unread;
 });
 
 const readStatusText = computed(() => {
   const { readCount = 0 } = props.message.readReceiptInfo;
+  emits('setStatus', readState.value);
   switch (readState.value) {
     case ReadState.Read:
       return TUITranslateService.t('TUIChat.已读');

package/components/CustomerServiceChat/message-list/message-elements/simple-message-list/index.vue

@@ -374,7 +374,8 @@ function resolveBigFaceUrl(bigFaceKey: string): string {
     .text {
       vertical-align: bottom;
       display: inline;
-      word-break: break-all;
+      overflow-wrap: break-word;
+      word-break: normal;
     }
 
     .simple-emoji {

package/components/common/Toast/index-web.vue

@@ -127,7 +127,8 @@ const handleStyle = (type?: string) => {
     border-radius: 3px;
     padding: 10px 15px;
     width: fit-content;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    word-break: normal;
   }
 }
 
@@ -148,7 +149,8 @@ const handleStyle = (type?: string) => {
     font-size: 14px;
     letter-spacing: 0;
     text-align: center;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    word-break: normal;
   }
 }
 

package/constant.ts

@@ -33,6 +33,7 @@ export const CUSTOM_MESSAGE_SRC = {
   MULTI_FORM: '33',
   THINKING: '35',
   CONCURRENCY_LIMIT: '36',
+  TIMEOUT_WARNING: '37',
 };
 
 // im message extra type
@@ -140,6 +141,7 @@ export const WHITE_LIST = [
   CUSTOM_MESSAGE_SRC.MULTI_FORM,
   CUSTOM_MESSAGE_SRC.CONCURRENCY_LIMIT,
   CUSTOM_MESSAGE_SRC.ORDER,
+  CUSTOM_MESSAGE_SRC.TIMEOUT_WARNING,
 ];
 
 export const TOOLBAR_BUTTON_TYPE = {
@@ -155,4 +157,12 @@ export const INPUT_TOOLBAR_TYPE = {
   RATING: 'rating',
 }
 
-export const USER_DEFAULT_AVATAR = 'https://web.sdk.qcloud.com/im/desk/assets/user_default_avatar.png';
+export const USER_DEFAULT_AVATAR = 'https://web.sdk.qcloud.com/im/desk/assets/user_default_avatar.png';
+
+export enum ReadState {
+  Read,
+  Unread,
+  AllRead,
+  NotShow,
+  PartiallyRead,
+}

package/locales/en/aidesk.ts

@@ -1,19 +1,31 @@
 const AIDesk = {
-    "结束人工会话": "End human service",
-    "转人工服务": "Human service",
-    "跳转": "Goto",
-    "立即填写": "Fill now",
-    "已提交": "Submitted",
-    "提交": "Submit",
-    "查看内容": "View content",
-    "请填写必填项": "Please fill in the required fields",
-    "Hi，我是": "Hi, I'm ",
-    "请输入内容":"Please enter the content",
-    "如果满意请给好评哦～":"If you're satisfied, please give a good review~",
-    "请对本次服务进行评价": "Please rate this service",
-    "提交评价": "Feedback",
-    "并发限制": "There are currently too many users accessing the service. Please try again later",
-    "分支选项异常": "Content is abnormal, please check the task flow configuration",
-    "服务评价": "Feedback",
+  "结束人工会话": "End human service",
+  "转人工服务": "Human service",
+  "跳转": "Goto",
+  "立即填写": "Fill now",
+  "已提交": "Submitted",
+  "提交": "Submit",
+  "查看内容": "View content",
+  "请填写必填项": "Please fill in the required fields",
+  "Hi，我是": "Hi, I'm ",
+  "请输入内容":"Please enter the content",
+  "如果满意请给好评哦～":"If you're satisfied, please give a good review~",
+  "请对本次服务进行评价": "Please rate this service",
+  "提交评价": "Feedback",
+  "并发限制": "There are currently too many users accessing the service. Please try again later",
+  "分支选项异常": "Content is abnormal, please check the task flow configuration",
+  "服务评价": "Feedback",
+  "满意":"Satisfied",
+  "不满意":"Dissatisfied",
+  "感谢您的反馈，我们会持续优化改进":"Thank you for your feedback, we will continue to improve",
+  "您遇到了哪方面的问题":"What problem did you encounter",
+  "其他反馈内容":"Other feedback",
+  "取消":"Cancel",
+  "答非所问":"Irrelevant answer",
+  "未匹配相关内容":"No relevant content matched",
+  "信息错误":"Incorrect information",
+  "上下文理解错误":"Context misunderstanding",
+  "格式不规范":"Improper format",
+  "内容不完整":"Incomplete content",
 }
 export default AIDesk;

package/locales/fil/aidesk.ts

@@ -1,19 +1,31 @@
 const AIDesk = {
-    "结束人工会话":"Tapusin ang Usapan",
-    "转人工服务": "Ilipat sa Serbisyo ng Tao",
-    "跳转":"Tumalon",
-    "立即填写": "Punan Agad",
-    "已提交": "Naisumite Na",
-    "提交": "Isumite",
-    "查看内容": "Tingnan ang Nilalaman",
-    "请填写必填项": "Mangyaring punan ang mga kinakailangang field",
-    "Hi，我是": "Hi, ako ",
-    "请输入内容":"Pakilagay ang nilalaman",
-    "如果满意请给好评哦～":"Kung nasiyahan ka, mangyaring magbigay ng magandang pagsusuri~",
-    "请对本次服务进行评价": "Mangyaring suriin ang serbisyong ito",
-    "提交评价": "Ipasa ang pagsusuri",
-    "并发限制": "Maraming tao ang naghahanap ng tulong ngayon, subukan muli mamaya",
-    "分支选项异常": "Ang nilalaman ay abnormal, pakisuri ang configuration ng task flow",
-    "服务评价": "Pagsusuri ng Serbisyo",
+  "结束人工会话":"Tapusin ang Usapan",
+  "转人工服务": "Ilipat sa Serbisyo ng Tao",
+  "跳转":"Tumalon",
+  "立即填写": "Punan Agad",
+  "已提交": "Naisumite Na",
+  "提交": "Isumite",
+  "查看内容": "Tingnan ang Nilalaman",
+  "请填写必填项": "Mangyaring punan ang mga kinakailangang field",
+  "Hi，我是": "Hi, ako ",
+  "请输入内容":"Pakilagay ang nilalaman",
+  "如果满意请给好评哦～":"Kung nasiyahan ka, mangyaring magbigay ng magandang pagsusuri~",
+  "请对本次服务进行评价": "Mangyaring suriin ang serbisyong ito",
+  "提交评价": "Ipasa ang pagsusuri",
+  "并发限制": "Maraming tao ang naghahanap ng tulong ngayon, subukan muli mamaya",
+  "分支选项异常": "Ang nilalaman ay abnormal, pakisuri ang configuration ng task flow",
+  "服务评价": "Pagsusuri ng Serbisyo",
+  "满意":"Nasisiyahan",
+  "不满意":"Hindi nasisiyahan",
+  "感谢您的反馈，我们会持续优化改进":"Salamat sa iyong feedback, patuloy naming pagbubutihin",
+  "您遇到了哪方面的问题":"Anong problema ang iyong naranasan",
+  "其他反馈内容":"Iba pang feedback",
+  "取消":"Kanselahin",
+  "答非所问":"Hindi nauugnay na sagot",
+  "未匹配相关内容":"Walang katugmang nilalaman",
+  "信息错误":"Maling impormasyon",
+  "上下文理解错误":"Maling pag-unawa sa konteksto",
+  "格式不规范":"Hindi tamang pormat",
+  "内容不完整":"Hindi kumpletong nilalaman",
 }
 export default AIDesk;

package/locales/id/aidesk.ts

@@ -1,19 +1,31 @@
 const AIDesk = {
-    "结束人工会话": "Selesai",
-    "转人工服务": "Layanan manusia",
-    "跳转": "Goto",
-    "立即填写": "Isi sekarang",
-    "已提交": "Terkirim",
-    "提交": "Kirim",
-    "查看内容": "Lihat konten",
-    "请填写必填项": "Harap isi bidang yang wajib diisi",
-    "Hi，我是": "Hai, saya adalah ",
-    "请输入内容":"Silakan masukkan konten",
-    "如果满意请给好评哦～":"Jika Anda puas, silakan berikan ulasan yang bagus~",
-    "请对本次服务进行评价": "Silakan beri penilaian untuk layanan ini",
-    "提交评价": "Kirim Ulasan",
-    "服务评价": "Ulasan Layanan",
-    "并发限制": "Saat ini banyak pengguna yang mengakses. Mohon coba lagi nanti",
-    "分支选项异常": "Konten tidak normal, silakan periksa konfigurasi alur tugas"
+	"结束人工会话": "Selesai",
+	"转人工服务": "Layanan manusia",
+	"跳转": "Goto",
+	"立即填写": "Isi sekarang",
+	"已提交": "Terkirim",
+	"提交": "Kirim",
+	"查看内容": "Lihat konten",
+	"请填写必填项": "Harap isi bidang yang wajib diisi",
+	"Hi，我是": "Hai, saya adalah ",
+	"请输入内容":"Silakan masukkan konten",
+	"如果满意请给好评哦～":"Jika Anda puas, silakan berikan ulasan yang bagus~",
+	"请对本次服务进行评价": "Silakan beri penilaian untuk layanan ini",
+	"提交评价": "Kirim Ulasan",
+	"服务评价": "Ulasan Layanan",
+	"并发限制": "Saat ini banyak pengguna yang mengakses. Mohon coba lagi nanti",
+	"分支选项异常": "Konten tidak normal, silakan periksa konfigurasi alur tugas",
+	"满意":"Puas",
+	"不满意":"Tidak puas",
+	"感谢您的反馈，我们会持续优化改进":"Terima kasih atas masukan Anda, kami akan terus memperbaiki",
+	"您遇到了哪方面的问题":"Masalah apa yang Anda hadapi",
+	"其他反馈内容":"Masukan lainnya",
+	"取消":"Batal",
+	"答非所问":"Jawaban tidak relevan",
+	"未匹配相关内容":"Tidak ada konten yang cocok",
+	"信息错误":"Informasi salah",
+	"上下文理解错误":"Kesalahan pemahaman konteks",
+	"格式不规范":"Format tidak standar",
+	"内容不完整":"Konten tidak lengkap",
 }
 export default AIDesk;