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

package/components/CustomerServiceChat/index-web.vue

@@ -24,9 +24,13 @@
         :bottomQuickOrder="props.bottomQuickOrder"
         :showBottomQuickOrder="showBottomQuickOrder"
         @closeBottomQuickOrder="closeBottomQuickOrder"
+        :enableFeedback="props.enableFeedback"
+        :enableAINote="props.enableAINote"
+        @like="onLike"
+        @dislike="onDislike"
       />
       <MessageToolbarButton
-        v-if="!isH5 || (!Boolean(quoteMessage) && !showBottomQuickOrder)"
+        v-if="props.toolbarButtonList && (!isH5 || (!Boolean(quoteMessage) && !showBottomQuickOrder))"
         :toolbarButtonList="props.toolbarButtonList"
       />
       <MessageInputToolbar
@@ -82,6 +86,11 @@
           />
         </div>
       </div>
+        <FeedbackModal
+          ref="feedbackModalRef"
+          v-show="showFeedbackModal"
+          @close="() => { showFeedbackModal = false }"
+        />
     </div>
   </div>
 </template>
@@ -110,6 +119,7 @@ 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';
+import FeedbackModal from './feedback-modal/index.vue';
 const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
@@ -134,6 +144,9 @@ interface IProps {
   bottomQuickOrder?: QuickOrderModel;
   enableMultilingual?: number;
   langList?: Array<string>;
+  enableFeedback?: number;
+  enableAINote?: number;
+  enableURLDetection?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -151,6 +164,8 @@ const quoteMessage = ref<IMessageModel>();
 const showBottomQuickOrder = ref(false);
 const currentLanguage = ref('');
 const languageForShowList = ref<Array<string>>([]);
+const feedbackModalRef = ref();
+const showFeedbackModal = ref(false);
 let timezone = '';
 let countryID = '';
 const props = withDefaults(defineProps<IProps>(), {
@@ -171,7 +186,10 @@ const props = withDefaults(defineProps<IProps>(), {
   userNickName: '',
   showTyping: 0,
   enableMultilingual: 0,
+  enableFeedback: 0,
+  enableAINote: 1,
   langList: () => [],
+  enableURLDetection: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -283,6 +301,10 @@ const setShowTyping = () => {
   state.set('showTyping', props.showTyping);
 }
 
+const setEnableURLDetection = () => {
+  state.set('enableURLDetection', props.enableURLDetection);
+}
+
 try {
   const userContext = TUILogin.getContext();
   if (userContext.userID == '' && props.SDKAppID !==0 && props.userID !=='' && props.userSig !==''){
@@ -295,6 +317,7 @@ try {
   setAvatarNickName();
   setShowReadStatus();
   setShowTyping();
+  setEnableURLDetection();
   getTimeZoneAndCountry();
   if (isNonEmptyObject(props.bottomQuickOrder)) {
     showBottomQuickOrder.value = true;
@@ -437,6 +460,7 @@ function changeLanguage(languageCode: string) {
   Log.l(`multilingual: change language to ${languageCode}`);
   TUITranslateService.changeLanguage(languageCode).then(() => {
     currentLanguage.value = languageCode;
+    state.set('currentLanguage', languageCode);
     try {
       localStorage.setItem('AIDesk_language', languageCode);
     } catch {
@@ -458,6 +482,15 @@ function activeConversation() {
     },
   });
 }
+
+function onLike(messageInfo: Object) {
+  feedbackModalRef.value.onLike(messageInfo);
+}
+
+function onDislike(messageInfo: Object) {
+  showFeedbackModal.value = true;
+  feedbackModalRef.value.onDislike(messageInfo);
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

package/components/CustomerServiceChat/message-input/message-input-editor-web.vue

@@ -743,7 +743,6 @@ defineExpose({
 
   &-area {
     box-sizing: border-box;
-    font-family: PingFangSC-Regular;
     height: 100%;
     flex: 1;
     display: flex;

package/components/CustomerServiceChat/message-input/message-input-quote/index.vue

@@ -171,7 +171,6 @@ function onQuoteMessageUpdated(options?: {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-family: PingFangSC-Regular;
     }
   }
   .input-quote-content-h5 {
@@ -198,13 +197,11 @@ function onQuoteMessageUpdated(options?: {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-family: PingFangSC-Regular;
     }
 
     .input-quote-sender-h5 {
       font-size: 10px;
       color:#00000080;
-      font-family: PingFangSC-Regular;
     }
   }
 

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,14 +70,19 @@
                 :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)"/>
                   <MessageText
                     v-else-if="item.type === TYPES.MSG_TEXT"
                     :content="item.getMessageContent()"
+                    :flow="item.flow"
                   />
                   <ProgressMessage
                     v-else-if="item.type === TYPES.MSG_IMAGE"
@@ -151,6 +160,7 @@
       <ScrollButton
         ref="scrollButtonInstanceRef"
         @scrollToLatestMessage="scrollToLatestMessage"
+        @scrollNearToBottom="scrollNearToBottom"
       />
       <Dialog
         v-if="reSendDialogShow"
@@ -226,11 +236,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 +256,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 +372,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) {
+          updateCustomStore("canEndConversation", { conversationID, value: true });
           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) {
+          updateCustomStore("canEndConversation", { conversationID, value: true });
           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);
-        } else if (data.src === CUSTOM_MESSAGE_SRC.SESSION_RESTARTED) {
-          TUIStore.update(StoreName.CUSTOM, "isInSession", true);
+          updateCustomStore("canEndConversation", { conversationID, value: false });
+        } else if (data.src === CUSTOM_MESSAGE_SRC.GET_FEEDBACK_MENU) {
+          TUIStore.update(StoreName.CUSTOM, "feedbackTags", data.content.menu);
         }
       }
     }
@@ -385,6 +406,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 +463,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 +702,13 @@ async function scrollToLatestMessage() {
   }
   scrollButtonInstanceRef.value?.hideScrollButton();
   beforeHistoryGetScrollHeight.value = 0;
+  // 滚动到底部的时候，及时检查是否要上报已读回执
+  bindIntersectionObserver();
+}
+
+function scrollNearToBottom() {
+  // 滚动到底部的时候，及时检查是否要上报已读回执
+  bindIntersectionObserver();
 }
 
 const handelScrollListScroll = throttle(
@@ -693,67 +720,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 +816,14 @@ function sendBottomQuickOrder() {
   closeBottomQuickOrder();
 }
 
+function onLike(messageInfo: Object) {
+  emits('like', messageInfo);
+};
+
+function onDislike(messageInfo: Object) {
+  emits('dislike', messageInfo);
+};
+
 defineExpose({
   scrollToLatestMessage,
 });