@tencentcloud/ai-desk-customer-vue 0.1.0

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

@@ -0,0 +1,504 @@
+<template>
+  <div :class="containerClassNameList">
+    <div
+      :class="{
+        'control-reverse': message.flow === 'out',
+      }"
+    >
+      <!-- message-bubble-container -->
+      <div class="message-bubble-content">
+        <div
+          class="message-bubble-main-content"
+          :class="[message.flow === 'in' ? '' : 'reverse']"
+        >
+          <Avatar
+          v-if="isPC"
+            useSkeletonAnimation
+            :url="message.flow=== 'in'? (message.avatar || customerAvatar) : (message.avatar || '')"
+          />
+          <main
+            :class="['message-body',message.flow==='out' && 'message-body-reverse']"
+            @click.stop
+          >
+            <div
+              v-if="
+                isPC
+              "
+              class="message-body-nick-name"
+            >
+              {{ props.content.showName }}
+            </div>
+            <div
+              :class="[
+                'message-body-main',
+                message.flow === 'out' && 'message-body-main-reverse',
+              ]"
+            >
+              <div
+                :class="[
+                  'blink',
+                  'message-body-content',
+                  message.flow === 'out' ? 'content-out' : 'content-in',
+                  message.hasRiskContent && 'content-has-risk',
+                  isNoPadding ? 'content-no-padding' : '',
+                  isNoPadding && isBlink ? 'blink-shadow' : '',
+                  !isNoPadding && isBlink ? 'blink-content' : '',
+                  isMultiBranchMsg?'multi-branch-message':'',
+                  isPC ? '':'body-mobile',
+                ]"
+              >
+              <MessageQuote
+                v-if="isH5"
+                :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
+                :message="message"
+                @blinkMessage="blinkMessage"
+                @scrollTo="scrollTo"
+              />
+                <div class="content-main">
+                  <img
+                    v-if="
+                      (message.type === TYPES.MSG_IMAGE ||
+                        message.type === TYPES.MSG_VIDEO) &&
+                        message.hasRiskContent
+                    "
+                    :class="[
+                      'message-risk-replace',
+                      !isPC && 'message-risk-replace-h5',
+                    ]"
+                    :src="riskImageReplaceUrl"
+                  >
+                  <template v-else>
+                    <slot name="messageElement" />
+                    <slot name="TUIEmojiPlugin" />
+                  </template>
+                </div>
+                <!-- Risk Content Tips -->
+                <div
+                  v-if="message.hasRiskContent"
+                  class="content-has-risk-tips"
+                >
+                  {{ riskContentText }}
+                </div>
+              </div>
+              <!-- audio unplay mark -->
+              <div
+                v-if="isDisplayUnplayMark"
+                class="audio-unplay-mark"
+              />
+              <!-- Send Fail Icon -->
+              <div
+                v-if="message.status === 'fail' || message.hasRiskContent"
+                class="message-label fail"
+                @click="resendMessage()"
+              >
+                !
+              </div>
+              <!-- Loading Icon -->
+              <Icon
+                v-if="
+                  message.status === 'unSend' &&
+                    needLoadingIconMessageType.includes(message.type)
+                "
+                class="message-label loading-circle"
+                :file="loadingIcon"
+                :width="'15px'"
+                :height="'15px'"
+              />
+              <!-- Read & Unread -->
+              <ReadStatus
+                class="message-label align-self-bottom"
+                :message="shallowCopyMessage(message)"
+              />
+            </div>
+          </main>
+        </div>
+        <!-- message extra area -->
+        <div v-if="!isH5" class="message-bubble-extra-content">
+          <!-- extra: message quote -->
+          <MessageQuote
+            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
+            :message="message"
+            @blinkMessage="blinkMessage"
+            @scrollTo="scrollTo"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import TUIChatEngine, {
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import ReadStatus from './read-status/index.vue';
+import MessageQuote from './message-quote/index-web.vue';
+import Avatar from '../../../common/Avatar/index.vue';
+import loadingIcon from '../../../../assets/loading.png';
+import customerAvatar from '../../../../assets/customer_avatar.png';
+import { shallowCopyMessage } from '../../../../utils/utils';
+import { isPC,isH5 } from '../../../../utils/env';
+const { computed, toRefs } = vue;
+
+interface IProps {
+  messageItem: IMessageModel;
+  content?: any;
+  classNameList?: string[];
+  blinkMessageIDList?: string[];
+  isAudioPlayed?: boolean | undefined;
+}
+
+interface IEmits {
+  (e: 'resendMessage'): void;
+  (e: 'blinkMessage', messageID: string): void;
+  // Only for uniapp
+  (e: 'scrollTo', scrollHeight: number): void;
+}
+
+const emits = defineEmits<IEmits>();
+
+const props = withDefaults(defineProps<IProps>(), {
+  messageItem: () => ({} as IMessageModel),
+  content: () => ({}),
+  isAudioPlayed: false,
+  blinkMessageIDList: () => [],
+  classNameList: () => [],
+});
+
+const TYPES = TUIChatEngine.TYPES;
+const riskImageReplaceUrl
+  = 'https://web.sdk.qcloud.com/component/TUIKit/assets/has_risk_default.png';
+const needLoadingIconMessageType = [
+  TYPES.MSG_LOCATION,
+  TYPES.MSG_TEXT,
+  TYPES.MSG_CUSTOM,
+  TYPES.MSG_MERGER,
+  TYPES.MSG_FACE,
+];
+
+const { blinkMessageIDList, messageItem: message } = toRefs(props);
+
+const isDisplayUnplayMark = computed<boolean>(() => {
+  return (
+    message.value.flow === 'in'
+    && message.value.status === 'success'
+    && message.value.type === TYPES.MSG_AUDIO
+    && !props.isAudioPlayed
+  );
+});
+
+const containerClassNameList = computed(() => {
+  return ['message-bubble', ...props.classNameList];
+});
+
+// When an emoji is deleted, the `reactionList` will update the corresponding emoji's `totalUserCount`.
+const hasEmojiReaction = computed(() => {
+  return message.value?.reactionList.some(
+    (item: any) => item.totalUserCount !== 0,
+  );
+});
+
+const isMultiBranchMsg = computed(()=>{
+  if(message.value?.type == "TIMCustomElem"){
+    if(JSON.parse(message.value.payload.data).src == '32'){
+    return true;
+  }
+
+  }
+  
+  return false;
+});
+
+
+const isNoPadding = computed(() => {
+  return (
+    !hasEmojiReaction.value
+    && [TYPES.MSG_IMAGE, TYPES.MSG_VIDEO, TYPES.MSG_MERGER].includes(
+      message.value.type,
+    )
+  );
+});
+
+const riskContentText = computed<string>(() => {
+  let content = TUITranslateService.t('TUIChat.涉及敏感内容') + ', ';
+  if (message.value.flow === 'out') {
+    content += TUITranslateService.t('TUIChat.发送失败');
+  } else {
+    content += TUITranslateService.t(
+      message.value.type === TYPES.MSG_AUDIO
+        ? 'TUIChat.无法收听'
+        : 'TUIChat.无法查看',
+    );
+  }
+  return content;
+});
+
+const isBlink = computed(() => {
+  if (message.value?.ID) {
+    return blinkMessageIDList?.value?.includes(message.value.ID);
+  }
+  return false;
+});
+
+function resendMessage() {
+  if (!message.value?.hasRiskContent) {
+    emits('resendMessage');
+  }
+}
+
+function blinkMessage(messageID: string) {
+  emits('blinkMessage', messageID);
+}
+
+function scrollTo(scrollHeight: number) {
+  emits('scrollTo', scrollHeight);
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.message-bubble {
+  padding: 10px 15px;
+  display: flex;
+  flex-direction: row;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  &.multiple-selected {
+    background-color: #f0f0f0;
+  }
+
+  .multiple-select-radio {
+    margin-right: 12px;
+    flex: 0 0 auto;
+  }
+
+  .control-reverse {
+    flex: 1 1 auto;
+    flex-direction: row-reverse;
+  }
+
+  .message-bubble-main-content {
+    display: flex;
+    flex-direction: row;
+
+    .message-avatar {
+      display: block;
+      width: 36px;
+      height: 36px;
+      border-radius: 5px;
+      flex: 0 0 auto;
+    }
+    .message-body {
+      display: flex;
+      flex: 0 1 auto;
+      flex-direction: column;
+      align-items: flex-start;
+      margin: 0 8px;
+
+      &-reverse {
+        align-items: flex-end;
+      }
+
+      .message-body-nick-name {
+        display: block;
+        margin-bottom: 4px;
+        font-size: 12px;
+        color: #999;
+        max-width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .message-body-main {
+        max-width: 100%;
+        display: flex;
+        flex-direction: row;
+        min-width: 0;
+        box-sizing: border-box;
+
+        &-reverse {
+          flex-direction: row-reverse;
+          align-items: flex-end;
+        }
+
+        .audio-unplay-mark {
+          flex: 0 0 auto;
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          background-color: #f00;
+          margin: 5px;
+        }
+
+        .message-body-content {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+          box-sizing: border-box;
+          padding: 16px;
+          font-size: 14px;
+          color: #000;
+          letter-spacing: 0;
+          word-wrap: break-word;
+          word-break: break-all;
+          position: relative;
+
+          .content-main {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 0;
+            align-content: flex-start;
+            border: 0 solid black;
+            margin: 0;
+            padding: 0;
+            min-width: 0;
+
+            .message-risk-replace {
+              width: 130px;
+              height: 130px;
+            }
+          }
+
+          .content-has-risk-tips {
+            font-size: 12px;
+            color: #fa5151;
+            font-family: PingFangSC-Regular;
+            margin-top: 5px;
+            border-top: 1px solid #e5c7c7;
+            padding-top: 5px;
+          }
+        }
+        
+        
+        .content-in {
+          background: #f3f4f7;
+          border-radius: 0 10px 10px;
+        }
+
+        .body-mobile {
+          background-color: #fff;
+        }
+
+        .multi-branch-message {
+          background-color: transparent;
+          border-radius: 0 10px 10px;
+          padding: 0px;
+        }
+
+        .content-out {
+          background: linear-gradient(26deg, #1C66E5 2.07%, #03C8FD 152.75%);
+          color:#fff;
+          border-radius: 10px 0 10px 10px;
+        }
+
+        .content-no-padding {
+          padding: 0;
+          background: transparent;
+          border-radius: 10px;
+          overflow: hidden;
+        }
+
+        .content-no-padding.content-has-risk {
+          padding: 12px;
+        }
+
+        .content-has-risk {
+          background: rgba(250, 81, 81, 0.16);
+        }
+
+        .blink-shadow {
+          @keyframes shadow-blink {
+            50% {
+              box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
+            }
+          }
+
+          box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
+          animation: shadow-blink 1s linear 3;
+        }
+
+        .blink-content {
+          @keyframes reference-blink {
+            50% {
+              background-color: #ff9c19;
+            }
+          }
+
+          animation: reference-blink 1s linear 3;
+        }
+
+        .message-label {
+          align-self: flex-end;
+          font-family: PingFangSC-Regular;
+          font-size: 12px;
+          color: #b6b8ba;
+          word-break: keep-all;
+          flex: 0 0 auto;
+          margin: 0 8px;
+
+          &.fail {
+            width: 15px;
+            height: 15px;
+            border-radius: 15px;
+            background: red;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
+
+          &.loading-circle {
+            opacity: 0;
+            animation: circle-loading 2s linear 1s infinite;
+          }
+
+          @keyframes circle-loading {
+            0% {
+              transform: rotate(0);
+              opacity: 1;
+            }
+
+            100% {
+              opacity: 1;
+              transform: rotate(360deg);
+            }
+          }
+        }
+
+        .align-self-bottom {
+          align-self: flex-end;
+        }
+      }
+    }
+  }
+
+  .reverse {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
+
+  .message-bubble-extra-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>[自定义消息]</div>
+</template>
+
+<script lang="ts" setup></script>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="message-image">
+    <img
+      mode="aspectFit"
+      class="message-image"
+      :src="url"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import { CUSTOM_BIG_EMOJI_URL } from '../../emoji-config';
+const { ref, onMounted } = vue;
+
+const props = defineProps({
+  content: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const url = ref(props.content.url);
+
+onMounted(() => {
+  if (props.content.type === 'custom') {
+    if (!CUSTOM_BIG_EMOJI_URL) {
+      console.warn(
+        'CUSTOM_BIG_EMOJI_URL is required for custom emoji, please check your CUSTOM_BIG_EMOJI_URL.',
+      );
+    } else {
+      url.value = CUSTOM_BIG_EMOJI_URL + props.content.name;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../style/common";
+
+.message-image {
+  width: 80px;
+  height: 80px;
+}
+</style>

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

@@ -0,0 +1,151 @@
+<template>
+  <div
+    :class="['file-message-montainer',messageItem.flow === 'in'?'file-in' :'']"
+    :title="TUITranslateService.t('TUIChat.单击下载')"
+    @click="download"
+  >
+    <Icon
+      :file="files"
+      class="file-icon"
+    />
+    <div>
+      <div>{{ props.content.name }}</div>
+      <div>{{ props.content.size }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import {
+  TUITranslateService,
+  IMessageModel,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import files from '../../../../assets/files.png';
+import { isUniFrameWork,isWeChat } from '../../../../utils/env';
+import type { IFileMessageContent } from '../../../../interface';
+const { withDefaults } = vue;
+
+const props = withDefaults(
+  defineProps<{
+    content: IFileMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({} as IFileMessageContent),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+
+const download = () => {
+  if (props.messageItem.hasRiskContent || props.messageItem.flow === 'out') {
+    return;
+  }
+  
+  // 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 (!isUniFrameWork && (window as any)?.fetch) {
+    const option = {
+    mode: 'cors',
+    headers: new Headers({
+      'Content-Type': 'application/x-www-form-urlencoded',
+    }),
+  } as RequestInit;
+    fetch(props.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 = props.content.name;
+        a.click();
+      });
+  } else if(isWeChat){
+    console.log("isWechat",props.content.url)
+    
+    wx.downloadFile({
+      url: props.content.url,
+      filePath: wx.env.USER_DATA_PATH + '/' + props.content.name,
+      success: function (res) {
+        var filePath = res.filePath;
+        const lastIndex = filePath.lastIndexOf('.');
+        const fileType = filePath.substring(lastIndex + 1);
+        console.log(fileType)
+        wx.openDocument({
+          filePath: filePath,
+          showMenu:true,
+          fileType:fileType,
+          success: function (res) {
+            console.log('打开文档成功');
+          },
+          fail:function(){
+            console.log("fail")
+          }
+        });
+      }
+    });
+  }else if(isUniFrameWork){
+    const lastIndex = props.content.url.lastIndexOf('.');
+    const fileType = props.content.url.substring(lastIndex + 1);
+    uni.downloadFile({
+      url:props.content.url,
+      success:function(res){
+        if(res.statusCode == 200){
+          console.log(res)
+          const tempFilePaths = res.tempFilePath;
+          uni.showToast({
+            title: '下载成功'+tempFilePaths,
+            icon: 'success',
+            duration: 2000
+          });
+          console.log(tempFilePaths);
+          uni.openDocument({
+            filePath: tempFilePaths,
+            fileType: fileType,
+            success: function () {
+                console.log('打开文档成功');
+            },
+            fail: function () {
+                console.log('打开文档失败');
+            }
+          });
+        }
+      }
+    });
+    // uni.openDocument({
+    //     filePath: tempFilePaths[0],
+    //     fileType: 'pdf',
+    //     success: function () {
+    //         console.log('打开文档成功');
+    //     },
+    //     fail: function () {
+    //         console.log('打开文档失败');
+    //     }
+    // });
+  } 
+  
+  else {
+    console.log("no window here")
+    const a = document.createElement('a');
+    a.href = props.content.url;
+    a.target = '_blank';
+    a.download = props.content.name;
+    a.click();
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../style/common";
+.file-in{
+  cursor: pointer;
+}
+.file-message-montainer {
+  display: flex;
+  flex-direction: row;
+  
+
+  .file-icon {
+    margin: auto 8px;
+  }
+}
+</style>