@tencentcloud/ai-desk-customer-vue 0.1.0

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

@@ -0,0 +1,193 @@
+<template>
+  <div
+    v-show="isShowReadStatus"
+    :class="{
+      'message-label': true,
+      unread: isUseUnreadStyle,
+    }"
+  >
+    <span>{{ readStatusText }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import vue from '../../../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+const { computed, ref, onMounted, onUnmounted } = vue;
+
+interface IProps {
+  message: IMessageModel;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+const ReadStatus = true;
+
+enum ReadState {
+  Read,
+  Unread,
+  AllRead,
+  NotShow,
+  PartiallyRead,
+}
+
+const TYPES = TUIChatEngine.TYPES;
+// User-level read receipt toggle has the highest priority.
+const isDisplayMessageReadReceipt = ref<boolean>(
+  // TUIStore.getData(StoreName.USER, 'displayMessageReadReceipt'),
+  true
+);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.USER, {
+    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.USER, {
+    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
+  });
+});
+
+const isShowReadStatus = computed<boolean>(() => {
+  if (!ReadStatus) {
+    return false;
+  }
+  if (!isDisplayMessageReadReceipt.value) {
+    return false;
+  }
+  const {
+    ID,
+    type,
+    flow,
+    status,
+    hasRiskContent,
+    conversationID,
+    conversationType,
+    needReadReceipt = false,
+  } = props.message;
+
+  // Asynchronous message strike: Determine if there is risky content after the message has been sent
+  if (hasRiskContent) {
+    return false;
+  }
+
+  const { groupProfile } = TUIStore.getConversationModel(conversationID) || {};
+  // AVCHATROOM and COMMUNITY chats do not display read status
+  if (
+    groupProfile?.type === TYPES.GRP_AVCHATROOM
+    || groupProfile?.type === TYPES.GRP_COMMUNITY
+  ) {
+    return false;
+  }
+
+  if (type === TYPES.MSG_CUSTOM) {
+    const message = TUIStore.getMessageModel(ID);
+    // If it is a signaling message, do not display the read status
+    if (message?.getSignalingInfo() !== null) {
+      return false;
+    }
+  }
+
+  // Unsuccessful message: Received messages do not display read status
+  if (flow !== 'out' || status !== 'success') {
+    return false;
+  }
+
+  if (conversationType === 'GROUP') {
+    return needReadReceipt;
+  } else if (conversationType === 'C2C') {
+    return true;
+  }
+  return false;
+});
+
+const readState = computed<ReadState>(() => {
+  const {
+    conversationType,
+    needReadReceipt = false,
+    isPeerRead = false,
+  } = props.message;
+  const {
+    readCount = 0,
+    unreadCount = 0,
+    isPeerRead: isReceiptPeerRead = false,
+  } = props.message.readReceiptInfo;
+  if (conversationType === 'C2C') {
+    if (needReadReceipt) {
+      return isReceiptPeerRead ? ReadState.Read : ReadState.Unread;
+    } else {
+      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 {
+      return ReadState.NotShow;
+    }
+  }
+  return ReadState.Unread;
+});
+
+const readStatusText = computed(() => {
+  const { readCount = 0 } = props.message.readReceiptInfo;
+  switch (readState.value) {
+    case ReadState.Read:
+      return TUITranslateService.t('TUIChat.已读');
+    case ReadState.Unread:
+      return TUITranslateService.t('TUIChat.未读');
+    case ReadState.AllRead:
+      return TUITranslateService.t('TUIChat.全部已读');
+    case ReadState.PartiallyRead:
+      return `${readCount}${TUITranslateService.t('TUIChat.人已读')}`;
+    default:
+      return '';
+  }
+});
+
+const isUseUnreadStyle = computed(() => {
+  const { conversationType } = props.message;
+  if (conversationType === 'C2C') {
+    return readState.value !== ReadState.Read;
+  } else if (conversationType === 'GROUP') {
+    return readState.value !== ReadState.AllRead;
+  }
+  return false;
+});
+
+function onDisplayMessageReadReceiptUpdate(isDisplay: boolean) {
+  isDisplayMessageReadReceipt.value = isDisplay;
+}
+</script>
+
+<style scoped lang="scss">
+.message-label {
+  align-self: flex-end;
+  font-size: 12px;
+  color: #b6b8ba;
+  word-break: keep-all;
+  flex: 0 0 auto;
+
+  &.unread {
+    color: #679ce1 !important;
+  }
+}
+
+.finger-point {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+</style>

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

@@ -0,0 +1,462 @@
+<template>
+  <div
+    :class="{
+      'simple-message-list-container': true,
+      'simple-message-list-container-mobile': isMobile,
+    }"
+  >
+    <div class="header-container">
+      <span
+        class="back"
+        @click="backPreviousLevel"
+      >
+        <Icon
+          class="close-icon"
+          :file="addIcon"
+          :size="'18px'"
+        />
+        <span v-if="isReturn">{{ TUITranslateService.t("TUIChat.返回") }}</span>
+        <span v-else>{{ TUITranslateService.t("TUIChat.关闭") }}</span>
+      </span>
+
+      <span class="title">
+        {{ currentMergeMessageInfo.title }}
+      </span>
+    </div>
+    <div v-if="isDownloadOccurError">
+      Load Merge Message Error
+    </div>
+    <div
+      v-else-if="isMergeMessageInfoLoaded"
+      ref="simpleMessageListRef"
+      class="message-list"
+    >
+      <div
+        v-for="item in currentMergeMessageInfo.messageList"
+        :key="item.ID"
+        :class="{
+          'message-item': true,
+        }"
+      >
+        <MessageContainer
+          :sender="item.nick"
+          :avatar="item.avatar"
+          :type="item.messageBody[0].type"
+          :time="item.time"
+        >
+          <!-- text -->
+          <div
+            v-if="item.messageBody[0].type === TYPES.MSG_TEXT"
+            class="message-text"
+          >
+            <span
+              v-for="(textInfo, index) in parseTextToRenderArray(
+                item.messageBody[0].payload['text']
+              )"
+              :key="index"
+              class="message-text-container"
+            >
+              <span
+                v-if="textInfo.type === 'text'"
+                class="text"
+              >{{
+                textInfo.content
+              }}</span>
+              <img
+                v-else
+                class="simple-emoji"
+                :src="textInfo.content"
+                alt="small-face"
+              >
+            </span>
+          </div>
+          <!-- image -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_IMAGE"
+            class="message-image"
+          >
+            <img
+              class="image"
+              :src="item.messageBody[0].payload['imageInfoArray'][2]['url']"
+              mode="widthFix"
+              alt="image"
+            >
+          </div>
+          <!-- video -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_VIDEO"
+            class="message-video"
+          >
+            <div
+              v-if="isUniFrameWork"
+              @click="
+                previewVideoInUniapp(
+                  item.messageBody[0].payload['remoteVideoUrl']
+                )
+              "
+            >
+              <image
+                class="image"
+                :src="item.messageBody[0].payload['thumbUrl']"
+                mode="widthFix"
+                alt="image"
+              />
+              <Icon
+                class="video-play-icon"
+                :file="playIcon"
+              />
+            </div>
+            <video
+              v-else
+              class="video"
+              controls
+              :poster="item.messageBody[0].payload['thumbUrl']"
+            >
+              <source
+                :src="item.messageBody[0].payload['remoteVideoUrl']"
+                type="video/mp4"
+              >
+            </video>
+          </div>
+          <!-- audio -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO"
+            class="message-audio"
+          >
+            <span>{{ TUITranslateService.t("TUIChat.语音") }}&nbsp;</span>
+            <span>{{ item.messageBody[0].payload.second }}s</span>
+          </div>
+          <!-- big face -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_FACE"
+            class="message-face"
+          >
+            <img
+              class="image"
+              :src="resolveBigFaceUrl(item.messageBody[0].payload.data)"
+              alt="face"
+            >
+          </div>
+          <!-- file -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_FILE"
+            class="message-file"
+          >
+            {{ TUITranslateService.t("TUIChat.[文件]") }}
+          </div>
+          <!-- location -->
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_LOCATION">
+            {{ TUITranslateService.t("TUIChat.[地理位置]") }}
+          </div>
+          <!-- merger -->
+          <div
+            v-else-if="item.messageBody[0].type === TYPES.MSG_MERGER"
+            class="message-merger"
+            @click.capture="entryNextLevel($event, item)"
+          >
+            <MessageRecord
+              disabled
+              :renderData="item.messageBody[0].payload"
+            />
+          </div>
+          <!-- custom -->
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_CUSTOM">
+            {{ TUITranslateService.t("TUIChat.[自定义消息]") }}
+          </div>
+        </MessageContainer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import vue from '../../../../../adapter-vue';
+import TUIChatEngine, {
+  TUIStore,
+  TUIChatService,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import addIcon from '../../../../../assets/back.svg';
+import playIcon from '../../../../../assets/video-play.png';
+import Icon from '../../../../common/Icon.vue';
+import MessageContainer from './message-container.vue';
+import MessageRecord from '../message-record/index.vue';
+import {
+  parseTextToRenderArray,
+  DEFAULT_BIG_EMOJI_URL,
+  CUSTOM_BIG_EMOJI_URL,
+} from '../../../emoji-config/index';
+import { isMobile, isUniFrameWork } from '../../../../../utils/env';
+import { IMergeMessageContent } from '../../../../../interface';
+const { computed, ref, watch } = vue;
+
+interface IProps {
+  /**
+   * only use messageID when first render of simple-message-list
+   * because the nested simple-message-list do not have corresponding message object
+   * need to download message from sdk by constructed message
+   * and use downloaded message object to render nested simple-message-list
+   */
+  messageID?: string;
+  isMounted?: boolean;
+}
+
+interface IEmits {
+  (e: 'closeOverlay'): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  messageID: '',
+  isMounted: false,
+});
+
+const TYPES = TUIChatEngine.TYPES;
+const isDownloadOccurError = ref(false);
+const messageListStack = ref<IMergeMessageContent[]>([]);
+const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
+  title: '',
+  messageList: [],
+});
+const simpleMessageListRef = ref<HTMLElement>();
+
+watch(
+  () => messageListStack.value.length,
+  async (newValue) => {
+    isDownloadOccurError.value = false;
+    if (newValue < 1) {
+      return;
+    }
+    const stackTopMessageInfo
+      = messageListStack.value[messageListStack.value.length - 1];
+    if (
+      stackTopMessageInfo.downloadKey
+      && stackTopMessageInfo.messageList.length === 0
+    ) {
+      try {
+        const res = await TUIChatService.downloadMergedMessages({
+          payload: stackTopMessageInfo,
+          type: TUIChatEngine.TYPES.MSG_MERGER,
+        } as any);
+        // if download complete message, cover the original message in stack top
+        messageListStack.value[messageListStack.value.length - 1] = res.payload;
+      } catch (error) {
+        isDownloadOccurError.value = true;
+      }
+    }
+    currentMergeMessageInfo.value
+      = messageListStack.value[messageListStack.value.length - 1];
+  },
+);
+
+watch(
+  () => props.isMounted,
+  (newValue) => {
+    // For compatibility with uniapp, use watch to implement onMounted
+    if (newValue) {
+      if (!props.messageID) {
+        throw new Error(
+          'messageID is required when first render of simple-message-list.',
+        );
+      }
+      const sdkMessagePayload = TUIStore.getMessageModel(
+        props.messageID,
+      ).getMessage().payload;
+      messageListStack.value = [sdkMessagePayload];
+    } else {
+      messageListStack.value = [];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const isReturn = computed(() => {
+  return messageListStack.value.length > 1;
+});
+
+const isMergeMessageInfoLoaded = computed(() => {
+  return currentMergeMessageInfo.value?.messageList
+    ? currentMergeMessageInfo.value.messageList.length > 0
+    : false;
+});
+
+function entryNextLevel(e, sdkMessage: any) {
+  messageListStack.value.push(sdkMessage.messageBody[0].payload);
+  e.stopPropagation();
+}
+
+function backPreviousLevel() {
+  messageListStack.value.pop();
+  if (messageListStack.value.length < 1) {
+    emits('closeOverlay');
+  }
+}
+
+function previewVideoInUniapp(url: string) {
+  if (isUniFrameWork) {
+    const encodedUrl = encodeURIComponent(url);
+    uni.navigateTo({
+      url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`,
+    });
+  }
+}
+
+function resolveBigFaceUrl(bigFaceKey: string): string {
+  let url = '';
+  if (bigFaceKey.indexOf('@custom') > -1) {
+    url = CUSTOM_BIG_EMOJI_URL + bigFaceKey;
+  } else {
+    url = DEFAULT_BIG_EMOJI_URL + bigFaceKey;
+    if (url.indexOf('@2x') === -1) {
+      url += '@2x.png';
+    } else {
+      url += '.png';
+    }
+  }
+  return url;
+}
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.simple-message-list-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  width: calc(40vw);
+  min-width: 550px;
+  height: calc(100vh - 200px);
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+
+  &-mobile {
+    width: 100vw;
+    height: 100vh;
+    min-width: auto;
+    border-radius: 0;
+  }
+
+  .header-container {
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    height: 60px;
+    justify-content: center;
+    align-items: center;
+    padding: 0 70px;
+    background-color: #fff;
+
+    .back {
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      left: 10px;
+      cursor: pointer;
+    }
+
+    .title {
+      width: 100%;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .message-list {
+    padding: 60px 20px 20px;
+    flex: 1 1 auto;
+    overflow: hidden auto;
+  }
+}
+
+.message-item {
+  flex-direction: row;
+  margin: 10px 0;
+}
+
+.message-text {
+  flex-flow: row wrap;
+  display: inline;
+
+  &-container {
+    display: inline;
+    flex: 0 0 auto;
+    flex-direction: row;
+
+    .text {
+      vertical-align: bottom;
+      display: inline;
+      word-break: break-all;
+    }
+
+    .simple-emoji {
+      display: inline-flex;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.message-image {
+  max-width: 180px;
+  border-radius: 10px;
+  overflow: hidden;
+
+  .image {
+    max-width: 180px;
+  }
+}
+
+.message-face {
+  max-width: 100px;
+
+  .image {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.message-audio {
+  flex-direction: row;
+}
+
+.message-video {
+  position: relative;
+
+  .image {
+    max-width: 180px;
+  }
+
+  .video-play-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .video {
+    max-width: 150px;
+    width: inherit;
+    height: inherit;
+    border-radius: 10px;
+  }
+}
+
+.message-combine {
+  max-width: 300px;
+}
+</style>