@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/CustomerServiceChat/utils/conversationDraft.ts

@@ -0,0 +1,86 @@
+import {
+  IMessageModel,
+  SetConversationDraftParams,
+  StoreName,
+  TUIConversationService,
+  TUIStore,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { transformTextWithKeysToEmojiNames } from '../emoji-config';
+import { JSONToObject } from '../../../utils/index';
+
+class ConversationDraftManager {
+  private static instance: ConversationDraftManager | null = null;
+  private quoteMessageMap = new Map<string, IMessageModel>();
+
+  private constructor() { }
+
+  public static getInstance(): ConversationDraftManager {
+    if (!ConversationDraftManager.instance) {
+      ConversationDraftManager.instance = new ConversationDraftManager();
+    }
+    return ConversationDraftManager.instance;
+  }
+
+  public setStore(conversationID: string, draftContent: string, abstract: string, quoteMessage?: { type: 'quote' | 'reply'; message: IMessageModel }) {
+    if (conversationID && (this.isEditorNotEmpty(draftContent) || quoteMessage?.message?.ID)) {
+      let additionalDraftInfo = {};
+      if (quoteMessage?.message?.ID) {
+        this.quoteMessageMap.set(quoteMessage.message.ID, quoteMessage.message);
+        additionalDraftInfo = { messageID: quoteMessage.message.ID, type: quoteMessage.type };
+      }
+      const draftParams: SetConversationDraftParams = {
+        conversationID: conversationID,
+        draftInfo: {
+          html: draftContent,
+          abstract: abstract,
+          ...additionalDraftInfo,
+        },
+      };
+      TUIConversationService.setConversationDraft(draftParams);
+      TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
+    }
+  }
+
+  public getStore(conversationID: string, setEditorContentCallback: (...args: any[]) => void) {
+    const conversation = TUIStore.getConversationModel(conversationID);
+    if (!conversation) {
+      return;
+    }
+    if (conversation.conversationID && conversation.draftText) {
+      const draftObject = JSONToObject(conversation.draftText);
+      TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: this.quoteMessageMap.get(draftObject.messageID) || undefined, type: draftObject.type });
+      setEditorContentCallback(draftObject.html);
+    }
+    TUIConversationService.setConversationDraft({ conversationID: conversation.conversationID });
+  }
+
+  public generateAbstract(editorContent: Array<{ type: string; payload: { text?: string; file?: File } }>): string {
+    let abstract = '';
+    editorContent?.forEach((item: { type: string; payload: { text?: string; file?: File } }) => {
+      switch (item.type) {
+        case 'text':
+          abstract += transformTextWithKeysToEmojiNames(item.payload.text || '');
+          break;
+        case 'image':
+          abstract += TUITranslateService.t('TUIChat.图片');
+          break;
+        case 'video':
+          abstract += TUITranslateService.t('TUIChat.视频');
+          break;
+        case 'file':
+          abstract += TUITranslateService.t('TUIChat.文件');
+          break;
+        default:
+          break;
+      }
+    });
+    return abstract;
+  }
+
+  private isEditorNotEmpty(editorHTML: string) {
+    return editorHTML && !editorHTML.includes('is-empty') && editorHTML !== '<p></p>';
+  }
+}
+
+export default ConversationDraftManager.getInstance();

package/components/CustomerServiceChat/utils/sendMessage.ts

