@tencentcloud/ai-desk-customer-vue 0.1.0

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

@@ -0,0 +1,76 @@
+<template>
+  <div
+    v-if="timestampShowFlag"
+    class="message-timestamp"
+  >
+    {{ timestampShowContent }}
+  </div>
+</template>
+<script setup lang="ts">
+import vue from '../../../../adapter-vue';
+import { calculateTimestamp } from '../../../../utils/utils';
+const { toRefs, ref, watch } = vue;
+
+const props = defineProps({
+  currTime: {
+    type: Number,
+    default: 0,
+  },
+  prevTime: {
+    type: Number,
+    default: 0,
+  },
+});
+const { currTime, prevTime } = toRefs(props);
+const timestampShowFlag = ref(false);
+const timestampShowContent = ref('');
+
+const handleItemTime = (currTime: number, prevTime: number) => {
+  timestampShowFlag.value = false;
+  if (currTime <= 0) {
+    return '';
+  } else if (!prevTime || prevTime <= 0) {
+    timestampShowFlag.value = true;
+    return calculateTimestamp(currTime * 1000);
+  } else {
+    const minDiffToShow = 10 * 60; // 10min 10*60s
+    const diff = currTime - prevTime; // s
+    if (diff >= minDiffToShow) {
+      timestampShowFlag.value = true;
+      return calculateTimestamp(currTime * 1000);
+    }
+  }
+  return '';
+};
+
+watch(
+  () => [currTime.value, prevTime.value],
+  (newVal: any, oldVal: any) => {
+    if (newVal?.toString() === oldVal?.toString()) {
+      return;
+    } else {
+      timestampShowContent.value = handleItemTime(
+        currTime.value,
+        prevTime.value,
+      );
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+@import "../../style/common";
+
+.message-timestamp {
+  font-family: PingFangSC-Regular;
+  margin: 10px auto;
+  color: #999;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,319 @@
+<template>
+  <div class="message-video">
+    <div
+      ref="skeleton"
+      class="message-video-box"
+      :class="[
+        (!props.messageItem.progress || props.messageItem.progress === 1) &&
+          !isPC &&
+          'message-video-cover',
+      ]"
+      @click="toggleVideoPreviewer"
+    >
+      <img
+        v-if="
+          (props.messageItem.progress > 0 &&
+            props.messageItem.progress < 1 &&
+            poster) ||
+            (!isPC && poster)
+        "
+        class="message-img"
+        :class="[isWidth ? 'is-width' : 'is-height']"
+        :src="poster"
+      >
+      <video
+        v-else-if="!isPC"
+        ref="videoRef"
+        class="message-img video-h5-uploading"
+        :src="props.content.url + '#t=0.1'"
+        :poster="props.content.url"
+        preload="auto"
+        muted
+      />
+      <video
+        v-else
+        ref="videoRef"
+        class="message-img video-web"
+        :src="props.content.url"
+        controls
+        preload="metadata"
+        :poster="poster"
+      />
+    </div>
+    <div
+      v-if="isShow && !isPC"
+      class="dialog-video"
+    >
+      <div
+        class="dialog-video-close"
+        @click.stop="toggleVideoPreviewer"
+      >
+        <Icon :file="closeSVG" />
+      </div>
+      <div
+        class="dialog-video-box"
+        :class="[!isPC ? 'dialog-video-h5' : '']"
+        @click.self="toggleVideoPreviewer"
+      >
+        <video
+          :class="[isWidth ? 'is-width' : 'is-height']"
+          :src="props.content.url"
+          controls
+          autoplay
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { handleSkeletonSize } from '../../../../utils/utils';
+import Icon from '../../../common/Icon.vue';
+import closeSVG from '../../../../assets/icon-close.svg';
+import type { IVideoMessageContent } from '../../../../interface';
+import { isPC } from '../../../../utils/env';
+const { ref, watch, computed, nextTick, watchEffect, withDefaults } = vue;
+
+const props = withDefaults(
+  defineProps<{
+    content: IVideoMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({} as IVideoMessageContent),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+
+const emits = defineEmits(['uploading']);
+const isShow = ref(false);
+const poster = ref('');
+const posterWidth = ref(0);
+const posterHeight = ref(0);
+const skeleton = ref();
+const videoRef = ref();
+const transparentPosterUrl
+  = 'https://web.sdk.qcloud.com/im/assets/images/transparent.png';
+
+watchEffect(async () => {
+  if (!props.content) return;
+  poster.value = await handlePosterUrl(props.content, props.messageItem);
+  nextTick(async () => {
+    const containerWidth
+      = document.getElementById('messageScrollList')?.clientWidth || 0;
+    const max = !isPC ? Math.min(containerWidth - 172, 300) : 300;
+    let size;
+    if (props.messageItem.status === 'success') {
+      let { snapshotWidth = 0, snapshotHeight = 0 } = props.content;
+      const { snapshotUrl } = props.content;
+      if (snapshotWidth === 0 || snapshotHeight === 0) return;
+      if (snapshotUrl === transparentPosterUrl) {
+        snapshotWidth = posterWidth.value;
+        snapshotHeight = posterHeight.value;
+      }
+      size = handleSkeletonSize(snapshotWidth, snapshotHeight, max, max);
+      skeleton?.value?.style
+      && (skeleton.value.style.width = `${size.width}px`);
+      skeleton?.value?.style
+      && (skeleton.value.style.height = `${size.height}px`);
+      if (isPC) {
+        videoRef?.value?.style
+        && (videoRef.value.style.width = `${size.width}px`);
+        videoRef?.value?.style
+        && (videoRef.value.style.height = `${size.height}px`);
+      }
+    } else {
+      emits('uploading');
+    }
+  });
+});
+
+const isWidth = computed(() => {
+  const { snapshotWidth = 0, snapshotHeight = 0 } = props.messageItem.payload;
+  return snapshotWidth >= snapshotHeight;
+});
+
+watch(
+  () => props.messageItem.status,
+  (newVal: string, oldVal: string) => {
+    if (newVal === 'success' && oldVal !== 'success') {
+      emits('uploading');
+    }
+  },
+);
+
+function toggleVideoPreviewer() {
+  // Video upload process does not support full-screen playback.
+  if (props.messageItem.progress > 0 && props.messageItem.progress < 1) {
+    return;
+  }
+  isShow.value = !isShow.value;
+}
+
+// For H5, some browsers (Safari/WeChat) have an issue where the cover image of the<video>` tag is empty before the video is fully uploaded.
+//  A separate processing and clipping method is required to display the cover image before the video upload is complete.
+function getVideoBase64(url: string) {
+  return new Promise((resolve) => {
+    let dataURL = '';
+    const video = document.createElement('video');
+    video.setAttribute('crossOrigin', 'anonymous');
+    video.setAttribute('src', url);
+    video.setAttribute('preload', 'auto');
+    video.addEventListener(
+      'loadeddata',
+      function () {
+        const canvas = document.createElement('canvas'),
+          width = video.videoWidth,
+          height = video.videoHeight;
+        canvas.width = width;
+        canvas.height = height;
+        (canvas as any).getContext('2d').drawImage(video, 0, 0, width, height);
+        dataURL = canvas.toDataURL('image/jpeg');
+        posterWidth.value = width;
+        posterHeight.value = height;
+        resolve(dataURL);
+      },
+      { once: true },
+    );
+  });
+}
+
+async function handlePosterUrl(
+  messgeContent: IVideoMessageContent,
+  messageItem: IMessageModel,
+) {
+  if (!messageItem) return '';
+  if (messageItem.status !== 'success') {
+    return await getVideoBase64(messgeContent.url);
+  } else {
+    return (
+      (messgeContent.snapshotUrl !== transparentPosterUrl
+      && messgeContent.snapshotUrl)
+      || (messageItem?.payload?.snapshotUrl !== transparentPosterUrl
+      && messageItem?.payload?.snapshotUrl)
+      || (messageItem.payload?.thumbUrl !== transparentPosterUrl
+      && messageItem?.payload?.thumbUrl)
+      || (await getVideoBase64(messgeContent.url))
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../style/common";
+
+.message-video {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  &-box {
+    max-width: min(calc(100vw - 180px), 300px);
+    font-size: 0;
+
+    video {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+
+    img {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+
+    img[src=""],
+    img:not([src]) {
+      opacity: 0;
+    }
+  }
+
+  &-cover {
+    display: inline-block;
+    position: relative;
+
+    &::before {
+      position: absolute;
+      z-index: 1;
+      content: "";
+      width: 0;
+      height: 0;
+      border: 10px solid transparent;
+      border-left: 15px solid #fff;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+      transform: translate(5px, 0);
+    }
+
+    video {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+  }
+}
+
+.dialog-video {
+  position: fixed;
+  z-index: 12;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-close {
+    display: flex;
+    justify-content: flex-end;
+    background: #000;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+
+  &-box {
+    display: flex;
+    flex: 1;
+    max-height: 100%;
+    padding: 6rem;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+
+    video {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.dialog-video-h5 {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  padding: 30px 0;
+}
+
+.is-width {
+  width: 100%;
+}
+
+.is-height {
+  height: 100%;
+}
+</style>

package/components/CustomerServiceChat/message-list/message-elements/plugins/plugin-components/index.ts

@@ -0,0 +1,9 @@
+import TUIChatEngine, { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { isCustomerServicePluginMessage } from './message-customer/index';
+
+export function isPluginMessage(message: IMessageModel): boolean {
+  return (
+    message.type === TUIChatEngine.TYPES.MSG_CUSTOM
+    && isCustomerServicePluginMessage(message as any)
+  );
+}

package/components/CustomerServiceChat/message-list/message-elements/plugins/plugin-components/message-customer/index.ts

@@ -0,0 +1,5 @@
+import {
+  isCustomerServicePluginMessage,
+  isMessageInvisible as isCustomServiceMessageInvisible,
+} from '../../../../../../../index';
+export { isCustomerServicePluginMessage, isCustomServiceMessageInvisible };

package/components/CustomerServiceChat/message-list/message-elements/plugins/plugin-components/message-customer/message-customer-service.vue

@@ -0,0 +1,22 @@
+<template>
+  <TUICustomerServicePlugin :message="props.message" @showFormPopup="handleShowFormPopup"/>
+</template>
+<script setup lang="ts">
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import TUICustomerServicePlugin from '../../../../../../../index.vue';
+interface IProps {
+  message: IMessageModel;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+const emits = defineEmits([
+  'showFormPopup'
+]);
+function handleShowFormPopup(data: any) {
+  emits('showFormPopup', data);
+}
+</script>
+<style lang="scss" scoped>
+/* stylelint-disable-next-line no-empty-source */
+</style>

package/components/CustomerServiceChat/message-list/message-elements/plugins/plugin-components/message-plugin-layout-web.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="message-plugin">
+    <!-- The following is displayed in the form of messageTip -->
+    <div
+      v-if="props.showStyle === 'tip'"
+      class="message-plugin-tip"
+    >
+      <slot name="messageTip" />
+    </div>
+    <!-- The following is displayed in the form of messageBubble -->
+    <div
+      v-else-if="props.showStyle === 'bubble'"
+      class="message-plugin-bubble-content"
+      @longpress="handleToggleMessageItem($event, messageModel, true)"
+      @click.prevent.right="handleToggleMessageItem($event, messageModel)"
+      @touchstart="handleH5LongPress($event, messageModel, 'touchstart')"
+      @touchend="handleH5LongPress($event, messageModel, 'touchend')"
+      @mouseover="handleH5LongPress($event, messageModel, 'touchend')"
+    >
+      <MessageBubble
+        :messageItem="messageModel"
+        :content="messageModel.getMessageContent()"
+        :blinkMessageIDList="props.blinkMessageIDList"
+        :classNameList="props.bubbleClassNameList"
+        @resendMessage="resendMessage(messageModel)"
+      >
+        <!-- web message-bubble is a named slot, content area slotName is messageElement -->
+        <template #messageElement>
+          <slot
+            v-if="!isUniFrameWork"
+            name="messageBubble"
+          />
+        </template>
+        <!-- uni-app message-bubble is an anonymous slot, no slotName -->
+        <slot
+          v-if="isUniFrameWork"
+          name="messageBubble"
+        />
+      </MessageBubble>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../../../adapter-vue';
+import { TUIStore, IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import MessageBubble from '../../message-bubble-web.vue';
+import { isUniFrameWork } from '../../../../../../utils/env';
+const { computed } = vue;
+interface IProps {
+  message: IMessageModel;
+  showStyle: string;
+  bubbleClassNameList?: string[];
+  blinkMessageIDList?: string[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+  showStyle: '',
+  bubbleClassNameList: () => [] as string[],
+  blinkMessageIDList: () => [] as string[],
+});
+
+const emits = defineEmits([
+  'resendMessage',
+  'handleToggleMessageItem',
+  'handleH5LongPress',
+]);
+const messageModel = computed(() =>
+  TUIStore.getMessageModel(props.message?.ID),
+);
+
+// The following is for external interaction such as messageTool, no special processing is required, do not change
+const resendMessage = (message: IMessageModel) => {
+  emits('resendMessage', message);
+};
+const handleToggleMessageItem = (
+  e: any,
+  message: IMessageModel,
+  isLongpress = false,
+) => {
+  emits('handleToggleMessageItem', e, message, isLongpress);
+};
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  emits('handleH5LongPress', e, message, type);
+};
+</script>
+
+<style lang="scss" scoped>
+.message-plugin-tip {
+  color: #999;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  display: flex;
+  place-content: center center;
+  align-items: center;
+  text-align: center;
+  margin: 0 10px 10px;
+}
+
+.message-tip-highlight {
+  animation: highlight 1000ms infinite;
+
+  @keyframes highlight {
+    50% {
+      color: #ff9c19;
+    }
+  }
+
+  @keyframes highlight {
+    50% {
+      color: #ff9c19;
+    }
+  }
+}
+
+:deep(.message-bubble-room) {
+  .message-bubble-main-content {
+    .message-body {
+      .message-body-main {
+        .message-body-content {
+          &.content-in,
+          &.content-out {
+            background-color: transparent;
+            border-radius: 0;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/CustomerServiceChat/message-list/message-elements/plugins/plugin-components/message-plugin-web.vue

@@ -0,0 +1,83 @@
+<template>
+  <MessagePluginLayout
+    :message="props.message"
+    :showStyle="pluginMessageType.showStyle"
+    :bubbleClassNameList="[
+      pluginMessageType.pluginType === 'room' ? 'message-bubble-room' : '',
+    ]"
+    @resendMessage="resendMessage"
+    @handleToggleMessageItem="handleToggleMessageItem"
+    @handleH5LongPress="handleH5LongPress"
+  >
+    <template #messageBubble>
+      <MessageCustomerService
+        v-if="pluginMessageType.pluginType === 'customer'"
+        :message="props.message"
+      />
+    </template>
+  </MessagePluginLayout>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../../../adapter-vue';
+import { TUIStore } from '@tencentcloud/chat-uikit-engine';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import {
+  isCustomerServicePluginMessage,
+  isCustomServiceMessageInvisible,
+} from './message-customer/index';
+import MessagePluginLayout from './message-plugin-layout-web.vue';
+import MessageCustomerService from './message-customer/message-customer-service.vue';
+const { computed } = vue;
+
+interface IProps {
+  message: IMessageModel;
+  blinkMessageIDList?: string[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+  blinkMessageIDList: () => [] as string[],
+});
+
+const emits = defineEmits([
+  'resendMessage',
+  'handleToggleMessageItem',
+  'handleH5LongPress',
+]);
+const messageModel = computed(() => TUIStore.getMessageModel(props.message.ID));
+
+const pluginMessageType = computed<{ pluginType: string; showStyle: string }>(
+  () => {
+    let typeObj = { pluginType: '', showStyle: '' };
+    if (isCustomerServicePluginMessage(messageModel.value)) {
+      typeObj = {
+        pluginType: 'customer',
+        showStyle: isCustomServiceMessageInvisible(messageModel.value)
+          ? ''
+          : 'bubble',
+      };
+    }
+    return typeObj;
+  },
+);
+
+// The following are for external interaction such as messageTool, no special processing is required, please do not touch
+const resendMessage = (message: IMessageModel) => {
+  emits('resendMessage', message);
+};
+const handleToggleMessageItem = (
+  e: any,
+  message: IMessageModel,
+  isLongpress = false,
+) => {
+  emits('handleToggleMessageItem', e, message, isLongpress);
+};
+const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
+  emits('handleH5LongPress', e, message, type);
+};
+</script>
+
+<style lang="scss" scoped>
+/* stylelint-disable-next-line no-empty-source */
+</style>