@tencentcloud/ai-desk-customer-vue 1.5.6 → 1.5.8

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

@@ -148,8 +148,10 @@ const onCurrentConversationUpdate = (conversation: IConversationModel) => {
     = currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
 };
 
-const onInHumanServiceUpdate = (value: boolean) => {
-  isInHumanService.value = value;
+const onInHumanServiceUpdate = (data: {conversationID: string, value: boolean}) => {
+  if (data && data.conversationID === currentConversation.value.conversationID) {
+    isInHumanService.value = data.value;
+  }
 };
 
 const insertEmoji = (emojiObj: object) => {

package/components/CustomerServiceChat/message-list/bottom-quick-order/index.vue

@@ -100,7 +100,6 @@ const closeOrder = () => {
   border-radius: 8px;
   margin: 0 10px 0 10px;
   position: relative;
-  font-family: PingFangSC-Regular;
 }
 .bottom-quick-order-container-pc {
   width: 300px;

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

@@ -49,6 +49,10 @@
               @handleH5LongPress="handleH5LongPress"
               @heightChanged="onHeightChanged"
               @messageSent="onMessageSent"
+              :enableFeedback="props.enableFeedback"
+              :enableAINote="props.enableAINote"
+              @like="onLike"
+              @dislike="onDislike"
             />
             <div
               v-else
@@ -66,8 +70,12 @@
                 :isAudioPlayed="Boolean(audioPlayedMapping[item.ID])"
                 :blinkMessageIDList="blinkMessageIDList"
                 :messageItem="JSON.parse(JSON.stringify(item))"
+                :enableFeedback="props.enableFeedback"
+                :enableAINote="props.enableAINote"
                 @blinkMessage="blinkMessage"
                 @resendMessage="resendMessage(item)"
+                @like="onLike"
+                @dislike="onDislike"
               >
                 <template #messageElement>
                   <MessageThinking v-if="isThinkingMessage(item)"/>
@@ -151,6 +159,7 @@
       <ScrollButton
         ref="scrollButtonInstanceRef"
         @scrollToLatestMessage="scrollToLatestMessage"
+        @scrollNearToBottom="scrollNearToBottom"
       />
       <Dialog
         v-if="reSendDialogShow"
@@ -226,11 +235,13 @@ import {
   isEnabledMessageReadReceiptGlobal,
   deepCopy,
   isNonEmptyObject,
+  updateCustomStore,
 } from '../../../utils/utils';
 import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime, JSONToObject, isTransferMessageWithoutDesc } from '../../../utils/index';
 import { isCustomerConversation } from '../../../index';
 import { CUSTOM_MESSAGE_SRC } from '../../../constant';
 import { QuickOrderModel } from '../../../interface';
+import Log from '../../../utils/logger';
 
 interface ScrollConfig {
   scrollToMessage?: IMessageModel;
@@ -244,15 +255,21 @@ interface ScrollConfig {
 interface IProps {
   bottomQuickOrder?: QuickOrderModel;
   showBottomQuickOrder: boolean;
+  enableFeedback: number;
+  enableAINote: number;
 }
 const props = withDefaults(defineProps<IProps>(), {
   showBottomQuickOrder: false,
+  enableFeedback: 0,
+  enableAINote: 1,
 });
 
 interface IEmits {
   (key: 'closeInputToolBar'): void;
   (key: 'handleEditor', message: IMessageModel, type: string): void;
   (key: 'closeBottomQuickOrder'): void;
+  (key: 'like', messageInfo: Object): void;
+  (key: 'dislike', messageInfo: Object): void;
 }
 
 const emits = defineEmits<IEmits>();
@@ -354,29 +371,32 @@ function onNewMessageList(list: IMessageModel[]) {
   list.forEach((message:IMessageModel) => {
     if (message.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
       const data = JSONToObject(message.payload.data);
+      const conversationID = message.conversationID;
       if (data) {
         if (data.src === CUSTOM_MESSAGE_SRC.BOT_STATUS) {
           if (data.content.content === 'inBot') {
-            TUIStore.update(StoreName.CUSTOM, "isInHumanService", false);
+            updateCustomStore("isInHumanService", { conversationID, value: false });
           }
         } else if (data.src === CUSTOM_MESSAGE_SRC.SEAT_STATUS) {
           if (data.content.command === "updateSeatStatus") {
             if (data.content.content === 'inSeat') {
-              TUIStore.update(StoreName.CUSTOM, "isInHumanService", true);
+              updateCustomStore("isInHumanService", { conversationID, value: true });
             } else if (data.content.content === 'outSeat') {
-              TUIStore.update(StoreName.CUSTOM, "isInHumanService", false);
+              updateCustomStore("isInHumanService", { conversationID, value: false });
             }
           }
         } else if (data.src === CUSTOM_MESSAGE_SRC.TYPING_STATE) {
           if (data.typingStatus === 1) {
-            TUIStore.update(StoreName.CUSTOM, 'isTyping', true);
+            updateCustomStore("isTyping", { conversationID, value: true });
           } else {
-            TUIStore.update(StoreName.CUSTOM, 'isTyping', false);
+            updateCustomStore("isTyping", { conversationID, value: false });
           }
         } else if (data.src === CUSTOM_MESSAGE_SRC.NO_SEAT_ONLINE || data.src === CUSTOM_MESSAGE_SRC.TIMEOUT || data.src === CUSTOM_MESSAGE_SRC.END) {
-          TUIStore.update(StoreName.CUSTOM, "isInSession", false);
+          updateCustomStore("isInSession", { conversationID, value: false });
         } else if (data.src === CUSTOM_MESSAGE_SRC.SESSION_RESTARTED) {
-          TUIStore.update(StoreName.CUSTOM, "isInSession", true);
+          updateCustomStore("isInSession", { conversationID, value: true });
+        } else if (data.src === CUSTOM_MESSAGE_SRC.GET_FEEDBACK_MENU) {
+          TUIStore.update(StoreName.CUSTOM, "feedbackTags", data.content.menu);
         }
       }
     }
@@ -385,6 +405,7 @@ function onNewMessageList(list: IMessageModel[]) {
 
 async function onMessageListUpdated(list: IMessageModel[]) {
   if (!isCustomerConversation(currentConversationID.value)) {
+    Log.w(`Messages filtered as they are not customer service messages. currentConversationID: ${currentConversationID.value}`);
     return;
   }
   observer?.disconnect();
@@ -441,9 +462,7 @@ async function onMessageListUpdated(list: IMessageModel[]) {
     await scrollToPosition({ scrollToBottom: true });
   }
   currentLastMessage.value = Object.assign({}, newLastMessage);
-  if (isEnabledMessageReadReceiptGlobal()) {
-    nextTick(() => bindIntersectionObserver());
-  }
+  nextTick(() => bindIntersectionObserver());
 }
 
 function isCurrentListInBottomPosition() {
@@ -682,6 +701,13 @@ async function scrollToLatestMessage() {
   }
   scrollButtonInstanceRef.value?.hideScrollButton();
   beforeHistoryGetScrollHeight.value = 0;
+  // 滚动到底部的时候，及时检查是否要上报已读回执
+  bindIntersectionObserver();
+}
+
+function scrollNearToBottom() {
+  // 滚动到底部的时候，及时检查是否要上报已读回执
+  bindIntersectionObserver();
 }
 
 const handelScrollListScroll = throttle(
@@ -693,67 +719,62 @@ const handelScrollListScroll = throttle(
 );
 
 async function bindIntersectionObserver() {
-  if (
-    !messageList.value
-    || !messageListRef.value
-    || messageList.value.length === 0
-  ) {
+  if (!messageList.value || !messageListRef.value || messageList.value.length === 0) {
     return;
   }
 
-  const mappingFromIDToMessage: Record<
-    string,
-    {
-      msgDom: HTMLElement;
-      msgModel: IMessageModel | undefined;
-    }
-  > = {};
+  if (!isEnabledMessageReadReceiptGlobal()) {
+    return;
+  }
 
-  observer?.disconnect();
-  observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        const { isIntersecting, target } = entry;
-        if (isIntersecting) {
-          const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
-          if (
-            msgModel
-            && !msgModel.readReceiptInfo?.isPeerRead
-            && !sentReceiptMessageIDSet.has(msgModel.ID)
-          ) {
+  const mappingFromIDToMessage: Record<string, { msgDom: HTMLElement; msgModel: IMessageModel | undefined; }> = {};
+
+  if (observer) {
+    observer.disconnect();
+  }
+  observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      const { isIntersecting, target } = entry;
+      if (isIntersecting) {
+        const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
+        if (msgModel) {
+          const { readReceiptInfo, ID, payload } = msgModel;
+          if (!readReceiptInfo.isPeerRead && !sentReceiptMessageIDSet.has(ID)) {
             TUIChatService.sendMessageReadReceipt([msgModel]);
-            sentReceiptMessageIDSet.add(msgModel.ID);
-            observer?.unobserve(msgDom);
+            sentReceiptMessageIDSet.add(ID);
+            Log.l(`Receipt sent. ID:${ID} payload:${JSON.stringify(payload)}`);
+            if (observer) {
+              observer.unobserve(msgDom);
+            }
           }
         }
-      });
-    },
-    {
-      root: messageListRef.value,
-      threshold: 0.7,
-    },
-  );
+      }
+    });
+  }, {
+    root: messageListRef.value,
+    threshold: 0.3, // 超过1/4可见时触发，提高灵敏度
+  });
 
-  const arrayOfMessageLi
-    = messageListRef.value?.querySelectorAll('.message-li');
+  const arrayOfMessageLi = messageListRef.value?.querySelectorAll('.message-li');
   if (arrayOfMessageLi) {
-    for (let i = 0; i < arrayOfMessageLi?.length; ++i) {
+    for (let i = 0, length = arrayOfMessageLi.length; i < length; i++) {
       const messageElement = arrayOfMessageLi[i] as HTMLElement;
-      const matchingMessage = messageList.value.find(
-        (message: IMessageModel) => {
-          return messageElement.id.slice(4) === message.ID;
-        },
-      );
-      if (
-        matchingMessage
-        && matchingMessage.needReadReceipt
-        && matchingMessage.flow === 'in'
-      ) {
-        mappingFromIDToMessage[messageElement.id] = {
-          msgDom: messageElement,
-          msgModel: matchingMessage,
-        };
-        observer?.observe(messageElement);
+      const matchingMessage = messageList.value.find((message: IMessageModel) => {
+        // replace tui-
+        return messageElement.id.slice(4) === message.ID;
+      });
+      if (matchingMessage) {
+        const { needReadReceipt, readReceiptInfo, flow } = matchingMessage;
+        // 收到的消息需要已读回执，但我尚未发送
+        if (needReadReceipt && flow === 'in' && !readReceiptInfo.isPeerRead) {
+          mappingFromIDToMessage[messageElement.id] = {
+            msgDom: messageElement,
+            msgModel: matchingMessage,
+          };
+          if (observer) {
+            observer.observe(messageElement);
+          }
+        }
       }
     }
   }
@@ -794,6 +815,14 @@ function sendBottomQuickOrder() {
   closeBottomQuickOrder();
 }
 
+function onLike(messageInfo: Object) {
+  emits('like', messageInfo);
+};
+
+function onDislike(messageInfo: Object) {
+  emits('dislike', messageInfo);
+};
+
 defineExpose({
   scrollToLatestMessage,
 });