@tencentcloud/ai-desk-customer-vue 1.3.0 → 1.5.0

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-file.vue

@@ -22,7 +22,7 @@ import {
   IMessageModel,
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
-import files from '../../../../assets/files.png';
+import files from '../../../../assets/files.svg';
 import { isUniFrameWork } from '../../../../utils/env';
 import type { IFileMessageContent } from '../../../../interface';
 const { withDefaults } = vue;

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/CustomerServiceChat/message-list/scroll-button/index.vue

@@ -64,7 +64,7 @@ watch(
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
-    newMessageList: onNewMessageListUpdated,
+    newMessageList: onNewMessageList,
   });
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdated,
@@ -74,7 +74,7 @@ onMounted(() => {
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
-    newMessageList: onNewMessageListUpdated,
+    newMessageList: onNewMessageList,
   });
   TUIStore.unwatch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdated,
@@ -97,7 +97,7 @@ function onMessageListUpdated(newMessageList: IMessageModel[]) {
   );
 }
 
-function onNewMessageListUpdated(newMessageList: IMessageModel[]) {
+function onNewMessageList(newMessageList: IMessageModel[]) {
   if (Array.isArray(newMessageList) && isScrollButtonVisible.value) {
     newMessageList.forEach((message: IMessageModel) => {
       if (

package/components/CustomerServiceChat/message-list/style/web.scss

@@ -48,7 +48,8 @@
     .tui-message-list {
       flex: 1;
       height: 100%;
-      overflow: auto;
+      overflow-y: auto;
+      overflow-x: hidden;
 
       .message-more {
         font-size: 14px;

package/components/CustomerServiceChat/message-toolbar-button/index.vue

@@ -1,75 +1,144 @@
 <template>
-    <div class="toolbar-button-container">
-        <template v-for="(item, index) in props.toolbarButtonList">
-            <div v-if="shouldRender(item)" :key="index"
-                :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(index)">
-                <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="18px" height="18px"/>
-                <div class="toolbar-button-text">
-                    {{ item.title }}
-                </div>
-
-            </div>
-        </template>
-    </div>
+  <div class="toolbar-button-container">
+    <template v-for="(item, index) in props.toolbarButtonList">
+      <ToolbarButtonHumanService v-if="item.presetId === TOOLBAR_BUTTON_TYPE.HUMAN_SERVICE && shouldRender(item) && !isInHumanService" :title="item.title" :icon="item.icon"/>
+      <ToolbarButtonServiceRating v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.SERVICE_RATING && shouldRender(item) && isInHumanService" :title="item.title" :icon="item.icon"/>
+      <ToolbarButtonEndHumanService v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.END_HUMAN_SERVICE && shouldRender(item) && isInHumanService" :title="item.title" :icon="item.icon"/>
+      <div v-else-if="shouldRender(item) && !item.presetId" :key="index"
+        :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(item, index)">
+        <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="18px" height="18px"/>
+        <div class="toolbar-button-text">
+            {{ item.title }}
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 <script lang="ts" setup>
+import vue from '../../../adapter-vue';
+const { ref, onMounted, onUnmounted } = vue;
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel
+} from '@tencentcloud/chat-uikit-engine';
 import { isH5 } from '../../../utils/env';
 import { ToolbarButtonModel } from '../../../interface';
 import Icon from '../../common/Icon.vue';
-
+import { TOOLBAR_BUTTON_TYPE } from '../../../constant';
+import { isEnabledMessageReadReceiptGlobal, openSafeUrl, getTo } from '../../../utils/utils';
+import ToolbarButtonHumanService from './toolbar-button-human-service.vue';
+import ToolbarButtonServiceRating from './toolbar-button-service-rating.vue';
+import ToolbarButtonEndHumanService from './toolbar-button-end-human-service.vue';
 interface IProps {
-    toolbarButtonList?: ToolbarButtonModel[]
+  toolbarButtonList?: ToolbarButtonModel[] | undefined;
 }
 
-const props = withDefaults(defineProps<IProps>(), {
-    toolbarButtonList: () => [] as ToolbarButtonModel[]
+const props = withDefaults(defineProps<IProps>(), {});
+
+const isInHumanService = ref(false);
+const currentConversation = ref<IConversationModel>();
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+  TUIStore.watch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
 });
 
-function onClick(index: number) {
-    if (typeof props.toolbarButtonList[index].clickEvent === 'function') {
-        props.toolbarButtonList[index].clickEvent();
-    }
+const onCurrentConversationUpdate = (conversation: IConversationModel) => {
+  currentConversation.value = conversation;
+}
+
+const onInHumanServiceUpdate = (value: boolean) => {
+  isInHumanService.value = value;
+};
+
+function onClick(item:ToolbarButtonModel, index: number) {
+  if (item.type === 1 && item.content) {
+    TUIChatService.sendTextMessage({
+      to: getTo(currentConversation?.value),
+      conversationType: currentConversation?.value?.type,
+      payload: {
+        text: item.content
+      },
+      needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    });
+  } else if (item.type === 2  && item.content) {
+    openSafeUrl(item.content);
+  } else if (props.toolbarButtonList !== undefined && typeof props.toolbarButtonList[index].clickEvent === 'function') {
+    props.toolbarButtonList[index].clickEvent();
+  }
 }
 
 function shouldRender(item: ToolbarButtonModel) {
+  if (item.isEnabled === 1) {
+    return true;
+  } else if (item.isEnabled === 0) {
+    return false;
+  } else if (item.renderCondition) {
     return typeof item.renderCondition === 'function' ? item.renderCondition() : false;
+  }
+  return false;
 }
 
 </script>
 <style>
 .toolbar-button-container {
-    display: flex;
-    flex-direction: row !important;
-    margin: 5px !important;
-    align-items: center ;
+  display: flex;
+  flex-direction: row !important;
+  margin: 5px !important;
+  align-items: center ;
+  overflow-x: auto; /* 允许横向滚动 */
+  scrollbar-width: none; /* Firefox 隐藏滚动条 */
+  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome 隐藏滚动条 */
+  }
 }
 
 .toolbar-button {
-    border: 1px solid #E7EAEF;
-    padding: 5px 10px;
-    border-radius: 20px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
-    white-space: nowrap;
-    user-select: none;
+  border: 1px solid #E7EAEF;
+  padding: 5px 10px;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.toolbar-button:first-child {
+  margin-left: 5px;
 }
 
 .toolbar-button-h5 {
-    border: none;
-    background-color: #fff;
-    box-shadow: 0px 2px 2px 0px rgba(70, 98, 140, 0.06);
+  border: none;
+  background-color: #fff;
+  box-shadow: 0px 2px 2px 0px rgba(70, 98, 140, 0.06);
 }
 
 .toolbar-button-icon {
-    margin-right: 3px;
+  margin-right: 3px;
 }
 .toolbar-button-text {
-    font-size: 12px;
-    text-overflow: ellipsis;
-    max-width: 100px;
-    overflow: hidden;
-    font-family: PingFangSC-Regular;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  max-width: 100px;
+  overflow: hidden;
+  font-family: PingFangSC-Regular;
 }
 </style>