@@ -0,0 +1,140 @@
+import TUIChatEngine, {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+} from '@tencentcloud/chat-uikit-engine';
+import { isEnabledMessageReadReceiptGlobal } from '../../../utils/utils';
+import { ITipTapEditorContent } from '../../../interface';
+import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
+
+export const sendMessageErrorCodeMap: Map<number, string> = new Map([
+  [3123, '文本包含本地审核拦截词'],
+  [4004, '图片消息失败,无效的图片格式'],
+  [4005, '文件消息失败,禁止发送违规封禁的文件'],
+  [7004, '文件不存在,请检查文件路径是否正确'],
+  [7005, '文件大小超出了限制,如果上传文件,最大限制是100MB'],
+  [8001, '消息长度超出限制,消息长度不要超过12K'],
+  [80001, '消息或者资料中文本存在敏感内容,发送失败'],
+  [80004, '消息中图片存在敏感内容,发送失败'],
+]);
+
+export const createOfflinePushInfo = (conversation: IConversationModel) => {
+  const androidInfo = {
+    sound: 'private_ring.mp3',
+    XiaoMiChannelID: 'high_custom_1',
+    OPPOChannelID: 'tuikit',
+  };
+  const apnsInfo = {
+    sound: '01.caf',
+    image: 'https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png',
+  };
+  const userInfo = TUIStore.getData(StoreName.USER, 'userProfile');
+  const entity = {
+    sender: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? conversation.groupProfile?.groupID : userInfo.userID,
+    nickName: userInfo.nick,
+    chatType: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? 2 : 1,
+    version: 1,
+    action: 1,
+  };
+  return {
+    extension: JSON.stringify({ entity }),
+    androidInfo,
+    apnsInfo,
+  };
+};
+
+/**
+ * This function only processes five message types: Text/TextAt/Image/Video/File
+ * @param messageList
+ * @param currentConversation
+ */
+export const sendMessages = async (
+  messageList: ITipTapEditorContent[],
+  currentConversation: IConversationModel,
+) => {
+  // In case of messageJumping, the sent message is automatically cleared and returns to the bottom
+  if (TUIStore.getData(StoreName.CHAT, 'messageSource')) {
+    TUIStore.update(StoreName.CHAT, 'messageSource', undefined);
+  }
+  messageList?.forEach(async (content: ITipTapEditorContent) => {
+    try {
+      const options: SendMessageParams = {
+        to: currentConversation?.groupProfile?.groupID || currentConversation?.userProfile?.userID,
+        conversationType: currentConversation?.type as any,
+        payload: {},
+        needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+      };
+      // handle message typing
+      let textMessageContent;
+      const sendMessageOptions = {
+        offlinePushInfo: {},
+      };
+      switch (content?.type) {
+        case 'text':
+          textMessageContent = JSON.parse(JSON.stringify(content.payload?.text));
+          // Do not send empty messages
+          if (!textMessageContent) {
+            break;
+          }
+          options.payload = {
+            text: textMessageContent,
+          };
+          if (content.payload?.atUserList) {
+            options.payload.atUserList = content.payload.atUserList;
+            await TUIChatService.sendTextAtMessage(options, sendMessageOptions);
+          } else {
+            await TUIChatService.sendTextMessage(options, sendMessageOptions);
+          }
+          break;
+        case 'image':
+          options.payload = {
+            file: content.payload?.file,
+          };
+          await TUIChatService.sendImageMessage(options, sendMessageOptions);
+          break;
+        case 'video':
+          options.payload = {
+            file: content.payload?.file,
+          };
+          await TUIChatService.sendVideoMessage(options, sendMessageOptions);
+          break;
+        case 'file':
+          options.payload = {
+            file: content.payload?.file,
+          };
+          await TUIChatService.sendFileMessage(options, sendMessageOptions);
+          break;
+        default:
+          break;
+      }
+      enableSampleTaskStatus('sendMessage');
+    } catch (error: any) {
+      console.error(error);
+      // If the message fails to be sent and the message is a reference message, clear the reference message information
+      if (TUIStore.getData(StoreName.CHAT, 'quoteMessage')) {
+        TUIStore.update(StoreName.CHAT, 'quoteMessage', {});
+      }
+    }
+  });
+};
+
+export const handleMessageWithTyping = (cloudCustomData: any) => {
+  if (!cloudCustomData) {
+    cloudCustomData = {};
+  }
+  cloudCustomData.messageFeature = {
+    needTyping: 1,
+    version: 1,
+  };
+  return cloudCustomData;
+};
+
+export const sendTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
+  if (!inputContentEmpty && !inputBlur) {
+    TUIChatService.enterTypingState();
+  } else {
+    TUIChatService.leaveTypingState();
+  }
+};

