@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/CustomerServiceChat/message-list/message-elements/message-image-web.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    ref="skeletonDomRef"
+    class="image-container"
+    @click.self="toggleShow"
+  >
+    <img
+      :class="['message-image', !isPC && 'message-image-h5']"
+      :src="props.content.url"
+      :width="props.content.width"
+      :height="props.content.height"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { isPC } from '../../../../utils/env';
+import { handleSkeletonSize } from '../../../../utils/utils';
+import type { IImageMessageContent } from '../../../../interface';
+const { ref, watch, onMounted, withDefaults } = vue;
+
+const emits = defineEmits(['previewImage']);
+const props = withDefaults(
+  defineProps<{
+    content: IImageMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({}),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+const skeletonDomRef = ref();
+
+onMounted(() => {
+  if (
+    props.messageItem?.status === 'success'
+    || props.messageItem?.status === 'fail'
+    || props.messageItem?.progress === 1
+  ) {
+    autoFixSkeletonSize();
+  }
+});
+
+watch(
+  () => props.content.height,
+  (newVal: number, oldVal: number) => {
+    if (newVal > oldVal) {
+      autoFixSkeletonSize();
+    }
+  },
+);
+
+function autoFixSkeletonSize() {
+  const { width = 0, height = 0 } = props.content;
+  if (width === 0 || height === 0) return;
+  const containerWidth = document.getElementById('app')?.clientWidth || 0;
+  const max = !isPC ? Math.min(containerWidth - 180, 300) : 300;
+  const size = handleSkeletonSize(width, height, max, max);
+  skeletonDomRef?.value?.style
+  && (skeletonDomRef.value.style.width = `${size.width}px`);
+  skeletonDomRef?.value?.style
+  && (skeletonDomRef.value.style.height = `${size.height}px`);
+}
+
+function toggleShow() {
+  if (
+    props.messageItem?.status === 'success'
+    || props.messageItem?.progress === 1
+  ) {
+    emits('previewImage', props.messageItem);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../style/common";
+
+.image-container {
+  overflow: hidden;
+  background-color: #f4f4f4;
+
+  .message-image {
+    max-width: min(calc(100vw - 180px), 300px);
+    max-height: min(calc(100vw - 180px), 300px);
+    width: inherit;
+    height: inherit;
+
+    &-h5 {
+      max-width: calc(100vw - 180px);
+      max-height: calc(100vw - 180px);
+    }
+  }
+}
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-location.vue

@@ -0,0 +1,34 @@
+<template>
+  <a
+    class="message-location"
+    :href="data.href"
+    target="_blank"
+    title="点击查看详情"
+  >
+    <span class="el-icon-location-outline">{{ data.description }}</span>
+    <img :src="data.url">
+  </a>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+const { watchEffect, ref } = vue;
+const props = defineProps({
+  content: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const data = ref();
+watchEffect(() => {
+  data.value = props.content;
+});
+</script>
+<style lang="scss" scoped>
+@import "../../style/common";
+
+.message-location {
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,286 @@
+<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="{
+          'reference-content': true,
+          reverse: message.flow === 'out',
+          in:message.flow === 'in',
+          isMobile: isH5,
+          isPc: isPC,
+        }"
+        @click="scrollToOriginalMessage"
+      >
+        
+        <div
+          v-if="isMessageRevoked"
+          class="revoked-text"
+        >
+          {{ TUITranslateService.t("TUIChat.引用内容已撤回") }}
+        </div>
+        <div v-else>
+          <div v-if="isH5" class="mobile-quote-sender">
+            {{ messageQuoteContent.messageSender }}
+          </div>
+          <div
+            class="max-double-line"
+          >
+          {{ isPC ? messageQuoteContent.messageSender + ": "+ transformTextWithKeysToEmojiNames(messageQuoteText) : transformTextWithKeysToEmojiNames(messageQuoteText)}}
+          </div>
+        </div>
+        
+      </div>
+</div>
+  
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import {
+  getBoundingClientRect,
+  getScrollInfo,
+} from '@tencentcloud/universal-api';
+import { isUniFrameWork,isH5,isPC } from '../../../../../utils/env';
+import {
+  Toast,
+  TOAST_TYPE,
+} from '../../../../../components/common/Toast/index-web';
+import {
+  ICloudCustomData,
+  IQuoteContent,
+  MessageQuoteTypeEnum,
+} from './interface.ts';
+import { transformTextWithKeysToEmojiNames } from '../../../emoji-config';
+const { computed, ref, onMounted } = vue;
+
+export interface IProps {
+  message: IMessageModel;
+}
+
+export interface IEmits {
+  (e: 'scrollTo', scrollHeight: number): void;
+  (e: 'blinkMessage', messageID: string | undefined): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+let selfAddValue = 0;
+const messageQuoteText = ref<string>('');
+const hasQuoteContent = ref(false);
+const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent);
+
+const isMessageRevoked = computed<boolean>(() => {
+  try {
+    const cloudCustomData: ICloudCustomData = JSON.parse(
+      props.message?.cloudCustomData || '{}',
+    );
+    const quotedMessageModel = TUIStore.getMessageModel(
+      cloudCustomData.messageReply.messageID,
+    );
+    return quotedMessageModel?.isRevoked;
+  } catch (error) {
+    return true;
+  }
+});
+
+onMounted(() => {
+  try {
+    const cloudCustomData: ICloudCustomData = JSON.parse(
+      props.message?.cloudCustomData || '{}',
+    );
+    hasQuoteContent.value = Boolean(cloudCustomData.messageReply);
+    if (hasQuoteContent.value) {
+      messageQuoteContent.value = cloudCustomData.messageReply;
+      messageQuoteText.value = performQuoteContent(messageQuoteContent.value);
+    }
+  } catch (error) {
+    hasQuoteContent.value = false;
+  }
+});
+
+function performQuoteContent(params: IQuoteContent) {
+  let messageKey: string = '';
+  let quoteContent: string = '';
+  switch (params.messageType) {
+    case MessageQuoteTypeEnum.TYPE_TEXT:
+      messageKey = '[文本]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_CUSTOM:
+      messageKey = '[自定义消息]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_IMAGE:
+      messageKey = '[图片]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_SOUND:
+      messageKey = '[音频]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_VIDEO:
+      messageKey = '[视频]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_FILE:
+      messageKey = '[文件]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_LOCATION:
+      messageKey = '[地理位置]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_FACE:
+      messageKey = '[动画表情]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_GROUP_TIPS:
+      messageKey = '[群提示]';
+      break;
+    case MessageQuoteTypeEnum.TYPE_MERGER:
+      messageKey = '[聊天记录]';
+      break;
+    default:
+      messageKey = '[消息]';
+      break;
+  }
+  if (
+    [MessageQuoteTypeEnum.TYPE_TEXT, MessageQuoteTypeEnum.TYPE_MERGER].includes(
+      params.messageType,
+    )
+  ) {
+    quoteContent = params.messageAbstract;
+  }
+  return quoteContent
+    ? quoteContent
+    : TUITranslateService.t(`TUIChat.${messageKey}`);
+}
+
+async function scrollToOriginalMessage() {
+  if (isMessageRevoked.value) {
+    return;
+  }
+  const originMessageID = messageQuoteContent.value?.messageID;
+  const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList');
+  const isOriginalMessageInScreen = currentMessageList.some(
+    msg => msg.ID === originMessageID,
+  );
+  if (originMessageID && isOriginalMessageInScreen) {
+    try {
+      const scrollViewRect = await getBoundingClientRect(
+        '#messageScrollList',
+        'messageList',
+      );
+      const originalMessageRect = await getBoundingClientRect(
+        '#tui-' + originMessageID,
+        'messageList',
+      );
+      const { scrollTop } = await getScrollInfo(
+        '#messageScrollList',
+        'messageList',
+      );
+      const finalScrollTop
+        = originalMessageRect.top
+        + scrollTop
+        - scrollViewRect.top
+        - (selfAddValue++ % 2);
+      const isNeedScroll = originalMessageRect.top < scrollViewRect.top;
+      if (!isUniFrameWork && window) {
+        const scrollView = document.getElementById('messageScrollList');
+        if (isNeedScroll && scrollView) {
+          scrollView.scrollTop = finalScrollTop;
+        }
+      } else if (isUniFrameWork && isNeedScroll) {
+        emits('scrollTo', finalScrollTop);
+      }
+      emits('blinkMessage', originMessageID);
+    } catch (error) {
+      console.error(error);
+    }
+  } else {
+    Toast({
+      message: TUITranslateService.t('TUIChat.无法定位到原消息'),
+      type: TOAST_TYPE.WARNING,
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reference-content {
+  max-width: 272px;
+  margin-top: 4px;
+  
+  padding: 12px;
+  font-size: 12px;
+  color: #666;
+  word-wrap: break-word;
+  word-break: break-all;
+  background-color: #fbfbfb;
+  border-radius: 8px;
+  line-height: 16.8px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.reference-content.isPc {
+  margin-left: 44px;
+}
+
+.reverse.reference-content {
+  margin-right: 44px;
+  margin-left: auto;
+  border-radius: 0 8px 8px 0;
+}
+.isMobile.reference-content.in {
+  margin-right: auto;
+  background: #f3f4f7;
+  border-radius: 0 8px 8px 0;
+}
+.isMobile.reverse.reference-content {
+  margin-right: 10px;
+  margin-left: auto;
+  background: #FFFFFF1A;
+  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;
+}
+
+.mobile-quote-sender{
+  font-family: PingFangSC-Regular;
+  font-size: 10px;
+
+}
+
+.max-double-line {
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  word-break: break-all;
+  overflow: hidden;
+  display: -webkit-box;
+  max-height: 33px;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-quote/interface.ts

@@ -0,0 +1,60 @@
+export interface IQuoteContent {
+  messageAbstract: string;
+  messageID: string;
+  messageSender: string;
+  messageSequence: number;
+  messageTime: number;
+  messageType: number;
+  version: number;
+}
+
+export interface ICloudCustomData {
+  messageReply: IQuoteContent;
+}
+
+export enum MessageQuoteTypeEnum {
+  /**
+   * none message
+   */
+  TYPE_NONE = 0,
+  /**
+   * text message
+   */
+  TYPE_TEXT = 1,
+  /**
+   * custom message
+   */
+  TYPE_CUSTOM = 2,
+  /**
+   * image message
+   */
+  TYPE_IMAGE = 3,
+  /**
+   * voice message
+   */
+  TYPE_SOUND = 4,
+  /**
+   * video message
+   */
+  TYPE_VIDEO = 5,
+  /**
+   * file message
+   */
+  TYPE_FILE = 6,
+  /**
+   * location message
+   */
+  TYPE_LOCATION = 7,
+  /**
+   * animation face message
+   */
+  TYPE_FACE = 8,
+  /**
+   * group tips message (save in message list)
+   */
+  TYPE_GROUP_TIPS = 9,
+  /**
+   * merge forward message
+   */
+  TYPE_MERGER = 10,
+}

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

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div
+      class="message-record-container"
+      @click="openMergeDetail"
+    >
+      <div class="record-title">
+        {{ props.renderData.title }}
+      </div>
+      <div class="record-abstract-container">
+        <div
+          v-for="(item, index) in props.renderData.abstractList.slice(0, 7)"
+          :key="index"
+          class="record-abstract-item"
+        >
+          {{ transformTextWithKeysToEmojiNames(item) }}
+        </div>
+      </div>
+      <div class="record-footer">
+        {{ TUITranslateService.t("TUIChat.聊天记录") }}
+      </div>
+    </div>
+    <Overlay
+      v-if="!props.disabled && isPC"
+      :visible="isMessageListVisible"
+      @onOverlayClick="isMessageListVisible = false"
+    >
+      <SimpleMessageList
+        :isMounted="isMessageListVisible"
+        :renderData="props.renderData"
+        :messageID="props.messageItem.ID"
+        @closeOverlay="closeMergeDetail"
+      />
+    </Overlay>
+    <Drawer
+      v-else-if="!props.disabled && isH5 && !isUniFrameWork"
+      :visible="isMessageListVisible"
+      :isFullScreen="true"
+      :overlayColor="'transparent'"
+      :popDirection="'right'"
+    >
+      <SimpleMessageList
+        :isMounted="isMessageListVisible"
+        :renderData="props.renderData"
+        :messageID="props.messageItem.ID"
+        @closeOverlay="closeMergeDetail"
+      />
+    </Drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../../adapter-vue';
+import {
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import Overlay from '../../../../common/Overlay/index.vue';
+import Drawer from '../../../../common/Drawer/index.vue';
+import SimpleMessageList from '../simple-message-list/index.vue';
+import { isH5, isPC, isUniFrameWork } from '../../../../../utils/env';
+import { transformTextWithKeysToEmojiNames } from '../../../emoji-config/index';
+import { IMergeMessageContent } from '../../../../../interface';
+const { ref, withDefaults } = vue;
+
+interface IEmits {
+  (e: 'assignMessageIDInUniapp', messageID: string): void;
+}
+
+interface IProps {
+  // Core data for rendering message record card and message list
+  renderData: IMergeMessageContent;
+  /**
+   * The MessageRecord component has two main functions:
+   * 1. display message record cards primarily.
+   * 2. clicking on it and show the simple message list.
+   * When used as a nested component with the disabled prop
+   * it is only need renderData to render message record cards.
+   * Therefore, 'messageItem' and 'disabled' is not a required prop.
+   */
+  disabled?: boolean;
+  messageItem?: IMessageModel;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  messageItem: () => ({} as IMessageModel),
+  disabled: false,
+});
+
+const isMessageListVisible = ref(false);
+
+function openMergeDetail() {
+  if (props.disabled) {
+    return;
+  }
+  if (!isUniFrameWork) {
+    isMessageListVisible.value = true;
+  } else {
+    emits('assignMessageIDInUniapp', props.messageItem.ID);
+  }
+}
+
+function closeMergeDetail() {
+  isMessageListVisible.value = false;
+}
+</script>
+<style lang="scss" scoped>
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.message-record-container {
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: #fff;
+  max-width: 400px;
+  min-width: 180px;
+  overflow: hidden;
+
+  .record-abstract-container {
+    color: #bbb;
+    font-size: 12px;
+    margin: 8px 0;
+  }
+
+  .record-footer {
+    color: #888;
+    font-size: 11px;
+    padding-top: 5px;
+    border-top: 1px solid #eee;
+  }
+}
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-text.vue

@@ -0,0 +1,94 @@
+<template>
+  <div :class="['message-text-container', isPC && 'text-select']">
+    <span
+      v-for="(item, index) in data.text"
+      :key="index"
+    >
+      <span
+        v-if="item.name === 'text'"
+        class="text"
+      >{{ item.text }}</span>
+      <img
+        v-else
+        class="emoji"
+        :src="item.src"
+        :alt="item.emojiKey"
+      >
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import {
+  CUSTOM_BASIC_EMOJI_URL,
+  CUSTOM_BASIC_EMOJI_URL_MAPPING,
+} from '../../emoji-config';
+import { isPC } from '../../../../utils/env';
+const { watchEffect, ref } = vue;
+interface IProps {
+  content: Record<string, any>;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  content: () => ({}),
+});
+const data = ref();
+watchEffect(() => {
+  data.value = props.content;
+  data.value.text?.forEach(
+    (item: {
+      name: string;
+      text?: string;
+      src?: string;
+      type?: string;
+      emojiKey?: string;
+    }) => {
+      if (item.name === 'img' && item?.type === 'custom') {
+        if (!CUSTOM_BASIC_EMOJI_URL) {
+          console.warn(
+            'CUSTOM_BASIC_EMOJI_URL is required for custom emoji, please check your CUSTOM_BASIC_EMOJI_URL.',
+          );
+        } else if (
+          !item.emojiKey
+          || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
+        ) {
+          console.warn(
+            'emojiKey is required for custom emoji, please check your emojiKey.',
+          );
+        } else {
+          item.src
+            = CUSTOM_BASIC_EMOJI_URL
+            + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey];
+        }
+      }
+    },
+  );
+});
+</script>
+<style lang="scss" scoped>
+.message-text-container {
+  display: inline;
+}
+
+.text-select {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.emoji {
+  vertical-align: bottom;
+  width: 20px;
+  height: 20px;
+}
+
+.text {
+  white-space: pre-wrap;
+  font-size: 14px;
+  text-size-adjust: none;
+  font-family: PingFangSC-Regular;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
+</style>