@tencentcloud/ai-desk-customer-vue 0.1.0

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="simple-message-container">
+    <div class="simple-message-avatar">
+      <Avatar :url="props.avatar" />
+    </div>
+    <div>
+      <div class="simple-message-sender">
+        {{ props.sender }}
+      </div>
+      <div class="simple-message-body">
+        <div
+          :class="{
+            'simple-message-content': true,
+            'no-padding': isNoPadding,
+          }"
+        >
+          <slot />
+        </div>
+        <div class="timestamp">
+          {{ calculateTimestamp(props.time * 1000) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import vue from '../../../../../adapter-vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import Avatar from '../../../../common/Avatar/index.vue';
+import { calculateTimestamp } from '../../../../../utils/utils';
+const { computed } = vue;
+
+interface IProps {
+  sender: string;
+  avatar: string;
+  type: string;
+  time: number;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  sender: '',
+  avatar: '',
+});
+
+const TYPES = TUIChatEngine.TYPES;
+
+const isNoPadding = computed(() => {
+  return [TYPES.MSG_IMAGE, TYPES.MSG_VIDEO, TYPES.MSG_MERGER].includes(
+    props.type,
+  );
+});
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.simple-message-container {
+  flex-direction: row;
+
+  .simple-message-avatar {
+    flex: 0 0 auto;
+    margin-right: 8px;
+  }
+
+  .simple-message-sender {
+    display: block;
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 11px;
+    color: #999;
+  }
+
+  .simple-message-body {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+
+  .simple-message-content {
+    margin-top: 8px;
+    background-color: #dceafd;
+    border-radius: 0 10px 10px;
+    padding: 10px 12px;
+  }
+
+  .timestamp {
+    flex: 0 0 auto;
+    font-size: 12px;
+    color: #aaa;
+    margin-left: 6px;
+  }
+
+  .no-padding {
+    padding: 0;
+    background-color: transparent;
+  }
+}
+</style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="dialog-video">
+    <video
+      v-if="isShow"
+      id="videoEle"
+      class="video-box"
+      :src="videoData"
+      controls
+      autoplay
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../TencentCloudCustomer/tui-customer-service-plugin-test/adapter-vue';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { onLoad, onReady } from '@dcloudio/uni-app';
+const { ref } = vue;
+
+const videoData = ref();
+const isShow = ref(false);
+const videoContext = ref();
+onLoad((option: any) => {
+  const decodedUrl = decodeURIComponent(option?.videoUrl);
+  videoData.value = decodedUrl;
+  isShow.value = true;
+});
+
+onReady(() => {
+  isShow.value = true;
+  videoContext.value = TUIGlobal.createVideoContext('videoEle');
+});
+</script>
+<style lang="scss" scoped>
+.dialog-video {
+  position: fixed;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(#000, 0.6);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .video-box {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,312 @@
+<template>
+  <div
+    v-if="!isAllActionItemInvalid && !messageItem.hasRiskContent"
+    ref="messageToolDom"
+    :class="['dialog-item', !isPC ? 'dialog-item-h5' : 'dialog-item-web']"
+  >
+    <div
+      class="dialog-item-list"
+      :class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
+    >
+      <template v-for="(item, index) in actionItems">
+        <div
+          v-if="item.renderCondition()"
+          :key="item.key"
+          class="list-item"
+          @click="getFunction(index)"
+          @mousedown="beforeCopy(item.key)"
+        >
+          <Icon
+            :file="item.iconUrl"
+            :size="'15px'"
+          />
+          <div class="list-item-text">{{ item.text }}</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIStore,
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import vue from '../../../../adapter-vue';
+const { ref, watchEffect, computed } = vue;
+import Icon from '../../../common/Icon.vue';
+import { Toast, TOAST_TYPE } from '../../../common/Toast/index-web';
+import delIcon from '../../../../assets/msg-del.svg';
+import copyIcon from '../../../../assets/msg-copy.svg';
+import quoteIcon from '../../../../assets/msg-quote.svg';
+import revokeIcon from '../../../../assets/msg-revoke.svg';
+import downloadIcon from '../../../../assets/download.svg'
+import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus';
+import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
+import { isH5, isPC, isUniFrameWork } from '../../../../utils/env';
+
+// uni-app conditional compilation will not run the following code
+// #ifndef APP || APP-PLUS || MP || H5
+import CopyManager from '../../../../utils/copy-web';
+// #endif
+
+interface IProps {
+  messageItem: IMessageModel;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  messageItem: () => ({} as IMessageModel),
+});
+
+const TYPES = TUIChatEngine.TYPES;
+
+const actionItems = ref([
+  {
+    key: 'open',
+    text: TUITranslateService.t('TUIChat.打开'),
+    iconUrl: copyIcon,
+    renderCondition() {
+      if (!message.value) return false;
+      return (
+        isPC
+        && (message.value?.type === TYPES.MSG_FILE
+        || message.value.type === TYPES.MSG_VIDEO
+        || message.value.type === TYPES.MSG_IMAGE)
+      );
+    },
+    clickEvent: openMessage,
+  },
+  {
+    key: 'copy',
+    text: TUITranslateService.t('TUIChat.复制'),
+    iconUrl: copyIcon,
+    renderCondition() {
+      if (!message.value) return false;
+      return message.value.type === TYPES.MSG_TEXT;
+    },
+    clickEvent: copyMessage,
+  },
+  {
+    key: 'revoke',
+    text: TUITranslateService.t('TUIChat.撤回'),
+    iconUrl: revokeIcon,
+    renderCondition() {
+      if (!message.value) return false;
+      return message.value.flow === 'out' && message.value.status === 'success';
+    },
+    clickEvent: revokeMessage,
+  },
+  {
+    key: 'delete',
+    text: TUITranslateService.t('TUIChat.删除'),
+    iconUrl: delIcon,
+    renderCondition() {
+      if (!message.value) return false;
+      return message.value.status === 'success';
+    },
+    clickEvent: deleteMessage,
+  },
+  {
+    key: 'quote',
+    text: TUITranslateService.t('TUIChat.引用'),
+    iconUrl: quoteIcon,
+    renderCondition() {
+      if (!message.value) return false;
+      const _message = TUIStore.getMessageModel(message.value.ID);
+      return message.value.status === 'success' && !_message.getSignalingInfo();
+    },
+    clickEvent: quoteMessage,
+  },{
+    key:'download',
+    text: '下载',
+    iconUrl: downloadIcon,
+    renderCondition(){
+      if (!message.value) return false;
+      return message.value.type === TYPES.MSG_FILE && message.value.flow === 'out';
+    },
+    clickEvent:downloadMessage,
+  }
+]);
+
+const message = ref<IMessageModel>();
+const messageToolDom = ref<HTMLElement>();
+
+watchEffect(() => {
+  message.value = TUIStore.getMessageModel(props.messageItem.ID);
+});
+
+const isAllActionItemInvalid = computed(() => {
+  for (let i = 0; i < actionItems.value.length; ++i) {
+    if (actionItems.value[i].renderCondition()) {
+      return false;
+    }
+  }
+  return true;
+});
+
+function getFunction(index: number) {
+  // Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed.
+  actionItems.value[index].clickEvent();
+}
+
+function openMessage() {
+  let url = '';
+  switch (message.value?.type) {
+    case TUIChatEngine.TYPES.MSG_FILE:
+      url = message.value.payload.fileUrl;
+      break;
+    case TUIChatEngine.TYPES.MSG_VIDEO:
+      url = message.value.payload.remoteVideoUrl;
+      break;
+    case TUIChatEngine.TYPES.MSG_IMAGE:
+      url = message.value.payload.imageInfoArray[0].url;
+      break;
+  }
+  window?.open(url, '_blank');
+}
+
+function revokeMessage() {
+  if (!message.value) return;
+  const messageModel = TUIStore.getMessageModel(message.value.ID);
+  messageModel
+    .revokeMessage()
+    .then(() => {
+      enableSampleTaskStatus('revokeMessage');
+    })
+    .catch((error: any) => {
+      if (error.code === 20016) {
+        const message = TUITranslateService.t('TUIChat.已过撤回时限');
+        Toast({
+          message,
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    });
+}
+
+function deleteMessage() {
+  if (!message.value) return;
+  const messageModel = TUIStore.getMessageModel(message.value.ID);
+  messageModel.deleteMessage();
+}
+
+async function copyMessage() {
+  if (isUniFrameWork) {
+    TUIGlobal?.setClipboardData({
+      data: transformTextWithKeysToEmojiNames(message.value?.payload?.text),
+    });
+  } else {
+    // uni-app conditional compilation will not run the following code
+    // #ifndef APP || APP-PLUS || MP || H5
+    CopyManager.copySelection(message.value?.payload?.text);
+    // #endif
+  }
+}
+
+function beforeCopy(key: string) {
+  // only pc support copy selection or copy full message text
+  // uni-app and h5 only support copy full message text
+  if (key !== 'copy' || isH5) {
+    return;
+  }
+
+  // uni-app conditional compilation will not run the following code
+  // #ifndef APP || APP-PLUS || MP || H5
+  CopyManager.saveCurrentSelection();
+  // #endif
+}
+
+function quoteMessage() {
+  if (!message.value) return;
+  message.value.quoteMessage();
+}
+ 
+function downloadMessage(){
+  if(!message.value || message.value.hasRiskContent) return;
+  const option = {
+    mode: 'cors',
+    headers: new Headers({
+      'Content-Type': 'application/x-www-form-urlencoded',
+    }),
+  } as RequestInit;
+  const content = message.value.getMessageContent();
+  // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
+  if ((window as any)?.fetch) {
+    fetch(content.url, option)
+      .then(res => res.blob())
+      .then((blob) => {
+        const a = document.createElement('a');
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = content.name;
+        a.click();
+      });
+  } else {
+    const a = document.createElement('a');
+    a.href = content.url;
+    a.target = '_blank';
+    a.download = content.name;
+    a.click();
+  }
+}
+
+defineExpose({
+  messageToolDom,
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../style/common";
+
+.dialog-item-web {
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  padding: 3px 0;
+  
+  .dialog-item-list {
+    display: flex;
+    align-items: baseline;
+    white-space: nowrap;
+    flex-wrap: wrap;
+    max-width: 280px;
+
+    .list-item {
+      padding: 6px 12px;
+      .list-item-text {
+        font-size: 12px;
+        line-height: 17px;
+        margin-top:4px;
+      }
+    }
+  }
+}
+
+.dialog-item-h5 {
+  @extend .dialog-item-web;
+
+  padding: 0;
+
+  .dialog-item-list {
+    margin: 10px;
+    white-space: nowrap;
+    flex-wrap: wrap;
+    max-width: 280px;
+
+    .list-item {
+      padding: 0 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #4f4f4f;
+
+      .list-item-text {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
+../../../common/Toast

package/components/CustomerServiceChat/message-list/message-tool/message-revoked.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="revoke">
+    <span v-if="message.flow === 'in'">{{ message.nick || message.from }}</span>
+    <span v-else-if="message.from === message.revoker">{{
+      TUITranslateService.t("TUIChat.您")
+    }}</span>
+    <span v-else>{{ message.revoker }}</span>
+    <span>{{ TUITranslateService.t("TUIChat.撤回了一条消息") }}</span>
+    <span
+      v-if="message.flow === 'out' && isEditMsg"
+      class="edit"
+      @click="messageEdit"
+    >{{ TUITranslateService.t("TUIChat.重新编辑") }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+const { watchEffect, ref } = vue;
+import {
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+
+const props = defineProps({
+  isEdit: {
+    type: Boolean,
+    default: () => false,
+  },
+  messageItem: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const message = ref<IMessageModel>();
+const isEditMsg = ref(false);
+const emits = defineEmits(['messageEdit']);
+watchEffect(() => {
+  message.value = props.messageItem;
+  isEditMsg.value = props.isEdit;
+});
+const messageEdit = () => {
+  emits('messageEdit');
+};
+</script>
+<style lang="scss" scoped>
+@import "../../style/common";
+
+.revoke {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  color: #999;
+  font-size: 12px;
+  margin-bottom: 10px;
+
+  .edit {
+    padding: 0 5px;
+    color: #006eff;
+  }
+}
+</style>