package/components/common/Avatar/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="avatar-container"
+    :style="{
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarBorderRadius,
+    }"
+  >
+    <template v-if="isUniFrameWork">
+      <image
+        v-if="!loadErrorInUniapp"
+        class="avatar-image"
+        :src="avatarImageUrl || defaultAvatarUrl"
+        @load="avatarLoadSuccess"
+        @error="avatarLoadFailed"
+      />
+      <image
+        v-else
+        class="avatar-image"
+        :src="defaultAvatarUrl"
+        @load="avatarLoadSuccess"
+        @error="avatarLoadFailed"
+      />
+    </template>
+    <img
+      v-else
+      class="avatar-image"
+      :src="avatarImageUrl || defaultAvatarUrl"
+      @load="avatarLoadSuccess"
+      @error="avatarLoadFailed"
+    >
+    <div
+      v-if="useAvatarSkeletonAnimation && !isImgLoaded"
+      :class="{
+        placeholder: true,
+        hidden: isImgLoaded,
+        'skeleton-animation': useAvatarSkeletonAnimation,
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import vue from '../../../adapter-vue';
+import { isUniFrameWork } from '../../../utils/env';
+const { ref, toRefs } = vue;
+
+interface IProps {
+  url: string;
+  size?: string;
+  borderRadius?: string;
+  useSkeletonAnimation?: boolean;
+}
+
+interface IEmits {
+  (key: 'onLoad', e: Event): void;
+  (key: 'onError', e: Event): void;
+}
+
+const defaultAvatarUrl = ref(
+  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
+);
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  // uniapp vue2 does not support constants in defineProps
+  url: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
+  size: '36px',
+  borderRadius: '50%',
+  useSkeletonAnimation: false,
+});
+
+const {
+  size: avatarSize,
+  url: avatarImageUrl,
+  borderRadius: avatarBorderRadius,
+  useSkeletonAnimation: useAvatarSkeletonAnimation,
+} = toRefs(props);
+
+let reloadAvatarTime = 0;
+const isImgLoaded = ref<boolean>(false);
+const loadErrorInUniapp = ref<boolean>(false);
+
+function avatarLoadSuccess(e: Event) {
+  isImgLoaded.value = true;
+  emits('onLoad', e);
+}
+
+function avatarLoadFailed(e: Event) {
+  reloadAvatarTime += 1;
+  if (reloadAvatarTime > 3) {
+    return;
+  }
+  if (isUniFrameWork) {
+    loadErrorInUniapp.value = true;
+  } else {
+    (e.currentTarget as HTMLImageElement).src = defaultAvatarUrl.value;
+  }
+  emits('onError', e);
+}
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.avatar-container {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  flex: 0 0 auto;
+
+  .placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ececec;
+    transition: opacity 0.3s, background-color 0.1s ease-out;
+
+    &.skeleton-animation {
+      animation: breath 2s linear 0.3s infinite;
+    }
+
+    &.hidden {
+      opacity: 0;
+    }
+  }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes breath {
+  50% {
+    /* stylelint-disable-next-line scss/no-global-function-names */
+    background-color: darken(#ececec, 10%);
+  }
+}
+</style>

package/components/common/BottomPopup/index.ts

@@ -0,0 +1,3 @@
+import BottomPopup from './index.vue';
+
+export default BottomPopup;

package/components/common/BottomPopup/index.vue

@@ -0,0 +1,160 @@
+<!--
+  移动端 底部弹出对话框 组件
+  - pc 端，仅展示【插槽】内容，无弹出对话框，无对话框相关 header footer
+  - mobile 端，底部弹出对话框，支持 对话框相关 header footer 定制展示，详情请参见参数列表
+-->
+<template>
+  <div v-if="props.show">
+    <div
+      v-if="!isPC"
+      :class="[
+        'bottom-popup',
+        isUniFrameWork && 'bottom-popup-uni',
+        !isPC && 'bottom-popup-h5',
+        !isPC && props.modal && 'bottom-popup-modal',
+      ]"
+      @click="closeBottomPopup"
+    >
+      <div
+        ref="dialogRef"
+        :class="['bottom-popup-main', !isPC && 'bottom-popup-h5-main']"
+        :style="{
+          height: props.height,
+          borderTopLeftRadius: props.borderRadius,
+          borderTopRightRadius: props.borderRadius,
+        }"
+        @click.stop
+      >
+        <div
+          v-if="title || showHeaderCloseButton"
+          class="header"
+        >
+          <div
+            v-if="title"
+            class="header-title"
+          >
+            {{ title }}
+          </div>
+          <div
+            v-if="showHeaderCloseButton"
+            class="header-close"
+            @click="closeBottomPopup"
+          >
+            {{ TUITranslateService.t("关闭") }}
+          </div>
+        </div>
+        <slot />
+        <div
+          v-if="showFooterSubmitButton"
+          class="footer"
+        >
+          <div
+            class="footer-submit"
+            @click="submit"
+          >
+            {{ submitButtonContent }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot v-else />
+  </div>
+</template>
+<script setup lang="ts">
+import vue from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { outsideClick } from '@tencentcloud/universal-api';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+const { ref, watch, nextTick } = vue;
+
+const props = defineProps({
+  // Whether to display the bottom pop-up dialog box
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // Whether a mask layer is required, the default is true
+  modal: {
+    type: Boolean,
+    default: true,
+  },
+  // Popup box content area height (excluding mask), default is fit-content
+  height: {
+    type: String,
+    default: 'fit-content',
+  },
+  // Whether the pop-up dialog box can be closed by clicking outside, the default is true
+  // uniapp only supports closing the pop-up dialog box by clicking the mask
+  closeByClickOutside: {
+    type: Boolean,
+    default: true,
+  },
+  // The rounded angle of the top border corners is 0px by default, i.e. right angle by default
+  borderRadius: {
+    type: String,
+    default: '0px',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  // Whether to display the top close button, not displayed by default
+  showHeaderCloseButton: {
+    type: Boolean,
+    default: false,
+  },
+  // Whether to display the submit button at the bottom, not displayed by default
+  showFooterSubmitButton: {
+    type: Boolean,
+    default: false,
+  },
+  // Bottom submit button text, only valid when showFooterSubmitButton is true
+  submitButtonContent: {
+    type: String,
+    default: () => TUITranslateService.t('确定'),
+  },
+});
+
+const emits = defineEmits(['onOpen', 'onClose', 'onSubmit']);
+const dialogRef = ref();
+
+watch(
+  () => props.show,
+  (newVal: boolean, oldVal: boolean) => {
+    if (newVal === oldVal) {
+      return;
+    }
+    switch (newVal) {
+      case true:
+        emits('onOpen', dialogRef);
+        nextTick(() => {
+          // Effective under web h5
+          if (isH5 && !isUniFrameWork) {
+            if (props.closeByClickOutside) {
+              outsideClick.listen({
+                domRefs: dialogRef.value,
+                handler: closeBottomPopup,
+              });
+            }
+          }
+        });
+        break;
+      case false:
+        emits('onClose', dialogRef);
+        break;
+    }
+  },
+);
+
+const closeBottomPopup = () => {
+  if (isUniFrameWork || isH5) {
+    emits('onClose', dialogRef);
+  }
+};
+
+const submit = () => {
+  emits('onSubmit');
+  closeBottomPopup();
+};
+</script>
+<style scoped lang="scss" src="./style/index.scss"></style>

package/components/common/BottomPopup/style/h5.scss

@@ -0,0 +1,62 @@
+.bottom-popup-h5 {
+  width:100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: stretch;
+  margin: 0;
+  padding: 0;
+  z-index: 999999;
+  border-radius: 5px 5px 0 0;
+
+  &-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    height: fit-content;
+    background-color: #fff;
+    background-image: url("../../../../assets/form-dialog-bg.png");
+    background-size: cover;
+    max-height:80vh;
+    overflow-y: auto;
+    .header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 20px;
+      font-size: 16px;
+
+      .header-close {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: #006eff;
+        font-size: 18px;
+      }
+    }
+
+    .footer {
+      padding: 20px;
+
+      .footer-submit {
+        color: #fff;
+        padding: 12px 0;
+        width: 100%;
+        background: #006eff;
+        text-align: center;
+        border-radius: 5px;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+.bottom-popup-uni {
+  padding-bottom: var(--window-bottom);
+}

package/components/common/BottomPopup/style/index.scss

@@ -0,0 +1,3 @@
+@import "../../common";
+@import "./h5";
+@import "./modal";

package/components/common/BottomPopup/style/modal.scss

@@ -0,0 +1,5 @@
+.bottom-popup-modal {
+  // width: 100vw;
+  // height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+}

package/components/common/Dialog/index.ts

@@ -0,0 +1,3 @@
+import Dialog from './index.vue';
+
+export default Dialog;