@tencentcloud/ai-desk-customer-vue 0.1.0

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

@@ -0,0 +1,712 @@
+<template>
+  <div
+    class="tui-chat"
+    :class="[isH5 ? 'tui-chat-h5' : '']"
+  >
+    <div
+      id="tui-chat-main"
+      class="tui-chat-main"
+      @click="closeChatPop"
+    >
+      <!-- Message List -->
+      <ul
+        id="messageScrollList"
+        ref="messageListRef"
+        class="tui-message-list"
+        @click="onMessageListBackgroundClick"
+      >
+        <p
+          v-if="!isCompleted"
+          class="message-more"
+          @click="getHistoryMessageList"
+        >
+          {{ TUITranslateService.t("TUIChat.查看更多") }}
+        </p>
+        <li
+          v-for="(item, index) in messageList"
+          :id="'tui-' + item.ID"
+          :key="item.ID"
+          ref="messageElementListRef"
+          class="message-li"
+        >
+          <MessageTimestamp
+            :currTime="item.time"
+            :prevTime="index > 0 ? messageList[index - 1].time : 0"
+          />
+          <div class="message-item">
+            <MessageRevoked
+              v-if="item.isRevoked"
+              :isEdit="item.type === TYPES.MSG_TEXT"
+              :messageItem="item"
+              @messageEdit="handleEdit(item)"
+            />
+            <MessagePlugin
+              v-else-if="isPluginMessage(item)"
+              :message="deepCopy(item)"
+              :blinkMessageIDList="blinkMessageIDList"
+              @resendMessage="resendMessage"
+              @handleToggleMessageItem="handleToggleMessageItem"
+              @handleH5LongPress="handleH5LongPress"
+            />
+            <div
+              v-else
+              :class="{
+                'message-event-bind-div': true,
+              }"
+              @longpress="handleToggleMessageItem($event, item, true)"
+              @click.prevent.right="handleToggleMessageItemForPC($event, item)"
+              @touchstart="handleH5LongPress($event, item, 'touchstart')"
+              @touchend="handleH5LongPress($event, item, 'touchend')"
+              @mouseover="handleH5LongPress($event, item, 'touchend')"
+            >
+              <MessageBubble
+                :content="item.getMessageContent()"
+                :isAudioPlayed="Boolean(audioPlayedMapping[item.ID])"
+                :blinkMessageIDList="blinkMessageIDList"
+                :messageItem="JSON.parse(JSON.stringify(item))"
+                @blinkMessage="blinkMessage"
+                @resendMessage="resendMessage(item)"
+              >
+                <template #messageElement>
+                  <MessageText
+                    v-if="item.type === TYPES.MSG_TEXT"
+                    :content="item.getMessageContent()"
+                  />
+                  <ProgressMessage
+                    v-else-if="item.type === TYPES.MSG_IMAGE"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  >
+                    <MessageImage
+                      :content="item.getMessageContent()"
+                      :messageItem="item"
+                      @previewImage="handleImagePreview"
+                    />
+                  </ProgressMessage>
+                  <ProgressMessage
+                    v-else-if="item.type === TYPES.MSG_VIDEO"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  >
+                    <MessageVideo
+                      :content="item.getMessageContent()"
+                      :messageItem="item"
+                    />
+                  </ProgressMessage>
+                  <MessageAudio
+                    v-else-if="item.type === TYPES.MSG_AUDIO"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                    @setAudioPlayed="setAudioPlayed"
+                  />
+                  <ProgressMessage
+                    v-else-if="item.type === TYPES.MSG_FILE"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  >
+                    <MessageFile
+                      :content="item.getMessageContent()"
+                      :messageItem="item"
+                    />
+                  </ProgressMessage>
+                  <MessageRecord
+                    v-else-if="item.type === TYPES.MSG_MERGER"
+                    :renderData="item.payload"
+                    :messageItem="item"
+                  />
+                  <MessageFace
+                    v-else-if="item.type === TYPES.MSG_FACE"
+                    :content="item.getMessageContent()"
+                  />
+                  <MessageLocation
+                    v-else-if="item.type === TYPES.MSG_LOCATION"
+                    :content="item.getMessageContent()"
+                  />
+                  <MessageCustom
+                    v-else-if="item.type === TYPES.MSG_CUSTOM"
+                    :content="item.getMessageContent()"
+                    :messageItem="item"
+                  />
+                </template>
+              </MessageBubble>
+            </div>
+            <!-- message tool -->
+            <MessageTool
+              v-if="item.ID === toggleID"
+              ref="messageToolListRef"
+              :class="{
+                'message-tool': true,
+                'message-tool-out': item.flow === 'out',
+                'message-tool-in': item.flow === 'in',
+                'message-tool-bottom': isTopMessageDom,
+              }"
+              :messageItem="item"
+            />
+          </div>
+        </li>
+      </ul>
+      <ScrollButton
+        ref="scrollButtonInstanceRef"
+        @scrollToLatestMessage="scrollToLatestMessage"
+      />
+      <Dialog
+        v-if="reSendDialogShow"
+        class="resend-dialog"
+        :show="reSendDialogShow"
+        :isH5="!isPC"
+        :center="true"
+        :isHeaderShow="isPC"
+        @submit="resendMessageConfirm()"
+        @update:show="(e) => (reSendDialogShow = e)"
+      >
+        <p class="delDialog-title">
+          {{ TUITranslateService.t("TUIChat.确认重发该消息？") }}
+        </p>
+      </Dialog>
+      <ImagePreviewer
+        v-if="showImagePreview"
+        :currentImage="currentImagePreview"
+        :imageList="imageMessageList"
+        @close="onImagePreviewerClose"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../adapter-vue';
+const { ref, nextTick, computed, onMounted, onUnmounted }  = vue;
+import TUIChatEngine, {
+  IMessageModel,
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+import {
+  outsideClick,
+  getBoundingClientRect,
+  getScrollInfo,
+} from '@tencentcloud/universal-api';
+import { throttle } from 'lodash';
+import MessageText from './message-elements/message-text.vue';
+import MessageImage from './message-elements/message-image-web.vue';
+import MessageAudio from './message-elements/message-audio-web.vue';
+import MessageRecord from './message-elements/message-record/index.vue';
+import MessageFile from './message-elements/message-file.vue';
+import MessageFace from './message-elements/message-face.vue';
+import MessageCustom from './message-elements/message-custom.vue';
+import MessageBubble from './message-elements/message-bubble-web.vue';
+import MessageLocation from './message-elements/message-location.vue';
+import MessageTimestamp from './message-elements/message-timestamp.vue';
+import MessageVideo from './message-elements/message-video-web.vue';
+import MessageTool from './message-tool/index-web.vue';
+import MessageRevoked from './message-tool/message-revoked.vue';
+import MessagePlugin from '../message-list/message-elements/plugins/plugin-components/message-plugin-web.vue';
+import ScrollButton from './scroll-button/index.vue';
+import { isPluginMessage } from '../message-list/message-elements/plugins/plugin-components/index';
+import Dialog from '../../common/Dialog/index.vue';
+import ImagePreviewer from '../../common/ImagePreviewer/index-web.vue';
+import ProgressMessage from '../../common/ProgressMessage/index.vue';
+import { isPC, isH5 } from '../../../utils/env';
+import chatStorage from '../../../utils/chatStorage';
+import {
+  isEnabledMessageReadReceiptGlobal,
+  deepCopy,
+} from '../../../utils/utils';
+import { isMessageInvisible } from '../../../utils/index';
+// import {TUICustomerServer} from '../../../server';
+import {isCustomerConversation,getCustomerServiceAccounts,setCustomerServiceAccounts} from '../../../index';
+
+interface ScrollConfig {
+  scrollToMessage?: IMessageModel;
+  scrollToBottom?: boolean;
+  scrollToOffset?: {
+    top?: number;
+    bottom?: number;
+  };
+}
+
+interface IEmits {
+  (key: 'closeInputToolBar'): void;
+  (key: 'handleEditor', message: IMessageModel, type: string): void;
+}
+
+const emits = defineEmits<IEmits>();
+
+let observer: IntersectionObserver | null = null;
+const sentReceiptMessageIDSet = new Set<string>();
+const messageListRef = ref<HTMLElement>();
+const messageToolListRef = ref<Array<{ messageToolDom: HTMLElement }>>();
+// The messageList displayed on the screen, not including messages where isDeleted is true
+const messageList = ref<IMessageModel[]>();
+// All messageList, including messages where isDeleted is true
+const allMessageList = ref<IMessageModel[]>();
+const isCompleted = ref(false);
+const currentConversationID = ref('');
+const currentLastMessage = ref<IMessageModel>();
+const nextReqMessageID = ref();
+const toggleID = ref('');
+const TYPES = ref(TUIChatEngine.TYPES);
+const isLongpressing = ref(false);
+const messageTarget = ref<IMessageModel>();
+const messageElementListRef = ref<HTMLElement[] | null>();
+const targetMessageDom = ref<HTMLElement | null>();
+const blinkMessageIDList = ref<string[]>([]);
+const scrollButtonInstanceRef = ref<InstanceType<typeof ScrollButton>>();
+const beforeHistoryGetScrollHeight = ref<number>(0);
+const isTopMessageDom = ref<boolean>(false);
+const audioPlayedMapping = ref<Record<string, boolean>>({});
+
+// image preview
+const showImagePreview = ref(false);
+const currentImagePreview = ref<IMessageModel>();
+const imageMessageList = computed(() =>
+  messageList?.value?.filter((item: IMessageModel) => {
+    return (
+      !item.isRevoked
+      && !item.hasRiskContent
+      && item.type === TYPES.value.MSG_IMAGE
+    );
+  }),
+);
+
+// resend message dialog
+const reSendDialogShow = ref(false);
+const resendMessageData = ref();
+
+onMounted(() => {
+  // Retrieve the information about whether the audio has been played from localStorage
+  audioPlayedMapping.value
+    = chatStorage.getChatStorage('audioPlayedMapping') || {};
+
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+  });
+
+  TUIStore.watch(StoreName.CHAT, {
+    messageList: onMessageListUpdated,
+    messageSource: onMessageSourceUpdated,
+    isCompleted: isCompletedUpdated,
+  });
+
+
+  TUIStore.watch(StoreName.CUSTOM, {
+    isShowMessagePopMenu: isShowMessagePopMenuUpdated,
+  });
+});
+
+onMounted(() => {
+  messageListRef.value?.addEventListener('scroll', handelScrollListScroll);
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    messageList: onMessageListUpdated,
+    messageSource: onMessageSourceUpdated,
+    isCompleted: isCompletedUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isShowMessagePopMenu: isShowMessagePopMenuUpdated,
+  });
+
+  messageListRef.value?.removeEventListener('scroll', handelScrollListScroll);
+
+  if (Object.keys(audioPlayedMapping.value).length > 0) {
+    // Synchronize storage about whether the audio has been played when the component is unmounted
+    chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
+  }
+
+  sentReceiptMessageIDSet.clear();
+  observer?.disconnect();
+  observer = null;
+});
+
+async function onMessageListUpdated(list: IMessageModel[]) {
+  let customeraccounts = getCustomerServiceAccounts();
+  if(customeraccounts.length == 0){
+    setCustomerServiceAccounts(TUIStore.getData(StoreName.CUSTOM, "customerServiceAccounts"));
+  } 
+  if(!isCustomerConversation(currentConversationID.value)){
+    return;
+  }
+  observer?.disconnect();
+  const oldLastMessage = currentLastMessage.value;
+  let hasEmojiReaction = false;
+  allMessageList.value = list;
+  messageList.value = list.filter((message) => {
+    if (message.reactionList?.length && !message.isDeleted) {
+      hasEmojiReaction = true;
+    }
+    return !message.isDeleted && !isMessageInvisible(message as any);
+  });
+  if (!messageList.value?.length) {
+    currentLastMessage.value = {};
+    return;
+  }
+  const newLastMessage = messageList.value?.[messageList.value?.length - 1];
+  if (messageTarget.value) {
+    if (
+      messageList.value?.findIndex(
+        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
+      ) >= 0
+    ) {
+      const tempMessage = messageTarget.value;
+      messageTarget.value = undefined;
+      await scrollToPosition({ scrollToMessage: tempMessage });
+      await blinkMessage(tempMessage?.ID);
+    }
+  } else if (beforeHistoryGetScrollHeight.value) {
+    await scrollToPosition({
+      scrollToOffset: { bottom: beforeHistoryGetScrollHeight.value },
+    });
+    beforeHistoryGetScrollHeight.value = 0;
+  } else if (
+    scrollButtonInstanceRef.value?.isScrollButtonVisible
+    && newLastMessage?.flow === 'in'
+  ) {
+    return;
+  } else if (
+    newLastMessage?.ID
+    && JSON.stringify(oldLastMessage) !== JSON.stringify(newLastMessage)
+  ) {
+    await scrollToPosition({ scrollToBottom: true });
+  } else if (hasEmojiReaction && isCurrentListInBottomPosition()) {
+    await scrollToPosition({ scrollToBottom: true });
+  }
+  currentLastMessage.value = Object.assign({}, newLastMessage);
+  if (isEnabledMessageReadReceiptGlobal()) {
+    nextTick(() => bindIntersectionObserver());
+  }
+}
+
+function isCurrentListInBottomPosition() {
+  return (
+    messageListRef.value
+    && typeof messageListRef.value.scrollTop === 'number'
+    && typeof messageListRef.value.scrollHeight === 'number'
+    && typeof messageListRef.value.clientHeight === 'number'
+    && Math.ceil(
+      messageListRef.value.scrollTop + messageListRef.value.clientHeight,
+    ) >= messageListRef.value.scrollHeight
+  );
+}
+
+async function scrollToPosition(config: ScrollConfig = {}): Promise<void> {
+  return new Promise((resolve, reject) => {
+    requestAnimationFrame(() => {
+      if (!messageListRef.value) {
+        reject();
+      }
+      const container = messageListRef.value;
+      if (config.scrollToBottom && container) {
+        container!.scrollTop = container!.scrollHeight;
+      } else if (config.scrollToMessage) {
+        const targetMessageDom = messageElementListRef.value?.find(
+          (dom: HTMLElement) => dom?.id === `tui-${config.scrollToMessage?.ID}`,
+        );
+        if (targetMessageDom?.scrollIntoView) {
+          targetMessageDom.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+          });
+        }
+      } else if (config.scrollToOffset) {
+        if (config.scrollToOffset?.top) {
+          container!.scrollTop = config.scrollToOffset.top;
+        } else if (config.scrollToOffset?.bottom) {
+          container!.scrollTop
+            = container!.scrollHeight - config.scrollToOffset.bottom;
+        }
+      }
+      resolve();
+    });
+  });
+}
+
+async function onMessageSourceUpdated(message: IMessageModel) {
+  // messageSource change has two cases
+  // 1. messageSource change -> cache miss -> messageList change,
+  // 2. messageSource change -> cache hit -> messageList not change
+  // Only the second case needs to add scrollToTarget when listening here
+  messageTarget.value = message;
+  if (messageTarget.value) {
+    if (
+      messageList.value?.findIndex(
+        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
+      ) >= 0
+    ) {
+      const tempMessage = messageTarget.value;
+      messageTarget.value = undefined;
+      await scrollToPosition({ scrollToMessage: tempMessage });
+      await blinkMessage(tempMessage?.ID);
+    }
+  }
+}
+
+function isCompletedUpdated(flag: boolean) {
+  isCompleted.value = flag;
+}
+
+function isShowMessagePopMenuUpdated(isShow: boolean) {
+  if (!isShow) {
+    toggleID.value = '';
+  }
+}
+
+const onCurrentConversationIDUpdated = (conversationID: string) => {
+  currentConversationID.value = conversationID;
+  if (!currentConversationID.value) {
+    messageList.value = [];
+  }
+  if (Object.keys(audioPlayedMapping.value).length > 0) {
+    // Synchronize storage about whether the audio has been played when converstaion switched
+    chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
+  }
+};
+
+const getHistoryMessageList = () => {
+  TUIChatService.getMessageList().then((res: any) => {
+    const { nextReqMessageID: ID } = res.data;
+    nextReqMessageID.value = ID;
+  });
+  // After getting the historical messages, keep the scroll bar in the original position
+  beforeHistoryGetScrollHeight.value = messageListRef.value?.scrollHeight;
+};
+
+const handleImagePreview = (message: IMessageModel) => {
+  if (
+    showImagePreview.value
+    || currentImagePreview.value
+    || isLongpressing.value
+  ) {
+    return;
+  }
+  showImagePreview.value = true;
+  currentImagePreview.value = message;
+};
+
+const onImagePreviewerClose = () => {
+  showImagePreview.value = false;
+  currentImagePreview.value = null;
+};
+
+// toggle message
+const handleToggleMessageItem = (
+  e: any,
+  message: IMessageModel,
+  isLongpress = false,
+) => {
+  if (isLongpress) {
+    isLongpressing.value = true;
+  }
+  toggleID.value = message.ID;
+  filterTopMessageDom(e.target);
+};
+
+const handleToggleMessageItemForPC = (
+  e: MouseEvent,
+  message: IMessageModel,
+) => {
+  if (isPC) {
+    toggleID.value = message.ID;
+    targetMessageDom.value = messageElementListRef.value?.find(
+      (dom: HTMLElement) => dom?.id === `tui-${message.ID}`,
+    );
+    nextTick(() => {
+      const ignoreDomRefs
+        = messageToolListRef.value && messageToolListRef.value[0]?.messageToolDom;
+      outsideClick.listen({
+        domRefs: targetMessageDom.value,
+        ignoreDomRefs: ignoreDomRefs,
+        handler: closeChatPop,
+        button: e.button,
+      });
+      filterTopMessageDom(e.target);
+    });
+  }
+};
+
+function filterTopMessageDom(toggleMessageElement: any) {
+  const chatElement = document.getElementById('tui-chat-main');
+  const safeTop = 160;
+  const messageElementRect = toggleMessageElement.getBoundingClientRect();
+  const ChatElementRect = chatElement.getBoundingClientRect();
+  isTopMessageDom.value
+    = messageElementRect.top - ChatElementRect.top < safeTop ? true : false;
+}
+
+// h5 long press
+let timer: number;
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  if (!isH5) return;
+  function longPressHandler() {
+    clearTimeout(timer);
+    handleToggleMessageItem(e, message);
+  }
+  function touchStartHandler() {
+    timer = setTimeout(longPressHandler, 500);
+  }
+  function touchEndHandler() {
+    clearTimeout(timer);
+  }
+  switch (type) {
+    case 'touchstart':
+      touchStartHandler();
+      break;
+    case 'touchend':
+      touchEndHandler();
+      setTimeout(() => {
+        isLongpressing.value = false;
+      }, 200);
+      break;
+  }
+};
+
+// re-edit message
+const handleEdit = (message: IMessageModel) => {
+  emits('handleEditor', message, 'reedit');
+};
+
+const resendMessage = (message: IMessageModel) => {
+  reSendDialogShow.value = true;
+  resendMessageData.value = message;
+};
+
+const resendMessageConfirm = () => {
+  reSendDialogShow.value = !reSendDialogShow.value;
+  const messageModel = resendMessageData.value;
+  messageModel.resendMessage();
+};
+
+function blinkMessage(messageID: string): Promise<void> {
+  return new Promise((resolve) => {
+    const index = blinkMessageIDList.value.indexOf(messageID);
+    if (index < 0) {
+      blinkMessageIDList.value.push(messageID);
+      const timer = setTimeout(() => {
+        blinkMessageIDList.value.splice(
+          blinkMessageIDList.value.indexOf(messageID),
+          1,
+        );
+        clearTimeout(timer);
+        resolve();
+      }, 3000);
+    }
+  });
+}
+
+async function scrollToLatestMessage() {
+  const { scrollHeight } = await getScrollInfo('#messageScrollList');
+  const { height } = await getBoundingClientRect('#messageScrollList');
+  if (messageListRef.value) {
+    messageListRef.value.scrollTop = scrollHeight - height;
+  }
+}
+
+const handelScrollListScroll = throttle(
+  function (e: Event) {
+    scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
+  },
+  150,
+  { leading: true },
+);
+
+async function bindIntersectionObserver() {
+  if (
+    !messageList.value
+    || !messageListRef.value
+    || messageList.value.length === 0
+  ) {
+    return;
+  }
+
+  const mappingFromIDToMessage: Record<
+    string,
+    {
+      msgDom: HTMLElement;
+      msgModel: IMessageModel | undefined;
+    }
+  > = {};
+
+  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)
+          ) {
+            TUIChatService.sendMessageReadReceipt([msgModel]);
+            sentReceiptMessageIDSet.add(msgModel.ID);
+            observer?.unobserve(msgDom);
+          }
+        }
+      });
+    },
+    {
+      root: messageListRef.value,
+      threshold: 0.7,
+    },
+  );
+
+  const arrayOfMessageLi
+    = messageListRef.value?.querySelectorAll('.message-li');
+  if (arrayOfMessageLi) {
+    for (let i = 0; i < arrayOfMessageLi?.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);
+      }
+    }
+  }
+}
+
+function closeChatPop() {
+  toggleID.value = '';
+}
+
+function onMessageListBackgroundClick() {
+  emits('closeInputToolBar');
+}
+
+function setAudioPlayed(messageID: string) {
+  audioPlayedMapping.value = {
+    ...audioPlayedMapping.value,
+    [messageID]: true,
+  };
+}
+
+defineExpose({
+  scrollToLatestMessage,
+});
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>
+<style>
+.row-reverse {
+  flex-direction: row-reverse;
+}
+</style>