Revert "修改样式"

This reverts commit 787b25bdcd6447715359e70ec06d2381f0d9c64d.

components.d.ts

@@ -11,8 +11,6 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Application: typeof import('./src/components/Application/Application.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    NTabPane: typeof import('naive-ui')['NTabPane']
-    NTabs: typeof import('naive-ui')['NTabs']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']

src/TUIKit/TUIComponents/container/TUIChat-temp/components/index.ts

@@ -1,37 +0,0 @@
-import MessageText from './message-text.vue';
-import MessageImage from './message-image.vue';
-import MessageVideo from './message-video.vue';
-import MessageAudio from './message-audio.vue';
-import MessageFile from './message-file.vue';
-import MessageFace from './message-face.vue';
-import MessageLocation from './message-location.vue';
-import MessageMerger from './message-merger.vue';
-import MessageCustom from './message-custom.vue';
-import MessageTip from './message-tip.vue';
-import MessageBubble from './message-bubble.vue';
-import MessageRevoked from './message-revoked.vue';
-import MessageSystem from './message-system.vue';
-import MessageTool from './message-tool.vue';
-import MessageEmojiReact from './message-emoji-react.vue';
-import MessageItem from './index.vue';
-import MessageTimestamp from './message-timestamp.vue'
-
-export {
-  MessageText,
-  MessageImage,
-  MessageVideo,
-  MessageAudio,
-  MessageFile,
-  MessageFace,
-  MessageLocation,
-  MessageMerger,
-  MessageCustom,
-  MessageTip,
-  MessageTimestamp,
-  MessageBubble,
-  MessageRevoked,
-  MessageSystem,
-  MessageTool,
-  MessageEmojiReact,
-  MessageItem
-};

src/TUIKit/TUIComponents/container/TUIChat-temp/components/index.vue

@@ -1,178 +0,0 @@
-<template>
-  <div class="message-item">
-    <MessageTip v-if="isMessageTip(message)" :data="handleTipMessageShowContext(message)" />
-    <MessageBubble
-      v-else-if="!message.isRevoked"
-      :data="message"
-      :isH5="env.isH5"
-      :messagesList="messageList"
-      :needGroupReceipt="displayGroupMessageReadReceipt"
-      :needReplies="true"
-      :needEmojiReact="displayEmojiReactions"
-      @jumpID="jumpID"
-      @resendMessage="resendMessage"
-      @showReadReceiptDialog="showReadReceiptDialog"
-      @showRepliesDialog="showRepliesDialog"
-    >
-      <MessageText v-if="message.type === types.MSG_TEXT" :data="handleTextMessageShowContext(message)" />
-      <MessageImage
-        v-if="message.type === types.MSG_IMAGE"
-        :isH5="env.isH5"
-        :data="handleImageMessageShowContext(message)"
-        @uploading="uploading"
-        @previewImage="previewImage"
-      />
-      <MessageVideo
-        v-if="message.type === types.MSG_VIDEO"
-        :isH5="env.isH5"
-        :data="handleVideoMessageShowContext(message)"
-        @uploading="uploading"
-      />
-      <MessageAudio v-if="message.type === types.MSG_AUDIO" :data="handleAudioMessageShowContext(message)" />
-      <MessageFile v-if="message.type === types.MSG_FILE" :data="handleFileMessageShowContext(message)" />
-      <MessageFace v-if="message.type === types.MSG_FACE" :data="handleFaceMessageShowContext(message)" :isH5="env.isH5"/>
-      <MessageLocation v-if="message.type === types.MSG_LOCATION" :data="handleLocationMessageShowContext(message)" />
-      <MessageCustom v-if="message.type === types.MSG_CUSTOM" :data="handleCustomMessageShowContext(message)" />
-      <MessageMerger v-if="message.type === types.MSG_MERGER" :data="handleMergerMessageShowContext(message)" />
-      <template #dialog>
-        <MessageTool :message="message" :needEmojiReact="displayEmojiReactions" @handleMessage="handleMessage" />
-        <MessageEmojiReact v-if="!env?.isH5 && displayEmojiReactions" :message="message" type="dropdown" />
-      </template>
-    </MessageBubble>
-    <MessageRevoked v-else :isEdit="message.type === types.MSG_TEXT" :data="message" @edit="handleEdit(message)" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { toRefs, defineProps, defineEmits } from 'vue';
-import MessageBubble from './message-bubble.vue';
-import MessageText from './message-text.vue';
-import MessageImage from './message-image.vue';
-import MessageVideo from './message-video.vue';
-import MessageAudio from './message-audio.vue';
-import MessageFile from './message-file.vue';
-import MessageFace from './message-face.vue';
-import MessageLocation from './message-location.vue';
-import MessageMerger from './message-merger.vue';
-import MessageCustom from './message-custom.vue';
-import MessageTip from './message-tip.vue';
-import MessageTool from './message-tool.vue';
-import MessageEmojiReact from './message-emoji-react.vue';
-import MessageRevoked from './message-revoked.vue';
-
-import {
-  handleTextMessageShowContext,
-  handleImageMessageShowContext,
-  handleVideoMessageShowContext,
-  handleAudioMessageShowContext,
-  handleFileMessageShowContext,
-  handleFaceMessageShowContext,
-  handleLocationMessageShowContext,
-  handleMergerMessageShowContext,
-  handleTipMessageShowContext,
-  handleCustomMessageShowContext,
-  isMessageTip,
-} from '../utils/utils';
-import { Message } from '@tencentcloud/chat';
-import constant from '../../constant';
-
-const props = defineProps({
-  message: {
-    type: Object,
-    default: () => ({}),
-  },
-  beforeMessage: {
-    type: Object,
-    default: () => ({}),
-  },
-  types: {
-    type: Object,
-    default: () => ({}),
-  },
-  env: {
-    type: Object,
-    default: () => ({}),
-  },
-  messageList: {
-    type: Array,
-    default: () => [],
-  },
-  // 开关控制位
-  displayGroupMessageReadReceipt: {
-    type: Boolean,
-    default: true,
-  },
-  displayEmojiReactions: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emits = defineEmits(['handleEditor', 'showDialog', 'uploading', 'jumpID','resendMessage']);
-const { message, types, env, messageList, displayGroupMessageReadReceipt, displayEmojiReactions } = toRefs(props);
-
-const handleEdit = (message: any) => {
-  emits('handleEditor', message, 'reedit');
-};
-
-const handleMessage = (message: Message, type: string) => {
-  if (!message || !type) {
-    return;
-  }
-  switch (type) {
-    case constant.handleMessage.forward:
-      emits('showDialog', message, constant.handleMessage.forward);
-      break;
-    case constant.handleMessage.reference:
-      emits('handleEditor', message, constant.handleMessage.reference);
-      break;
-    case constant.handleMessage.reply:
-      emits('handleEditor', message, constant.handleMessage.reply);
-      break;
-    default:
-      break;
-  }
-};
-
-const previewImage = (message: Message) => {
-  if (message) {
-    emits('showDialog', message, 'previewImage');
-  }
-};
-
-const showReadReceiptDialog = (message: Message) => {
-  if (message) {
-    emits('showDialog', message, 'receipt');
-  }
-};
-
-const showRepliesDialog = (message: Message) => {
-  if (message) {
-    emits('showDialog', message, 'replies');
-  }
-};
-
-const jumpID = (messageID: string) => {
-  if (messageID) {
-    emits('jumpID', messageID);
-  }
-};
-
-const uploading = () => {
-  emits('uploading');
-};
-
-const resendMessage = (message: Message) => {
-  if (message) {
-    emits('resendMessage', message);
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-item {
-  display: flex;
-  flex-direction: column;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-audio.vue

@@ -1,91 +0,0 @@
-<template>
-  <div
-    class="message-audio"
-    :class="[data.message.flow === 'out' && 'reserve']"
-    @click.stop="play"
-    :style="`width: ${data?.second * 10 + 40}Px`"
-  >
-    <i
-      class="icon icon-voice"
-      :class="[data.message.flow === 'out' && 'icon-reserve']"
-    ></i>
-    <label>{{ data.second }}s</label>
-    <audio ref="audio" :src="data.url"></audio>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, reactive, toRefs, ref } from 'vue';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      data: {},
-      show: false
-    });
-
-    const audio = ref(null);
-
-    watch(
-      () => props.data,
-      () => {
-        data.data = props.data;
-      },
-      { deep: true, immediate: true }
-    );
-
-    const play = () => {
-      const audios = document.getElementsByTagName('audio');
-      for (const audio of audios) {
-        if (!audio.paused) {
-          audio.pause();
-          audio.load();
-        }
-      }
-      const audioPlayer: any = audio.value;
-      if (audioPlayer.paused) {
-        audioPlayer.play();
-        data.show = true;
-      } else {
-        audioPlayer.pause();
-        audioPlayer.load();
-        data.show = false;
-      }
-    };
-
-    return {
-      ...toRefs(data),
-      audio,
-      play
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-audio {
-  display: flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  max-width: 100%;
-  overflow: hidden;
-  .icon {
-    margin: 0 4Px;
-  }
-  audio {
-    width: 0;
-    height: 0;
-  }
-}
-.reserve {
-  flex-direction: row-reverse;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-bubble.vue

@@ -1,747 +0,0 @@
-<template>
-  <div
-    class="message-bubble"
-    :class="[message.flow === 'in' ? '' : 'reverse']"
-    ref="htmlRefHook"
-  >
-    <img
-      class="avatar"
-      :src="
-        message?.avatar ||
-        'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-      "
-      onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-    />
-    <main class="message-area">
-      <label
-        class="name"
-        v-if="message.flow === 'in' && message.conversationType === 'GROUP'"
-      >
-        {{ message.nameCard || message.nick || message.from }}
-      </label>
-      <div
-        :class="handleImageOrVideoBubbleStyle(message)"
-        @click.prevent.right="toggleDialog"
-      >
-        <div
-          class="message-replie-area"
-          :class="[
-            message?.flow === 'in' ? '' : 'message-replies-area-reverse'
-          ]"
-          v-if="
-            message?.cloudCustomData &&
-            referenceMessage &&
-            referenceMessage?.messageRootID
-          "
-          @click="showRepliesDialog(message, false)"
-        >
-          <MessageReference
-            :message="message"
-            :referenceMessage="referenceMessage"
-            :referenceForShow="referenceForShow"
-            :url="url"
-            :face="face"
-            :allMessageID="allMessageID"
-            type="reply"
-          />
-        </div>
-        <slot />
-        <div v-if="dropdown" ref="dropdownRef" class="dropdown-inner">
-          <div
-            class="dialog"
-            :class="[message.flow === 'in' ? '' : 'dialog-right']"
-            @click="dropdown = false"
-          >
-            <slot name="dialog" />
-          </div>
-        </div>
-        <MessageEmojiReact
-          :message="message"
-          type="content"
-          v-if="needEmojiReact && isEmojiReactionInMessage(message)"
-        />
-      </div>
-    </main>
-    <label
-      class="message-label fail"
-      v-if="message.status === 'fail'"
-      @click="resendMessage(message)"
-    >
-      !
-    </label>
-    <label
-      class="message-label"
-      :class="readReceiptStyle(message)"
-      v-if="showReadReceiptTag(message)"
-      @click="showReadReceiptDialog(message)"
-    >
-      <span>{{ readReceiptCont(message) }}</span>
-    </label>
-  </div>
-  <div
-    class="message-reference-area"
-    :class="[message.flow === 'in' ? '' : 'message-reference-area-reverse']"
-    v-if="
-      message?.cloudCustomData &&
-      referenceMessage &&
-      !referenceMessage?.messageRootID
-    "
-    @click="jumpToAim(referenceMessage)"
-  >
-    <MessageReference
-      :message="message"
-      :referenceMessage="referenceMessage"
-      :referenceForShow="referenceForShow"
-      :url="url"
-      :face="face"
-      :allMessageID="allMessageID"
-      type="reference"
-    />
-  </div>
-  <label
-    class="message-replies"
-    :class="[message.flow === 'in' ? '' : 'message-replies-reverse']"
-    v-if="replies?.length"
-    @click="showRepliesDialog(message, true)"
-  >
-    <i class="icon icon-msg-replies"></i>
-    <span>{{ replies?.length + $t('TUIChat.条回复') }}</span>
-  </label>
-</template>
-
-<script lang="ts">
-import { decodeText } from '../utils/decodeText';
-import constant from '../../constant';
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  ref,
-  nextTick,
-  watch
-} from 'vue';
-import { onClickOutside, onLongPress, useElementBounding } from '@vueuse/core';
-import { deepCopy, JSONToObject } from '../utils/utils';
-import { handleErrorPrompts } from '../../utils';
-import TUIChat from '../index.vue';
-import MessageReference from './message-reference.vue';
-import { Message } from '../interface';
-import { TUIEnv } from '../../../../TUIPlugin';
-import MessageEmojiReact from './message-emoji-react.vue';
-import TIM from '../../../../TUICore/tim/index';
-
-const messageBubble = defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    messagesList: {
-      type: Array,
-      default: () => []
-    },
-    isH5: {
-      type: Boolean,
-      default: false
-    },
-    needGroupReceipt: {
-      type: Boolean,
-      default: false
-    },
-    needReplies: {
-      type: Boolean,
-      default: true
-    },
-    flow: {
-      type: String,
-      default: ''
-    },
-    needEmojiReact: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    'jumpID',
-    'resendMessage',
-    'showReadReceiptDialog',
-    'showRepliesDialog',
-    'dropDownOpen'
-  ],
-  components: {
-    MessageReference,
-    MessageEmojiReact
-  },
-  setup(props: any, ctx: any) {
-    const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-    const { TUIServer } = TUIChat;
-    const data = reactive({
-      env: TUIEnv(),
-      message: {} as Message,
-      messagesList: [],
-      show: false,
-      type: {},
-      referenceMessage: {},
-      referenceForShow: {},
-      allMessageID: '',
-      needGroupReceipt: false,
-      needReplies: true,
-      replies: [],
-      face: [],
-      url: '',
-      needEmojiReact: false
-    });
-
-    watchEffect(() => {
-      data.type = constant;
-      data.messagesList = props.messagesList;
-      data.needEmojiReact = props.needEmojiReact;
-      data.message = deepCopy(
-        data.messagesList?.find(
-          (item: any) => (item as any)?.ID === props.message?.ID
-        ) || props.data
-      );
-      data.needGroupReceipt = props.needGroupReceipt;
-      data.needReplies = props.needReplies;
-      if ((data.message as any).cloudCustomData) {
-        const messageIDList: any[] = [];
-        const cloudCustomData = JSONToObject(
-          (data.message as any).cloudCustomData
-        );
-        data.replies = cloudCustomData?.messageReplies?.replies || [];
-        data.referenceMessage = cloudCustomData.messageReply
-          ? cloudCustomData.messageReply
-          : '';
-        for (
-          let index = 0;
-          index < (data.messagesList as any).length;
-          index++
-        ) {
-          // To determine whether the referenced message is still in the message list, the corresponding field of the referenced message is displayed if it is in the message list. Otherwise, messageabstract/messagesender is displayed
-          messageIDList.push((data.messagesList as any)[index].ID);
-          (data as any).allMessageID = JSON.stringify(messageIDList);
-          if (
-            (data.messagesList as any)[index].ID ===
-            (data.referenceMessage as any)?.messageID
-          ) {
-            data.referenceForShow = (data.messagesList as any)[index];
-            if (
-              (data.referenceMessage as any).messageType === constant.typeText
-            ) {
-              (data as any).face = decodeText(
-                (data.referenceForShow as any).payload
-              );
-            }
-            if (
-              (data.referenceMessage as any).messageType === constant.typeFace
-            ) {
-              (
-                data as any
-              ).url = `https://web.sdk.qcloud.com/im/assets/face-elem/${
-                (data.referenceForShow as any).payload.data
-              }@2x.png`;
-            }
-          }
-        }
-      } else {
-        data.replies = [];
-      }
-    });
-
-    const htmlRefHook = ref<HTMLElement | null>(null);
-    const dropdown = ref(false);
-    const dropdownRef = ref(null);
-
-    const toggleDialog = (e: any) => {
-      dropdown.value = !dropdown.value;
-      if (dropdown.value) {
-        ctx.emit('dropDownOpen', dropdownRef);
-        nextTick(() => {
-          const dialogDom = (dropdownRef as any)?.value?.children[0];
-          const dialogElement = document.getElementsByClassName(
-            'dialog-item'
-          )[0] as HTMLElement;
-          const parentDom = (dropdownRef as any)?.value?.offsetParent;
-          const parentBound = useElementBounding(parentDom);
-          const messageListDom = document.getElementById(
-            'messageEle'
-          ) as HTMLElement;
-          const messageListBound = useElementBounding(messageListDom);
-          const leftRange = messageListBound?.left?.value;
-          const rightRange =
-            messageListBound?.left?.value +
-            (messageListDom as any).clientWidth -
-            dialogDom.clientWidth +
-            76;
-          const topRange = messageListBound?.top?.value;
-          const bottomRange =
-            messageListBound?.top?.value +
-            (messageListDom as any).clientHeight -
-            dialogDom.clientHeight;
-          const { clientX, clientY } = e;
-          if (data?.env?.isH5) {
-            if (parentBound?.top?.value <= dialogElement?.clientHeight) {
-              dialogDom.style.bottom = `-${dialogElement?.clientHeight}Px`;
-            } else {
-              if (data?.message?.flow === 'in') {
-                dialogDom.style.top = `-${dialogElement?.clientHeight - 20}Px`;
-              } else {
-                dialogDom.style.top = `-${dialogElement?.clientHeight}Px`;
-              }
-            }
-            const centerWidth =
-              parentBound?.left?.value + parentBound?.width?.value / 2;
-            if (
-              centerWidth > dialogElement.clientWidth / 2 &&
-              centerWidth <
-                messageListDom?.clientWidth - dialogElement.clientWidth / 2
-            ) {
-              dialogDom.style.left = 'calc(50% - 135Px)';
-            } else if (centerWidth <= dialogElement.clientWidth / 2) {
-              dialogDom.style.left = '-20Px';
-            } else {
-              dialogDom.style.left = `-${dialogElement.clientWidth / 2 + 10}Px`;
-            }
-            return;
-          }
-          switch (true) {
-            case clientX > leftRange && clientX < rightRange:
-              dialogDom.style.left = `${Math.max(
-                e.clientX - parentBound?.left?.value - 76,
-                -40
-              )}Px`;
-              break;
-            case clientX <= leftRange:
-              dialogDom.style.left = '20Px';
-              break;
-            case clientX >= rightRange:
-              dialogDom.style.right = `${Math.max(
-                parentBound?.left?.value +
-                  parentDom?.clientWidth -
-                  e.clientX -
-                  256,
-                -10
-              )}Px`;
-              break;
-          }
-          switch (true) {
-            case clientY > topRange && clientY < bottomRange:
-              dialogDom.style.top = `${e.clientY - parentBound?.top?.value}Px`;
-              dialogDom.style.cssText = dialogDom.style.cssText.replace(
-                'align-items:end;',
-                ''
-              );
-              break;
-            case clientY <= topRange:
-              dialogDom.style.top = '0Px';
-              dialogDom.style.cssText = dialogDom.style.cssText.replace(
-                'align-items:end;',
-                ''
-              );
-              break;
-            case clientY >= bottomRange:
-              dialogDom.style.bottom = `${
-                parentBound?.top?.value + parentDom?.clientHeight - e.clientY
-              }Px`;
-              dialogDom.style.cssText += 'align-items:end;';
-              break;
-          }
-        });
-      }
-    };
-
-    const jumpToAim = (message: any) => {
-      if (
-        (data.referenceMessage as any)?.messageID &&
-        data.allMessageID.includes((data.referenceMessage as any)?.messageID)
-      ) {
-        ctx.emit('jumpID', (data.referenceMessage as any).messageID);
-      } else {
-        const message = t('TUIChat.无法定位到原消息');
-        handleErrorPrompts(message, props);
-      }
-    };
-
-    onClickOutside(dropdownRef, () => {
-      dropdown.value = false;
-    });
-
-    const toggleDialogH5 = (e: any) => {
-      if (data?.env?.isH5) toggleDialog(e);
-      return;
-    };
-
-    onLongPress(htmlRefHook, toggleDialogH5);
-
-    const resendMessage = (message: any) => {
-      ctx.emit('resendMessage', message);
-    };
-
-    const showReadReceiptTag = (message: any) => {
-      if (
-        message.flow === 'out' &&
-        message.status === 'success' &&
-        message.needReadReceipt
-      ) {
-        return true;
-      }
-      return false;
-    };
-
-    const readReceiptStyle = (message: any) => {
-      if (
-        message?.readReceiptInfo?.isPeerRead ||
-        (message?.readReceiptInfo?.isPeerRead === undefined &&
-          message?.isPeerRead) ||
-        message?.readReceiptInfo?.unreadCount === 0
-      ) {
-        return '';
-      }
-      return 'unRead';
-    };
-
-    const readReceiptCont = (message: any) => {
-      switch (message.conversationType) {
-        case TUIServer.TUICore.TIM.TYPES.CONV_C2C:
-          if (
-            message?.readReceiptInfo?.isPeerRead ||
-            (message?.readReceiptInfo?.isPeerRead === undefined &&
-              message?.isPeerRead)
-          ) {
-            return t('TUIChat.已读');
-          }
-          return t('TUIChat.未读');
-        case TUIServer.TUICore.TIM.TYPES.CONV_GROUP:
-          if (message.readReceiptInfo.unreadCount === 0) {
-            return t('TUIChat.全部已读');
-          }
-          if (
-            message.readReceiptInfo.readCount === 0 ||
-            (message.readReceiptInfo.unreadCount === undefined &&
-              message.readReceiptInfo.readCount === undefined)
-          ) {
-            return t('TUIChat.未读');
-          }
-          return `${message.readReceiptInfo.readCount + t('TUIChat.人已读')}`;
-        default:
-          return '';
-      }
-    };
-
-    const showReadReceiptDialog = (message: any) => {
-      ctx.emit('showReadReceiptDialog', message, 'receipt');
-    };
-
-    const showRepliesDialog = (message: any, isRoot: boolean) => {
-      if (isRoot) {
-        ctx.emit('showRepliesDialog', message, 'replies');
-        return;
-      }
-      if ((data.referenceMessage as any)?.messageRootID) {
-        const message = data.messagesList?.find(
-          (item: Message) =>
-            item.ID === (data.referenceMessage as any)?.messageRootID
-        );
-        if (message) {
-          ctx.emit('showRepliesDialog', message, 'replies');
-          return;
-        } else {
-          const message = t('TUIChat.无法定位到原消息');
-          handleErrorPrompts(message, props);
-        }
-      }
-    };
-
-    const handleImageOrVideoBubbleStyle = (message: Message) => {
-      const classNameList = ['content'];
-      if (!message) return classNameList;
-      classNameList.push(`content-${data.message.flow}`);
-      if (
-        data.message.type === TIM.TYPES.MSG_IMAGE &&
-        !isEmojiReactionInMessage(message)
-      ) {
-        classNameList.push('content-image');
-      }
-      if (
-        data.message.type === TIM.TYPES.MSG_VIDEO &&
-        !isEmojiReactionInMessage(message)
-      ) {
-        classNameList.push('content-video');
-      }
-      return classNameList;
-    };
-
-    const isEmojiReactionInMessage = (message: Message) => {
-      try {
-        if (!message?.cloudCustomData) return;
-        const reactList = JSONToObject(message?.cloudCustomData)?.messageReact
-          ?.reacts;
-        if (!reactList || Object.keys(reactList).length === 0) return false;
-        return true;
-      } catch (err) {
-        console.warn(err);
-        return false;
-      }
-    };
-
-    return {
-      ...toRefs(data),
-      toggleDialog,
-      htmlRefHook,
-      jumpToAim,
-      dropdown,
-      dropdownRef,
-      resendMessage,
-      showReadReceiptTag,
-      readReceiptStyle,
-      readReceiptCont,
-      showReadReceiptDialog,
-      showRepliesDialog,
-      handleImageOrVideoBubbleStyle,
-      isEmojiReactionInMessage,
-      TIM
-    };
-  }
-});
-export default messageBubble;
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.reverse {
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-}
-.avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 5Px;
-}
-.message-bubble {
-  width: 100%;
-  display: flex;
-  padding-bottom: 5Px;
-}
-.line-left {
-  border: 1Px solid rgba(0, 110, 255, 0.5);
-}
-.message-reference-area {
-  display: flex;
-  background: #f2f2f2;
-  border-radius: 0.5rem;
-  border-radius: 0.63rem;
-  align-self: start;
-  margin-left: 44Px;
-  margin-right: 8Px;
-  &-show {
-    width: 100%;
-    display: flex;
-    flex-direction: inherit;
-    justify-content: center;
-    padding: 6Px;
-    p {
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      font-size: 0.88rem;
-      color: #999999;
-      letter-spacing: 0;
-      word-break: keep-all;
-      padding-right: 5Px;
-    }
-    span {
-      height: 1.25rem;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      font-size: 0.88rem;
-      color: #999999;
-      letter-spacing: 0;
-      display: inline-block;
-    }
-  }
-}
-.message-replies {
-  display: flex;
-  align-self: start;
-  margin-left: 44Px;
-  margin-right: 8Px;
-  padding: 2Px;
-  color: #999999;
-  font-size: 10Px;
-  i {
-    margin: 4Px;
-  }
-  span {
-    line-height: 20Px;
-  }
-}
-.message-reference-area-reverse,
-.message-replies-reverse {
-  align-self: end;
-  margin-right: 44Px;
-  margin-left: 8Px;
-}
-.message-img {
-  max-width: min(calc(100vw - 180Px), 300Px);
-  max-height: min(calc(100vw - 180Px), 300Px);
-}
-.message-video-cover {
-  display: inline-block;
-  position: relative;
-  &::before {
-    position: absolute;
-    z-index: 1;
-    content: '';
-    width: 0Px;
-    height: 0Px;
-    border: 15Px solid transparent;
-    border-left: 20Px solid #ffffff;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-  }
-}
-.message-videoimg {
-  max-width: min(calc(100vw - 160Px), 300Px);
-  max-height: min(calc(100vw - 160Px), 300Px);
-}
-.face-box {
-  display: flex;
-  align-items: center;
-}
-.text-img {
-  width: 20Px;
-  height: 20Px;
-}
-.message-audio {
-  padding-left: 10Px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  .icon {
-    margin: 0 4Px;
-  }
-  audio {
-    width: 0;
-    height: 0;
-  }
-}
-.reserve {
-  flex-direction: row-reverse;
-}
-.message-area {
-  max-width: calc(100% - 54Px);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: 0 8Px;
-  .name {
-    padding-bottom: 4Px;
-    font-weight: 400;
-    font-size: 0.8rem;
-    color: #999999;
-    letter-spacing: 0;
-  }
-  .reference-content {
-    padding: 12Px;
-    font-weight: 400;
-    font-size: 14Px;
-    color: burlywood;
-    letter-spacing: 0;
-    word-wrap: break-word;
-    word-break: break-all;
-    animation: reference 800ms;
-  }
-  @-webkit-keyframes reference {
-    from {
-      opacity: 1;
-    }
-    50% {
-      background-color: #ff9c19;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  @keyframes reference {
-    from {
-      opacity: 1;
-    }
-    50% {
-      background-color: #ff9c19;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  .content {
-    padding: 12Px;
-    font-weight: 400;
-    font-size: 14Px;
-    color: #000000;
-    letter-spacing: 0;
-    word-wrap: break-word;
-    word-break: break-all;
-    width: fit-content;
-    &-in {
-      background: #fbfbfb;
-      border-radius: 0Px 10Px 10Px 10Px;
-    }
-    &-out {
-      background: #dceafd;
-      border-radius: 10Px 0Px 10Px 10Px;
-    }
-    &-image {
-      padding: 0Px;
-      height: fit-content;
-      border-radius: 10Px 0Px 10Px 10Px;
-    }
-    &-video {
-      padding: 0Px;
-      height: fit-content;
-      background: transparent;
-      border-radius: 10Px;
-    }
-  }
-}
-.message-label {
-  align-self: flex-end;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  font-size: 12Px;
-  color: #b6b8ba;
-  word-break: keep-all;
-}
-.fail {
-  width: 15Px;
-  height: 15Px;
-  border-radius: 15Px;
-  background: red;
-  color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.unRead {
-  color: #679ce1;
-}
-.dropdown-inner {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
-.dialog {
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  flex-direction: row;
-  width: fit-content;
-  &-right {
-    right: 0;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-custom.vue

@@ -1,228 +0,0 @@
-<template>
-  <div class="custom">
-    <template v-if="isCustom === constant.typeService">
-      <div>
-        <h1>
-          <label>{{ extension.title }}</label>
-          <a
-            v-if="extension.hyperlinks_text"
-            :href="extension.hyperlinks_text.value"
-            target="view_window"
-          >
-            {{ extension.hyperlinks_text.key }}
-          </a>
-        </h1>
-        <ul v-if="extension.item && extension.item.length > 0">
-          <li v-for="(item, index) in extension.item" :key="index">
-            <a v-if="isUrl(item.value)" :href="item.value" target="view_window">
-              {{ item.key }}
-            </a>
-            <p v-else>{{ item.key }}</p>
-          </li>
-        </ul>
-        <article>{{ extension.description }}</article>
-      </div>
-    </template>
-    <template v-else-if="isCustom.businessID === constant.typeEvaluate">
-      <div class="evaluate">
-        <h1>{{ $t('message.custom.对本次服务评价') }}</h1>
-        <ul>
-          <li
-            class="evaluate-list-item"
-            v-for="(item, index) in ~~isCustom.score"
-            :key="index"
-          >
-            <i class="icon icon-star-light"></i>
-          </li>
-        </ul>
-        <article>{{ isCustom.comment }}</article>
-      </div>
-    </template>
-    <template v-else-if="isCustom.businessID === constant.typeOrder">
-      <div class="order" @click="openLink(isCustom.link)">
-        <img :src="isCustom.imageUrl" alt="" />
-        <main>
-          <h1>{{ isCustom.title }}</h1>
-          <p>{{ isCustom.description }}</p>
-          <span>{{ isCustom.price }}</span>
-        </main>
-      </div>
-    </template>
-    <template v-else-if="isCustom.businessID === constant.typeTextLink">
-      <div class="textLink">
-        <p>{{ isCustom.text }}</p>
-        <a :href="isCustom.link" target="view_window">
-          {{ $t('message.custom.查看详情>>') }}
-        </a>
-      </div>
-    </template>
-    <template v-else-if="isCustom.businessID === constant.TYPE_CALL_MESSAGE">
-      <div
-        class="call"
-        @click="handleCallAgain"
-        :class="`call-${data?.message?.conversationType}`"
-      >
-        <i class="icon" :class="handleCallMessageIcon()"></i>
-        <span>{{ data.custom }}</span>
-      </div>
-    </template>
-    <template v-else>
-      <span v-html="data.custom"></span>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-import { isUrl, JSONToObject } from '../utils/utils';
-import constant from '../../constant';
-import { useStore } from 'vuex';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const VuexStore =
-      ((window as any)?.TUIKitTUICore?.isOfficial && useStore && useStore()) ||
-      {};
-    const data = reactive({
-      data: {} as any,
-      extension: {},
-      isCustom: '',
-      constant: constant
-    });
-    watchEffect(() => {
-      data.data = props.data;
-      const {
-        message: { payload }
-      } = props.data;
-      data.isCustom = payload.data || ' ';
-      data.isCustom = JSONToObject(payload.data);
-      if (payload.data === constant.typeService) {
-        data.extension = JSONToObject(payload.extension);
-      }
-    });
-    const openLink = (url: any) => {
-      window.open(url);
-    };
-    const handleCallMessageIcon = () => {
-      const callType = JSON.parse(
-        JSON.parse(data?.data?.message?.payload?.data)?.data
-      )?.call_type;
-      let className = '';
-      switch (callType) {
-        case 1:
-          className = 'icon-call-voice';
-          break;
-        case 2:
-          className = 'icon-call-video';
-          break;
-        default:
-          break;
-      }
-      return className;
-    };
-
-    const handleCallAgain = async () => {
-      const callType = JSON.parse(
-        JSON.parse(props?.data?.message?.payload?.data)?.data
-      )?.call_type;
-      switch (data?.data?.message?.conversationType) {
-        case (window as any).TUIKitTUICore.TIM.TYPES.CONV_C2C:
-          // eslint-disable-next-line no-case-declarations, no-unsafe-optional-chaining
-          const { flow, to, from } = data?.data?.message;
-          if (to === from) break;
-          try {
-            await (window as any)?.TUIKitTUICore?.TUIServer?.TUICallKit?.call({
-              userID: flow === 'out' ? to : from,
-              type: callType
-            });
-            (window as any)?.TUIKitTUICore?.isOfficial &&
-              VuexStore?.commit &&
-              VuexStore?.commit('handleTask', 6);
-          } catch (error) {
-            console.warn(error);
-          }
-          break;
-        case (window as any).TUIKitTUICore.TIM.TYPES.CONV_GROUP:
-          break;
-        default:
-          break;
-      }
-    };
-
-    return {
-      ...toRefs(data),
-      isUrl,
-      openLink,
-      handleCallMessageIcon,
-      handleCallAgain
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-a {
-  color: #679ce1;
-}
-.custom {
-  font-size: 14Px;
-  h1 {
-    font-size: 14Px;
-    color: #000000;
-  }
-  h1,
-  a,
-  p {
-    font-size: 14Px;
-  }
-  .evaluate {
-    ul {
-      display: flex;
-      padding-top: 10Px;
-    }
-  }
-  .order {
-    display: flex;
-    main {
-      padding-left: 5Px;
-      p {
-        font-family: PingFangSC-Regular;
-        width: 145Px;
-        line-height: 17Px;
-        font-size: 14Px;
-        color: #999999;
-        letter-spacing: 0;
-        margin-bottom: 6Px;
-        word-break: break-word;
-      }
-      span {
-        font-family: PingFangSC-Regular;
-        line-height: 25Px;
-        color: #ff7201;
-      }
-    }
-    img {
-      width: 67Px;
-      height: 67Px;
-    }
-  }
-  .call {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    &-C2C {
-      cursor: pointer;
-    }
-    &-GROUP {
-      cursor: default;
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-emoji-react.vue

@@ -1,304 +0,0 @@
-<template>
-  <div
-    class="dialog-emoji"
-    :class="env?.isH5 ? 'dialog-emoji-h5' : ''"
-    v-if="type === 'dropdown'"
-  >
-    <div class="face-list collapse">
-      <ul class="face-list-collapse">
-        <li
-          class="face-list-item"
-          v-for="(childrenItem, childrenIndex) in emojiCollapseList"
-          :key="childrenIndex"
-          @click.stop="select(childrenItem)"
-        >
-          <img :src="emojiUrl + emojiMap[childrenItem]" />
-        </li>
-      </ul>
-      <div class="face-list-button" @click.stop="isCollapse = !isCollapse">
-        <i
-          class="icon"
-          :class="[isCollapse ? 'icon-expand' : 'icon-collapse']"
-        ></i>
-      </div>
-    </div>
-    <ul class="face-list face-list-expand" v-show="!isCollapse">
-      <li
-        class="face-list-item"
-        v-for="(childrenItem, childrenIndex) in emojiExpandList"
-        :key="childrenIndex"
-        @click.stop="select(childrenItem)"
-      >
-        <img :src="emojiUrl + emojiMap[childrenItem]" />
-      </li>
-    </ul>
-  </div>
-  <div v-if="type === 'content'" class="emoji-content">
-    <ul class="emoji-react" ref="container">
-      <li
-        class="emoji-react-item"
-        v-for="(val, key) in handleEmojiReact(message)"
-        :key="key"
-        v-show="val && val?.length"
-        @click.stop="select(key)"
-      >
-        <img :src="emojiUrl + emojiMap[key]" />
-        <div class="emoji-react-item-content">
-          <span>{{ handleEmojiReactItem(val) }}</span>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-<script lang="ts">
-import {
-  defineComponent,
-  watch,
-  reactive,
-  toRefs,
-  computed,
-  ref,
-  onMounted,
-  nextTick
-} from 'vue';
-import TIM from '../../../../TUICore/tim';
-import { emojiUrl, emojiMap, emojiName } from '../utils/emojiMap';
-import { JSONToObject } from '../utils/utils';
-import TUIChat from '../index.vue';
-import { Message } from '@tencentcloud/chat';
-export default defineComponent({
-  props: {
-    message: {
-      type: Object,
-      default: () => ({})
-    },
-    emojiList: {
-      type: Array,
-      default: () => []
-    },
-    type: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['handleCollapse'],
-  setup(props: any, ctx: any) {
-    const { TUIServer } = TUIChat;
-    const data = reactive({
-      message: {} as Message,
-      emojiUrl,
-      emojiMap,
-      emojiName,
-      isCollapse: true,
-      types: TIM.TYPES,
-      env: TUIServer.TUICore.TUIEnv,
-      type: props.type,
-      emojiReacts: {},
-      allMemberList: []
-    });
-
-    const container = ref({} as HTMLElement);
-
-    const emojiCollapseList = computed(() => {
-      return data.emojiName.slice(0, 6);
-    });
-
-    const emojiExpandList = computed(() => {
-      return data.emojiName.slice(6);
-    });
-
-    const select = (item: any) => {
-      TUIServer.emojiReact(data.message, item);
-    };
-
-    const handleEmojiReact = (message: any) => {
-      try {
-        if (!message?.cloudCustomData) return;
-        const reactList = JSONToObject(message?.cloudCustomData)?.messageReact
-          ?.reacts;
-        if (!reactList) return;
-        data.emojiReacts = reactList;
-        return reactList;
-      } catch (err) {
-        console.warn(err);
-      }
-    };
-
-    const handleEmojiReactItem = (userIDList: any) => {
-      let res = '';
-      userIDList?.forEach((item: any, index: any) => {
-        const memberInfo = data.allMemberList?.find(
-          (member: any) => member.userID === item
-        );
-        res = res + (memberInfo ? (memberInfo as any)?.nick : item) + ', ';
-      });
-      if (res.length) res = res.substring(0, res.lastIndexOf(','));
-      return res;
-    };
-
-    const handleAllMemberList = (message: any) => {
-      const TUIChatStore = TUIServer?.currentStore;
-      switch (message?.conversationType) {
-        case TIM.TYPES.CONV_C2C:
-          data.allMemberList = [
-            {
-              userID: TUIChatStore?.conversation?.userProfile?.userID,
-              nick: TUIChatStore?.conversation?.userProfile?.nick
-            },
-            {
-              userID: TUIChatStore?.selfInfo?.userID,
-              nick: TUIChatStore?.selfInfo?.nick
-            }
-          ] as any;
-          break;
-        case TIM.TYPES.CONV_GROUP:
-          data.allMemberList = TUIChatStore?.allMemberList?.memberList;
-          break;
-        default:
-          break;
-      }
-    };
-
-    watch(
-      () => props.message,
-      (newVal: any, oldVal: any) => {
-        data.message = props.message;
-        if (newVal?.conversationID !== oldVal?.conversationID) {
-          handleAllMemberList(newVal);
-        }
-      },
-      { deep: true, immediate: true }
-    );
-
-    watch(
-      () => data.isCollapse,
-      (newVal, oldVal) => {
-        if (newVal === oldVal) return;
-        if (!data?.env?.isH5) return;
-        ctx.emit('handleCollapse', newVal);
-      }
-    );
-
-    return {
-      ...toRefs(data),
-      emojiCollapseList,
-      emojiExpandList,
-      select,
-      handleEmojiReact,
-      handleEmojiReactItem,
-      container
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.dialog-emoji {
-  margin-left: 2Px;
-  background: #ffffff;
-  border: 1Px solid #e0e0e0;
-  box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
-  width: 242Px;
-  min-height: 28Px;
-  height: fit-content;
-  padding: 2Px 6Px;
-  word-break: keep-all;
-  top: 30Px;
-  border-radius: 8Px;
-  &-h5 {
-    margin: 0 5Px;
-    border: none;
-    border-bottom: 1Px solid #e0e0e0;
-    box-shadow: none;
-    border-radius: 10Px 10Px 0 0;
-  }
-  .collapse {
-    padding: 2Px 0Px;
-  }
-  .face-list {
-    display: flex;
-    overflow: hidden;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    &-collapse {
-      display: flex;
-      overflow: hidden;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      align-items: center;
-      flex: 1;
-    }
-    &-expand {
-      border-top: 1Px solid #e0e0e0;
-      display: flex;
-      overflow-x: hidden;
-      flex-wrap: wrap;
-      max-height: 90Px;
-      overflow-y: auto;
-    }
-    &-button {
-      padding: 5Px 7Px;
-      height: 20Px;
-      line-height: 20Px;
-      text-align: center;
-      align-items: center;
-      i {
-        text-align: center;
-      }
-    }
-    li {
-      margin: 4Px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      flex-direction: row;
-      img {
-        width: 22Px;
-        height: 22Px;
-      }
-    }
-  }
-}
-.emoji-content {
-  .emoji-react {
-    margin-top: 3Px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    &-item {
-      width: fit-content;
-      height: 20Px;
-      background: rgba(0, 0, 0, 0.05);
-      border-radius: 12Px;
-      padding: 2Px 6Px;
-      margin: 2Px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 200Px;
-      display: flex;
-      img {
-        width: 16Px;
-        height: 16Px;
-        padding: 2Px;
-      }
-      &-content {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 10Px;
-        color: #999999;
-        align-self: center;
-        span {
-          margin: 2Px;
-          font-size: 10Px;
-          color: #999999;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-face.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="message-image" ref="skeleton">
-    <img
-      class="message-img"
-      :src="data.url"
-      :style="
-        isH5
-          ? {
-              maxWidth: data.width ? data.width + 'Px' : 'calc(100vw - 180Px)',
-              maxHeight: data.height
-                ? data.height + 'Px'
-                : 'calc(100vw - 180Px)'
-            }
-          : {}
-      "
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  nextTick,
-  ref
-} from 'vue';
-import { handleSkeletonSize } from '../utils/utils';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    isH5: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      data: {}
-    });
-
-    const skeleton: any = ref();
-
-    watchEffect(() => {
-      data.data = props.data;
-      if (!data.data) return;
-      nextTick(() => {
-        const containerWidth =
-          document.getElementById('messageEle')?.clientWidth || 0;
-        const max = props.isH5 ? Math.min(containerWidth - 172, 300) : 300;
-        const size = handleSkeletonSize(240, 240, max, max);
-        skeleton?.value?.style &&
-          (skeleton.value.style.width = `${size.width}Px`);
-        skeleton?.value?.style &&
-          (skeleton.value.style.height = `${size.height}Px`);
-      });
-    });
-    return {
-      ...toRefs(data),
-      skeleton
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.text-img {
-  width: 20Px;
-  height: 20Px;
-}
-.message-img {
-  max-width: min(calc(100vw - 180Px), 300Px);
-  max-height: min(calc(100vw - 180Px), 300Px);
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-file.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="message-file">
-    <div class="box" @click="download" :title="$t('TUIChat.单击下载')">
-      <i class="icon icon-files"></i>
-      <div class="message-file-content">
-        <label>{{ data.name }}</label>
-        <span>{{ data.size }}</span>
-      </div>
-    </div>
-    <progress v-if="data.progress" :value="data.progress" max="1"></progress>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      data: {},
-    });
-
-    watchEffect(() => {
-      data.data = props.data;
-    });
-
-    const download = () => {
-      const file: any = data.data;
-      const option: any = {
-        mode: 'cors',
-        headers: new Headers({
-          'Content-Type': 'application/x-www-form-urlencoded',
-        }),
-      };
-      // 浏览器支持fetch则用blob下载，避免浏览器点击a标签，跳转到新页面预览的行为
-      // 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(file.url, option)
-          .then((res) => res.blob())
-          .then((blob) => {
-            const a = document.createElement('a');
-            const url = window.URL.createObjectURL(blob);
-            a.href = url;
-            a.download = file.name;
-            a.click();
-          });
-      } else {
-        const a = document.createElement('a');
-        a.href = file.url;
-        a.target = '_blank';
-        a.download = file.name;
-        a.click();
-      }
-    };
-
-    return {
-      ...toRefs(data),
-      download,
-    };
-  },
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-file {
-  display: flex;
-  flex-direction: column;
-  .box {
-    flex: 1;
-    display: flex;
-    cursor: pointer;
-    .message-file-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-  progress {
-    width: 100%;
-    color: #006eff;
-    appearance: none;
-    border-radius: 0.25rem;
-    background: rgba(#ffffff, 1);
-    width: 100%;
-    height: 0.5rem;
-    &::-webkit-progress-value {
-      background-color: #006eff;
-      border-radius: 0.25rem;
-    }
-    &::-webkit-progress-bar {
-      border-radius: 0.25rem;
-      background: rgba(#ffffff, 1);
-    }
-    &::-moz-progress-bar {
-      color: #006eff;
-      background: #006eff;
-      border-radius: 0.25rem;
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-image.vue

@@ -1,258 +0,0 @@
-<template>
-  <div class="message-image" @click.self="toggleShow" ref="skeleton">
-    <img
-      class="message-img"
-      :src="data.url"
-      :width="data.width"
-      :height="data.height"
-      :style="
-        isH5
-          ? {
-              maxWidth: data.width ? data.width + 'Px' : 'calc(100vw - 180Px)',
-              maxHeight: data.height
-                ? data.height + 'Px'
-                : 'calc(100vw - 180Px)'
-            }
-          : {}
-      "
-    />
-    <div class="progress" v-if="data.progress">
-      <progress :value="data.progress" max="1"></progress>
-    </div>
-    <div class="dialog" v-if="show" @click.self="toggleShow">
-      <header v-if="!isH5">
-        <i class="icon icon-close" @click.stop="toggleShow"></i>
-      </header>
-      <div
-        class="dialog-box"
-        :class="[isH5 ? 'dialog-box-h5' : '']"
-        @click.self="toggleShow"
-      >
-        <img
-          :class="[isWidth ? 'isWidth' : 'isHeight']"
-          :src="data.message.payload.imageInfoArray[0].url"
-          @click.self="toggleShow"
-        />
-        <div v-if="isH5" class="dialog-box-h5-footer">
-          <p @click="toggleShow">
-            <img src="../../../assets/icon/close-image.png" />
-          </p>
-          <p @click.stop="downloadImage(data.message)">
-            <img src="../../../assets/icon/downaload-image.png" />
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  computed,
-  ref,
-  nextTick
-} from 'vue';
-import { handleSkeletonSize } from '../utils/utils';
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    isH5: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['uploading', 'previewImage'],
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      data: {
-        progress: 0
-      },
-      show: false
-    });
-
-    const skeleton: any = ref();
-
-    const isWidth = computed(() => {
-      // eslint-disable-next-line no-unsafe-optional-chaining
-      const { width = 0, height = 0 } = (data.data as any)?.message?.payload
-        ?.imageInfoArray[0];
-      return width >= height;
-    });
-
-    watchEffect(() => {
-      data.data = props.data;
-      if (!data.data) return;
-      nextTick(() => {
-        if (!data.data.progress) {
-          const { width = 0, height = 0 } = data.data as any;
-          if (width === 0 || height === 0) return;
-          const containerWidth =
-            document.getElementById('app')?.clientWidth || 0;
-          const max = props.isH5 ? Math.min(containerWidth - 180, 300) : 300;
-          const size = handleSkeletonSize(width, height, max, max);
-          skeleton?.value?.style &&
-            (skeleton.value.style.width = `${size.width}Px`);
-          skeleton?.value?.style &&
-            (skeleton.value.style.height = `${size.height}Px`);
-        } else {
-          ctx.emit('uploading');
-        }
-      });
-    });
-
-    const toggleShow = () => {
-      if (!data.data.progress) {
-        ctx.emit('previewImage', (data.data as any).message);
-      }
-    };
-    const downloadImage = (message: any) => {
-      const targetImage = document.createElement('a');
-      const downloadImageName = message.payload.imageInfoArray[0].instanceID;
-      targetImage.setAttribute('download', downloadImageName);
-      const image = new Image();
-      image.src = message.payload.imageInfoArray[0].url;
-      image.setAttribute('crossOrigin', 'Anonymous');
-      image.onload = () => {
-        targetImage.href = getImageDataURL(image);
-        targetImage.click();
-      };
-    };
-
-    const getImageDataURL = (image: any) => {
-      const canvas = document.createElement('canvas');
-      canvas.width = image.width;
-      canvas.height = image.height;
-      const ctx = canvas.getContext('2d');
-      ctx?.drawImage(image, 0, 0, image.width, image.height);
-      const extension = image.src
-        .substring(image.src.lastIndexOf('.') + 1)
-        .toLowerCase();
-      return canvas.toDataURL(`image/${extension}`, 1);
-    };
-
-    return {
-      ...toRefs(data),
-      toggleShow,
-      skeleton,
-      isWidth,
-      downloadImage
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-image {
-  position: relative;
-  overflow: hidden;
-  opacity: 1;
-  .message-img {
-    max-width: min(calc(100vw - 180Px), 300Px);
-    max-height: min(calc(100vw - 180Px), 300Px);
-    width: inherit;
-    height: inherit;
-  }
-  .progress {
-    position: absolute;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    padding: 0 20Px;
-    left: 0;
-    top: 0;
-    background: rgba(#000000, 0.5);
-    display: flex;
-    align-items: center;
-    progress {
-      color: #006eff;
-      appearance: none;
-      border-radius: 0.25rem;
-      background: rgba(#ffffff, 1);
-      width: 100%;
-      height: 0.5rem;
-      &::-webkit-progress-value {
-        background-color: #006eff;
-        border-radius: 0.25rem;
-      }
-      &::-webkit-progress-bar {
-        border-radius: 0.25rem;
-        background: rgba(#ffffff, 1);
-      }
-      &::-moz-progress-bar {
-        color: #006eff;
-        background: #006eff;
-        border-radius: 0.25rem;
-      }
-    }
-  }
-}
-.dialog {
-  position: fixed;
-  z-index: 12;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(#000000, 0.3);
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  header {
-    display: flex;
-    justify-content: flex-end;
-    background: rgba(0, 0, 0, 0.49);
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10Px 10Px;
-  }
-  &-box {
-    display: flex;
-    flex: 1;
-    max-height: 100%;
-    padding: 6rem;
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-  }
-}
-.dialog-box-h5 {
-  width: 100%;
-  height: 100%;
-  background: #000000;
-  padding: 30Px 0;
-  display: flex;
-  flex-direction: column;
-  &-footer {
-    position: fixed;
-    bottom: 10Px;
-    display: flex;
-    width: 90vw;
-    justify-content: space-between;
-    p {
-      width: 3.88rem;
-      height: 3.88rem;
-    }
-    img {
-      width: 100%;
-    }
-    i {
-      padding: 20Px;
-    }
-  }
-}
-
-.isWidth {
-  width: 100%;
-}
-.isHeight {
-  height: 100%;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-location.vue

@@ -1,40 +0,0 @@
-<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">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup(props:any, ctx:any) {
-    const data = reactive({
-      data: {},
-    });
-
-    watchEffect(() => {
-      data.data = props.data;
-    });
-
-    return {
-      ...toRefs(data),
-    };
-  },
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-location {
-  display: flex;
-  flex-direction: column;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-merger.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="message-merger">
-    <div class="merger-box" :data-value="data.message">
-      <p class="merger-title">{{ data.title }}</p>
-      <p
-        class="merger-text"
-        v-for="(item, index) in data.abstractList"
-        :key="index"
-      >
-        {{ item }}
-      </p>
-    </div>
-    <span class="merger-label">聊天记录</span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      data: {}
-    });
-
-    watchEffect(() => {
-      data.data = props.data;
-    });
-    return {
-      ...toRefs(data)
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-merger {
-  display: flex;
-  flex-direction: column;
-  .merger-label {
-    border-top: 1Px solid #dddddd;
-    margin-top: 10Px;
-    padding-top: 5Px;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-reference.vue

@@ -1,248 +0,0 @@
-<template>
-  <div
-    v-if="
-      referenceMessage?.messageID &&
-      allMessageID.indexOf(referenceMessage.messageID) !== -1
-    "
-    :class="`${type} ${message.flow === 'in' && type + '-reverse'}`"
-  >
-    <p class="message-reference-user">
-      <span class="nick">
-        {{ referenceForShow.nick || referenceForShow.from }}
-      </span>
-      <span class="colon">{{ type === 'reference' ? ':' : '' }}</span>
-    </p>
-    <div
-      class="face-box"
-      v-if="referenceMessage.messageType === constant.typeText"
-    >
-      <div v-for="(item, index) in face" :key="index">
-        <span class="text-box" v-if="item.name === 'text'">
-          {{ item.text }}
-        </span>
-        <img class="text-img" v-else-if="item.name === 'img'" :src="item.src" />
-      </div>
-    </div>
-    <span v-if="referenceMessage.messageType === constant.typeCustom">
-      {{ referenceMessage.messageAbstract }}
-    </span>
-    <img
-      v-if="referenceMessage.messageType === constant.typeImage"
-      class="message-img"
-      :src="referenceForShow.payload.imageInfoArray[1].url"
-    />
-    <div
-      v-if="referenceMessage.messageType === constant.typeVideo"
-      class="message-video-cover"
-    >
-      <img
-        class="message-videoimg"
-        :src="
-          referenceForShow?.payload?.snapshotUrl ||
-          referenceForShow?.payload?.thumbUrl
-        "
-      />
-    </div>
-    <img
-      v-if="referenceMessage.messageType === constant.typeFace"
-      class="message-img"
-      :src="url"
-    />
-    <span
-      v-if="
-        referenceMessage.messageType === constant.typeFile ||
-        referenceMessage.messageType === constant.typeAudio
-      "
-    >
-      {{ referenceMessage?.messageAbstract }}
-    </span>
-  </div>
-  <div v-else :class="`${type} ${message.flow === 'in' && type + '-reverse'}`">
-    <p>{{ referenceMessage?.messageSender }}</p>
-    <span>{{ referenceMessage?.messageAbstract }}</span>
-  </div>
-</template>
-<script lang="ts">
-import { Message } from '../interface';
-import { defineComponent, reactive, toRefs, watch, watchEffect } from 'vue';
-import constant from '../../constant';
-const MessageReference = defineComponent({
-  props: {
-    message: {
-      type: Object,
-      default: {} as Message
-    },
-    referenceMessage: {
-      type: Object,
-      default: () => ({})
-    },
-    referenceForShow: {
-      type: Object,
-      default: () => ({})
-    },
-    face: {
-      type: Array,
-      default: () => []
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    allMessageID: {
-      type: String,
-      default: ''
-    },
-    type: {
-      type: String,
-      deafault: ''
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      message: {},
-      referenceMessage: {},
-      referenceForShow: {},
-      allMessageID: '',
-      face: [],
-      url: '',
-      type: ''
-    });
-    watchEffect(() => {
-      data.message = props.message;
-      data.referenceMessage = props.referenceMessage;
-      data.referenceForShow = props.referenceForShow;
-      data.face = props.face;
-      data.url = props.url;
-      data.allMessageID = props.allMessageID;
-      data.type = props.type;
-    });
-    watch(
-      () => props.referenceForShow,
-      () => {
-        data.referenceForShow = props.referenceForShow;
-      },
-      {
-        deep: true
-      }
-    );
-    return {
-      ...toRefs(data),
-      constant
-    };
-  }
-});
-export default MessageReference;
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.reference {
-  width: 100%;
-  display: flex;
-  flex-direction: inherit;
-  justify-content: center;
-  padding: 10Px;
-  line-height: 20Px;
-  .message-img,
-  .message-video-cover,
-  .message-videoimg {
-    max-width: min(calc(100vw - 230Px), 300Px);
-    max-height: min(calc(100vw - 230Px), 300Px);
-  }
-  .face-box {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    &-name {
-      padding-right: 5Px;
-    }
-    .text-img {
-      width: 20Px;
-      height: 20Px;
-    }
-  }
-  p {
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    font-size: 12Px;
-    color: #999999;
-    letter-spacing: 0;
-    padding-right: 5Px;
-    max-width: 100Px;
-    box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-  }
-  span {
-    line-height: 20Px;
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    font-size: 12Px;
-    color: #999999;
-    letter-spacing: 0;
-    letter-spacing: 0;
-    word-wrap: break-word;
-    word-break: break-all;
-    display: inline-block;
-    p {
-      font-weight: 800;
-    }
-  }
-}
-.reply {
-  display: flex;
-  flex-direction: column;
-  align-self: start;
-  border-left: 2Px solid rgba(0, 110, 255, 0.499298);
-  &-reverse {
-    border-left: 2Px solid rgba(153, 153, 153, 0.3);
-  }
-  padding-left: 7Px;
-  margin-bottom: 5Px;
-  color: #999999;
-  font-size: 12Px;
-  line-height: 20Px;
-  min-width: 40Px;
-  .message-img,
-  .message-video-cover,
-  .message-videoimg {
-    max-width: min(calc(100vw - 180Px), 300Px);
-    max-height: min(calc(100vw - 180Px), 300Px);
-    object-fit: contain;
-    align-self: flex-start;
-  }
-  .face-box {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    .text-img {
-      width: 20Px;
-      height: 20Px;
-    }
-  }
-  p {
-    font-weight: 800;
-    max-width: min(calc(100vw - 180Px), 300Px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-  }
-}
-.message-reference-user {
-  display: flex;
-  flex-direction: row;
-  .nick {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-  }
-  .colon {
-    width: fit-content;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-revoked.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="revoke">
-    <label v-if="message.flow === 'in'">
-      {{ message.nick || message.from }}
-    </label>
-    <label v-else>{{ $t('TUIChat.您') }}</label>
-    <span>{{ $t('TUIChat.撤回了一条消息') }}</span>
-    <span class="edit" v-if="message.flow === 'out' && isEdit" @click="edit">
-      {{ $t('TUIChat.重新编辑') }}
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    isEdit: {
-      type: Boolean,
-      default: () => false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      message: {},
-      isEdit: false
-    });
-
-    watchEffect(() => {
-      data.message = props.data;
-      data.isEdit = props.isEdit;
-    });
-
-    const edit = () => {
-      ctx.emit('edit', data.message);
-    };
-
-    return {
-      ...toRefs(data),
-      edit
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.revoke {
-  display: flex;
-  justify-content: center;
-  color: #999999;
-  width: 100%;
-  font-size: 14Px;
-  .edit {
-    padding: 0 5Px;
-    color: #006eff;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-system.vue

@@ -1,143 +0,0 @@
-<template>
-  <div class="message-system">
-    <ul class="list">
-      <li v-for="(item, index) in messageList" :key="index">
-        <template
-          v-if="
-            item.type === types.MSG_GRP_TIP ||
-            item.type === types.MSG_GRP_SYS_NOTICE
-          "
-        >
-          <i class="icon icon-system"></i>
-          <span>{{ translateGroupSystemNotice(item) }}</span>
-          <div class="btn-box" v-if="item?.payload?.operationType === 1">
-            <button
-              class="btn btn-default"
-              @click="handleApplication('Agree', item)"
-            >
-              接受
-            </button>
-            <button
-              class="btn btn-cancel"
-              @click="handleApplication('Reject', item)"
-            >
-              拒绝
-            </button>
-          </div>
-        </template>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-import { translateGroupSystemNotice } from '../utils/utils';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Array,
-      default: () => []
-    },
-    types: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      messageList: [],
-      types: {}
-    });
-
-    watchEffect(() => {
-      data.messageList = props.data;
-      data.types = props.types;
-    });
-
-    const handleApplication = (handleAction: string, message: any) => {
-      const options: any = {
-        handleAction,
-        message
-      };
-      ctx.emit('application', options);
-    };
-
-    return {
-      ...toRefs(data),
-      translateGroupSystemNotice,
-      handleApplication
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.list {
-  flex: 1;
-  height: 100%;
-  overflow-y: auto;
-  min-width: 600Px;
-  li {
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding: 10Px 20Px;
-    font-weight: 400;
-    font-size: 14Px;
-    color: #000000;
-    letter-spacing: 0;
-    .icon {
-      margin-right: 10Px;
-    }
-    .message-label {
-      max-width: 50Px;
-    }
-    .btn-box {
-      padding: 0 12Px;
-    }
-  }
-}
-.icon {
-  display: inline-block;
-  width: 16Px;
-  height: 16Px;
-  &-warn {
-    border-radius: 50%;
-    background: coral;
-    color: #ffffff;
-    font-style: normal;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-.btn {
-  padding: 2Px 10Px;
-  margin-right: 12Px;
-  border-radius: 4Px;
-  border: none;
-  font-weight: 400;
-  font-size: 14Px;
-  color: #ffffff;
-  letter-spacing: 0;
-  text-align: center;
-  line-height: 20Px;
-  &:last-child {
-    margin-right: 0;
-  }
-  &-cancel {
-    border: 1Px solid #dddddd;
-    color: #666666;
-  }
-  &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
-  }
-  &:disabled {
-    opacity: 0.3;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-text.vue

@@ -1,46 +0,0 @@
-<template>
-  <template v-for="(item, index) in data.text" :key="index">
-    <span class="text-box" v-if="item.name === 'text'">{{ item.text }}</span>
-    <img class="text-img" v-else-if="item.name === 'img'" :src="item.src" />
-  </template>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      data: {}
-    });
-
-    watchEffect(() => {
-      data.data = props.data;
-    });
-    return {
-      ...toRefs(data)
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.text-img {
-  width: 20Px;
-  height: 20Px;
-}
-.text-box {
-  white-space: pre-wrap;
-  font-size: inherit;
-  word-break: break-word;
-  font-size: 14Px;
-  text-size-adjust: none;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-timestamp.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="message-timestamp" v-show="timestampShowFlag">
-    {{ timestampShowContent }}
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, toRefs, ref, watch } from 'vue';
-const props = defineProps({
-  currTime: {
-    type: Number,
-    default: 0
-  },
-  prevTime: {
-    type: Number,
-    default: 0
-  }
-});
-// eslint-disable-next-line no-unsafe-optional-chaining
-const { t } = (window as any)?.TUIKitTUICore?.config?.i18n?.useI18n();
-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
-  }
-);
-
-// 计算时间戳函数
-// calculate timestamp
-function calculateTimestamp(timestamp: number): string {
-  const todayZero = new Date().setHours(0, 0, 0, 0);
-  const thisYear = new Date(
-    new Date().getFullYear(),
-    0,
-    1,
-    0,
-    0,
-    0,
-    0
-  ).getTime();
-  const target = new Date(timestamp);
-
-  const oneDay = 24 * 60 * 60 * 1000;
-  const oneWeek = 7 * oneDay;
-  const oneYear = 365 * oneDay;
-
-  const diff = todayZero - target.getTime();
-
-  function formatNum(num: number): string {
-    return num < 10 ? '0' + num : num.toString();
-  }
-
-  if (diff <= 0) {
-    // today, only display hour:minute
-    return `${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
-  } else if (diff <= oneDay) {
-    // yesterday, display yesterday:hour:minute
-    return `${t('time.昨天')} ${formatNum(target.getHours())}:${formatNum(
-      target.getMinutes()
-    )}`;
-  } else if (diff <= oneWeek - oneDay) {
-    // Within a week, display weekday hour:minute
-    const weekdays = [
-      '星期日',
-      '星期一',
-      '星期二',
-      '星期三',
-      '星期四',
-      '星期五',
-      '星期六'
-    ];
-    const weekday = weekdays[target.getDay()];
-    return `${t('time.' + weekday)} ${formatNum(target.getHours())}:${formatNum(
-      target.getMinutes()
-    )}`;
-  } else if (target.getTime() >= thisYear) {
-    // Over a week, within this year, display mouth/day hour:minute
-    return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(
-      target.getHours()
-    )}:${formatNum(target.getMinutes())}`;
-  } else {
-    // Not within this year, display year/mouth/day hour:minute
-    return `${target.getFullYear()}/${
-      target.getMonth() + 1
-    }/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(
-      target.getMinutes()
-    )}`;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-timestamp {
-  margin: 0 auto;
-  color: #999999;
-  font-size: 12Px;
-  width: -webkit-fill-available;
-  overflow-wrap: anywhere;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  text-align: center;
-  padding: 0 20Px 30Px;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-tip.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="message-tip">
-    <span>{{ message?.text }}</span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      message: {}
-    });
-
-    watchEffect(() => {
-      data.message = props.data;
-    });
-
-    return {
-      ...toRefs(data)
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-tip {
-  margin: 0 auto;
-  color: #999999;
-  font-size: 12Px;
-  width: -webkit-fill-available;
-  overflow-wrap: anywhere;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  text-align: center;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-tool.vue

@@ -1,264 +0,0 @@
-<template>
-  <div
-    class="dialog-item"
-    :class="env?.isH5 ? 'dialog-item-h5' : 'dialog-item-web'"
-  >
-    <MessageEmojiReact
-      v-if="env?.isH5 && needEmojiReact"
-      :message="message"
-      type="dropdown"
-      @handleCollapse="handleCollapse"
-    />
-    <ul
-      class="dialog-item-list"
-      :class="env?.isH5 ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
-      v-show="showToolList"
-    >
-      <li
-        v-if="
-          (message.type === types.MSG_FILE ||
-            message.type === types.MSG_VIDEO ||
-            message.type === types.MSG_IMAGE) &&
-          !env.isH5
-        "
-        @click="openMessage(message)"
-      >
-        <i class="icon icon-msg-copy"></i>
-        <span>{{ $t('TUIChat.打开') }}</span>
-      </li>
-      <li
-        v-if="message.type === types.MSG_TEXT"
-        @click="handleMessage(message, constant.handleMessage.copy)"
-      >
-        <i class="icon icon-msg-copy"></i>
-        <span>{{ $t('TUIChat.复制') }}</span>
-      </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.forward)"
-      >
-        <i class="icon icon-msg-forward"></i>
-        <span>{{ $t('TUIChat.转发') }}</span>
-      </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.reference)"
-      >
-        <i class="icon icon-msg-quote"></i>
-        <span>{{ $t('TUIChat.引用') }}</span>
-      </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.reply)"
-      >
-        <i class="icon icon-msg-reply"></i>
-        <span>{{ $t('TUIChat.回复') }}</span>
-      </li>
-      <li
-        v-if="
-          message.flow === 'out' &&
-          message.status === 'success' &&
-          message.type !== types.MSG_CUSTOM
-        "
-        @click="handleMessage(message, constant.handleMessage.revoke)"
-      >
-        <i class="icon icon-msg-revoke"></i>
-        <span>{{ $t('TUIChat.撤回') }}</span>
-      </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.delete)"
-      >
-        <i class="icon icon-msg-del"></i>
-        <span>{{ $t('TUIChat.删除') }}</span>
-      </li>
-    </ul>
-  </div>
-</template>
-<script lang="ts">
-import {
-  defineComponent,
-  watch,
-  reactive,
-  toRefs,
-  ref,
-  watchEffect
-} from 'vue';
-import { Message } from '../interface';
-import TIM from '../../../../TUICore/tim';
-import { handleErrorPrompts } from '../../utils';
-import constant from '../../constant';
-import useClipboard from 'vue-clipboard3';
-import { useStore } from 'vuex';
-import MessageEmojiReact from './message-emoji-react.vue';
-export default defineComponent({
-  props: {
-    message: {
-      type: Object,
-      default: () => ({})
-    },
-    needEmojiReact: {
-      type: Boolean,
-      default: false
-    }
-  },
-  components: {
-    MessageEmojiReact
-  },
-  setup(props: any, ctx: any) {
-    const TUIServer = (window as any)?.TUIKitTUICore?.TUIServer?.TUIChat;
-    const VuexStore =
-      ((window as any)?.TUIKitTUICore?.isOfficial && useStore && useStore()) ||
-      {};
-    const data = reactive({
-      message: {} as Message,
-      show: false,
-      types: TIM.TYPES,
-      env: TUIServer.TUICore.TUIEnv,
-      showToolList: true,
-      needEmojiReact: false
-    });
-
-    watchEffect(() => {
-      data.needEmojiReact = props.needEmojiReact;
-    });
-
-    watch(
-      () => props.message,
-      () => {
-        data.message = props.message;
-      },
-      { deep: true, immediate: true }
-    );
-
-    const openMessage = (item: any) => {
-      let url = '';
-      switch (item.type) {
-        case data.types.MSG_FILE:
-          url = item.payload.fileUrl;
-          break;
-        case data.types.MSG_VIDEO:
-          url = item.payload.remoteVideoUrl;
-          break;
-        case data.types.MSG_IMAGE:
-          url = item.payload.imageInfoArray[0].url;
-          break;
-      }
-      window.open(url, '_blank');
-    };
-
-    const handleMessage = async (message: Message, type: string) => {
-      switch (type) {
-        case constant.handleMessage.revoke:
-          try {
-            await TUIServer.revokeMessage(message);
-            (window as any)?.TUIKitTUICore?.isOfficial &&
-              VuexStore?.commit &&
-              VuexStore?.commit('handleTask', 1);
-          } catch (error) {
-            handleErrorPrompts(error, data.env);
-          }
-          break;
-        case constant.handleMessage.copy:
-          try {
-            if (
-              message?.type === data.types.MSG_TEXT &&
-              message?.payload?.text
-            ) {
-              const { toClipboard } = useClipboard();
-              await toClipboard(message?.payload?.text);
-            }
-          } catch (error) {
-            handleErrorPrompts(error, data.env);
-          }
-          break;
-        case constant.handleMessage.delete:
-          await TUIServer.deleteMessage([message]);
-          break;
-        case constant.handleMessage.forward:
-          ctx.emit('handleMessage', message, constant.handleMessage.forward);
-          break;
-        case constant.handleMessage.reference:
-          ctx.emit('handleMessage', message, constant.handleMessage.reference);
-          break;
-        case constant.handleMessage.reply:
-          ctx.emit('handleMessage', message, constant.handleMessage.reply);
-          break;
-      }
-    };
-
-    const handleCollapse = (isCollapse: boolean) => {
-      if (!data?.env?.isH5) return;
-      data.showToolList = isCollapse;
-    };
-
-    return {
-      ...toRefs(data),
-      openMessage,
-      handleMessage,
-      constant,
-      handleCollapse
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.dialog-item {
-  background: #ffffff;
-  min-width: min-content;
-  max-width: 220Px;
-  width: 72Px;
-  height: fit-content;
-  word-break: keep-all;
-  top: 30Px;
-  border-radius: 8Px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  white-space: nowrap;
-  border: 1Px solid #e0e0e0;
-  &-web {
-    padding: 12Px 0;
-  }
-
-  &-list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    white-space: nowrap;
-    justify-content: space-around;
-    width: 100%;
-    &-h5 {
-      flex-wrap: nowrap;
-      margin: 10Px;
-      li {
-        padding: 0 5Px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        font-size: 8Px;
-        color: #4f4f4f;
-      }
-    }
-    &-web {
-      li:first-child {
-        margin-top: 0;
-      }
-
-      li {
-        padding: 4Px 12Px;
-        font-size: 12Px;
-        line-height: 17Px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        span {
-          padding-left: 4Px;
-        }
-      }
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/components/message-video.vue

@@ -1,350 +0,0 @@
-<template>
-  <div class="message-video">
-    <div
-      class="message-video-box"
-      :class="[
-        !data.progress &&
-          data.message.status === 'success' &&
-          isH5 &&
-          'message-video-cover'
-      ]"
-      @click="toggleShow"
-      ref="skeleton"
-    >
-      <img
-        class="message-img"
-        v-if="(data.progress && poster) || (isH5 && poster)"
-        :class="[isWidth ? 'isWidth' : 'isHeight']"
-        :src="poster"
-      />
-      <video
-        class="message-img video-h5-uploading"
-        v-else-if="isH5"
-        :src="data.url + '#t=0.1'"
-        :poster="data.url"
-        preload="auto"
-        muted
-        ref="video"
-      ></video>
-      <video
-        class="message-img video-web"
-        v-else-if="!data.progress && !isH5"
-        :src="data.url"
-        controls
-        preload="metadata"
-        :poster="poster"
-        ref="video"
-      ></video>
-      <div class="progress" v-if="data.progress">
-        <progress :value="data.progress" max="1"></progress>
-      </div>
-    </div>
-    <div class="dialog-video" v-if="show && isH5" @click.self="toggleShow">
-      <header>
-        <i class="icon icon-close" @click.stop="toggleShow"></i>
-      </header>
-      <div
-        class="dialog-video-box"
-        :class="[isH5 ? 'dialog-video-h5' : '']"
-        @click.self="toggleShow"
-      >
-        <video
-          :class="[isWidth ? 'isWidth' : 'isHeight']"
-          :src="data.url"
-          controls
-          autoplay
-        ></video>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  computed,
-  nextTick,
-  ref,
-  watch
-} from 'vue';
-import { handleSkeletonSize } from '../utils/utils';
-
-export default defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    isH5: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      data: {},
-      show: false,
-      poster: '',
-      posterWidth: 0,
-      posterHeight: 0
-    });
-    const skeleton = ref();
-    const video = ref();
-    const isWidth = computed(() => {
-      // eslint-disable-next-line no-unsafe-optional-chaining
-      const { snapshotWidth = 0, snapshotHeight = 0 } = (data.data as any)
-        ?.message?.payload;
-      return snapshotWidth >= snapshotHeight;
-    });
-    const transparentPosterUrl =
-      'https://web.sdk.qcloud.com/im/assets/images/transparent.png';
-
-    const toggleShow = () => {
-      if (!(data.data as any).progress) {
-        data.show = !data.show;
-      }
-    };
-
-    // h5 部分浏览器（safari / wx）video标签 封面为空 在视频未上传完成前的封面展示需要单独进行处理截取
-    const getVideoBase64 = (url: string) => {
-      return new Promise(function (resolve, reject) {
-        let dataURL = '';
-        let video = document.createElement('video');
-        video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
-        video.setAttribute('src', url);
-        video.setAttribute('preload', 'auto');
-        video.addEventListener(
-          'loadeddata',
-          function () {
-            let canvas = document.createElement('canvas'),
-              width = video.videoWidth, //canvas的尺寸和图片一样
-              height = video.videoHeight;
-            canvas.width = width;
-            canvas.height = height;
-            (canvas as any)
-              .getContext('2d')
-              .drawImage(video, 0, 0, width, height); //绘制canvas
-            dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
-            data.posterWidth = width;
-            data.posterHeight = height;
-            resolve(dataURL);
-          },
-          { once: true }
-        );
-      });
-    };
-
-    const handlePosterUrl = async (data: any) => {
-      if (!data) return '';
-      if (data.progress) {
-        return await getVideoBase64(data.url);
-      } else {
-        return (
-          (data.snapshotUrl !== transparentPosterUrl && data.snapshotUrl) ||
-          (data?.message?.payload?.snapshotUrl !== transparentPosterUrl &&
-            data?.message?.payload?.snapshotUrl) ||
-          (data?.message?.payload?.thumbUrl !== transparentPosterUrl &&
-            data?.message?.payload?.thumbUrl) ||
-          (await getVideoBase64(data.url))
-        );
-      }
-    };
-
-    watchEffect(async () => {
-      data.data = props.data;
-      if (!data.data) return;
-      data.poster = await handlePosterUrl(data.data);
-      nextTick(async () => {
-        const containerWidth =
-          document.getElementById('messageEle')?.clientWidth || 0;
-        const max = props.isH5 ? Math.min(containerWidth - 172, 300) : 300;
-        let size;
-        if (!(data.data as any).progress) {
-          let {
-            snapshotWidth = 0,
-            snapshotHeight = 0,
-            snapshotUrl
-          } = data.data as any;
-          if (snapshotWidth === 0 || snapshotHeight === 0) return;
-          if (snapshotUrl === transparentPosterUrl) {
-            snapshotWidth = data.posterWidth;
-            snapshotHeight = data.posterHeight;
-          }
-          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 (!props.isH5) {
-            video?.value?.style &&
-              (video.value.style.width = `${size.width}Px`);
-            video?.value?.style &&
-              (video.value.style.height = `${size.height}Px`);
-          }
-        } else {
-          ctx.emit('uploading');
-        }
-      });
-    });
-
-    watch(
-      () => (data.data as any)?.progress,
-      (newVal, oldVal) => {
-        if (!newVal && oldVal) {
-          ctx.emit('uploading');
-        }
-      }
-    );
-
-    return {
-      ...toRefs(data),
-      toggleShow,
-      isWidth,
-      getVideoBase64,
-      handlePosterUrl,
-      skeleton,
-      video
-    };
-  }
-});
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-video {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  &-box {
-    max-width: min(calc(100vw - 180Px), 300Px);
-    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: 0Px;
-      height: 0Px;
-      border: 10Px solid transparent;
-      border-left: 15Px solid #ffffff;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      margin: auto;
-      transform: translate(5Px, 0Px);
-    }
-    video {
-      max-width: min(calc(100vw - 180Px), 300Px);
-      max-height: min(calc(100vw - 180Px), 300Px);
-      width: inherit;
-      height: inherit;
-      border-radius: 10Px;
-    }
-  }
-  .progress {
-    position: absolute;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    padding: 0 20Px;
-    border-radius: 10Px;
-    left: 0;
-    top: 0;
-    background: rgba(#000000, 0.5);
-    display: flex;
-    align-items: center;
-    flex: 1;
-    progress {
-      color: #006eff;
-      appearance: none;
-      border-radius: 0.25rem;
-      background: rgba(#ffffff, 1);
-      width: 100%;
-      height: 0.5rem;
-      &::-webkit-progress-value {
-        background-color: #006eff;
-        border-radius: 0.25rem;
-      }
-      &::-webkit-progress-bar {
-        border-radius: 0.25rem;
-        background: rgba(#ffffff, 1);
-      }
-      &::-moz-progress-bar {
-        color: #006eff;
-        background: #006eff;
-        border-radius: 0.25rem;
-      }
-    }
-  }
-}
-.dialog-video {
-  position: fixed;
-  z-index: 12;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  header {
-    display: flex;
-    justify-content: flex-end;
-    background: rgba(0, 0, 0, 0.49);
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10Px 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: #000000;
-  padding: 30Px 0;
-}
-
-.isWidth {
-  width: 100%;
-}
-.isHeight {
-  height: 100%;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/dist/server.js

@@ -1,1661 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
-exports.__esModule = true;
-var TUIPlugin_1 = require("../../../TUIPlugin");
-var IComponentServer_1 = require("../IComponentServer");
-var utils_1 = require("./utils/utils");
-/**
- * class TUIChatServer
- *
- * TUIChat 逻辑主体
- */
-var TUIChatServer = /** @class */ (function (_super) {
-    __extends(TUIChatServer, _super);
-    function TUIChatServer(TUICore) {
-        var _this = _super.call(this) || this;
-        _this.currentStore = {};
-        _this.TUICore = TUICore;
-        _this.bindTIMEvent();
-        _this.store = TUICore.setComponentStore("TUIChat", {}, _this.updateStore.bind(_this));
-        return _this;
-    }
-    /**
-     * 组件销毁
-     * destroy
-     */
-    TUIChatServer.prototype.destroyed = function () {
-        this.unbindTIMEvent();
-    };
-    /**
-     * 数据监听回调
-     * data listener callback
-     *
-     * @param {any} newValue 新数据
-     * @param {any} oldValue 旧数据
-     *
-     */
-    TUIChatServer.prototype.updateStore = function (newValue, oldValue) {
-        Object.assign(this.currentStore, newValue);
-        if (!newValue.conversation.conversationID) {
-            this.currentStore.messageList = [];
-            return;
-        }
-        if (newValue.conversation.conversationID &&
-            newValue.conversation.conversationID !==
-                oldValue.conversation.conversationID) {
-            this.render(newValue.conversation);
-        }
-    };
-    TUIChatServer.prototype.render = function (conversation) {
-        var _this = this;
-        var _a, _b, _c;
-        var len = 15;
-        this.currentStore.isFirstRender = true;
-        this.currentStore.messageList = [];
-        this.currentStore.readSet.clear();
-        this.getMessageList({
-            conversationID: conversation.conversationID,
-            count: len
-        });
-        if (conversation.type === this.TUICore.TIM.TYPES.CONV_GROUP) {
-            this.currentStore.userInfo.isGroup = true;
-            var options = {
-                groupID: conversation.groupProfile.groupID,
-                userIDList: [conversation.groupProfile.selfInfo.userID]
-            };
-            this.getGroupProfile({ groupID: conversation.groupProfile.groupID });
-            this.getGroupMemberProfile(options).then(function (res) {
-                var memberList = res.data.memberList;
-                var selfInfo = memberList[0];
-                _this.currentStore.selfInfo = selfInfo;
-            });
-            (_c = (_b = (_a = this === null || this === void 0 ? void 0 : this.TUICore) === null || _a === void 0 ? void 0 : _a.TUIServer) === null || _b === void 0 ? void 0 : _b.TUIGroup) === null || _c === void 0 ? void 0 : _c.getGroupMemberList({
-                groupID: conversation.groupProfile.groupID,
-                count: 100,
-                offset: 0
-            }).then(function (res) {
-                var _a;
-                _this.currentStore.allMemberList = (_a = res.data) === null || _a === void 0 ? void 0 : _a.memberList;
-            });
-        }
-        else {
-            this.currentStore.userInfo.isGroup = false;
-            this.currentStore.userInfo.list = [conversation === null || conversation === void 0 ? void 0 : conversation.userProfile];
-        }
-    };
-    /**
-     * /////////////////////////////////////////////////////////////////////////////////
-     * //
-     * //                                    TIM 事件监听注册接口
-     * //                        TIM Event listener registration interface
-     * //
-     * /////////////////////////////////////////////////////////////////////////////////
-     */
-    TUIChatServer.prototype.bindTIMEvent = function () {
-        this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_RECEIVED, this.handleMessageReceived, this);
-        this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_MODIFIED, this.handleMessageModified, this);
-        this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_REVOKED, this.handleMessageRevoked, this);
-        this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER, this.handleMessageReadByPeer, this);
-        this.TUICore.tim.on(this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED, this.handleGroupListUpdated, this);
-        this.TUICore.tim.on(this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED, this.handleMessageReadReceiptReceived, this);
-    };
-    TUIChatServer.prototype.unbindTIMEvent = function () {
-        this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_RECEIVED, this.handleMessageReceived);
-        this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_MODIFIED, this.handleMessageModified);
-        this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_REVOKED, this.handleMessageRevoked);
-        this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER, this.handleMessageReadByPeer);
-        this.TUICore.tim.off(this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED, this.handleGroupListUpdated);
-        this.TUICore.tim.off(this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED, this.handleMessageReadReceiptReceived);
-    };
-    TUIChatServer.prototype.handleMessageReceived = function (event) {
-        var _this = this;
-        var _a;
-        (_a = event === null || event === void 0 ? void 0 : event.data) === null || _a === void 0 ? void 0 : _a.forEach(function (message) {
-            var _a, _b;
-            if ((message === null || message === void 0 ? void 0 : message.conversationID) === ((_b = (_a = _this === null || _this === void 0 ? void 0 : _this.store) === null || _a === void 0 ? void 0 : _a.conversation) === null || _b === void 0 ? void 0 : _b.conversationID)) {
-                _this.currentStore.messageList = __spreadArrays(_this.currentStore.messageList, [
-                    message,
-                ]);
-            }
-            TUIPlugin_1.TUINotification.getInstance().notify(message);
-        });
-    };
-    TUIChatServer.prototype.handleMessageModified = function (event) {
-        var middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-    };
-    TUIChatServer.prototype.handleMessageRevoked = function (event) {
-        var middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-    };
-    TUIChatServer.prototype.handleMessageReadByPeer = function (event) {
-        var middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-    };
-    TUIChatServer.prototype.handleGroupListUpdated = function (event) {
-        var _this = this;
-        event === null || event === void 0 ? void 0 : event.data.map(function (item) {
-            var _a, _b, _c;
-            if ((item === null || item === void 0 ? void 0 : item.groupID) === ((_c = (_b = (_a = _this === null || _this === void 0 ? void 0 : _this.store) === null || _a === void 0 ? void 0 : _a.conversation) === null || _b === void 0 ? void 0 : _b.groupProfile) === null || _c === void 0 ? void 0 : _c.groupID)) {
-                _this.store.conversation.groupProfile = item;
-                _this.currentStore.conversation = {};
-                _this.currentStore.conversation = _this.store.conversation;
-            }
-            return item;
-        });
-    };
-    TUIChatServer.prototype.handleMessageReadReceiptReceived = function (event) {
-        var middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-    };
-    /**
-     * /////////////////////////////////////////////////////////////////////////////////
-     * //
-     * //                                 处理 TIM 接口参数及回调
-     * //                     Handling TIM interface parameters and callbacks
-     * //
-     * /////////////////////////////////////////////////////////////////////////////////
-     */
-    /**
-     * 创建消息生成参数
-     * Create message generation parameters
-     *
-     * @param {Object} content 消息体
-     * @param {String} type 消息类型 text: 文本类型 file: 文件类型 face: 表情 location: 地址 custom: 自定义 merger: 合并 forward: 转发
-     * @param {Callback} callback 回调函数
-     * @param {any} to 发送的对象
-     * @returns {options} 消息参数
-     */
-    TUIChatServer.prototype.handleMessageOptions = function (content, type, callback, to) {
-        var _a, _b, _c, _d, _e, _f;
-        var options = {
-            to: "",
-            conversationType: (to === null || to === void 0 ? void 0 : to.type) || this.store.conversation.type,
-            payload: content,
-            needReadReceipt: this.currentStore.needReadReceipt
-        };
-        if (this.currentStore.needTyping) {
-            options.cloudCustomData = {
-                messageFeature: {
-                    needTyping: 1,
-                    version: 1
-                }
-            };
-            options.cloudCustomData = JSON.stringify(options.cloudCustomData);
-        }
-        if (type === "file" && callback) {
-            options.onProgress = callback;
-        }
-        switch (options.conversationType) {
-            case this.TUICore.TIM.TYPES.CONV_C2C:
-                options.to =
-                    ((_a = to === null || to === void 0 ? void 0 : to.userProfile) === null || _a === void 0 ? void 0 : _a.userID) || ((_c = (_b = this.store.conversation) === null || _b === void 0 ? void 0 : _b.userProfile) === null || _c === void 0 ? void 0 : _c.userID) ||
-                        "";
-                break;
-            case this.TUICore.TIM.TYPES.CONV_GROUP:
-                options.to =
-                    ((_d = to === null || to === void 0 ? void 0 : to.groupProfile) === null || _d === void 0 ? void 0 : _d.groupID) || ((_f = (_e = this.store.conversation) === null || _e === void 0 ? void 0 : _e.groupProfile) === null || _f === void 0 ? void 0 : _f.groupID) ||
-                        "";
-                break;
-            default:
-                break;
-        }
-        return options;
-    };
-    /**
-     * 处理异步函数
-     * Handling asynchronous functions
-     *
-     * @param {callback} callback 回调函数
-     * @returns {Promise} 返回异步函数
-     */
-    TUIChatServer.prototype.handlePromiseCallback = function (callback) {
-        var _this = this;
-        return new Promise(function (resolve, reject) {
-            var config = {
-                TUIName: "TUIChat",
-                callback: function () {
-                    callback && callback(resolve, reject);
-                }
-            };
-            _this.TUICore.setAwaitFunc(config.TUIName, config.callback);
-        });
-    };
-    /**
-     * 重试异步函数
-     * Retry asynchronous functions
-     * 默认执行一次，之后按时间间隔列表重复执行直到成功，重复次数完毕后仍失败则失败
-     * Execute once by default, and then repeat it according to the time interval list until it succeeds.
-     * If it still fails after the number of repetitions is complete, it will reject.
-     *
-     * @param {callback} callback 回调函数/callback function
-     * @param {Array<number>} intervalList 间隔时间列表/interval list
-     * @param {callback} retryBreakFn 强制重复结束条件函数/break retry function
-     * @returns {Promise} 返回异步函数/return
-     */
-    TUIChatServer.prototype.handlePromiseCallbackRetry = function (callback, intervalList, retryBreakFn) {
-        if (intervalList === void 0) { intervalList = []; }
-        if (retryBreakFn === void 0) { retryBreakFn = function () {
-            return false;
-        }; }
-        return new Promise(function (resolve, reject) {
-            var times = 0;
-            function tryFn() {
-                times++;
-                callback()
-                    .then(resolve)["catch"](function (error) {
-                    if (times > intervalList.length ||
-                        (retryBreakFn && retryBreakFn(error))) {
-                        reject(error);
-                        return;
-                    }
-                    setTimeout(tryFn, intervalList[times - 1]);
-                });
-            }
-            tryFn();
-        });
-    };
-    /**
-     * 文件上传进度函数处理
-     * File upload progress function processing
-     *
-     * @param {number} progress 文件上传进度 1表示完成
-     * @param {message} message 文件消息
-     */
-    TUIChatServer.prototype.handleUploadProgress = function (progress, message) {
-        this.currentStore.messageList.map(function (item) {
-            if (item.ID === message.ID) {
-                item.progress = progress;
-            }
-            return item;
-        });
-    };
-    /**
-     * /////////////////////////////////////////////////////////////////////////////////
-     * //
-     * //                                 TIM 方法
-     * //                               TIM methods
-     * //
-     * /////////////////////////////////////////////////////////////////////////////////
-     */
-    /**
-     * 发送表情消息
-     * Send face messages
-     *
-     * @param {Object} data 消息内容/message content
-     * @param {Number} data.index 表情索引/face index
-     * @param {String} data.data 额外数据/extra data
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendFaceMessage = function (data) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message, imResponse_1, error_1, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions(data, "face");
-                        message = this.TUICore.tim.createFaceMessage(options);
-                        this.currentStore.messageList.push(message);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message)];
-                    case 1:
-                        imResponse_1 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_1.data.message.ID) {
-                                return imResponse_1.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_1);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_1 = _a.sent();
-                        reject(error_1);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送图片消息
-     * Send image message
-     *
-     * @param {Image} image 图片文件/image
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendImageMessage = function (image) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message_1, imResponse_2, error_2, middleData;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions({ file: image }, "file", function (progress) {
-                            _this.handleUploadProgress(progress, message_1);
-                        });
-                        message_1 = this.TUICore.tim.createImageMessage(options);
-                        message_1.progress = 0.01;
-                        this.currentStore.messageList.push(message_1);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message_1)];
-                    case 1:
-                        imResponse_2 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_2.data.message.ID) {
-                                return imResponse_2.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_2);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_2 = _a.sent();
-                        reject(error_2);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送视频消息
-     * Send video message
-     *
-     * @param {Video} video 视频文件/video
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendVideoMessage = function (video) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message_2, imResponse_3, error_3, middleData;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions({ file: video }, "file", function (progress) {
-                            _this.handleUploadProgress(progress, message_2);
-                        });
-                        message_2 = this.TUICore.tim.createVideoMessage(options);
-                        message_2.progress = 0.01;
-                        this.currentStore.messageList.push(message_2);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message_2)];
-                    case 1:
-                        imResponse_3 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_3.data.message.ID) {
-                                return imResponse_3.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_3);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_3 = _a.sent();
-                        reject(error_3);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送文件消息
-     * Send file message
-     *
-     * @param {File} file 文件/file
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendFileMessage = function (file) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message_3, imResponse_4, error_4, middleData;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions({ file: file }, "file", function (progress) {
-                            _this.handleUploadProgress(progress, message_3);
-                        });
-                        message_3 = this.TUICore.tim.createFileMessage(options);
-                        message_3.progress = 0.01;
-                        this.currentStore.messageList.push(message_3);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message_3)];
-                    case 1:
-                        imResponse_4 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_4.data.message.ID) {
-                                return imResponse_4.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_4);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_4 = _a.sent();
-                        reject(error_4);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送自定义消息
-     * Send Custom message
-     *
-     * @param {Object} data 消息内容/message content
-     * @param {String} data.data 自定义消息的数据字段/custom message data fields
-     * @param {String} data.description 自定义消息的说明字段/custom message description fields
-     * @param {String} data.extension 自定义消息的扩展字段/custom message extension fields
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendCustomMessage = function (data) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message, imResponse_5, error_5, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        data.data = JSON.stringify(data.data);
-                        options = this.handleMessageOptions(data, "custom");
-                        message = this.TUICore.tim.createCustomMessage(options);
-                        this.currentStore.messageList.push(message);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message)];
-                    case 1:
-                        imResponse_5 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_5.data.message.ID) {
-                                return imResponse_5.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_5);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_5 = _a.sent();
-                        reject(error_5);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送地理位置消息
-     * Send location message
-     *
-     * @param {Object} data 消息内容/message content
-     * @param {String} data.description 地理位置描述信息/geographic descriptive information
-     * @param {Number} data.longitude 经度/longitude
-     * @param {Number} data.latitude 纬度/latitude
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendLocationMessage = function (data) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message, imResponse, error_6, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions(data, "location");
-                        message = this.TUICore.tim.createLocationMessage(options);
-                        this.currentStore.messageList.push(message);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message)];
-                    case 1:
-                        imResponse = _a.sent();
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_6 = _a.sent();
-                        reject(error_6);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 转发消息
-     * forward message
-     *
-     * @param {message} message 消息实例/message
-     * @param {any} to 转发的对象/forward to
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.forwardMessage = function (message, to) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, imMessage, imResponse, error_7, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions(message, "forward", {}, to);
-                        imMessage = this.TUICore.tim.createForwardMessage(options);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(imMessage)];
-                    case 1:
-                        imResponse = _a.sent();
-                        if (this.store.conversation.conversationID ===
-                            imResponse.data.message.conversationID) {
-                            this.currentStore.messageList.push(imResponse.data.message);
-                        }
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_7 = _a.sent();
-                        reject(error_7);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送消息已读回执
-     * Send message read receipt
-     *
-     * @param {Array} messageList 同一个 C2C 或 GROUP 会话的消息列表，最大长度为30/A list of messages for the same C2C or GROUP conversation, with a maximum length of 30
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendMessageReadReceipt = function (messageList) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, error_8;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    _a.trys.push([0, 2, , 3]);
-                                    return [4 /*yield*/, this.TUICore.tim.sendMessageReadReceipt(messageList)];
-                                case 1:
-                                    imResponse = _a.sent();
-                                    resolve(imResponse);
-                                    return [3 /*break*/, 3];
-                                case 2:
-                                    error_8 = _a.sent();
-                                    reject(error_8);
-                                    return [3 /*break*/, 3];
-                                case 3: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * 拉取已读回执列表
-     * Pull read receipt list
-     *
-     * @param {Array} messageList 同一群会话的消息列表/The message list of the same group of the conversation
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getMessageReadReceiptList = function (messageList) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, error_9;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    _a.trys.push([0, 2, , 3]);
-                                    return [4 /*yield*/, this.TUICore.tim.getMessageReadReceiptList(messageList)];
-                                case 1:
-                                    imResponse = _a.sent();
-                                    resolve(imResponse);
-                                    return [3 /*break*/, 3];
-                                case 2:
-                                    error_9 = _a.sent();
-                                    reject(error_9);
-                                    return [3 /*break*/, 3];
-                                case 3: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * /////////////////////////////////////////////////////////////////////////////////
-     * //
-     * //                                 对外方法
-     * //
-     * /////////////////////////////////////////////////////////////////////////////////
-     */
-    /**
-     * 获取 messageList
-     * get messagelist
-     *
-     * @param {any} options 获取 messageList 参数/messageList options
-     * @param {Boolean} history  是否获取历史消息/Whether to get historical information
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getMessageList = function (options, history) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, error_10;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    _a.trys.push([0, 4, , 5]);
-                                    return [4 /*yield*/, this.TUICore.tim.getMessageList(options)];
-                                case 1:
-                                    imResponse = _a.sent();
-                                    console.warn(imResponse.data.messageList);
-                                    if (!imResponse.data.messageList.length) return [3 /*break*/, 3];
-                                    return [4 /*yield*/, this.getMessageReadReceiptList(imResponse.data.messageList)];
-                                case 2:
-                                    _a.sent();
-                                    _a.label = 3;
-                                case 3:
-                                    if (!history) {
-                                        this.currentStore.messageList = imResponse.data.messageList;
-                                    }
-                                    else {
-                                        this.currentStore.messageList = __spreadArrays(imResponse.data.messageList, this.currentStore.messageList);
-                                    }
-                                    this.currentStore.nextReqMessageID = imResponse.data.nextReqMessageID;
-                                    this.currentStore.isCompleted = imResponse.data.isCompleted;
-                                    resolve(imResponse);
-                                    return [3 /*break*/, 5];
-                                case 4:
-                                    error_10 = _a.sent();
-                                    reject(error_10);
-                                    return [3 /*break*/, 5];
-                                case 5: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * 获取历史消息
-     * get history messagelist
-     *
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getHistoryMessageList = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var options;
-            return __generator(this, function (_a) {
-                options = {
-                    conversationID: this.currentStore.conversation.conversationID,
-                    nextReqMessageID: this.currentStore.nextReqMessageID,
-                    count: 15
-                };
-                if (!this.currentStore.isCompleted) {
-                    this.getMessageList(options, true);
-                }
-                return [2 /*return*/];
-            });
-        });
-    };
-    /**
-     * 发送文本消息
-     * send text message
-     *
-     * @param {any} text 发送的消息/text message
-     * @param {object} data 被引用消息的内容/The content of the quoted message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendTextMessage = function (text, data) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, cloudCustomDataObj, cloudCustomData, secondOptions, message, imResponse_6, error_11, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions({ text: text }, "text");
-                        cloudCustomDataObj = {};
-                        if (options.cloudCustomData) {
-                            try {
-                                cloudCustomDataObj = utils_1.JSONToObject(options.cloudCustomData);
-                            }
-                            catch (_b) {
-                                cloudCustomDataObj = {};
-                            }
-                        }
-                        cloudCustomData = JSON.stringify(data);
-                        secondOptions = Object.assign(options, __assign({ cloudCustomData: cloudCustomData }, cloudCustomDataObj));
-                        message = this.TUICore.tim.createTextMessage(secondOptions);
-                        this.currentStore.messageList.push(message);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message)];
-                    case 1:
-                        imResponse_6 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_6.data.message.ID) {
-                                return imResponse_6.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_6);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_11 = _a.sent();
-                        reject(error_11);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送【对方正在输入中】在线自定义消息
-     * send typing online custom message
-     *
-     * @param {Object} data 消息内容/message content
-     * @param {String} data.data 自定义消息的数据字段/custom message data field
-     * @param {String} data.description 自定义消息的说明字段/custom message description field
-     * @param {String} data.extension 自定义消息的扩展字段/custom message extension field
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendTypingMessage = function (data) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message, imResponse, error_12, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        data.data = JSON.stringify(data.data);
-                        options = this.handleMessageOptions(data, "custom");
-                        message = this.TUICore.tim.createCustomMessage(options);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message, {
-                                onlineUserOnly: true
-                            })];
-                    case 1:
-                        imResponse = _a.sent();
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_12 = _a.sent();
-                        reject(error_12);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送@ 提醒功能的文本消息
-     * Send @ Reminder text message
-     *
-     * @param {any} data 消息内容/message content
-     * @param {String} data.text 文本消息/text message
-     * @param {Array} data.atUserList 需要 @ 的用户列表，如果需要 @ALL，请传入 TIM.TYPES.MSG_AT_ALL / List of users who need @, if you need @ALL, please pass in TIM.TYPES.MSG_AT_ALL
-     * @returns {message}
-     *
-     * - 注：此接口仅用于群聊/This interface is only used for group chat
-     */
-    TUIChatServer.prototype.sendTextAtMessage = function (data) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message, imResponse_7, error_13, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions(data, "text");
-                        message = this.TUICore.tim.createTextAtMessage(options);
-                        this.currentStore.messageList.push(message);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message)];
-                    case 1:
-                        imResponse_7 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_7.data.message.ID) {
-                                return imResponse_7.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_7);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_13 = _a.sent();
-                        reject(error_13);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 发送合并消息
-     * send merger message
-     *
-     * @param {Object} data 消息内容/message content
-     * @param {Array.<Message>} data.messageList 合并的消息列表/merger message list
-     * @param {String} data.title 合并的标题/merger title
-     * @param {String} data.abstractList 摘要列表，不同的消息类型可以设置不同的摘要信息/Summary list, different message types can set different summary information
-     * @param {String} data.compatibleText 兼容文本/ompatible text
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.sendMergerMessage = function (data) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var options, message, imResponse_8, error_14, middleData;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        options = this.handleMessageOptions(data, "merger");
-                        message = this.TUICore.tim.createMergerMessage(options);
-                        this.currentStore.messageList.push(message);
-                        return [4 /*yield*/, this.TUICore.tim.sendMessage(message)];
-                    case 1:
-                        imResponse_8 = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.map(function (item) {
-                            if (item.ID === imResponse_8.data.message.ID) {
-                                return imResponse_8.data.message;
-                            }
-                            return item;
-                        });
-                        resolve(imResponse_8);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_14 = _a.sent();
-                        reject(error_14);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 消息撤回
-     * revoke message
-     *
-     * @param {message} message 消息实例/message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.revokeMessage = function (message) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, cloudCustomData, error_15, middleData;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _b.trys.push([0, 4, , 5]);
-                        return [4 /*yield*/, this.TUICore.tim.revokeMessage(message)];
-                    case 1:
-                        imResponse = _b.sent();
-                        cloudCustomData = utils_1.JSONToObject(message === null || message === void 0 ? void 0 : message.cloudCustomData);
-                        if (!((_a = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReply) === null || _a === void 0 ? void 0 : _a.messageRootID)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, this.revokeReplyMessage(message)];
-                    case 2:
-                        _b.sent();
-                        _b.label = 3;
-                    case 3:
-                        resolve(imResponse);
-                        return [3 /*break*/, 5];
-                    case 4:
-                        error_15 = _b.sent();
-                        reject(error_15);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 5];
-                    case 5: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 重发消息
-     * resend message
-     *
-     * @param {message} message 消息实例/message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.resendMessage = function (message) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, error_16;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.TUICore.tim.resendMessage(message)];
-                    case 1:
-                        imResponse = _a.sent();
-                        this.currentStore.messageList = this.currentStore.messageList.filter(function (item) { return item.ID !== message.ID; });
-                        this.currentStore.messageList.push(imResponse.data.message);
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_16 = _a.sent();
-                        reject(error_16);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 删除消息
-     * delete message
-     *
-     * @param {Array.<message>} messages 消息实例/message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.deleteMessage = function (messages) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, middleData, error_17;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.TUICore.tim.deleteMessage(messages)];
-                    case 1:
-                        imResponse = _a.sent();
-                        resolve(imResponse);
-                        middleData = this.currentStore.messageList;
-                        this.currentStore.messageList = [];
-                        this.currentStore.messageList = middleData;
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_17 = _a.sent();
-                        reject(error_17);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 变更消息
-     * modify message
-     *
-     * @param {Array.<message>} message 消息实例/message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.modifyMessage = function (message) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, error_18, code, data;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _c.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.TUICore.tim.modifyMessage(message)];
-                    case 1:
-                        imResponse = _c.sent();
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_18 = _c.sent();
-                        code = (_a = error_18) === null || _a === void 0 ? void 0 : _a.code;
-                        data = (_b = error_18) === null || _b === void 0 ? void 0 : _b.data;
-                        if (code === 2480) {
-                            console.warn("MODIFY_MESSAGE_ERROR", "修改消息发生冲突，data.message 是最新的消息", "data.message:", data === null || data === void 0 ? void 0 : data.message);
-                        }
-                        else if (code === 2481) {
-                            console.warn("MODIFY_MESSAGE_ERROR", "不支持修改直播群消息");
-                        }
-                        else if (code === 20026) {
-                            console.warn("MODIFY_MESSAGE_ERROR", "消息不存在");
-                        }
-                        reject(error_18);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 回复消息
-     * reply message
-     * @param {Array.<message>} message 消息实例/message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.replyMessage = function (message, messageRoot) {
-        var _this = this;
-        var replyFunction = function () {
-            return _this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                var repliesObject, cloudCustomData, messageRootID_1, rootCloudCustomData, imResponse, error_19;
-                var _a, _b, _c, _d, _e, _f;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
-                        case 0:
-                            _g.trys.push([0, 3, , 4]);
-                            repliesObject = {
-                                messageAbstract: (_a = message === null || message === void 0 ? void 0 : message.payload) === null || _a === void 0 ? void 0 : _a.text,
-                                messageSender: message === null || message === void 0 ? void 0 : message.from,
-                                messageID: message === null || message === void 0 ? void 0 : message.ID,
-                                messageType: message === null || message === void 0 ? void 0 : message.type,
-                                messageTime: message === null || message === void 0 ? void 0 : message.time,
-                                messageSequence: message === null || message === void 0 ? void 0 : message.sequence,
-                                version: 1
-                            };
-                            if (!!messageRoot) return [3 /*break*/, 2];
-                            cloudCustomData = utils_1.JSONToObject(message === null || message === void 0 ? void 0 : message.cloudCustomData);
-                            messageRootID_1 = (_b = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReply) === null || _b === void 0 ? void 0 : _b.messageRootID;
-                            return [4 /*yield*/, ((_d = (_c = this === null || this === void 0 ? void 0 : this.currentStore) === null || _c === void 0 ? void 0 : _c.messageList) === null || _d === void 0 ? void 0 : _d.find(function (item) { return (item === null || item === void 0 ? void 0 : item.ID) === messageRootID_1; }))];
-                        case 1:
-                            messageRoot =
-                                (_g.sent()) || this.findMessage(messageRootID_1);
-                            _g.label = 2;
-                        case 2:
-                            rootCloudCustomData = (messageRoot === null || messageRoot === void 0 ? void 0 : messageRoot.cloudCustomData) ? utils_1.JSONToObject(messageRoot === null || messageRoot === void 0 ? void 0 : messageRoot.cloudCustomData)
-                                : { messageReplies: {} };
-                            if ((_e = rootCloudCustomData === null || rootCloudCustomData === void 0 ? void 0 : rootCloudCustomData.messageReplies) === null || _e === void 0 ? void 0 : _e.replies) {
-                                rootCloudCustomData.messageReplies.replies = __spreadArrays((_f = rootCloudCustomData === null || rootCloudCustomData === void 0 ? void 0 : rootCloudCustomData.messageReplies) === null || _f === void 0 ? void 0 : _f.replies, [
-                                    repliesObject,
-                                ]);
-                            }
-                            else {
-                                rootCloudCustomData.messageReplies = {
-                                    replies: [repliesObject],
-                                    version: 1
-                                };
-                            }
-                            messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
-                            imResponse = this.modifyMessage(messageRoot);
-                            resolve(imResponse);
-                            return [3 /*break*/, 4];
-                        case 3:
-                            error_19 = _g.sent();
-                            reject(error_19);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); });
-        };
-        var retryBreakFunction = function (error) {
-            if (error && (error === null || error === void 0 ? void 0 : error.code) === 2480)
-                return false;
-            return true;
-        };
-        return this.handlePromiseCallbackRetry(replyFunction, [500, 1000, 3000], retryBreakFunction);
-    };
-    /**
-     * 撤回回复消息
-     * revoke reply message
-     * @param {Array.<message>} message 消息实例/message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.revokeReplyMessage = function (message, messageRoot) {
-        var _this = this;
-        var revokeReplyFunction = function () {
-            return _this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                var cloudCustomData, messageRootID_2, rootCloudCustomData, index, imResponse, error_20;
-                var _a, _b, _c, _d, _e, _f;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
-                        case 0:
-                            _g.trys.push([0, 3, , 4]);
-                            if (!!messageRoot) return [3 /*break*/, 2];
-                            cloudCustomData = utils_1.JSONToObject(message === null || message === void 0 ? void 0 : message.cloudCustomData);
-                            messageRootID_2 = (_a = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReply) === null || _a === void 0 ? void 0 : _a.messageRootID;
-                            return [4 /*yield*/, ((_c = (_b = this === null || this === void 0 ? void 0 : this.currentStore) === null || _b === void 0 ? void 0 : _b.messageList) === null || _c === void 0 ? void 0 : _c.find(function (item) { return (item === null || item === void 0 ? void 0 : item.ID) === messageRootID_2; }))];
-                        case 1:
-                            messageRoot =
-                                (_g.sent()) || this.findMessage(messageRootID_2);
-                            _g.label = 2;
-                        case 2:
-                            rootCloudCustomData = (messageRoot === null || messageRoot === void 0 ? void 0 : messageRoot.cloudCustomData) ? utils_1.JSONToObject(messageRoot === null || messageRoot === void 0 ? void 0 : messageRoot.cloudCustomData)
-                                : { messageReplies: {} };
-                            if ((_d = rootCloudCustomData === null || rootCloudCustomData === void 0 ? void 0 : rootCloudCustomData.messageReplies) === null || _d === void 0 ? void 0 : _d.replies) {
-                                index = rootCloudCustomData.messageReplies.replies.findIndex(function (item) { return (item === null || item === void 0 ? void 0 : item.messageID) === (message === null || message === void 0 ? void 0 : message.ID); });
-                                (_f = (_e = rootCloudCustomData === null || rootCloudCustomData === void 0 ? void 0 : rootCloudCustomData.messageReplies) === null || _e === void 0 ? void 0 : _e.replies) === null || _f === void 0 ? void 0 : _f.splice(index, 1);
-                            }
-                            messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
-                            imResponse = this.modifyMessage(messageRoot);
-                            resolve(imResponse);
-                            return [3 /*break*/, 4];
-                        case 3:
-                            error_20 = _g.sent();
-                            reject(error_20);
-                            return [3 /*break*/, 4];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); });
-        };
-        var retryBreakFunction = function (error) {
-            if (error && (error === null || error === void 0 ? void 0 : error.code) === 2480)
-                return false;
-            return true;
-        };
-        return this.handlePromiseCallbackRetry(revokeReplyFunction, [500, 1000, 3000], retryBreakFunction);
-    };
-    /**
-     * 表情回应
-     * emoji react
-     * @param {Array.<message>} message 消息实例/message
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.emojiReact = function (message, emojiID) {
-        var _this = this;
-        var emojiReactFunction = function () {
-            return _this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                var userID, cloudCustomData, index, imResponse, error_21;
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-                return __generator(this, function (_u) {
-                    switch (_u.label) {
-                        case 0:
-                            _u.trys.push([0, 2, , 3]);
-                            if (!message || !(message === null || message === void 0 ? void 0 : message.ID) || !emojiID)
-                                reject();
-                            userID = (_e = (_d = (_c = (_b = (_a = this.TUICore) === null || _a === void 0 ? void 0 : _a.TUIServer) === null || _b === void 0 ? void 0 : _b.TUIProfile) === null || _c === void 0 ? void 0 : _c.store) === null || _d === void 0 ? void 0 : _d.profile) === null || _e === void 0 ? void 0 : _e.userID;
-                            return [4 /*yield*/, ((_g = (_f = this === null || this === void 0 ? void 0 : this.currentStore) === null || _f === void 0 ? void 0 : _f.messageList) === null || _g === void 0 ? void 0 : _g.find(function (item) { return (item === null || item === void 0 ? void 0 : item.ID) === (message === null || message === void 0 ? void 0 : message.ID); }))];
-                        case 1:
-                            message =
-                                (_u.sent()) || this.findMessage(message === null || message === void 0 ? void 0 : message.ID);
-                            cloudCustomData = (message === null || message === void 0 ? void 0 : message.cloudCustomData) ? utils_1.JSONToObject(message === null || message === void 0 ? void 0 : message.cloudCustomData)
-                                : { messageReact: {} };
-                            if ((_h = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReact) === null || _h === void 0 ? void 0 : _h.reacts) {
-                                if ((_j = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReact) === null || _j === void 0 ? void 0 : _j.reacts[emojiID]) {
-                                    index = (_l = (_k = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReact) === null || _k === void 0 ? void 0 : _k.reacts[emojiID]) === null || _l === void 0 ? void 0 : _l.indexOf(userID);
-                                    if (index === -1) {
-                                        (_o = (_m = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReact) === null || _m === void 0 ? void 0 : _m.reacts[emojiID]) === null || _o === void 0 ? void 0 : _o.push(userID);
-                                    }
-                                    else {
-                                        (_q = (_p = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReact) === null || _p === void 0 ? void 0 : _p.reacts[emojiID]) === null || _q === void 0 ? void 0 : _q.splice(index, 1);
-                                        if (((_s = (_r = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReact) === null || _r === void 0 ? void 0 : _r.reacts[emojiID]) === null || _s === void 0 ? void 0 : _s.length) === 0) {
-                                            (_t = cloudCustomData === null || cloudCustomData === void 0 ? void 0 : cloudCustomData.messageReact) === null || _t === void 0 ? true : delete _t.reacts[emojiID];
-                                        }
-                                    }
-                                }
-                                else {
-                                    cloudCustomData.messageReact.reacts[emojiID] = [userID];
-                                }
-                            }
-                            else {
-                                cloudCustomData.messageReact = {
-                                    reacts: {},
-                                    version: 1
-                                };
-                                cloudCustomData.messageReact.reacts[emojiID] = [userID];
-                            }
-                            message.cloudCustomData = JSON.stringify(cloudCustomData);
-                            imResponse = this.modifyMessage(message);
-                            resolve(imResponse);
-                            return [3 /*break*/, 3];
-                        case 2:
-                            error_21 = _u.sent();
-                            reject(error_21);
-                            return [3 /*break*/, 3];
-                        case 3: return [2 /*return*/];
-                    }
-                });
-            }); });
-        };
-        var retryBreakFunction = function (error) {
-            if (error && (error === null || error === void 0 ? void 0 : error.code) === 2480)
-                return false;
-            return true;
-        };
-        return this.handlePromiseCallbackRetry(emojiReactFunction, [500, 1000, 3000], retryBreakFunction);
-    };
-    /**
-     * 查询消息
-     * find message
-     * @param {String} messageID 消息实例ID/messageID
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.findMessage = function (messageID) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, error_22;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.TUICore.tim.findMessage(messageID)];
-                    case 1:
-                        imResponse = _a.sent();
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_22 = _a.sent();
-                        reject(error_22);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 获取群组属性
-     * get group profile
-     *
-     * @param {any} options 参数
-     * @param {String} options.groupID 群组ID
-     * @param {Array.<String>} options.groupProfileFilter 群资料过滤器
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getGroupProfile = function (options) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, error_23;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.TUICore.tim.getGroupProfile(options)];
-                    case 1:
-                        imResponse = _a.sent();
-                        this.currentStore.conversation.groupProfile = imResponse.data.group;
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_23 = _a.sent();
-                        reject(error_23);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 获取群成员资料
-     * get group member profile
-     *
-     * @param {any} options 参数
-     * @param {String} options.groupID 群组ID
-     * @param {Array.<String>} options.userIDList 要查询的群成员用户 ID 列表
-     * @param {	Array.<String>} options.memberCustomFieldFilter 群成员自定义字段筛选
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getGroupMemberProfile = function (options) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, error_24;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.TUICore.tim.getGroupMemberProfile(options)];
-                    case 1:
-                        imResponse = _a.sent();
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_24 = _a.sent();
-                        reject(error_24);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 处理申请加群
-     * handling group application
-     * - 管理员
-     *   administrator
-     *
-     * @param {any} options 参数
-     * @param {String} options.handleAction 处理结果 Agree(同意) / Reject(拒绝)
-     * @param {String} options.handleMessage 附言
-     * @param {Message} options.message 对应【群系统通知】的消息实例
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.handleGroupApplication = function (options) {
-        var _this = this;
-        return this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-            var imResponse, error_25;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, this.TUICore.tim.handleGroupApplication(options)];
-                    case 1:
-                        imResponse = _a.sent();
-                        resolve(imResponse);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_25 = _a.sent();
-                        reject(error_25);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); });
-    };
-    /**
-     * 获取其他用户资料
-     * get user profile
-     *
-     * @param {Array<string>} userIDList 用户的账号列表/userID list
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getUserProfile = function (userIDList) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, error_26;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    _a.trys.push([0, 2, , 3]);
-                                    return [4 /*yield*/, this.TUICore.tim.getUserProfile({
-                                            userIDList: userIDList
-                                        })];
-                                case 1:
-                                    imResponse = _a.sent();
-                                    resolve(imResponse);
-                                    return [3 /*break*/, 3];
-                                case 2:
-                                    error_26 = _a.sent();
-                                    reject(error_26);
-                                    return [3 /*break*/, 3];
-                                case 3: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * 获取 SDK 缓存的好友列表
-     * Get the friend list cached by the SDK
-     *
-     * @param {Array<string>} userIDList 用户的账号列表
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getFriendList = function () {
-        return __awaiter(this, void 0, Promise, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, error_27;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    _a.trys.push([0, 2, , 3]);
-                                    return [4 /*yield*/, this.TUICore.tim.getFriendList()];
-                                case 1:
-                                    imResponse = _a.sent();
-                                    resolve(imResponse);
-                                    return [3 /*break*/, 3];
-                                case 2:
-                                    error_27 = _a.sent();
-                                    reject(error_27);
-                                    return [3 /*break*/, 3];
-                                case 3: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * 校验好友关系
-     * check friend
-     *
-     * @param {string} userID 用户账号
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.checkFriend = function (userID, type) {
-        return __awaiter(this, void 0, Promise, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, isFriendShip, error_28;
-                        var _a, _b;
-                        return __generator(this, function (_c) {
-                            switch (_c.label) {
-                                case 0:
-                                    _c.trys.push([0, 2, , 3]);
-                                    return [4 /*yield*/, this.TUICore.tim.checkFriend({
-                                            userIDList: [userID],
-                                            type: type
-                                        })];
-                                case 1:
-                                    imResponse = _c.sent();
-                                    isFriendShip = (_b = (_a = imResponse === null || imResponse === void 0 ? void 0 : imResponse.data) === null || _a === void 0 ? void 0 : _a.successUserIDList[0]) === null || _b === void 0 ? void 0 : _b.relation;
-                                    resolve(isFriendShip);
-                                    return [3 /*break*/, 3];
-                                case 2:
-                                    error_28 = _c.sent();
-                                    reject(error_28);
-                                    return [3 /*break*/, 3];
-                                case 3: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * 获取群消息已读成员列表
-     * Get the list of memebers who have read the group message.
-     *
-     * @param {message} message 消息实例/message
-     * @param {string} cursor 分页拉取的游标，第一次拉取传''/Paging pull the cursor,first pull pass ''
-     * @param {number} count 分页拉取的个数/The number of page pulls
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getGroupReadMemberList = function (message, cursor, count) {
-        if (cursor === void 0) { cursor = ""; }
-        if (count === void 0) { count = 15; }
-        return __awaiter(this, void 0, Promise, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, error_29;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    _a.trys.push([0, 2, , 3]);
-                                    return [4 /*yield*/, this.TUICore.tim.getGroupMessageReadMemberList({
-                                            message: message,
-                                            filter: 0,
-                                            cursor: cursor,
-                                            count: count
-                                        })];
-                                case 1:
-                                    imResponse = _a.sent();
-                                    resolve(imResponse);
-                                    return [3 /*break*/, 3];
-                                case 2:
-                                    error_29 = _a.sent();
-                                    reject(error_29);
-                                    return [3 /*break*/, 3];
-                                case 3: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * 获取群消息未读成员列表
-     * Get the list of memebers who have not read the group message.
-     *
-     * @param {message} message 消息实例/message
-     * @param {string} cursor 分页拉取的游标，第一次拉取传''/Paging pull the cursor,first pull pass ''
-     * @param {number} count 分页拉取的个数/The number of page pulls
-     * @returns {Promise}
-     */
-    TUIChatServer.prototype.getGroupUnreadMemberList = function (message, cursor, count) {
-        if (cursor === void 0) { cursor = ""; }
-        if (count === void 0) { count = 15; }
-        return __awaiter(this, void 0, Promise, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.handlePromiseCallback(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                        var imResponse, error_30;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    _a.trys.push([0, 2, , 3]);
-                                    return [4 /*yield*/, this.TUICore.tim.getGroupMessageReadMemberList({
-                                            message: message,
-                                            filter: 1,
-                                            cursor: cursor,
-                                            count: count
-                                        })];
-                                case 1:
-                                    imResponse = _a.sent();
-                                    resolve(imResponse);
-                                    return [3 /*break*/, 3];
-                                case 2:
-                                    error_30 = _a.sent();
-                                    reject(error_30);
-                                    return [3 /*break*/, 3];
-                                case 3: return [2 /*return*/];
-                            }
-                        });
-                    }); })];
-            });
-        });
-    };
-    /**
-     * 自己发送消息上屏显示
-     *
-     * @param {message} message 消息实例/message
-     */
-    TUIChatServer.prototype.handleMessageSentByMeToView = function (message) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_c) {
-                if ((message === null || message === void 0 ? void 0 : message.conversationID) === ((_b = (_a = this === null || this === void 0 ? void 0 : this.store) === null || _a === void 0 ? void 0 : _a.conversation) === null || _b === void 0 ? void 0 : _b.conversationID)) {
-                    this.currentStore.messageList.push(message);
-                }
-                return [2 /*return*/];
-            });
-        });
-    };
-    /**
-     * /////////////////////////////////////////////////////////////////////////////////
-     * //
-     * //                                    UI 数据绑定server数据同步
-     * //                           UI data binding server data synchronization
-     * //
-     * /////////////////////////////////////////////////////////////////////////////////
-     */
-    /**
-     * 赋值
-     * bind
-     *
-     * @param {Object} params 使用的数据/params
-     * @returns {Object} 数据/data
-     */
-    TUIChatServer.prototype.bind = function (params) {
-        return (this.currentStore = params);
-    };
-    return TUIChatServer;
-}(IComponentServer_1["default"]));
-exports["default"] = TUIChatServer;

src/TUIKit/TUIComponents/container/TUIChat-temp/index.ts

@@ -1,105 +0,0 @@
-import TUIChatServer from './server';
-import TUIChatComponent from './index.vue';
-
-import Face from './plugin-components/face';
-import Image from './plugin-components/image';
-import Video from './plugin-components/video';
-import File from './plugin-components/file';
-import Forward from './plugin-components/forward';
-import Words from './plugin-components/words';
-import Evaluate from './plugin-components/evaluate';
-import TypingHeader from './plugin-components/typingHeader';
-import ReadReceiptDialog from './plugin-components/readReceiptDialog';
-import Replies from './plugin-components/replies';
-import Call from './plugin-components/call';
-import ImagePreviewer from './plugin-components/imagePreviewer';
-import MessageInput from './message-input';
-
-let sendComponents: any = {
-  Face,
-  Image,
-  Video,
-  File
-  // Evaluate,
-  // Words,
-  // Call,
-};
-
-export const messageComponents: any = {
-  Forward
-};
-
-export const otherComponents: any = {
-  TypingHeader,
-  ReadReceiptDialog,
-  Replies,
-  ImagePreviewer,
-  MessageInput
-};
-
-export function getComponents(type: string) {
-  let options: any = {};
-  switch (type) {
-    case 'send':
-      options = sendComponents;
-      break;
-    case 'message':
-      options = messageComponents;
-      break;
-    case 'other':
-      options = otherComponents;
-      break;
-    default:
-      break;
-  }
-  return options;
-}
-
-const install = (app: any) => {
-  const components: any = {
-    ...sendComponents,
-    ...messageComponents,
-    ...otherComponents
-  };
-  Object.keys(components).forEach((name: any) => {
-    components[name].TUIServer = TUIChat.server;
-  });
-  TUIChatComponent.TUIServer = TUIChat.server;
-  TUIChatComponent.components = {
-    ...TUIChatComponent.components,
-    ...components
-  };
-  app.component(TUIChat.name, TUIChatComponent);
-};
-
-const plugin = (TUICore: any) => {
-  (TUIChat.server as any) = new TUIChatServer(TUICore);
-  TUICore.component(TUIChat.name, TUIChat);
-  return TUIChat;
-};
-
-const setPluginComponents = (Components: any) => {
-  sendComponents = { ...sendComponents, ...Components };
-};
-
-const removePluginComponents = (nameList: Array<string>) => {
-  nameList.map((name: string) => {
-    delete sendComponents[name];
-    return name;
-  });
-};
-
-const TUIChat = {
-  name: 'TUIChat',
-  component: TUIChatComponent,
-  server: TUIChatServer,
-  sendComponents,
-  messageComponents,
-  otherComponents,
-  install,
-  plugin,
-  setPluginComponents,
-  removePluginComponents
-};
-
-export default TUIChat;

src/TUIKit/TUIComponents/container/TUIChat-temp/index.vue

@@ -1,976 +0,0 @@
-<template>
-  <div
-    class="TUIChat"
-    :class="[env.isH5 ? 'TUIChat-H5' : '']"
-    v-if="conversationType === 'chat'"
-  >
-    <header class="TUIChat-header">
-      <i class="icon icon-back" @click="back" v-if="env.isH5"></i>
-      <TypingHeader
-        :needTyping="needTyping"
-        :conversation="conversation"
-        :messageList="messageList"
-        ref="typingRef"
-      />
-      <aside class="setting">
-        <Manage
-          v-if="conversation.groupProfile"
-          :conversation="conversation"
-          :userInfo="userInfo"
-          :isH5="env.isH5"
-        />
-        <Replies
-          :message="currentMessage"
-          :conversation="conversation"
-          :show="repliesDialogStatus"
-          :isH5="env.isH5"
-          :messageList="messageList"
-          @closeDialog="closeDialog"
-          ref="repliesDialog"
-        />
-      </aside>
-    </header>
-    <div class="TUIChat-main">
-      <ul
-        class="TUI-message-list"
-        @click="dialogID = ''"
-        ref="messageEle"
-        id="messageEle"
-      >
-        <p
-          class="message-more"
-          @click="getHistoryMessageList"
-          v-if="!isCompleted"
-        >
-          {{ $t('TUIChat.查看更多') }}
-        </p>
-        <li
-          v-for="(item, index) in messages"
-          :key="index"
-          :id="item?.ID"
-          ref="messageAimID"
-        >
-          <MessageTimestamp
-            :currTime="item?.time"
-            :prevTime="index > 0 ? messages[index - 1]?.time : 0"
-          ></MessageTimestamp>
-          <MessageItem
-            :message="item"
-            :env="env"
-            :types="types"
-            :displayGroupMessageReadReceipt="needGroupReceipt"
-            :displayEmojiReactions="isNeedEmojiReact"
-            :messageList="messages"
-            @handleEditor="handleEditor"
-            @showDialog="showDialog"
-            @uploading="handleUploadingImageOrVideo"
-            @jumpID="jumpID"
-            @resendMessage="resendMessage"
-          ></MessageItem>
-        </li>
-        <div
-          class="to-bottom-tip"
-          v-if="needToBottom"
-          @click="scrollToTarget('bottom')"
-        >
-          <i class="icon icon-bottom-double"></i>
-          <div class="to-bottom-tip-cont">
-            <span>{{ toBottomTipCont }}</span>
-          </div>
-        </div>
-      </ul>
-      <div
-        class="dialog dialog-conversation"
-        v-if="forwardStatus && messageComponents.Forward"
-      >
-        <component
-          :is="'Forward'"
-          :list="conversationData.list"
-          :message="currentMessage"
-          :show="forwardStatus"
-          :isH5="env.isH5"
-          @update:show="(e: any) => (forwardStatus = e)"
-        >
-          <template #left="{ data }">
-            <img class="avatar" :src="conversationData.handleAvatar(data)" />
-            <label class="name">{{ conversationData.handleName(data) }}</label>
-          </template>
-          <template #right="{ data }">
-            <img class="avatar" :src="conversationData.handleAvatar(data)" />
-            <label class="name" v-if="!env.isH5">
-              {{ conversationData.handleName(data) }}
-            </label>
-          </template>
-        </component>
-      </div>
-      <div class="dialog dialog-conversation">
-        <ReadReceiptDialog
-          :message="currentMessage"
-          :conversation="conversation"
-          :show="receiptDialogStatus"
-          :isH5="env.isH5"
-          @closeDialog="closeDialog"
-          ref="readReceiptDialog"
-        />
-      </div>
-      <imagePreviewer
-        v-if="showImagePreview"
-        :currentImage="currentImagePreview"
-        :imageList="imageList"
-        @close="showImagePreview = false"
-      />
-    </div>
-    <div
-      class="TUIChat-footer"
-      :class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"
-    >
-      <div class="func" id="func">
-        <main class="func-main">
-          <component
-            v-for="(item, index) in pluginComponentList"
-            :key="index"
-            :isMute="isMute"
-            :is="item"
-            :isH5="env.isH5"
-            :conversation="conversation"
-            parentID="func"
-            @send="handleSend"
-          ></component>
-        </main>
-      </div>
-      <MessageInput
-        ref="messageInput"
-        :conversation="conversation"
-        :memberList="allMemberList"
-        :env="env"
-        :isGroup="userInfo?.isGroup"
-        :replyOrReference="reference"
-        :isMute="isMute"
-        :muteText="muteText"
-        :placeholder="$t('TUIChat.请输入消息')"
-        @sendMessage="reportMessageSend"
-        @resetReplyOrReference="resetReplyOrReference"
-        @onTyping="handleTyping"
-      ></MessageInput>
-    </div>
-    <div v-show="showResend" class="mask" @click="showResend = false">
-      <div class="mask-main">
-        <header>{{ $t('TUIChat.确认重发该消息？') }}</header>
-        <footer>
-          <p @click="showResend = false">{{ $t('TUIChat.取消') }}</p>
-          <i></i>
-          <p @click="submit">{{ $t('TUIChat.确定') }}</p>
-        </footer>
-      </div>
-    </div>
-  </div>
-  <div class="TUIChat" v-else-if="conversationType === 'system'">
-    <header class="TUIChat-header">
-      <h1>{{ conversationName }}</h1>
-    </header>
-    <MessageSystem
-      :data="messages"
-      :types="types"
-      @application="handleApplication"
-    />
-  </div>
-  <slot v-else-if="slotDefault" />
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  reactive,
-  toRefs,
-  ref,
-  computed,
-  nextTick,
-  watch,
-  useSlots,
-  onMounted,
-  watchEffect
-} from 'vue';
-import { MessageSystem, MessageItem, MessageTimestamp } from './components';
-import { onClickOutside } from '@vueuse/core';
-import { Manage } from './manage-components';
-
-import {
-  handleAvatar,
-  handleName,
-  getImgLoad,
-  isTypingMessage,
-  deepCopy,
-  isMessageTip,
-  handleReferenceForShow
-} from './utils/utils';
-
-import { getComponents } from './index';
-
-import { useStore } from 'vuex';
-import constant from '../constant';
-import { handleErrorPrompts } from '../utils';
-import Link from '../../../utils/link';
-import { Message } from './interface';
-import { Conversation } from '../TUIConversation/interface';
-
-import MessageInput from './message-input';
-
-const TUIChat: any = defineComponent({
-  name: 'TUIChat',
-  components: {
-    MessageSystem,
-    MessageTimestamp,
-    Manage,
-    MessageInput,
-    MessageItem
-  },
-  props: {
-    isMsgNeedReadReceipt: {
-      type: Boolean,
-      default: false
-    },
-    isNeedTyping: {
-      type: Boolean,
-      default: true
-    },
-    isNeedEmojiReact: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const { TUIServer } = TUIChat;
-    const GroupServer = TUIServer?.TUICore?.TUIServer?.TUIGroup;
-    const ProfileServer = TUIServer?.TUICore?.TUIServer?.TUIProfile;
-    const VuexStore =
-      (TUIServer.TUICore.isOfficial && useStore && useStore()) || {};
-    const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-    const data = reactive({
-      messageList: [] as Message[],
-      conversation: {} as Conversation,
-      text: '',
-      atText: '',
-      types: TUIServer.TUICore.TIM.TYPES,
-      currentMessage: {} as Message,
-      dialogID: '',
-      forwardStatus: false,
-      receiptDialogStatus: false,
-      repliesDialogStatus: false,
-      showImagePreview: false,
-      currentImagePreview: {} as Message,
-      isCompleted: false,
-      userInfoView: false,
-      userInfo: {
-        isGroup: false,
-        list: []
-      },
-      selfInfo: {},
-      messageComponents: getComponents('message'),
-      isShow: false,
-      muteText: '您已被管理员禁言',
-      isFirstSend: true,
-      isFirstRender: true,
-      showGroupMemberList: false,
-      reference: {
-        message: {} as Message,
-        content: '',
-        type: 0, // message type
-        show: '' // 'reference' or 'reply'
-      },
-      historyReference: false,
-      referenceID: '',
-      allMemberList: [],
-      env: TUIServer.TUICore.TUIEnv,
-      showResend: false,
-      resendMessage: {},
-      inputBlur: false,
-      inputComposition: false,
-      inputCompositionCont: '',
-      needTyping: props.isNeedTyping,
-      needReadReceipt: false,
-      peerNeedReceipt: false,
-      needToBottom: false,
-      toBottomTipCont: '',
-      messageInView: [] as Message[],
-      readSet: new Set(),
-      isUserAction: false,
-      scroll: {
-        scrollTop: 0,
-        scrollHeight: 0,
-        scrollTopMin: Infinity,
-        scrollTopMax: 0
-      },
-      isMsgNeedReadReceipt: false,
-      isNeedEmojiReact: false,
-      dropDownRef: null,
-      typingRef: null
-    });
-
-    const slotDefault = !!useSlots().default;
-    // 调用 TUIConversation 模块的 setMessageRead 方法
-    // 消息已读
-    // Using the setMessageRead method of the TUIConversion module
-    const setMessageRead = async (conversationID: string | undefined) => {
-      if (!conversationID) return;
-      await TUIServer?.TUICore?.TUIServer?.TUIConversation?.setMessageRead(
-        conversationID
-      );
-      return;
-    };
-
-    const sendMessageReadReceipt = async (messageList: Message[]) => {
-      const needReceiptMessageList = messageList.filter(
-        (item: Message) =>
-          item?.flow === 'in' &&
-          item?.needReadReceipt &&
-          !data.readSet.has(item?.ID)
-      );
-      if (needReceiptMessageList.length) {
-        await TUIServer?.sendMessageReadReceipt(needReceiptMessageList).then(
-          () => {
-            needReceiptMessageList.forEach((item: Message) =>
-              data.readSet.add(item?.ID)
-            );
-          }
-        );
-      }
-      await setMessageRead(data?.conversation?.conversationID);
-    };
-
-    const pluginComponentList: any = [];
-    Object.keys(getComponents('send')).forEach((name: any) => {
-      pluginComponentList.push(name);
-    });
-
-    Manage.TUIServer = TUIServer;
-    Manage.GroupServer = TUIServer?.TUICore?.TUIServer?.TUIGroup;
-
-    const messageEle = ref();
-    const inputEle: any = ref();
-    const messageAimID = ref();
-    const readReceiptDialog = ref();
-    const messageInput = ref();
-
-    TUIServer.bind(data);
-
-    const conversationData = {
-      list: [],
-      handleAvatar,
-      handleName
-    };
-
-    const dialog: any = ref();
-
-    onClickOutside(dialog, () => {
-      data.showGroupMemberList = false;
-    });
-
-    const conversationType = computed(() => {
-      const { conversation } = data;
-      if (!conversation?.conversationID) {
-        return '';
-      }
-      if (conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_SYSTEM) {
-        return 'system';
-      }
-      return 'chat';
-    });
-
-    const isMute = computed(() => {
-      const { conversation } = data;
-      if (conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_GROUP) {
-        const userRole = conversation?.groupProfile?.selfInfo.role;
-        const isMember =
-          userRole === TUIServer.TUICore.TIM.TYPES.GRP_MBR_ROLE_MEMBER;
-        if (isMember && conversation?.groupProfile?.muteAllMembers) {
-          // data.muteText = "管理员开启全员禁言";
-          return true;
-        }
-        const time: number = new Date().getTime();
-        if ((data.selfInfo as any)?.muteUntil * 1000 - time > 0) {
-          // data.muteText = "您已被管理员禁言";
-          return true;
-        }
-      }
-      return false;
-    });
-
-    watchEffect(() => {
-      data.isMsgNeedReadReceipt = props.isMsgNeedReadReceipt;
-      data.needReadReceipt = data.isMsgNeedReadReceipt;
-      data.needTyping = props.isNeedTyping;
-      data.isNeedEmojiReact = props.isNeedEmojiReact;
-    });
-
-    watch(
-      () => data?.conversation?.conversationID,
-      (newVal: () => string | undefined, oldVal: () => string | undefined) => {
-        if (newVal === oldVal) return;
-        data.scroll.scrollTop = 0;
-        data.scroll.scrollHeight = 0;
-        data.scroll.scrollTopMin = Infinity;
-        data.scroll.scrollTopMax = 0;
-        data.text = '';
-        data.atText = '';
-        data.reference = {
-          message: {} as Message,
-          content: '',
-          type: 0,
-          show: ''
-        };
-      },
-      {
-        deep: true
-      }
-    );
-
-    watch(isMute, (newVal: any, oldVal: any) => {
-      const { conversation } = data;
-      if (
-        newVal &&
-        conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_GROUP
-      ) {
-        const userRole = conversation?.groupProfile?.selfInfo.role;
-        const isMember =
-          userRole === TUIServer.TUICore.TIM.TYPES.GRP_MBR_ROLE_MEMBER;
-        if (isMember && conversation?.groupProfile?.muteAllMembers) {
-          data.muteText = '管理员开启全员禁言';
-        }
-        const time: number = new Date().getTime();
-        if ((data.selfInfo as any)?.muteUntil * 1000 - time > 0) {
-          data.muteText = '您已被管理员禁言';
-        }
-      }
-    });
-
-    const conversationName = computed(() => {
-      const { conversation } = data;
-      return handleName(conversation);
-    });
-
-    const messages = computed(() =>
-      data.messageList.filter(
-        (item: any) => !item.isDeleted && !isTypingMessage(item)
-      )
-    );
-    const imageList = computed(() =>
-      messages?.value?.filter((item: Message) => {
-        return !item.isRevoked && item.type === data.types.MSG_IMAGE;
-      })
-    );
-
-    const needGroupReceipt = computed(() => {
-      const { conversation, needReadReceipt } = data;
-      if (
-        conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_C2C ||
-        needReadReceipt
-      ) {
-        return true;
-      }
-      return false;
-    });
-
-    watch(
-      messages,
-      (newVal: Array<Message>, oldVal: Array<Message>) => {
-        nextTick(() => {
-          const isTheSameMessage =
-            newVal[newVal.length - 1]?.ID === oldVal[oldVal.length - 1]?.ID;
-          if (newVal.length === 0 || isTheSameMessage) {
-            return;
-          }
-          handleScroll();
-        });
-        if (data.currentMessage) {
-          const messageID = data.currentMessage?.ID;
-          const message = newVal.find((item: any) => item.ID === messageID);
-          if (message) {
-            data.currentMessage = deepCopy(message);
-          }
-        }
-        if (data.historyReference) {
-          for (let index = 0; index < messages.value.length; index++) {
-            if (messages?.value[index]?.ID === data?.referenceID) {
-              scrollToTarget('target', messageAimID.value[index]);
-              messageAimID.value[index]
-                .getElementsByClassName('content')[0]
-                .classList.add('reference-content');
-            }
-          }
-          data.historyReference = false;
-        }
-      },
-      { deep: true }
-    );
-
-    watch(
-      () => data.scroll.scrollTop,
-      (newVal: number) => {
-        setTimeout(() => {
-          // scrolling end
-          if (newVal === messageEle?.value?.scrollTop) {
-            if (
-              data.scroll.scrollTopMin !== Infinity &&
-              data.scroll.scrollTopMax !== 0
-            ) {
-              sendMessageReadInView('scroll');
-            }
-            data.scroll.scrollTopMin = Infinity;
-            data.scroll.scrollTopMax = 0;
-          }
-        }, 20);
-      },
-      { deep: true }
-    );
-
-    onMounted(() => {
-      watch(
-        () => messageEle?.value,
-        () => {
-          if (messageEle?.value) {
-            messageEle.value.addEventListener('scroll', onScrolling);
-          }
-        },
-        {
-          deep: true
-        }
-      );
-    });
-
-    const handleSend = (emoji: any) => {
-      messageInput?.value?.addEmoji(emoji);
-    };
-
-    const reportMessageSend = async (event: any) => {
-      if (data.isFirstSend) {
-        data.isFirstSend = false;
-      }
-      data.reference.show = '';
-      TUIServer.TUICore.isOfficial &&
-        VuexStore?.commit &&
-        VuexStore?.commit('handleTask', 0);
-    };
-
-    const handleItem = (item: any) => {
-      data.currentMessage = item;
-      data.dialogID = item.ID;
-    };
-
-    const resendMessage = (message: Message) => {
-      if (data.env.isH5) {
-        data.showResend = true;
-        data.resendMessage = message;
-      } else {
-        TUIServer.resendMessage(message).catch((error: any) => {
-          handleErrorPrompts(error, data.env);
-        });
-      }
-    };
-
-    const forwardMessage = (message: Message) => {
-      data.currentMessage = message;
-      conversationData.list =
-        TUIServer.TUICore.getStore().TUIConversation.conversationList;
-      data.forwardStatus = true;
-    };
-
-    const referOrReplyMessage = (message: Message, type: any) => {
-      let replyObj = handleReferenceForShow(message);
-      data.reference = {
-        message,
-        content: replyObj?.referenceMessageForShow,
-        type: replyObj?.referenceMessageType,
-        show: type
-      };
-    };
-
-    const submit = () => {
-      TUIServer.resendMessage(data.resendMessage)
-        .then(() => {
-          data.showResend = false;
-        })
-        .catch((error: any) => {
-          handleErrorPrompts(error, data.env);
-          data.showResend = false;
-        });
-    };
-
-    const handleEdit = (item: any) => {
-      if (!item?.payload?.text) return;
-      messageInput?.value?.reEdit(item?.payload?.text);
-    };
-
-    const handleApplication = (options: any) => {
-      TUIServer.handleGroupApplication(options);
-    };
-
-    const pasting = (e: any) => {
-      if (e.clipboardData.files[0]) {
-        TUIServer.sendImageMessage(e.clipboardData.files[0]);
-      }
-    };
-
-    const getHistoryMessageList = async () => {
-      await TUIServer.getHistoryMessageList().then(() => {
-        scrollToTarget('target', messageEle?.value?.firstElementChild);
-      });
-    };
-
-    const jumpID = (messageID: string) => {
-      data.referenceID = messageID;
-      const list: any = [];
-      // If the referenced message is in the current messageList, you can jump directly. Otherwise, you need to pull the historical message
-      for (let index = 0; index < messages.value.length; index++) {
-        list.push(messages?.value[index]?.ID);
-        if (
-          list.indexOf(messageID) !== -1 &&
-          messages.value[index]?.ID === messageID
-        ) {
-          scrollToTarget('target', messageAimID.value[index]);
-          messageAimID.value[index]
-            .getElementsByClassName('content')[0]
-            .classList.remove('reference-content');
-          nextTick(() => {
-            messageAimID.value[index]
-              .getElementsByClassName('content')[0]
-              .classList.add('reference-content');
-          });
-        }
-      }
-      if (list.indexOf(messageID) === -1) {
-        TUIServer.getHistoryMessageList().then(() => {
-          data.historyReference = true;
-        });
-      }
-    };
-
-    const toggleshowGroupMemberList = () => {
-      data.showGroupMemberList = !data.showGroupMemberList;
-    };
-
-    const back = () => {
-      TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation();
-    };
-
-    const openLink = (type: any) => {
-      window.open(type.url);
-    };
-
-    const handleEditor = (message: Message, type: string) => {
-      if (!message || !type) return;
-      switch (type) {
-        case 'reference':
-          referOrReplyMessage(message, type);
-          break;
-        case 'reply':
-          referOrReplyMessage(message, type);
-          break;
-        case 'reedit':
-          if (message?.payload?.text) {
-            messageInput?.value?.reEdit(message?.payload?.text);
-          }
-          break;
-        default:
-          break;
-      }
-    };
-
-    const showDialog = async (message: Message, type: string) => {
-      if (!message?.ID || !type) return;
-      switch (type) {
-        case 'receipt':
-          if (
-            message.conversationType !==
-              TUIServer.TUICore.TIM.TYPES.CONV_GROUP ||
-            message.readReceiptInfo?.unreadCount === 0
-          ) {
-            return;
-          }
-          data.currentMessage = message;
-          data.receiptDialogStatus = true;
-          break;
-        case 'replies':
-          data.currentMessage = message;
-          data.repliesDialogStatus = true;
-          break;
-        case 'forward':
-          data.currentMessage = message;
-          conversationData.list =
-            TUIServer.TUICore.getStore().TUIConversation.conversationList;
-          data.forwardStatus = true;
-          break;
-        case 'previewImage':
-          data.showImagePreview = !data.showImagePreview;
-          data.currentImagePreview = message;
-          break;
-        default:
-          break;
-      }
-    };
-
-    const closeDialog = async (type: string) => {
-      if (!type) return;
-      switch (type) {
-        case 'receipt':
-          data.currentMessage = {};
-          data.receiptDialogStatus = false;
-          break;
-        case 'replies':
-          data.currentMessage = {};
-          data.repliesDialogStatus = false;
-          break;
-        default:
-          break;
-      }
-    };
-
-    const handleScroll = () => {
-      if (data.isFirstRender) {
-        data.needToBottom = false;
-        scrollToTarget('bottom');
-        data.isFirstRender = false;
-        return;
-      }
-      if (messageEle.value) {
-        const { scrollHeight, scrollTop, clientHeight } = messageEle.value;
-        if (
-          scrollHeight - (scrollTop + clientHeight) <= clientHeight ||
-          messages.value[messages.value.length - 1]?.flow === 'out'
-        ) {
-          scrollToTarget('bottom');
-        } else {
-          handleToBottomTip(true);
-        }
-      }
-    };
-
-    const scrollToTarget = (type: string, targetElement?: HTMLElement) => {
-      messageEle?.value?.removeEventListener('scroll', onScrolling);
-      data.isUserAction = true;
-      switch (type) {
-        case constant.scrollType.toBottom:
-          data.needToBottom = false;
-          nextTick(() => {
-            if (data?.env?.isH5) {
-              handleH5Scroll();
-            } else {
-              messageEle?.value?.lastElementChild?.scrollIntoView(false);
-            }
-            getImgLoad(messageEle?.value, 'message-img', async () => {
-              if (data?.env?.isH5) {
-                handleH5Scroll();
-              } else {
-                messageEle?.value?.lastElementChild?.scrollIntoView(false);
-              }
-              messageEle.value.addEventListener('scroll', onScrolling);
-              await sendMessageReadInView('page');
-            });
-          });
-          break;
-        case constant.scrollType.toTarget:
-          nextTick(() => {
-            targetElement?.scrollIntoView(false);
-            getImgLoad(messageEle?.value, 'message-img', async () => {
-              targetElement?.scrollIntoView(false);
-              messageEle.value.addEventListener('scroll', onScrolling);
-              await sendMessageReadInView('page');
-            });
-          });
-
-          break;
-        default:
-          break;
-      }
-    };
-
-    const handleH5Scroll = () => {
-      if (document?.getElementById('app')?.style) {
-        (document.getElementById('app') as any).style.marginBottom = ``;
-        (document.getElementById('app') as any).style.height = `100%`;
-      }
-      messageEle.value.scrollTop = messageEle.value.scrollHeight;
-    };
-
-    const onScrolling = () => {
-      const { scrollHeight, scrollTop, clientHeight } = messageEle.value;
-      if (needGroupReceipt.value) {
-        data.scroll.scrollHeight = scrollHeight;
-        data.scroll.scrollTop = scrollTop;
-        data.scroll.scrollTopMin = data.isUserAction
-          ? data.scroll.scrollTopMin
-          : Math.min(data.scroll.scrollTopMin, data.scroll.scrollTop);
-        data.scroll.scrollTopMax = data.isUserAction
-          ? data.scroll.scrollTopMax
-          : Math.max(data.scroll.scrollTopMax, data.scroll.scrollTop);
-      }
-      if (scrollHeight - (scrollTop + clientHeight) > clientHeight) {
-        handleToBottomTip(true);
-      } else {
-        handleToBottomTip(false);
-      }
-      data.isUserAction = false;
-    };
-
-    const handleToBottomTip = (needToBottom: boolean) => {
-      switch (needToBottom) {
-        case true:
-          data.needToBottom = true;
-          if (
-            data?.conversation?.unreadCount &&
-            data?.conversation?.unreadCount > 0
-          ) {
-            data.toBottomTipCont = `${data?.conversation?.unreadCount} ${t(
-              'TUIChat.条新消息'
-            )}`;
-          } else {
-            data.toBottomTipCont = t('TUIChat.回到最新位置');
-          }
-          break;
-        case false:
-          data.needToBottom = false;
-          break;
-        default:
-          data.needToBottom = false;
-          break;
-      }
-    };
-
-    const sendMessageReadInView = async (type: string) => {
-      if (!needGroupReceipt.value) {
-        setMessageRead(data?.conversation?.conversationID);
-        return;
-      }
-      if (data.messageInView.length) data.messageInView = [] as Message[];
-      let start = 0;
-      let end = 0;
-      switch (type) {
-        case constant.inViewType.page:
-          start = data.scroll.scrollTop;
-          end = data.scroll.scrollTop + messageEle?.value?.clientHeight;
-          break;
-        case constant.inViewType.scroll:
-          start = data.scroll.scrollTopMin;
-          end = data.scroll.scrollTopMax + messageEle?.value?.clientHeight;
-          break;
-        default:
-          break;
-      }
-      for (let i = 0; i < messageAimID?.value?.length; i++) {
-        if (isInView(type, messageAimID?.value[i], start, end)) {
-          const message = messages.value[i];
-          data.messageInView.push(message);
-        }
-      }
-      await sendMessageReadReceipt(data.messageInView);
-    };
-
-    const isInView = (
-      type: string,
-      dom: HTMLElement,
-      viewStart: number,
-      viewEnd: number
-    ) => {
-      const containerTop = messageEle.value.getBoundingClientRect().top;
-      const containerBottom = messageEle.value.getBoundingClientRect().bottom;
-      const { top, bottom } = dom.getBoundingClientRect();
-      const { offsetTop, clientHeight } = dom;
-      switch (type) {
-        case constant.inViewType.page:
-          return (
-            Math.round(top) >= Math.round(containerTop) &&
-            Math.round(bottom) <= Math.round(containerBottom)
-          );
-        case constant.inViewType.scroll:
-          return (
-            Math.round(offsetTop) >= Math.round(viewStart) &&
-            Math.round(offsetTop + clientHeight) <= Math.round(viewEnd)
-          );
-        default:
-          return false;
-      }
-    };
-
-    const handleDropDownOpen = (value: any) => {
-      if (data.dropDownRef) {
-        (data.dropDownRef as any).removeChild(
-          (data.dropDownRef as any).children[0]
-        );
-      }
-      data.dropDownRef = value;
-    };
-
-    const handleUploadingImageOrVideo = () => {
-      scrollToTarget('bottom');
-    };
-
-    const handleImagePreview = (message: any) => {
-      data.showImagePreview = !data.showImagePreview;
-      data.currentImagePreview = message;
-    };
-
-    const resetReplyOrReference = () => {
-      data.reference = {
-        message: {} as Message,
-        content: '',
-        type: 0,
-        show: ''
-      };
-    };
-
-    const handleTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
-      (data?.typingRef as any)?.onTyping(inputContentEmpty, inputBlur);
-    };
-
-    return {
-      ...toRefs(data),
-      conversationType,
-      messages,
-      messageEle,
-      inputEle,
-      messageInput,
-      messageAimID,
-      conversationData,
-      conversationName,
-      constant,
-      reportMessageSend,
-      handleTyping,
-      handleItem,
-      handleEdit,
-      handleEditor,
-      getHistoryMessageList,
-      handleApplication,
-      pluginComponentList,
-      handleSend,
-      closeDialog,
-      isMute,
-      pasting,
-      setMessageRead,
-      sendMessageReadReceipt,
-      dialog,
-      jumpID,
-      back,
-      slotDefault,
-      toggleshowGroupMemberList,
-      resendMessage,
-      submit,
-      Link,
-      openLink,
-      readReceiptDialog,
-      scrollToTarget,
-      needGroupReceipt,
-      handleDropDownOpen,
-      isMessageTip,
-      showDialog,
-      forwardMessage,
-      referOrReplyMessage,
-      handleUploadingImageOrVideo,
-      handleImagePreview,
-      imageList,
-      resetReplyOrReference
-    };
-  }
-});
-export default TUIChat;
-</script>
-
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/interface.ts

@@ -1,37 +0,0 @@
-interface Message {
-  ID?: string;
-  type?: string;
-  payload?: {
-    [propName: string]: any;
-  };
-  conversationID?: string;
-  conversationType?: string;
-  to?: string;
-  from?: string;
-  flow?: string;
-  time?: number;
-  status?: string;
-  isRevoked?: boolean;
-  priority?: string;
-  nick?: string;
-  avatar?: string;
-  isPeerRead?: boolean;
-  nameCard?: string;
-  atUserList?: Array<string>;
-  cloudCustomData?: string;
-  isDeleted?: boolean;
-  isModified?: boolean;
-  needReadReceipt?: boolean;
-  readReceiptInfo?: {
-    [propName: string]: any;
-  };
-  isBroadcastMessage?: boolean;
-}
-
-interface userListItem {
-  nick?: string;
-  avatar: string;
-  userID: string;
-}
-
-export { Message, userListItem };

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/index.ts

@@ -1,5 +0,0 @@
-import Manage from './manage.vue';
-
-export {
-  Manage,
-};

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/manage-member.vue

@@ -1,160 +0,0 @@
-<template>
-  <main class="member">
-    <ul class="list">
-      <li class="list-item" v-for="(item, index) in list" :key="index">
-        <aside @click="handleMemberProfileShow(item)">
-          <img
-            class="avatar"
-            :src="
-              item?.avatar ||
-              'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-            "
-            onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-          />
-          <span class="name">{{ item?.nick || item?.userID }}</span>
-          <span>{{ handleRoleName(item) }}</span>
-        </aside>
-        <i
-          v-if="item.role !== 'Owner' && isShowDel"
-          class="icon icon-del"
-          @click="submit(item)"
-        ></i>
-      </li>
-      <li class="list-item" v-if="list.length < total" @click="getMore">
-        {{ $t(`TUIChat.manage.查看更多`) }}
-      </li>
-    </ul>
-  </main>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-import TIM from '@tencentcloud/chat';
-
-const ManageMember = defineComponent({
-  components: {},
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    },
-    total: {
-      type: Number,
-      default: () => 0
-    },
-    isShowDel: {
-      type: Boolean,
-      default: () => false
-    },
-    self: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const types: any = TIM.TYPES;
-    const data: any = reactive({
-      total: 0,
-      list: [],
-      isShowDel: false,
-      self: {}
-    });
-
-    watchEffect(() => {
-      data.total = props.total;
-      data.isShowDel = props.isShowDel;
-      data.list = props.list;
-      data.self = props.self;
-    });
-
-    const handleRoleName = (item: any) => {
-      const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-      let name = '';
-      switch (item?.role) {
-        case types.GRP_MBR_ROLE_ADMIN:
-          name = t('TUIChat.manage.管理员');
-          break;
-        case types.GRP_MBR_ROLE_OWNER:
-          name = t('TUIChat.manage.群主');
-          break;
-      }
-      if (name) {
-        name = `(${name})`;
-      }
-      if (item.userID === data.self.userID) {
-        name += ` (${t('TUIChat.manage.我')})`;
-      }
-      return name;
-    };
-
-    const getMore = () => {
-      ctx.emit('more');
-    };
-
-    const submit = (item: any) => {
-      ctx.emit('del', [item]);
-    };
-
-    const handleMemberProfileShow = (user: any) => {
-      ctx.emit('handleMemberProfileShow', user);
-    };
-
-    return {
-      ...toRefs(data),
-      getMore,
-      submit,
-      handleRoleName,
-      handleMemberProfileShow
-    };
-  }
-});
-export default ManageMember;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.member {
-  flex: 1;
-  background: #ffffff;
-  .list {
-    display: flex;
-    flex-direction: column;
-    background: #f4f5f9;
-    padding-top: 12Px;
-    &-item {
-      padding: 13Px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #ffffff;
-      font-size: 14Px;
-      overflow: hidden;
-      &:hover {
-        background: #f1f2f6;
-      }
-      aside {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        overflow: hidden;
-        .name {
-          padding-left: 8Px;
-          font-weight: 400;
-          font-size: 14Px;
-          color: #000000;
-          flex: 1;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-}
-.avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 4Px;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/manage-name.vue

@@ -1,207 +0,0 @@
-<template>
-  <div class="name">
-    <label>{{ $t(`TUIChat.manage.群名称`) }}</label>
-    <div v-if="isEdit" :class="[isH5 ? 'edit-h5' : '']" ref="dialog">
-      <main>
-        <header class="edit-h5-header" v-if="isH5">
-          <aside class="left">
-            <h1>{{ $t(`TUIChat.manage.修改群聊名称`) }}</h1>
-            <span>
-              {{ $t(`TUIChat.manage.修改群聊名称后，将在群内通知其他成员`) }}
-            </span>
-          </aside>
-          <span class="close" @click="toggleEdit">{{ $t(`关闭`) }}</span>
-        </header>
-        <div class="input-box">
-          <input
-            class="input"
-            v-if="isEdit"
-            v-model="input"
-            type="text"
-            @keyup.enter="updateProfile"
-          />
-          <span v-if="isH5">
-            {{ $t(`TUIChat.manage.仅限中文、字母、数字和下划线，2-20个字`) }}
-          </span>
-        </div>
-        <footer class="edit-h5-footer" v-if="isH5">
-          <button class="btn" :disabled="!input" @click="updateProfile">
-            {{ $t(`确认`) }}
-          </button>
-        </footer>
-      </main>
-    </div>
-    <p v-if="!isEdit || isH5" @click="toggleEdit">
-      <span>{{ groupProfile.name }}</span>
-      <i class="icon icon-edit" v-if="isAuth"></i>
-    </p>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs, ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
-
-const manageName = defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    isAuth: {
-      type: Boolean,
-      default: false
-    },
-    isH5: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data: any = reactive({
-      groupProfile: {},
-      input: '',
-      isEdit: false
-    });
-
-    watchEffect(() => {
-      data.groupProfile = props.data;
-    });
-
-    const dialog: any = ref();
-
-    onClickOutside(dialog, () => {
-      data.isEdit = false;
-    });
-
-    const updateProfile = async () => {
-      if (data.input && data.input !== data.groupProfile.name) {
-        ctx.emit('update', { key: 'name', value: data.input });
-        data.groupProfile.name = data.input;
-        data.input = '';
-      }
-      toggleEdit();
-    };
-
-    const toggleEdit = async () => {
-      if (props.isAuth) {
-        data.isEdit = !data.isEdit;
-      }
-      if (data.isEdit) {
-        data.input = data.groupProfile.name;
-      }
-    };
-
-    return {
-      ...toRefs(data),
-      updateProfile,
-      toggleEdit,
-      dialog
-    };
-  }
-});
-export default manageName;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.name {
-  padding: 14Px 20Px;
-  font-weight: 400;
-  font-size: 14Px;
-  color: #000000;
-  display: flex;
-  flex-direction: column;
-  p {
-    opacity: 0.6;
-    display: flex;
-    align-items: center;
-    .icon {
-      margin-left: 4Px;
-    }
-  }
-}
-.input-box {
-  display: flex;
-  .input {
-    flex: 1;
-    border: 1Px solid #e8e8e9;
-    border-radius: 4Px;
-    padding: 4Px 16Px;
-    font-weight: 400;
-    font-size: 14Px;
-    color: #000000;
-    opacity: 0.6;
-  }
-}
-
-.space-top {
-  border-top: 10Px solid #f4f5f9;
-}
-.edit-h5 {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: flex-end;
-  z-index: 1;
-  main {
-    background: #ffffff;
-    flex: 1;
-    padding: 18Px;
-    border-radius: 12Px 12Px 0 0;
-    .input-box {
-      flex-direction: column;
-      padding: 18Px 0;
-      .input {
-        background: #f8f8f8;
-        padding: 10Px 12Px;
-      }
-      span {
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        font-size: 12Px;
-        color: #888888;
-        letter-spacing: 0;
-        padding-top: 8Px;
-      }
-    }
-  }
-  &-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .close {
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      font-size: 18Px;
-      color: #3370ff;
-      letter-spacing: 0;
-      line-height: 27Px;
-    }
-  }
-  &-footer {
-    display: flex;
-    .btn {
-      flex: 1;
-      border: none;
-      background: #147aff;
-      border-radius: 5Px;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      font-size: 16Px;
-      color: #ffffff;
-      letter-spacing: 0;
-      line-height: 27Px;
-      padding: 8Px 0;
-      &:disabled {
-        opacity: 0.3;
-      }
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/manage-notification.vue

@@ -1,116 +0,0 @@
-<template>
-  <main class="notification">
-    <textarea
-      v-if="isEdit"
-      v-model="input"
-      @keyup.enter="updateProfile"
-    ></textarea>
-    <section v-else>
-      <p v-if="!groupProfile.notification">
-        {{ $t(`TUIChat.manage.暂无公告`) }}
-      </p>
-      <article v-else>{{ groupProfile.notification }}</article>
-    </section>
-    <footer v-if="isAuth">
-      <button class="btn" v-if="isEdit" @click="updateProfile">
-        {{ $t(`TUIChat.manage.发布`) }}
-      </button>
-      <button class="btn" v-else @click="isEdit = !isEdit">
-        {{ $t(`TUIChat.manage.编辑`) }}
-      </button>
-    </footer>
-  </main>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
-
-const ManageNotification = defineComponent({
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    isAuth: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data: any = reactive({
-      groupProfile: {},
-      input: '',
-      isEdit: false
-    });
-
-    watchEffect(() => {
-      data.groupProfile = props.data;
-      data.input = data.groupProfile.notification;
-    });
-
-    // 更新群资料
-    const updateProfile = async () => {
-      if (data.input && data.input !== data.groupProfile.notification) {
-        ctx.emit('update', { key: 'notification', value: data.input });
-        data.groupProfile.notification = data.input;
-        data.input = '';
-      }
-      data.isEdit = !data.isEdit;
-    };
-
-    return {
-      ...toRefs(data),
-      updateProfile
-    };
-  }
-});
-export default ManageNotification;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.notification {
-  flex: 1;
-  padding: 20Px;
-  display: flex;
-  flex-direction: column;
-  section {
-    flex: 1;
-    font-size: 14Px;
-    p {
-      text-align: center;
-      padding-bottom: 20Px;
-    }
-  }
-  textarea {
-    margin-bottom: 20Px;
-    flex: 1;
-    box-sizing: border-box;
-    padding: 10Px;
-    border: 1Px solid #e8e8e9;
-    resize: none;
-    font-size: 14Px;
-  }
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: 10Px;
-  }
-}
-.btn {
-  background: #3370ff;
-  border: 0 solid #2f80ed;
-  padding: 4Px 28Px;
-  font-weight: 400;
-  font-size: 12Px;
-  color: #ffffff;
-  line-height: 24Px;
-  border-radius: 4Px;
-  &-cancel {
-    background: #ffffff;
-    border: 1Px solid #dddddd;
-    color: #828282;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/manage.vue

@@ -1,880 +0,0 @@
-<template>
-  <div>
-    <i class="icon icon-chat-setting" @click="toggleShow"></i>
-    <div
-      class="manage"
-      :class="[isH5 ? 'manage-h5' : '']"
-      v-if="show"
-      ref="dialog"
-    >
-      <header class="manage-header">
-        <i
-          class="icon icon-back"
-          v-if="isH5 && !currentTab"
-          @click="toggleShow"
-        ></i>
-        <aside class="manage-header-left">
-          <i class="icon icon-back" v-if="currentTab" @click="setTab('')"></i>
-          <main>
-            <h1>{{ $t(`TUIChat.manage.${TabName}`) }}</h1>
-          </main>
-        </aside>
-        <span>
-          <i v-if="!isH5" class="icon icon-close" @click="toggleShow"></i>
-        </span>
-      </header>
-      <main class="main" style="background-color: #f4f5f9; height: 100%;" v-if="!currentTab">
-        <ManageName
-          class="space-top"
-          :isAuth="isAuth"
-          :isH5="isH5"
-          :data="conversation.groupProfile"
-          @update="updateProfile"
-          style="background-color: #fff;"
-        />
-        <div class="userInfo space-top" style="background-color: #fff;">
-          <header class="userInfo-header" @click="setTab('member')">
-            <label>{{ $t(`TUIChat.manage.群成员`) }}</label>
-            <p>
-              <span>
-                {{ conversation.groupProfile.memberCount
-                }}{{ $t(`TUIChat.manage.人`) }}
-              </span>
-              <i class="icon icon-right"></i>
-            </p>
-          </header>
-          <ol>
-            <dl
-              v-for="(item, index) in userInfo?.list?.slice(0, showUserNum)"
-              :key="index"
-            >
-              <dt @click="handleMemberProfileShow(item)">
-                <img
-                  class="avatar"
-                  :src="
-                    item?.avatar ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-                  "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-                />
-              </dt>
-              <dd>{{ item?.nick || item?.userID }}</dd>
-            </dl>
-            <dl v-if="isShowAddMember">
-              <dt class="avatar" @click="toggleMask('add')">+</dt>
-            </dl>
-            <dl v-if="conversation.groupProfile.selfInfo.role === 'Owner'">
-              <dt class="avatar" @click="toggleMask('remove')">-</dt>
-            </dl>
-          </ol>
-        </div>
-        <ul class="content space-top" @click="editLableName = ''" style="background-color: #fff;">
-          <li @click.stop="setTab('notification')">
-            <aside>
-              <label>{{ $t(`TUIChat.manage.群公告`) }}</label>
-              <article>{{ conversation.groupProfile.notification }}</article>
-            </aside>
-            <i class="icon icon-right end"></i>
-          </li>
-          <!-- <li v-if="isAdmin && isSetMuteTime" @click.stop="setTab('admin')">
-            <label>{{ $t(`TUIChat.manage.群管理`) }}</label>
-            <i class="icon icon-right"></i>
-          </li>
-          <li>
-            <label>{{ $t(`TUIChat.manage.群ID`) }}</label>
-            <div class="groupID">
-              <span>{{ conversation.groupProfile.groupID }}</span>
-              <i
-                class="icon icon-msg-copy"
-                @click="handleGroupIDCopy"
-                :title="$t('TUIChat.复制')"
-              ></i>
-            </div>
-          </li>
-          <li>
-            <label>{{ $t(`TUIChat.manage.群头像`) }}</label>
-            <img
-              class="avatar"
-              :src="
-                conversation?.groupProfile?.avatar ||
-                'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'
-              "
-              onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
-            />
-          </li>
-          <li>
-            <label>{{ $t(`TUIChat.manage.群类型`) }}</label>
-            <span>
-              {{
-                $t(`TUIChat.manage.${typeName[conversation.groupProfile.type]}`)
-              }}
-            </span>
-          </li>
-          <li>
-            <label>{{ $t(`TUIChat.manage.加群方式`) }}</label>
-            <span>
-              {{
-                $t(
-                  `TUIChat.manage.${
-                    typeName[conversation.groupProfile.joinOption]
-                  }`
-                )
-              }}
-            </span>
-          </li> -->
-        </ul>
-        <ul class="footer space-top">
-          <li
-            v-if="
-              conversation.groupProfile.selfInfo.role === 'Owner' &&
-              userInfo?.list.length > 1
-            "
-            @click.stop="toggleMask('changeOwner')"
-          >
-            {{ $t(`TUIChat.manage.转让群组`) }}
-          </li>
-          <li
-            v-if="!!isDismissGroupAuth"
-            @click.stop="dismiss(conversation.groupProfile)"
-          >
-            {{ $t(`TUIChat.manage.解散群聊`) }}
-          </li>
-          <!-- <li v-else @click.stop="quit(conversation.groupProfile)">
-            {{ $t(`TUIChat.manage.退出群组`) }}
-          </li> -->
-        </ul>
-      </main>
-      <ManageMember
-        v-else-if="currentTab === 'member'"
-        :self="conversation.groupProfile.selfInfo"
-        :list="userInfo.list"
-        :total="~~conversation.groupProfile.memberCount"
-        :isShowDel="conversation.groupProfile.selfInfo.role === 'Owner'"
-        @more="getMember('more')"
-        @del="submit"
-        @handleMemberProfileShow="handleMemberProfileShow"
-      />
-      <MemeberProfile
-        v-else-if="currentTab === 'profile'"
-        :userInfo="currentMember"
-      />
-      <ManageNotification
-        v-else-if="currentTab === 'notification'"
-        :isAuth="isAuth"
-        :data="conversation.groupProfile"
-        @update="updateProfile"
-      />
-      <main class="admin" v-else-if="currentTab === 'admin'">
-        <div class="admin-list" v-if="isAdmin">
-          <label>{{ $t(`TUIChat.manage.群管理员`) }}</label>
-          <ol>
-            <dl v-for="(item, index) in member.admin" :key="index">
-              <dt>
-                <img
-                  class="avatar"
-                  :src="
-                    item?.avatar ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-                  "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-                />
-              </dt>
-              <dd>{{ item?.nick || item?.userID }}</dd>
-            </dl>
-            <dl>
-              <dt class="avatar" @click="toggleMask('addAdmin')">+</dt>
-            </dl>
-            <dl>
-              <dt
-                class="avatar"
-                v-if="member.admin.length > 0"
-                @click="toggleMask('removeAdmin')"
-              >
-                -
-              </dt>
-            </dl>
-          </ol>
-        </div>
-        <div class="admin-content space-top" v-if="isSetMuteTime">
-          <aside>
-            <label>{{ $t(`TUIChat.manage.全员禁言`) }}</label>
-            <p>
-              {{
-                $t(`TUIChat.manage.全员禁言开启后，只允许群主和管理员发言。`)
-              }}
-            </p>
-          </aside>
-          <Slider
-            :open="conversation.groupProfile.muteAllMembers"
-            @change="setAllMuteTime"
-          />
-        </div>
-        <div class="admin-list last" v-if="isSetMuteTime">
-          <label>{{ $t(`TUIChat.manage.单独禁言人员`) }}</label>
-          <ol>
-            <dl v-for="(item, index) in member.muteMember" :key="index">
-              <dt>
-                <img
-                  class="avatar"
-                  :src="
-                    item?.avatar ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-                  "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-                />
-              </dt>
-              <dd>{{ item?.nick || item?.userID }}</dd>
-            </dl>
-            <dl>
-              <dt class="avatar" @click="toggleMask('addMute')">+</dt>
-            </dl>
-            <dl>
-              <dt
-                class="avatar"
-                v-if="member.muteMember.length > 0"
-                @click="toggleMask('removeMute')"
-              >
-                -
-              </dt>
-            </dl>
-          </ol>
-        </div>
-      </main>
-      <MaskTUI :show="mask" @update:show="e => (mask = e)">
-        <Transfer
-          :title="$t(`TUIChat.manage.${transferTitle}`)"
-          :list="transferList"
-          :isSearch="isSearch"
-          :isRadio="isRadio"
-          :selectedList="selectedList"
-          @submit="submit"
-          @cancel="cancel"
-          @search="handleSearchMember"
-          :isH5="isH5"
-        />
-      </MaskTUI>
-      <DialogTUI
-        :title="$t(`TUIChat.manage.删除成员`)"
-        :show="delDialogShow"
-        :isH5="isH5"
-        :center="true"
-        :isHeaderShow="!isH5"
-        @submit="handleManage(userList, 'remove')"
-        @update:show="e => (delDialogShow = e)"
-      >
-        <p v-if="userList.length === 1" class="delDialog-title">
-          {{ $t(`TUIChat.manage.确定从群聊中删除该成员？`) }}
-        </p>
-        <p v-if="userList.length > 1" class="delDialog-title">
-          {{ $t(`TUIChat.manage.确定从群聊中删除所选成员？`) }}
-        </p>
-      </DialogTUI>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  computed,
-  watch,
-  ref
-} from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import MaskTUI from '../../../components/mask/mask.vue';
-import Transfer from '../../../components/transfer/index.vue';
-import Slider from '../../../components/slider/index.vue';
-import ManageName from './manage-name.vue';
-import ManageNotification from './manage-notification.vue';
-import ManageMember from './manage-member.vue';
-import MemeberProfile from './member-profile.vue';
-import DialogTUI from '../../../components/dialog/index.vue';
-
-import Vuex from 'vuex';
-import { handleErrorPrompts } from '../../utils';
-import useClipboard from 'vue-clipboard3';
-
-const manage = defineComponent({
-  components: {
-    MaskTUI,
-    Transfer,
-    Slider,
-    ManageName,
-    ManageNotification,
-    ManageMember,
-    MemeberProfile,
-    DialogTUI
-  },
-  props: {
-    userInfo: {
-      type: Object,
-      default: () => ({
-        isGroup: false,
-        list: []
-      })
-    },
-    conversation: {
-      type: Object,
-      default: () => ({})
-    },
-    show: {
-      type: Boolean,
-      default: () => false
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const types: any = manage.TUIServer.TUICore.TIM.TYPES;
-    const { GroupServer } = manage;
-    const { t } = manage.TUIServer.TUICore.config.i18n.useI18n();
-    const data: any = reactive({
-      conversation: {},
-      userInfo: {
-        isGroup: false,
-        list: []
-      },
-      isShowMuteTimeInput: false,
-      editLableName: '',
-      mask: false,
-      currentTab: '',
-      transferType: '',
-      isSearch: false,
-      isRadio: false,
-      transferList: [],
-      selectedList: [],
-      isMuteTime: false,
-      show: false,
-      typeName: {
-        [types.GRP_WORK]: '好友工作群',
-        [types.GRP_PUBLIC]: '陌生人社交群',
-        [types.GRP_MEETING]: '临时会议群',
-        [types.GRP_AVCHATROOM]: '直播群',
-        [types.JOIN_OPTIONS_FREE_ACCESS]: '自由加入',
-        [types.JOIN_OPTIONS_NEED_PERMISSION]: '需要验证',
-        [types.JOIN_OPTIONS_DISABLE_APPLY]: '禁止加群'
-      },
-      delDialogShow: false,
-      userList: [],
-      transferTitle: '',
-      member: {
-        admin: [],
-        member: [],
-        muteMember: []
-      },
-      currentMember: {}
-    });
-
-    const dialog: any = ref();
-
-    watchEffect(() => {
-      data.conversation = props.conversation;
-      data.userInfo = props.userInfo;
-      data.show = props.show;
-    });
-
-    const VuexStore =
-      ((window as any)?.TUIKitTUICore?.isOfficial &&
-        (Vuex as any)?.useStore()) ||
-      {};
-
-    const TabName = computed(() => {
-      let name = '';
-      switch (data.currentTab) {
-        case 'notification':
-          name = '群公告';
-          break;
-        case 'member':
-          name = '群成员';
-          break;
-        case 'profile':
-          name = '群成员';
-          break;
-        default:
-          name = '群管理';
-          break;
-      }
-      return name;
-    });
-
-    watch(
-      () => data.userInfo.list,
-      (newValue: any, oldValue: any) => {
-        data.member = {
-          admin: [],
-          member: [],
-          muteMember: []
-        };
-        newValue.map((item: any) => {
-          switch (item?.role) {
-            case types.GRP_MBR_ROLE_ADMIN:
-              data.member.admin.push(item);
-              break;
-            case types.GRP_MBR_ROLE_MEMBER:
-              data.member.member.push(item);
-              break;
-            default:
-              break;
-          }
-          return item;
-        });
-        const time: number = new Date().getTime();
-        data.member.muteMember = newValue.filter(
-          (item: any) => item?.muteUntil * 1000 - time > 0
-        );
-      },
-      { deep: true }
-    );
-
-    const isDismissGroupAuth = computed(() => {
-      const { conversation } = data;
-      const userRole = conversation?.groupProfile?.selfInfo.role;
-      const groupType = conversation?.groupProfile?.type;
-
-      const isOwner = userRole === types.GRP_MBR_ROLE_OWNER;
-      const isWork = groupType === types.GRP_WORK;
-
-      return isOwner && !isWork;
-    });
-
-    const isShowAddMember = computed(() => {
-      const { conversation } = data;
-      const groupType = conversation?.groupProfile?.type;
-      const isWork = groupType === types.GRP_WORK;
-
-      if (isWork) {
-        return true;
-      }
-      return false;
-    });
-
-    const showUserNum = computed(() => {
-      let num = 3;
-      if (!isShowAddMember.value) {
-        num += 1;
-      }
-      if ((data.conversation as any).groupProfile.selfInfo.role !== 'Owner') {
-        num += 1;
-      }
-      return num;
-    });
-
-    const isAuth = computed(() => {
-      const { conversation } = data;
-      const userRole = conversation?.groupProfile?.selfInfo.role;
-
-      const isOwner = userRole === types.GRP_MBR_ROLE_OWNER;
-      const isAdmin = userRole === types.GRP_MBR_ROLE_ADMIN;
-
-      return isOwner || isAdmin;
-    });
-
-    const isAdmin = computed(() => {
-      const { conversation } = data;
-      const groupType = conversation?.groupProfile?.type;
-      const userRole = conversation?.groupProfile?.selfInfo.role;
-
-      const isOwner = userRole === types.GRP_MBR_ROLE_OWNER;
-      const isWork = groupType === types.GRP_WORK;
-      const isAVChatRoom = groupType === types.GRP_AVCHATROOM;
-
-      if (!isWork && !isAVChatRoom && isOwner) {
-        return true;
-      }
-      return false;
-    });
-
-    const isSetMuteTime = computed(() => {
-      const { conversation } = data;
-      const groupType = conversation?.groupProfile?.type;
-      const isWork = groupType === types.GRP_WORK;
-
-      if (isWork || !isAuth.value) {
-        return false;
-      }
-      return true;
-    });
-
-    const getMember = (type?: string) => {
-      const { conversation } = data;
-      const options: any = {
-        groupID: conversation?.groupProfile?.groupID,
-        count: 100,
-        offset: type && type === 'more' ? data.userInfo.list.length : 0
-      };
-      GroupServer.getGroupMemberList(options).then((res: any) => {
-        if (type && type === 'more') {
-          data.userInfo.list = [...data.userInfo.list, ...res.data.memberList];
-        } else {
-          data.userInfo.list = res.data.memberList;
-        }
-      });
-    };
-
-    const addMember = async (userIDList: any) => {
-      const { conversation } = data;
-      const options: any = {
-        groupID: conversation.groupProfile.groupID,
-        userIDList
-      };
-      await GroupServer.addGroupMember(options);
-      getMember('More');
-    };
-
-    const deleteMember = (user: any) => {
-      const { conversation } = data;
-      const options: any = {
-        groupID: conversation.groupProfile.groupID,
-        userIDList: [user.userID]
-      };
-      GroupServer.deleteGroupMember(options);
-    };
-
-    const changeOwner = async (userID: any) => {
-      const options: any = {
-        groupID: data.conversation.groupProfile.groupID,
-        newOwnerID: userID
-      };
-      const imResponse = await GroupServer.changeGroupOwner(options);
-      data.conversation.groupProfile = {};
-      data.conversation.groupProfile = imResponse.data.group;
-    };
-
-    const quit = async (group: any) => {
-      await GroupServer.quitGroup(group.groupID);
-      manage.TUIServer.store.conversation = {};
-    };
-
-    const dismiss = async (group: any) => {
-      await GroupServer.dismissGroup(group.groupID);
-      manage.TUIServer.store.conversation = {};
-      (window as any)?.TUIKitTUICore?.isOfficial &&
-        VuexStore?.commit &&
-        VuexStore?.commit('handleTask', 5);
-    };
-
-    const handleAdmin = async (user: any) => {
-      const { conversation } = data;
-      let role = '';
-      switch (user.role) {
-        case types.GRP_MBR_ROLE_ADMIN:
-          role = types.GRP_MBR_ROLE_MEMBER;
-          break;
-        case types.GRP_MBR_ROLE_MEMBER:
-          role = types.GRP_MBR_ROLE_ADMIN;
-          break;
-      }
-      const options: any = {
-        groupID: conversation.groupProfile.groupID,
-        userID: user.userID,
-        role
-      };
-      await GroupServer.setGroupMemberRole(options);
-      getMember();
-    };
-
-    const setMemberMuteTime = async (userID: string, type?: string) => {
-      const { conversation } = data;
-      const options: any = {
-        groupID: conversation.groupProfile.groupID,
-        userID,
-        muteTime: type === 'add' ? 60 * 60 * 24 * 30 : 0
-      };
-      await GroupServer.setGroupMemberMuteTime(options);
-      if (type === 'add') {
-        (window as any)?.TUIKitTUICore?.isOfficial &&
-          VuexStore?.commit &&
-          VuexStore?.commit('handleTask', 4);
-      }
-      getMember();
-    };
-
-    const kickedOut = async (userIDList: any) => {
-      const { conversation } = data;
-      const options: any = {
-        groupID: conversation.groupProfile.groupID,
-        userIDList,
-        reason: ''
-      };
-      await GroupServer.deleteGroupMember(options);
-      getMember();
-    };
-
-    const edit = (labelName: string) => {
-      data.editLableName = labelName;
-    };
-
-    const updateProfile = async (params: any) => {
-      const { key, value } = params;
-      const options: any = {
-        groupID: data.conversation.groupProfile.groupID,
-        [key]: value
-      };
-      const res = await GroupServer.updateGroupProfile(options);
-      const { conversation } = manage.TUIServer.store;
-      conversation.groupProfile = res.data.group;
-      manage.TUIServer.store.conversation = {};
-      manage.TUIServer.store.conversation = conversation;
-      data.editLableName = '';
-    };
-
-    const setTab = (tabName: string) => {
-      data.currentTab = tabName;
-      data.editLableName = '';
-      if (data.currentTab === 'member') {
-        data.transferType = 'remove';
-      }
-      if (!data.currentTab) {
-        data.transferType = '';
-      }
-    };
-
-    const handleSearchMember = async (value: string) => {
-      let imResponse: any = {};
-      let imMemberResponse: any = {};
-      const options: any = {
-        groupID: data.conversation.groupProfile.groupID,
-        userIDList: [value]
-      };
-      switch (data.transferType) {
-        case 'add':
-          try {
-            imMemberResponse = await GroupServer.getGroupMemberProfile(options);
-            data.transferList = data.transferList.filter(
-              (item: any) => item.userID !== imResponse.data[0]?.userID
-            );
-            data.transferList = [...data.transferList, ...imResponse.data];
-            if (imMemberResponse?.data?.memberList.length > 0) {
-              data.transferList = data.transferList.map((item: any) => {
-                if (
-                  item.userID === imMemberResponse?.data?.memberList[0].userID
-                ) {
-                  item.isDisabled = true;
-                }
-                return item;
-              });
-            }
-          } catch (error) {
-            const message = t('TUIChat.manage.该用户不存在');
-            handleErrorPrompts(message, props);
-          }
-          break;
-        case 'remove':
-          try {
-            imResponse = await GroupServer.getGroupMemberProfile(options);
-            if (imResponse.data.memberList.length === 0) {
-              const message = t('TUIChat.manage.该用户不在群组内');
-              return handleErrorPrompts(message, props);
-            }
-            data.transferList = data.transferList.filter(
-              (item: any) =>
-                // eslint-disable-next-line no-unsafe-optional-chaining
-                item.userID !== imResponse?.data?.memberList[0]?.userID
-            );
-            data.transferList = [
-              ...data.transferList,
-              // eslint-disable-next-line no-unsafe-optional-chaining
-              ...imResponse?.data?.memberList
-            ];
-          } catch (error) {
-            const message = t('TUIChat.manage.该用户不存在');
-            handleErrorPrompts(message, props);
-          }
-          break;
-        default:
-          break;
-      }
-    };
-
-    const submit = (userList: any) => {
-      if (data.transferType === 'remove') {
-        data.userList = userList;
-        data.delDialogShow = !data.delDialogShow;
-      } else {
-        handleManage(userList, data.transferType);
-      }
-      data.mask = false;
-    };
-
-    const friendList = async () => {
-      const imResponse = await manage.TUIServer.getFriendList();
-      const friendList = imResponse.data.map((item: any) => item?.profile);
-      return friendList.filter(
-        (item: any) =>
-          !data.userInfo.list.some(
-            (infoItem: any) => infoItem.userID === item.userID
-          )
-      );
-    };
-
-    const cancel = () => {
-      toggleMask();
-    };
-
-    const toggleMask = async (type?: string) => {
-      data.selectedList = [];
-      switch (type) {
-        case 'add':
-          data.isRadio = false;
-          data.transferList = await friendList();
-          data.transferTitle = '添加成员';
-          break;
-        case 'remove':
-          data.isRadio = false;
-          data.transferList = data.userInfo.list.filter(
-            (item: any) =>
-              // eslint-disable-next-line no-unsafe-optional-chaining
-              item.userID !== data.conversation?.groupProfile?.selfInfo.userID
-          );
-          data.transferTitle = '删除成员';
-          break;
-        case 'addAdmin':
-          data.isRadio = true;
-          data.transferList = data.member.member;
-          data.transferTitle = '新增管理员';
-          break;
-        case 'removeAdmin':
-          data.isRadio = true;
-          data.transferList = data.member.admin;
-          data.transferTitle = '移除管理员';
-          break;
-        case 'changeOwner':
-          data.isRadio = true;
-          data.transferList = [...data.member.admin, ...data.member.member];
-          data.transferTitle = '转让群组';
-          break;
-        case 'addMute':
-          data.isRadio = true;
-          data.transferList = data.member.member;
-          if (data.conversation.groupProfile.selfInfo.role === 'Owner') {
-            data.transferList = [...data.member.admin, ...data.member.member];
-          }
-          data.transferTitle = '新增禁言用户';
-          break;
-        case 'removeMute':
-          data.isRadio = true;
-          data.transferList = data.member.muteMember;
-          data.transferTitle = '移除禁言用户';
-          break;
-        default:
-          break;
-      }
-      data.transferType = type;
-      data.mask = !data.mask;
-    };
-
-    onClickOutside(dialog, () => {
-      data.show = false;
-    });
-
-    const toggleShow = () => {
-      if (!GroupServer) {
-        const message = t('TUIChat.manage.请先注册 TUIGroup 模块');
-        return handleErrorPrompts(message, props);
-      }
-      data.show = !data.show;
-      if (!data.show) {
-        data.currentTab = '';
-      }
-      if (data.show) {
-        getMember();
-      }
-    };
-
-    const setAllMuteTime = (value: boolean) => {
-      updateProfile({ key: 'muteAllMembers', value });
-      (window as any)?.TUIKitTUICore?.isOfficial &&
-        VuexStore?.commit &&
-        VuexStore?.commit('handleTask', 4);
-    };
-
-    const handleManage = (userList: any, type: any) => {
-      const userIDList: any = [];
-      userList.map((item: any) => {
-        userIDList.push(item.userID);
-        return item;
-      });
-      switch (type) {
-        case 'add':
-          addMember(userIDList);
-          break;
-        case 'remove':
-          kickedOut(userIDList);
-          break;
-        case 'addAdmin':
-          handleAdmin(userList[0]);
-          break;
-        case 'removeAdmin':
-          handleAdmin(userList[0]);
-          break;
-        case 'changeOwner':
-          changeOwner(userIDList[0]);
-          break;
-        case 'addMute':
-          setMemberMuteTime(userIDList[0], 'add');
-          break;
-        case 'removeMute':
-          setMemberMuteTime(userIDList[0], 'remove');
-          break;
-        default:
-          break;
-      }
-    };
-
-    const handleGroupIDCopy = async () => {
-      try {
-        const { toClipboard } = useClipboard();
-        await toClipboard(data?.conversation?.groupProfile?.groupID);
-      } catch (error) {
-        handleErrorPrompts(error, data.env);
-      }
-    };
-
-    const handleMemberProfileShow = (user: any) => {
-      data.currentMember = user;
-      setTab('profile');
-    };
-
-    return {
-      ...toRefs(data),
-      isDismissGroupAuth,
-      isShowAddMember,
-      isSetMuteTime,
-      isAdmin,
-      isAuth,
-      addMember,
-      deleteMember,
-      changeOwner,
-      quit,
-      dismiss,
-      handleAdmin,
-      setMemberMuteTime,
-      kickedOut,
-      edit,
-      updateProfile,
-      setTab,
-      TabName,
-      getMember,
-      handleSearchMember,
-      submit,
-      cancel,
-      toggleMask,
-      toggleShow,
-      setAllMuteTime,
-      handleManage,
-      showUserNum,
-      dialog,
-      handleGroupIDCopy,
-      handleMemberProfileShow
-    };
-  }
-});
-export default manage;
-</script>
-
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/member-profile.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="memeber-profile">
-    <div class="memeber-profile-main">
-      <img
-        class="avatar"
-        :src="
-          userInfo?.avatar ||
-          'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-        "
-        onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-      />
-      <ul class="list">
-        <h1>{{ userInfo?.nick || userInfo?.userID }}</h1>
-        <li>
-          <label>ID：</label>
-          <span>{{ userInfo?.userID }}</span>
-        </li>
-        <li>
-          <label>{{ $t('TUIContact.个性签名') }}：</label>
-          <span>{{ userInfo?.selfSignature }}</span>
-        </li>
-      </ul>
-    </div>
-    <div class="memeber-profile-footer">
-      <div
-        class="button"
-        @click="enter(userInfo?.userID, 'C2C')"
-        v-if="showEnter()"
-      >
-        {{ $t('TUIContact.发送消息') }}
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import TIM from '../../../../TUICore/tim';
-import { reactive, toRefs, watch, watchEffect, defineComponent } from 'vue';
-import manage from './manage.vue';
-
-const memberProfile = defineComponent({
-  props: {
-    userInfo: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props: any, ctx: any) {
-    const TUIServer = manage?.TUIServer;
-    const data = reactive({
-      isFriendShip: false,
-      userInfo: {},
-      self: {}
-    });
-    watchEffect(() => {
-      data.self = props.self;
-    });
-    watch(
-      () => props.userInfo,
-      async (newVal: any, oldVal: any) => {
-        if (newVal === oldVal) return;
-        const res = await TUIServer.getUserProfile([props?.userInfo?.userID]);
-        data.userInfo = res?.data[0];
-        checkFriend();
-      },
-      {
-        deep: true,
-        immediate: true
-      }
-    );
-    const enter = async (ID: any, type: string) => {
-      const name = `${type}${ID}`;
-      TUIServer.TUICore.TUIServer.TUIConversation.getConversationProfile(
-        name
-      ).then((imResponse: any) => {
-        // 通知 TUIConversation 添加当前会话
-        // Notify TUIConversation to toggle the current conversation
-        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(
-          imResponse.data.conversation
-        );
-      });
-    };
-    const checkFriend = async () => {
-      if (!(data.userInfo as any).userID) return;
-      const relation = await TUIServer.checkFriend(
-        (data.userInfo as any).userID,
-        TIM.TYPES.SNS_CHECK_TYPE_BOTH
-      );
-      data.isFriendShip =
-        relation === TIM.TYPES.SNS_TYPE_BOTH_WAY ? true : false;
-    };
-
-    const showEnter = () => {
-      return data.isFriendShip || !TUIServer?.TUICore?.isOfficial;
-    };
-    return {
-      ...toRefs(data),
-      enter,
-      showEnter
-    };
-  }
-});
-export default memberProfile;
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.memeber-profile {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  &-main {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    overflow: hidden;
-    img {
-      width: 60Px;
-      height: 60Px;
-      border-radius: 8Px;
-      margin: 20Px 10Px 20Px 20Px;
-    }
-    .list {
-      flex: 1;
-      overflow: hidden;
-      margin: 20Px 10Px;
-      font-weight: 400;
-      li {
-        color: #999999;
-      }
-      h1,
-      li {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  &-footer {
-    border-top: 10Px solid #f4f5f9;
-    padding: 14Px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    .button {
-      width: 100Px;
-      font-size: 14Px;
-      cursor: pointer;
-      background-color: #006eff;
-      color: #ffffff;
-      padding: 8Px 20Px;
-      border-radius: 4Px;
-      border: none;
-      font-size: 14Px;
-      text-align: center;
-      line-height: 20Px;
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/style/color.scss

@@ -1,122 +0,0 @@
-.manage {
-  background: #ffffff;
-  box-shadow: 0 1Px 10Px 0 rgba(2, 16, 43, 0.15);
-
-  &-header {
-    border-bottom: 1Px solid #e8e8e9;
-
-    h1 {
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      color: #000000;
-    }
-
-    &-left {
-      main {
-        p {
-          font-weight: 400;
-          color: #999999;
-        }
-      }
-    }
-  }
-
-  .main {
-    .userInfo {
-      ol {
-        dl {
-          .userInfo-mask {
-            background: #ffffff;
-            box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-          }
-        }
-      }
-    }
-
-    .footer {
-      li {
-        font-weight: 400;
-        color: #dc2113;
-        border-bottom: 1Px solid #e8e8e9;
-      }
-    }
-  }
-
-  .admin {
-    &-content {
-      aside {
-        font-weight: 400;
-        color: #000000;
-        letter-spacing: 0;
-
-        p {
-          opacity: 0.6;
-        }
-      }
-    }
-
-    &-list {
-      label {
-        font-weight: 400;
-        color: #000000;
-      }
-    }
-
-    .last {
-      &::before {
-        background: #e8e8e9;
-      }
-    }
-  }
-
-  ol {
-    dl {
-      .userInfo-mask {
-        background: #ffffff;
-        box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-      }
-    }
-  }
-}
-
-.input {
-  border: 1Px solid #e8e8e9;
-  font-weight: 400;
-  color: #000000;
-  opacity: 0.6;
-}
-
-.avatar {
-  background: #f4f5f9;
-  color: #000000;
-}
-
-.space-top {
-  border-top: 10Px solid #f4f5f9;
-}
-
-.btn {
-  background: #3370ff;
-  border: 0 solid #2f80ed;
-  color: #ffffff;
-
-  &-cancel {
-    background: #ffffff;
-    border: 1Px solid #dddddd;
-    color: #828282;
-  }
-}
-
-.slider {
-  &-box {
-    background: #e1e1e3;
-  }
-
-  &-block {
-    background: #ffffff;
-    border: 0 solid rgba(0, 0, 0, 0.85);
-    box-shadow: 0 2Px 4Px 0 #d1d1d1;
-  }
-}
-
-.manage-h5 {}

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/style/h5.scss

@@ -1,8 +0,0 @@
-
-.manage-h5 {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/style/index.scss

@@ -1,5 +0,0 @@
-@import './color.scss';
-@import './web.scss';
-@import './h5.scss';
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');

src/TUIKit/TUIComponents/container/TUIChat-temp/manage-components/style/web.scss

@@ -1,329 +0,0 @@
-.manage {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 360Px;
-  overflow-y: auto;
-  border-radius: 8Px 0 0 8Px;
-  position: absolute;
-  right: 0;
-  height: 100%;
-  z-index: 2;
-  top: 0Px;
-
-  &-header {
-    padding: 12Px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    aside {
-      display: flex;
-      align-items: center;
-    }
-
-    h1 {
-      font-size: 16Px;
-    }
-
-    &-left {
-      display: flex;
-
-      .icon {
-        margin-right: 14Px;
-      }
-
-      main {
-        display: flex;
-        flex-direction: column;
-
-        p {
-          padding-top: 8Px;
-          font-size: 12Px;
-        }
-      }
-    }
-  }
-
-  .main {
-
-    .userInfo {
-      padding: 0 20Px;
-      display: flex;
-      flex-direction: column;
-      font-size: 14Px;
-
-      &-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 14Px 0;
-
-        p {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      ol {
-        flex: 1;
-        display: flex;
-        flex-wrap: wrap;
-        padding-bottom: 20Px;
-
-        dl {
-          position: relative;
-          flex: 0 0 36Px;
-          display: flex;
-          flex-direction: column;
-          padding-right: 20Px;
-
-          &:last-child {
-            padding-right: 0;
-          }
-
-          .more {
-            padding-top: 10Px;
-          }
-
-          dd {
-            text-align: center;
-            max-width: 36Px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          .userInfo-mask {
-            position: absolute;
-            z-index: 5;
-            padding: 20Px;
-            left: 100%;
-
-            li {
-              display: flex;
-              align-items: center;
-
-              label {
-                width: 60Px;
-              }
-
-              span {
-                max-width: 200Px;
-                word-break: keep-all;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .content {
-      padding: 0 20Px;
-
-      li {
-        padding: 14Px 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 14Px;
-
-        .btn {
-          flex: 1;
-        }
-
-        article {
-          opacity: 0.6;
-          width: 246Px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .end {
-          align-self: flex-end;
-          margin-bottom: 4Px;
-        }
-      }
-    }
-
-    .footer {
-      padding: 0 20Px;
-
-      li {
-        cursor: pointer;
-        width: 100%;
-        font-size: 14Px;
-        padding: 14Px 0;
-        text-align: center;
-
-        &:last-child {
-          border: none;
-        }
-      }
-    }
-  }
-
-  .admin {
-    padding: 20Px 0;
-
-    &-content {
-      padding: 20Px 20Px 12Px;
-      display: flex;
-      align-items: center;
-
-      aside {
-        flex: 1;
-        font-size: 14Px;
-
-        p {
-          font-size: 12Px;
-        }
-      }
-    }
-
-    &-list {
-      padding: 0 20Px;
-
-      label {
-        display: inline-block;
-        font-size: 14Px;
-        padding-bottom: 8Px;
-      }
-    }
-
-    .last {
-      padding-top: 13Px;
-      position: relative;
-
-      &::before {
-        position: absolute;
-        content: '';
-        width: calc(100% - 40Px);
-        height: 1Px;
-        top: 0;
-        left: 0;
-        right: 0;
-        margin: 0 auto;
-      }
-    }
-  }
-
-  ol {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    padding-bottom: 20Px;
-
-    dl {
-      position: relative;
-      flex: 0 0 36Px;
-      display: flex;
-      flex-direction: column;
-      padding-right: 20Px;
-
-      &:last-child {
-        padding-right: 0;
-      }
-
-      .more {
-        padding-top: 10Px;
-      }
-
-      dd {
-        text-align: center;
-        max-width: 36Px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .userInfo-mask {
-        position: fixed;
-        z-index: 5;
-        padding: 20Px;
-        margin-left: 36Px;
-
-        li {
-          display: flex;
-          align-items: center;
-
-          label {
-            width: 60Px;
-          }
-
-          span {
-            max-width: 200Px;
-            word-break: keep-all;
-          }
-        }
-      }
-    }
-  }
-}
-
-.input {
-  border-radius: 4Px;
-  padding: 4Px 16Px;
-  font-size: 14Px;
-}
-
-.groupID {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  span {
-    padding-right: 10Px;
-  }
-
-  .icon {
-    width: 15Px;
-    height: 15Px;
-    cursor: pointer;
-  }
-}
-
-.avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 4Px;
-  font-size: 12Px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.btn {
-  padding: 4Px 28Px;
-  font-size: 12Px;
-  line-height: 24Px;
-  border-radius: 4Px;
-}
-
-.slider {
-  &-box {
-    display: flex;
-    align-items: center;
-    width: 34Px;
-    height: 20Px;
-    border-radius: 10Px;
-  }
-
-  &-block {
-    display: inline-block;
-    width: 16Px;
-    height: 16Px;
-    border-radius: 8Px;
-    margin: 0 2Px;
-  }
-}
-
-.space-between {
-  justify-content: space-between;
-}
-
-.delDialog-title {
-  text-align: center;
-  padding: 20Px 0;
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/message-input/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/message-input/index.vue

@@ -1,247 +0,0 @@
-<template>
-  <div :class="['message-input', isH5 && 'message-input-h5']">
-    <MessageInputEditor
-      ref="editor"
-      :isH5="isH5"
-      :placeholder="placeholder"
-      :isGroup="isGroup"
-      :isMute="isMute"
-      :muteText="muteText"
-      :enableInput="enableInput"
-      :enableAt="enableAt"
-      :enableTyping="enableTyping"
-      :enableDragUpload="enableDragUpload"
-      @sendMessage="sendMessage"
-      @onTyping="onTyping"
-    ></MessageInputEditor>
-    <MessageInputButton :isH5="isH5" @sendMessage="sendMessage" v-if="!isMute"></MessageInputButton>
-    <MessageInputAt
-      :memberList="memberList"
-      :isGroup="isGroup"
-      :selfInfo="conversation?.groupProfile?.selfInfo"
-      :isH5="isH5"
-      v-if="enableAt"
-    ></MessageInputAt>
-    <MessageInputReferenceOrReply
-      :replyOrReference="replyOrReference"
-      :isH5="isH5"
-      @resetReplyOrReference="resetReplyOrReference"
-    ></MessageInputReferenceOrReply>
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, defineEmits, toRefs, ref, defineExpose, watch } from 'vue';
-import MessageInputEditor from './message-input-editor.vue';
-import MessageInputAt from './message-input-at.vue';
-import MessageInputButton from './message-input-button.vue';
-import MessageInputReferenceOrReply from './message-input-reference-or-reply.vue';
-import { JSONToObject } from '../utils/utils';
-import { handleErrorPrompts } from '../../utils';
-
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: 'this is placeholder',
-  },
-  conversation: {
-    type: Object,
-    default: () => ({}),
-  },
-  replyOrReference: {
-    type: Object,
-    default: () => ({}),
-  },
-  isGroup: {
-    type: Boolean,
-    default: false,
-  },
-  memberList: {
-    type: Array,
-    default: () => [],
-  },
-  isMute: {
-    type: Boolean,
-    default: true,
-  },
-  muteText: {
-    type: String,
-    default: '',
-  },
-  enableInput: {
-    type: Boolean,
-    default: true,
-  },
-  enableAt: {
-    type: Boolean,
-    default: true,
-  },
-  enableDragUpload: {
-    type: Boolean,
-    default: true,
-  },
-  enableTyping: {
-    type: Boolean,
-    default: true,
-  },
-  env: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping']);
-const { placeholder, isGroup, memberList, conversation, replyOrReference, env, enableTyping } = toRefs(props);
-const editor = ref();
-const isH5 = ref(props?.env?.isH5);
-
-watch(
-  () => conversation.value,
-  (newVal: any, oldVal: any) => {
-    if (newVal?.conversationID !== oldVal?.conversationID) {
-      // conversation change
-      editor?.value?.resetEditor();
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-const sendMessage = async () => {
-  const TUIServer = (window as any)?.TUIKitTUICore?.TUIServer?.TUIChat;
-  const messageList = editor?.value?.getEditorContent();
-  const replyOrReferenceObject = replyOrReference.value;
-  await messageList?.forEach(async (content: any) => {
-    try {
-      let cloudCustomData, res;
-      // handle message typing
-      cloudCustomData = handleMessageWithTyping(cloudCustomData);
-      switch (content?.type) {
-        case 'text':
-          // 引用和回复只支持文本消息（对标微信）
-          // replay or reference message
-          cloudCustomData = handleMessageReplyOrReference(cloudCustomData);
-          // @ text message
-          if (content?.payload?.atUserList) {
-            res = await TUIServer?.sendTextAtMessage(
-              {
-                text: JSON.parse(JSON.stringify(content?.payload?.text)),
-                atUserList: content?.payload?.atUserList,
-              },
-              cloudCustomData
-            );
-          } else {
-            res = await TUIServer?.sendTextMessage(JSON.parse(JSON.stringify(content?.payload?.text)), cloudCustomData);
-          }
-          if (replyOrReferenceObject?.show === 'reply') {
-            await TUIServer.replyMessage(res?.data?.message);
-          }
-          break;
-        case 'image':
-          await TUIServer?.sendImageMessage(content?.payload?.file);
-          break;
-        case 'video':
-          await TUIServer?.sendVideoMessage(content?.payload?.file);
-          break;
-        case 'file':
-          await TUIServer?.sendFileMessage(content?.payload?.file);
-          break;
-        default:
-          break;
-      }
-      emit('sendMessage');
-    } catch (error: any) {
-      handleErrorPrompts(error, env.value);
-    }
-  });
-  editor?.value?.resetEditor();
-  resetReplyOrReference();
-};
-
-const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
-  emit('onTyping', inputContentEmpty, inputBlur);
-};
-
-const handleMessageWithTyping = (cloudCustomData: any) => {
-  if (enableTyping.value) {
-    if (!cloudCustomData) {
-      cloudCustomData = {};
-    }
-    cloudCustomData.messageFeature = {
-      needTyping: 1,
-      version: 1,
-    };
-  }
-  return cloudCustomData;
-};
-
-const handleMessageReplyOrReference = (cloudCustomData: any) => {
-  if (replyOrReference?.value?.show !== 'reply' && replyOrReference?.value?.show !== 'reference') {
-    return cloudCustomData;
-  }
-  if (!cloudCustomData) {
-    cloudCustomData = {};
-  }
-  cloudCustomData.messageReply = {
-    messageAbstract: replyOrReference?.value?.content,
-    messageSender: replyOrReference?.value?.message?.nick || replyOrReference?.value?.message?.from,
-    messageID: replyOrReference?.value?.message?.ID,
-    messageType: replyOrReference?.value?.type,
-    version: 1,
-  };
-  if (replyOrReference?.value?.show === 'reply') {
-    try {
-      cloudCustomData.messageReply.messageRootID = replyOrReference?.value?.message?.ID;
-      if (replyOrReference?.value?.message?.cloudCustomData) {
-        const replyMessageCloudCustomData = JSONToObject(replyOrReference?.value?.message?.cloudCustomData as any);
-        cloudCustomData.messageReply.messageRootID =
-          replyMessageCloudCustomData?.messageReply?.messageRootID || replyOrReference?.value?.message?.ID;
-      }
-    } catch (error) {
-      console.warn(error);
-    }
-  }
-  return cloudCustomData;
-};
-
-const addEmoji = (emoji: any) => {
-  editor?.value?.addEmoji(emoji);
-};
-
-const resetReplyOrReference = () => {
-  emit('resetReplyOrReference');
-};
-
-const reEdit = (content: any) => {
-  editor?.value?.resetEditor();
-  resetReplyOrReference();
-  editor?.value?.setEditorContent(content);
-};
-
-defineExpose({
-  addEmoji,
-  reEdit,
-});
-</script>
-
-<style scoped lang="scss">
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-input {
-  flex: 1;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border: none;
-  height: 100%;
-  width: 100%;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: hidden;
-}
-.message-input-h5 {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/message-input/message-input-at.vue

@@ -1,392 +0,0 @@
-<template>
-  <div
-    class="message-input-at"
-    :class="[isH5 && 'message-input-at-h5']"
-    v-if="showAtList"
-    ref="MessageInputAt"
-  >
-    <div class="memberList" ref="dialog">
-      <header class="memberList-title" v-if="isH5">
-        <span class="title">{{ $t('TUIChat.选择提醒的人') }}</span>
-        <i class="icon icon-close close" @click="closeAt"></i>
-      </header>
-      <ul class="memberList-box">
-        <li
-          class="memberList-box-body"
-          :class="[index === selectedIndex && 'selected']"
-          v-for="(item, index) in showMemberList"
-          :key="index"
-          @click="selectItem(index)"
-          ref="memberListItems"
-        >
-          <img
-            :src="(item as any)?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-          />
-          <span>
-            {{
-              (item as any)?.nick ? (item as any)?.nick : (item as any)?.userID
-            }}
-          </span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, ref, toRefs, watchEffect, watch } from 'vue';
-import { SuggestionProps, SuggestionKeyDownProps } from '@tiptap/suggestion';
-import atIcon from '../../../assets/icon/at.svg';
-import TIM from '../../../../TUICore/tim';
-import { onClickOutside } from '@vueuse/core';
-
-const MessageInputAt = ref();
-const showAtList = ref(false);
-const allMemberList = ref<Array<any>>();
-const showMemberList = ref<Array<any>>();
-const position = ref({
-  left: 0,
-  top: 0
-});
-const command = ref();
-const selectedIndex = ref(0);
-const memberListItems = ref();
-const isH5 = ref(false);
-
-const MessageInputAtSuggestion = () => {
-  return {
-    allowedPrefixes: null,
-    items: (props: { query: string }) => {
-      const queryResult = allMemberList?.value?.filter(
-        item =>
-          item?.nick?.toLowerCase()?.startsWith(props?.query?.toLowerCase()) ||
-          item?.userID?.toLowerCase()?.startsWith(props?.query?.toLowerCase())
-      );
-      showMemberList.value = queryResult?.length
-        ? queryResult
-        : allMemberList.value;
-      return showMemberList.value;
-    },
-    render: () => {
-      return {
-        onStart: (
-          props: SuggestionProps<{
-            id?: string;
-            userID?: string;
-            isAll?: boolean;
-          }>
-        ) => {
-          showAtList.value = true;
-          if (!props?.clientRect) {
-            return;
-          }
-          const rect = props?.clientRect();
-          if (rect?.left && rect?.top && !isH5.value) {
-            position.value = {
-              left: rect?.left,
-              top: rect?.top
-            };
-          }
-          command.value = props.command;
-        },
-
-        onUpdate(props: SuggestionProps<any>) {
-          if (!props?.clientRect) {
-            return;
-          }
-          const rect = props?.clientRect();
-          if (rect?.left && rect?.top && !isH5.value) {
-            position.value = {
-              left: rect?.left,
-              top: rect?.top
-            };
-          }
-        },
-
-        onKeyDown(props: SuggestionKeyDownProps) {
-          if (props.event.key === 'Enter') {
-            props.event?.stopPropagation();
-            props.event?.preventDefault();
-          }
-          if (props.event.key === 'Escape') {
-            showAtList.value = false;
-            showMemberList.value = allMemberList.value;
-            return true;
-          }
-          if (props?.event.key === 'ArrowUp') {
-            upHandler();
-            return true;
-          }
-          if (props?.event.key === 'ArrowDown') {
-            downHandler();
-            return true;
-          }
-          if (props?.event.key === 'Enter') {
-            enterHandler();
-            return true;
-          }
-          return false;
-        },
-
-        onExit(props: SuggestionProps<any>) {
-          showAtList.value = false;
-          showMemberList.value = allMemberList.value;
-          position.value = {
-            left: 0,
-            top: 0
-          };
-        }
-      };
-    }
-  };
-};
-
-const upHandler = () => {
-  if (!showMemberList?.value?.length) return;
-  selectedIndex.value =
-    (selectedIndex.value + showMemberList?.value?.length - 1) %
-    showMemberList?.value?.length;
-  memberListItems?.value[selectedIndex.value]?.scrollIntoView(false);
-};
-
-const downHandler = () => {
-  if (!showMemberList?.value?.length) return;
-  selectedIndex.value =
-    (selectedIndex.value + 1) % showMemberList?.value?.length;
-  memberListItems?.value[selectedIndex.value]?.scrollIntoView(false);
-};
-
-const enterHandler = () => {
-  selectItem(selectedIndex.value);
-};
-
-const selectItem = (index: number) => {
-  if (!showMemberList?.value?.length) return;
-  const item = showMemberList?.value[index];
-  if (item) {
-    command.value &&
-      command.value({
-        id: (item as any)?.userID,
-        label: (item as any)?.nick || (item as any)?.userID
-      });
-  }
-};
-
-const MessageInputAtComponent = defineComponent({
-  props: {
-    memberList: {
-      type: Array,
-      default: () => []
-    },
-    isGroup: {
-      type: Boolean,
-      default: false
-    },
-    selfInfo: {
-      type: Object,
-      default: () => ({})
-    },
-    isH5: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const { memberList, isGroup, selfInfo } = toRefs(props);
-    const all = {
-      userID: TIM.TYPES.MSG_AT_ALL,
-      nick: '所有人',
-      isAll: true,
-      avatar: atIcon
-    };
-    const dialog = ref();
-    watchEffect(() => {
-      showAtList.value = showAtList.value && isGroup.value;
-      isH5.value = props.isH5;
-    });
-
-    watch(
-      () => memberList.value,
-      () => {
-        // add all
-        if (!(memberList?.value[0] as any)?.isAll) {
-          memberList?.value?.unshift(all);
-        }
-        // delete self in @ list
-        const list = memberList?.value?.filter((item: any) => {
-          return item?.userID !== selfInfo?.value?.userID;
-        });
-        allMemberList.value = list;
-        showMemberList.value = list;
-      },
-      {
-        deep: true,
-        immediate: true
-      }
-    );
-
-    watch(
-      () => [position.value, MessageInputAt?.value],
-      () => {
-        if (
-          isH5.value ||
-          !MessageInputAt?.value ||
-          !MessageInputAt?.value?.style
-        ) {
-          return;
-        }
-        MessageInputAt.value.style.left = position.value.left + 'Px';
-        MessageInputAt.value.style.top =
-          position.value.top - MessageInputAt.value.clientHeight + 'Px';
-      },
-      {
-        deep: true,
-        immediate: true
-      }
-    );
-
-    const closeAt = () => {
-      showAtList.value = false;
-      showMemberList.value = allMemberList.value;
-      position.value = {
-        left: 0,
-        top: 0
-      };
-    };
-
-    onClickOutside(dialog, () => {
-      closeAt();
-    });
-
-    return {
-      selectedIndex,
-      selectItem,
-      showAtList,
-      closeAt,
-      showMemberList,
-      allMemberList,
-      MessageInputAt,
-      memberListItems,
-      dialog
-    };
-  }
-});
-
-export default MessageInputAtComponent;
-export { MessageInputAtSuggestion, MessageInputAtComponent };
-</script>
-<style scoped lang="scss">
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-input-at {
-  position: fixed;
-  max-width: 15rem;
-  max-height: 10rem;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: #ffffff;
-  box-shadow: 0 0.06rem 0.63rem 0 rgba(2, 16, 43, 0.15);
-  border-radius: 0.13rem;
-}
-.memberList-box {
-  &-header {
-    height: 2.5rem;
-    padding-top: 5Px;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(0, 110, 255, 0.1);
-    }
-  }
-  span {
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    font-size: 0.88rem;
-    color: #000000;
-    letter-spacing: 0;
-    padding: 5Px;
-  }
-  &-body {
-    height: 2.5rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    .selected,
-    &:hover {
-      background: rgba(0, 110, 255, 0.1);
-    }
-    span {
-      overflow: hidden;
-      white-space: nowrap;
-      word-wrap: break-word;
-      word-break: break-all;
-      text-overflow: ellipsis;
-    }
-  }
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-    padding-left: 10Px;
-  }
-  .selected {
-    background: rgba(0, 110, 255, 0.1);
-  }
-}
-
-.message-input-at-h5 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 10;
-  display: flex;
-  align-items: flex-end;
-  .memberList {
-    height: auto;
-    max-height: 50%;
-    width: 100%;
-    max-width: 100%;
-    background: white;
-    border-radius: 12Px 12Px 0 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    &-title {
-      height: fit-content;
-      width: calc(100% - 30Px);
-      text-align: center;
-      vertical-align: middle;
-      padding: 15Px;
-      .title {
-        vertical-align: middle;
-        display: inline-block;
-        font-size: 16Px;
-      }
-      .close {
-        vertical-align: middle;
-        position: absolute;
-        right: 10Px;
-        display: inline-block;
-      }
-    }
-    &-box {
-      flex: 1;
-      overflow-y: scroll;
-      &-body {
-        padding: 10Px;
-        img {
-          width: 26Px;
-          height: 26Px;
-        }
-        span {
-          font-size: 14Px;
-        }
-      }
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/message-input/message-input-button.vue

@@ -1,96 +0,0 @@
-<template>
-  <div :class="['message-input-button', isH5 && 'message-input-button-h5']">
-    <button
-      v-if="enableSend"
-      class="message-input-button-cont"
-      data-type="text"
-      @click="sendMessage"
-      :disabled="false"
-    >
-      <p class="message-input-button-hover">
-        {{ $t('TUIChat.按Enter发送，Ctrl+Enter换行') }}
-      </p>
-      {{ $t('发送') }}
-    </button>
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, toRefs, defineEmits, ref } from 'vue';
-const props = defineProps({
-  enableSend: {
-    type: Boolean,
-    default: true
-  },
-  messages: {
-    type: Array,
-    default: () => []
-  },
-  isH5: {
-    type: Boolean,
-    default: true
-  }
-});
-const { enableSend } = toRefs(props);
-const emits = defineEmits(['sendMessage']);
-const sendMessage = () => {
-  emits('sendMessage');
-};
-</script>
-<style scoped lang="scss">
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-input-button {
-  position: absolute;
-  bottom: 20Px;
-  right: 20Px;
-  &-h5 {
-    position: static;
-  }
-  &-cont {
-    padding: 8Px 20Px;
-    border-radius: 4Px;
-    border: none;
-    font-size: 14Px;
-    text-align: center;
-    line-height: 20Px;
-    font-weight: 400;
-    background: #006eff;
-    color: #ffffff;
-    letter-spacing: 0;
-    cursor: pointer;
-  }
-  &:hover {
-    .message-input-button-hover {
-      display: flex;
-    }
-  }
-  &-hover {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    right: 120%;
-    word-break: keep-all;
-    height: 30Px;
-    white-space: nowrap;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    padding: 5Px 10Px;
-    border-radius: 3Px;
-    background: #000000;
-    color: #ffffff;
-    opacity: 0.3;
-
-    &::before {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      right: -20Px;
-      border: 10Px solid transparent;
-      border-left: 10Px solid #000000;
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/message-input/message-input-editor.vue

@@ -1,565 +0,0 @@
-<template>
-  <div
-    :class="['message-input-container', isH5 && 'message-input-container-h5']"
-  >
-    <div class="message-input-mute" v-show="isMute">
-      {{ $t(`TUIChat.${muteText}`) }}
-    </div>
-    <editor-content
-      v-show="!isMute && enableInput"
-      :editor="editor"
-      class="message-input-area"
-      ref="editorContainer"
-      @drop="(e:any) => handleFileDropOrPaste(e, 'drop')"
-      @paste="(e:any) => handleFileDropOrPaste(e, 'paste')"
-      @keydown.enter="handleEnter"
-    />
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, defineEmits, toRefs, ref, defineExpose } from 'vue';
-import { useEditor, EditorContent } from '@tiptap/vue-3';
-import Document from '@tiptap/extension-document';
-import Paragraph from '@tiptap/extension-paragraph';
-import Placeholder from '@tiptap/extension-placeholder';
-import Text from '@tiptap/extension-text';
-import Mention from '@tiptap/extension-mention';
-import CustomImage from './message-input-file';
-import { MessageInputAtSuggestion } from './message-input-at.vue';
-
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: 'this is placeholder'
-  },
-  replayOrReferenceMessage: {
-    type: Object,
-    default: () => ({})
-  },
-  isMute: {
-    type: Boolean,
-    default: true
-  },
-  muteText: {
-    type: String,
-    default: ''
-  },
-  enableInput: {
-    type: Boolean,
-    default: true
-  },
-  enableAt: {
-    type: Boolean,
-    default: true
-  },
-  enableDragUpload: {
-    type: Boolean,
-    default: true
-  },
-  enableTyping: {
-    type: Boolean,
-    default: true
-  },
-  isH5: {
-    type: Boolean,
-    default: true
-  },
-  isGroup: {
-    type: Boolean,
-    default: false
-  }
-});
-const emits = defineEmits(['sendMessage', 'onTyping']);
-const { placeholder, isH5, enableAt, enableDragUpload, isGroup, enableTyping } =
-  toRefs(props);
-const inputContentEmpty = ref(true);
-const inputBlur = ref(true);
-
-const editor = useEditor({
-  extensions: [
-    Document,
-    Paragraph,
-    Text,
-    Placeholder.configure({
-      emptyEditorClass: 'is-editor-empty',
-      placeholder: placeholder.value
-    }),
-    Mention.configure({
-      HTMLAttributes: {
-        class: 'mention'
-      },
-      suggestion: enableAt.value && (MessageInputAtSuggestion() as any)
-    }),
-    CustomImage.configure({
-      inline: true,
-      allowBase64: true,
-      HTMLAttributes: {
-        class: 'custom-image'
-      }
-    })
-  ],
-  autofocus: true,
-  editable: true,
-  injectCSS: false,
-
-  // handle input edtor typing (only in C2C and enable typing)
-  onUpdate({ editor, transaction }) {
-    if (!enableTyping.value || isGroup.value) return;
-    inputBlur.value = !editor.isFocused;
-    if (transaction?.doc?.content?.size > 2) {
-      inputContentEmpty.value = false;
-    } else {
-      inputContentEmpty.value = true;
-    }
-    emits('onTyping', inputContentEmpty.value, inputBlur.value);
-  },
-  onFocus() {
-    if (isH5.value && document?.getElementById('app')?.style) {
-      // set app height when keyboard popup
-      const keyboardHeight = document.body.scrollHeight - window.innerHeight;
-      (
-        document.getElementById('app') as any
-      ).style.marginBottom = `${keyboardHeight}Px`;
-      (
-        document.getElementById('app') as any
-      ).style.height = `calc(100% - ${keyboardHeight}Px)`;
-    }
-    if (!enableTyping.value || isGroup.value) return;
-    inputBlur.value = true;
-    emits('onTyping', inputContentEmpty.value, inputBlur.value);
-  },
-  onBlur() {
-    if (isH5.value && document?.getElementById('app')?.style) {
-      // reset app height to normal
-      (document.getElementById('app') as any).style.marginBottom = ``;
-      (document.getElementById('app') as any).style.height = `100%`;
-    }
-    if (!enableTyping.value || isGroup.value) return;
-    inputBlur.value = true;
-    emits('onTyping', inputContentEmpty.value, inputBlur.value);
-  }
-});
-
-const editorContainer = ref();
-
-const handleEnter = (e: any) => {
-  if (isH5?.value) {
-    return;
-  }
-  e?.preventDefault();
-  e?.stopPropagation();
-  if (e.keyCode === 13 && e.ctrlKey) {
-    // ctrl + enter: warp
-    editor?.value?.commands?.insertContent('<p></p>');
-  } else if (e.keyCode === 13) {
-    // enter only: send message
-    emits('sendMessage');
-  }
-};
-
-// fileMap 存储 fileURL 与 fileObject 的映射
-const fileMap = new Map<string, any>();
-const handleFileDropOrPaste = async (e: any, type: string) => {
-  e.preventDefault();
-  e.stopPropagation();
-  if (isH5.value) {
-    return;
-  }
-  if (!enableDragUpload?.value && type === 'drop') {
-    return;
-  }
-  if (
-    (type === 'drop' && e.dataTransfer) ||
-    (type === 'paste' && e.clipboardData)
-  ) {
-    const files =
-      type === 'drop' ? e?.dataTransfer?.files : e?.clipboardData?.files;
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i];
-      const isImage = file.type.startsWith('image/');
-      const fileSrc = isImage
-        ? URL.createObjectURL(file)
-        : await drawFileCanvasToImageUrl(file);
-      editor?.value?.commands?.insertContent({
-        type: 'custom-image',
-        attrs: {
-          src: fileSrc,
-          alt: file?.name,
-          title: file?.name,
-          class: isImage ? 'normal' : 'file'
-        }
-      });
-      fileMap.set(fileSrc, file);
-      if (i === files.length - 1) {
-        setTimeout(() => {
-          editor?.value?.commands?.focus('end');
-          editor?.value?.commands?.scrollIntoView();
-        }, 10);
-      }
-    }
-  }
-};
-
-// create file icon image
-// 为了避免重复创建拥有相同icon图标的img dom，将之前已有类型进行记录
-// 记录格式为 map<icon type，img dom>
-const fileIconDomMap = new Map<string, HTMLImageElement>();
-const addImageProcess = (src: string, type: string) => {
-  return new Promise((resolve, reject) => {
-    if (fileIconDomMap.has(type)) {
-      resolve(fileIconDomMap.get(type));
-    } else {
-      let img = new Image();
-      img.crossOrigin = 'anonymous';
-      img.onload = () => {
-        fileIconDomMap.set(type, img);
-        resolve(img);
-      };
-      img.onerror = reject;
-      img.src = src;
-    }
-  });
-};
-
-// draw file tag canvas
-const drawFileCanvasToImageUrl = async (file: any) => {
-  const { name, type } = file;
-  const canvas = document.createElement('canvas');
-  let width = 160;
-  let height = 50;
-  canvas.style.width = width + 'Px';
-  canvas.style.height = height + 'Px';
-  // 设置内存中的实际大小（缩放以考虑额外的像素密度）
-  let scale = window.devicePixelRatio; // 在视网膜屏幕上更改为 1 以查看模糊
-  canvas.width = Math.floor(width * scale);
-  canvas.height = Math.floor(height * scale);
-  const ctx = canvas.getContext('2d');
-  if (!ctx) {
-    return '';
-  }
-  // 标准化坐标系以使用 css 像素
-  ctx.scale(scale, scale);
-  // draw icon
-  const { iconSrc, iconType } = handleFileIconForShow(type);
-  const img = await addImageProcess(iconSrc, iconType);
-  ctx?.drawImage(img as any, 10, 10, 30, 30);
-  // draw font
-  const nameForShow = handleNameForShow(name);
-  ctx.fillText(nameForShow, 45, 22);
-  // canvas to url
-  const dataURL = canvas.toDataURL();
-  return dataURL;
-};
-
-const handleFileIconForShow = (type: string) => {
-  const urlBase = 'https://web.sdk.qcloud.com/component/TUIKit/assets/file-';
-  const fileTypes = [
-    'image',
-    'pdf',
-    'text',
-    'ppt',
-    'presentation',
-    'sheet',
-    'zip',
-    'word',
-    'video',
-    'unknown'
-  ];
-  let url = '';
-  let iconType = '';
-  fileTypes.forEach((typeName: string) => {
-    if (type.includes(typeName)) {
-      url = urlBase + typeName + '.svg';
-      iconType = typeName;
-    }
-  });
-  return {
-    iconSrc: url ? url : urlBase + 'unknown.svg',
-    iconType: iconType ? iconType : 'unknown'
-  };
-};
-
-// 获取字符串的实际占位长度（字母or符号:1，其他（主要是中文):）
-const handleNameForShow = (value: string): string => {
-  if (!value) {
-    return value;
-  }
-  let res = '';
-  let length = 0;
-  for (let i = 0; i < value?.length; i++) {
-    if (length > 16) {
-      res += '...';
-      break;
-    }
-    res += value[i];
-    if (/[a-z]|[0-9]|[,;.!@#-+/\\$%^*()<>?:"'{}~]/i.test(value[i])) {
-      length += 1;
-    } else {
-      length += 2;
-    }
-  }
-  return res;
-};
-
-const getEditorContent = () => {
-  return handleEditorForMessage();
-};
-
-const handleEditorForMessage = () => {
-  const editorJSON = editor?.value?.getJSON();
-  const content: any[] = [];
-  const handleEditorContent = (root: any) => {
-    if (!root || !root.type) {
-      return;
-    } else if (
-      root.type !== 'text' &&
-      root.type !== 'custom-image' &&
-      root.type !== 'mention'
-    ) {
-      if (root.type === 'paragraph') {
-        handleEditorNode(root);
-      }
-      if (root.content && root.content.length) {
-        root.content.forEach((item: any) => {
-          handleEditorContent(item);
-        });
-      }
-      return;
-    } else {
-      handleEditorNode(root);
-    }
-  };
-  const handleEditorNode = (node: any) => {
-    // handle enter
-    if (node.type === 'paragraph') {
-      if (
-        content.length > 0 &&
-        content[content.length - 1] &&
-        content[content.length - 1]?.type === 'text'
-      ) {
-        content[content.length - 1].payload.text += '\n';
-      }
-    } else if (
-      node.type === 'text' ||
-      (node.type === 'custom-image' && node?.attrs?.class === 'emoji')
-    ) {
-      const text = node.type === 'text' ? node?.text : node?.attrs?.alt;
-      if (
-        content.length > 0 &&
-        content[content.length - 1] &&
-        content[content.length - 1]?.type === 'text'
-      ) {
-        content[content.length - 1].payload.text += text;
-      } else {
-        content.push({
-          type: 'text',
-          payload: { text: text }
-        });
-      }
-    } else if (
-      node.type === 'custom-image' &&
-      node?.attrs?.class === 'normal'
-    ) {
-      content.push({
-        type: 'image',
-        payload: { file: fileMap?.get(node?.attrs?.src) }
-      });
-    } else if (node.type === 'custom-image' && node?.attrs?.class === 'file') {
-      const file = fileMap?.get(node?.attrs?.src);
-      content.push({
-        type: file?.type?.includes('video') ? 'video' : 'file',
-        payload: { file }
-      });
-    } else if (node.type === 'mention') {
-      const text = '@' + node?.attrs?.label + ' ';
-      if (
-        content.length > 0 &&
-        content[content.length - 1] &&
-        content[content.length - 1]?.type === 'text'
-      ) {
-        content[content.length - 1].payload.text += text;
-      } else {
-        content.push({
-          type: 'text',
-          payload: { text: text }
-        });
-      }
-      if (content[content.length - 1]?.payload?.atUserList) {
-        content[content.length - 1]?.payload?.atUserList?.push(node?.attrs?.id);
-      } else {
-        content[content.length - 1].payload.atUserList = [node?.attrs?.id];
-      }
-    }
-  };
-  handleEditorContent(editorJSON);
-  if (
-    content.length > 0 &&
-    content[content.length - 1] &&
-    content[content.length - 1]?.type === 'text' &&
-    content[content.length - 1]?.payload?.text?.endsWith('\n')
-  ) {
-    const text = content[content.length - 1].payload.text;
-    content[content.length - 1].payload.text = text?.substring(
-      0,
-      text.lastIndexOf('\n')
-    );
-  }
-  return content;
-};
-
-const addEmoji = (emoji: any) => {
-  editor?.value?.commands?.insertContent({
-    type: 'custom-image',
-    attrs: {
-      src: emoji?.url,
-      alt: emoji?.name,
-      title: emoji?.name,
-      class: 'emoji'
-    }
-  });
-  editor?.value?.commands.focus('end');
-  editor?.value?.commands?.scrollIntoView();
-};
-
-const resetEditor = () => {
-  editor?.value?.commands?.clearContent(true);
-  fileMap?.clear();
-  editor?.value?.commands?.focus('end');
-  inputBlur.value = true;
-  inputContentEmpty.value = true;
-};
-
-const setEditorContent = (content: any) => {
-  editor?.value?.commands?.insertContent(content);
-};
-
-defineExpose({
-  getEditorContent,
-  addEmoji,
-  resetEditor,
-  setEditorContent
-});
-</script>
-
-<style scoped lang="scss">
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-input {
-  &-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: calc(100% - 13Px);
-    width: calc(100% - 20Px);
-    padding: 3Px 10Px 10Px 10Px;
-    overflow: hidden;
-  }
-  &-area {
-    flex: 1;
-    display: flex;
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      background: transparent;
-    }
-  }
-  &-mute {
-    flex: 1;
-    display: flex;
-    color: #999999;
-    font-size: 14Px;
-    justify-content: center;
-    align-items: center;
-  }
-}
-.message-input-container-h5 {
-  flex: 1;
-  height: auto;
-  background: #f4f5f9;
-  border-radius: 9.4Px;
-  padding: 7Px 0Px 7Px 10Px;
-  font-size: 16Px !important;
-  max-height: 86Px;
-  margin-right: 7Px;
-}
-</style>
-<style lang="scss">
-.ProseMirror {
-  min-height: 100%;
-  height: fit-content;
-  flex: 1;
-  font-size: 14Px;
-  word-wrap: break-word;
-  word-break: break-all;
-  white-space: pre-wrap;
-  div,
-  ul,
-  ol,
-  dl,
-  dt,
-  dd,
-  li,
-  dl,
-  h1,
-  h2,
-  h3,
-  h4,
-  p {
-    margin: 0;
-    padding: 0;
-    font-style: normal;
-  }
-  p {
-    * {
-      vertical-align: bottom;
-    }
-  }
-  -webkit-user-select: text;
-  user-select: text;
-  &-focused {
-    border: none;
-    outline: none;
-  }
-  img {
-    &.ProseMirror-selectednode {
-      outline: 2Px solid #68cef8;
-    }
-  }
-
-  .custom-image {
-    &-normal {
-      max-height: 120Px;
-      max-width: 200Px;
-    }
-    &-file {
-      height: 50Px;
-      width: 160Px;
-      border: 1Px solid #e8e8e9;
-      border-radius: 5Px;
-    }
-    &-emoji {
-      height: 20Px;
-      width: 20Px;
-    }
-  }
-
-  .ProseMirror-selectednode {
-    outline: 2Px solid #68cef8;
-    cursor: none;
-  }
-  p,
-  [contenteditable] {
-    -webkit-user-select: text;
-    user-select: text;
-  }
-
-  // placeholder style
-  p.is-editor-empty:first-child::before {
-    color: #adb5bd;
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/message-input/message-input-file.ts

@@ -1,43 +0,0 @@
-import Image from '@tiptap/extension-image'
-import { mergeAttributes } from '@tiptap/core'
-
-export default Image.extend({
-  name: 'custom-image',
-
-  addAttributes() {
-    return {
-      ...(Image.config as any).addAttributes(),
-      class: {
-        default: 'image',
-        rendered: false,
-      },
-    }
-  },
-
-  addCommands() {
-    return {
-      setImage: (options) => ({ tr, commands }) => {
-        if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
-          return commands.updateAttributes('custom-image', options)
-        }
-        else {
-          return commands.insertContent({
-            type: this.name,
-            attrs: options
-          })
-        }
-      },
-    }
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    HTMLAttributes.class = 'custom-image-' + node.attrs.class;
-
-    return [
-      'img',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
-    ]
-  }
-})
-
-

src/TUIKit/TUIComponents/container/TUIChat-temp/message-input/message-input-reference-or-reply.vue

@@ -1,221 +0,0 @@
-<template>
-  <div
-    :class="[
-      replyOrReference?.show === 'reference' && 'message-input-reference',
-      replyOrReference?.show === 'reply' && 'message-input-reply',
-      isH5 &&
-        replyOrReference?.show === 'reference' &&
-        'message-input-reference-h5',
-      isH5 && replyOrReference?.show === 'reply' && 'message-input-reply-h5'
-    ]"
-    v-if="replyOrReference?.show"
-  >
-    <div class="reference" v-if="replyOrReference?.show === 'reference'">
-      <div class="reference-box">
-        <div class="reference-box-show">
-          <span class="reference-box-show-name">
-            {{
-              replyOrReference?.message?.nick
-                ? replyOrReference?.message?.nick
-                : replyOrReference?.message?.from
-            }}:
-          </span>
-          <span>{{ replyOrReference?.content }}</span>
-        </div>
-        <label class="icon icon-cancel" @click="close"></label>
-      </div>
-    </div>
-    <div class="reply" v-else-if="replyOrReference?.show === 'reply'">
-      <div class="reply-box">
-        <i></i>
-        <div class="reply-box-show">
-          <span>
-            {{
-              replyOrReference?.message?.nick
-                ? replyOrReference?.message?.nick
-                : replyOrReference?.message?.from
-            }}{{ isH5 ? ':' : '' }}
-          </span>
-          <span>{{ replyOrReference?.content }}</span>
-        </div>
-        <label class="icon icon-cancel" @click="close"></label>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, toRefs, defineEmits } from 'vue';
-const props = defineProps({
-  replyOrReference: {
-    type: Object,
-    default: () => ({})
-  },
-  isH5: {
-    type: Boolean,
-    default: false
-  }
-});
-const emit = defineEmits(['resetReplyOrReference']);
-const { replyOrReference, isH5 } = toRefs(props);
-const close = () => {
-  emit('resetReplyOrReference');
-};
-</script>
-<style lang="scss" scoped>
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-.message-input-reference {
-  order: 1;
-  .reference {
-    width: auto;
-    padding-bottom: 0Px;
-    margin: 0Px 100Px 10Px 10Px;
-    display: flex;
-
-    &-box {
-      padding: 0;
-      overflow: hidden;
-      width: max-content;
-      padding: 10Px;
-      background-color: #fbfbfb;
-      display: flex;
-      border-radius: 8Px;
-
-      label {
-        cursor: pointer;
-        margin-top: 5Px;
-      }
-
-      &-show {
-        width: max-content;
-        padding-right: 10Px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        flex: 1;
-
-        &-name {
-          padding-right: 5Px;
-        }
-
-        span {
-          width: max-content;
-          font-family: 'PingFang SC';
-          font-style: normal;
-          font-weight: 400;
-          font-size: 12Px;
-          line-height: 17Px;
-          color: #666666;
-        }
-      }
-    }
-  }
-}
-.message-input-reply {
-  order: -1;
-  .reply {
-    display: flex;
-    width: 100%;
-
-    &-box {
-      flex: 1;
-      align-items: center;
-      display: flex;
-      padding: 0 10Px;
-
-      i {
-        height: 3.5rem;
-        border: 1Px solid #e8e8e9;
-      }
-
-      label {
-        cursor: pointer;
-        margin-top: 5Px;
-      }
-
-      &-show {
-        flex: 1;
-        display: flex;
-        width: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex-direction: column;
-        justify-content: center;
-        padding-left: 6Px;
-
-        span {
-          height: 1.25rem;
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          font-size: 0.88rem;
-          color: #bfc1c5;
-          letter-spacing: 0;
-          text-overflow: ellipsis;
-          width: 100%;
-          overflow: hidden;
-        }
-      }
-    }
-  }
-}
-
-.message-input-reply-h5 {
-  order: -1;
-  flex: 1 0 100%;
-  padding-bottom: 10Px;
-  .reply {
-    &-box {
-      padding: 0;
-      i {
-        display: none;
-      }
-      &-show {
-        flex-direction: row;
-        span {
-          width: auto;
-        }
-        span:first-child {
-          padding-right: 2Px;
-        }
-        span:last-child {
-          flex: 1;
-        }
-      }
-    }
-  }
-}
-.message-input-reference-h5 {
-  order: 1;
-  flex: 1 0 100%;
-  overflow: hidden;
-  width: 100%;
-  max-width: 100%;
-  margin: 0;
-  .reference {
-    margin: 0;
-    &-box {
-      overflow: hidden;
-      padding: 0;
-      width: 100%;
-      max-width: 100%;
-      padding: 10Px;
-      margin: 5Px 0;
-
-      &-show {
-        overflow: hidden;
-        width: 0;
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        text-overflow: ellipsis;
-
-        span:last-child {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/call/call.vue

@@ -1,343 +0,0 @@
-<template>
-  <div class="call" id="call" v-if="handleShowCallIcon(conversation, isH5)">
-    <div class="call-icon" @click="toggleShowSelectDialog">
-      <i class="icon icon-call" title="通话"></i>
-      <i class="icon icon-down-arrow" title="通话"></i>
-    </div>
-    <div
-      class="call-main"
-      :class="[isH5 && 'call-main-h5']"
-      v-show="showSelectDialog"
-    >
-      <div class="call-main-content" ref="dialog">
-        <div class="call-main-voice" @click="onClickCall(1)">
-          <i class="icon icon-call-voice" v-if="isH5"></i>
-          {{ $t('TUIChat.语音通话') }}
-        </div>
-        <div class="call-main-video" @click="onClickCall(2)">
-          <i class="icon icon-call-video" v-if="isH5"></i>
-          {{ $t('TUIChat.视频通话') }}
-        </div>
-        <footer>
-          <span
-            v-if="isH5"
-            class="close"
-            @click.stop="showSelectDialog = false"
-          >
-            {{ $t('TUIChat.取消') }}
-          </span>
-        </footer>
-      </div>
-    </div>
-    <DialogTUI
-      :show="showGroupUserDialog"
-      :isH5="isH5"
-      :isHeaderShow="false"
-      :isFooterShow="false"
-      :background="false"
-      @update:show="(e: boolean) => (showGroupUserDialog = e)"
-    >
-      <Transfer
-        :isSearch="true"
-        :title="showTitle"
-        :list="searchUserList"
-        :isH5="isH5"
-        :isRadio="conversation?.type === 'isC2C'"
-        @search="handleSearch"
-        @submit="submit"
-        @cancel="cancle"
-      />
-    </DialogTUI>
-    <DialogTUI
-      :show="showUnsupportDialog"
-      :isH5="isH5"
-      :isHeaderShow="true"
-      :isFooterShow="true"
-      :background="true"
-      :title="$t('TUIChat.欢迎使用TUICallKit')"
-      @update:show="(e: boolean) => (showUnsupportDialog = e)"
-    >
-      <div>
-        <div class="uncall-dialog-body">
-          <p>
-            {{ errorContent }}
-          </p>
-          <p v-show="Object.keys(errorLink).length > 0">
-            {{ $t('TUIChat.请点击') }}
-            <a @click="openLink(errorLink?.url)">
-              {{ $t(`TUIChat.${errorLink?.label}`) }}
-            </a>
-            {{ $t('TUIChat.进行体验') }}
-          </p>
-        </div>
-      </div>
-    </DialogTUI>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  reactive,
-  watchEffect,
-  toRefs,
-  ref,
-  watch
-} from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import { Conversation } from '../../../TUIConversation/interface';
-import DialogTUI from '../../../../components/dialog';
-import Transfer from '../../../../components/transfer';
-import Link from '../../../../../utils/link/index';
-import { useStore } from 'vuex';
-
-const Call = defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false
-    },
-    isMute: {
-      type: Boolean,
-      default: () => false
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false
-    },
-    conversation: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  components: {
-    DialogTUI,
-    Transfer
-  },
-  setup(props: any, ctx: any) {
-    const { t } = Call.TUIServer.TUICore.config.i18n.useI18n();
-    const VuexStore =
-      ((window as any)?.TUIKitTUICore?.isOfficial && useStore && useStore()) ||
-      {};
-    const data = reactive({
-      showSelectDialog: false,
-      showCall: false,
-      showGroupUserDialog: false,
-      isH5: false,
-      isMute: false,
-      isHomeMenuOpen: false,
-      conversation: {} as Conversation,
-      showTitle: '',
-      searchUserList: [],
-      memberList: [],
-      mediaType: 0,
-      showUnsupportDialog: false,
-      errorContent: '',
-      errorLink: {}
-    });
-
-    const dialog: any = ref();
-
-    watchEffect(() => {
-      data.showSelectDialog = props.show;
-      data.isMute = props.isMute;
-      data.isH5 = props.isH5;
-      data.conversation = props.conversation;
-    });
-
-    watch(
-      () => data.showCall,
-      (newVal: boolean, oldVal: boolean) => {
-        if (newVal === oldVal) return;
-        if (data.showCall) {
-          handleCallDialogPosition();
-        }
-      }
-    );
-
-    const toggleShowSelectDialog = () => {
-      if (!data.isMute) {
-        data.showSelectDialog = true;
-      }
-    };
-
-    onClickOutside(dialog, () => {
-      data.showSelectDialog = false;
-    });
-
-    const handleCallDialogPosition = () => {
-      data.isHomeMenuOpen =
-        !!document?.getElementsByClassName('home-menu')?.length;
-    };
-
-    const onClickCall = (mediaType: number) => {
-      data.showSelectDialog = false;
-      data.mediaType = mediaType;
-      if (!Call?.TUIServer?.TUICore?.TUIServer?.TUICallKit) {
-        handleUnsupportDialog();
-        return;
-      }
-      (window as any)?.TUIKitTUICore?.isOfficial &&
-        VuexStore?.commit &&
-        VuexStore?.commit('handleTask', 6);
-      switch (data.conversation?.type) {
-        case Call.TUIServer.TUICore.TIM.TYPES.CONV_C2C:
-          handleCall(data.conversation, mediaType);
-          break;
-        case Call.TUIServer.TUICore.TIM.TYPES.CONV_GROUP:
-          handleGroupDialog(mediaType);
-          break;
-        default:
-          break;
-      }
-    };
-
-    const handleCall = async (
-      conversation: Conversation,
-      mediaType: number,
-      userIDList: Array<string> = []
-    ) => {
-      const conversationType = conversation.type;
-      switch (conversationType) {
-        case Call.TUIServer.TUICore.TIM.TYPES.CONV_C2C:
-          try {
-            await Call.TUIServer.TUICore.TUIServer.TUICallKit.call({
-              userID: conversation?.userProfile?.userID,
-              type: mediaType
-            });
-          } catch (error) {
-            handleUnsupportDialog(error);
-          }
-          break;
-        case Call.TUIServer.TUICore.TIM.TYPES.CONV_GROUP:
-          try {
-            await Call.TUIServer.TUICore.TUIServer.TUICallKit.groupCall({
-              userIDList,
-              groupID: conversation?.groupProfile?.groupID,
-              type: mediaType
-            });
-          } catch (error) {
-            handleUnsupportDialog(error);
-          }
-          break;
-        default:
-          break;
-      }
-    };
-
-    const handleShowCallIcon = (conversation: Conversation, isH5: boolean) => {
-      // 目前暂不支持H5版本 / H5 version is not currently supported
-      // if (isH5) return false;
-      // 目前暂不支持群通话 / GROUP_CALL is not currently supported
-      // if (conversation.type === Call.TUIServer.TUICore.TIM.TYPES.CONV_GROUP) return false;
-      if (
-        conversation.type === Call.TUIServer.TUICore.TIM.TYPES.CONV_C2C &&
-        conversation?.userProfile?.userID ===
-          Call?.TUIServer?.TUICore?.TUIServer?.TUIProfile?.currentStore?.profile
-            ?.userID
-      ) {
-        return false;
-      }
-      return true;
-    };
-
-    const handleGroupDialog = (mediaType: number) => {
-      data.showGroupUserDialog = true;
-      data.showTitle =
-        mediaType === 1 ? t('TUIChat.发起群语音') : t('TUIChat.发起群视频');
-      const options: any = {
-        groupID: data?.conversation?.groupProfile?.groupID,
-        count: 100,
-        offset: 0
-      };
-      Call?.TUIServer?.TUICore?.TUIServer?.TUIGroup?.getGroupMemberList(
-        options
-      )?.then((res: any) => {
-        const myUserID: any = data.conversation?.groupProfile?.selfInfo?.userID;
-        let memberList = [];
-        if (data?.conversation?.groupProfile?.muteAllMembers) {
-          memberList = [];
-        } else {
-          const time: number = new Date().getTime();
-          memberList = res.data.memberList.filter((item: any) => {
-            if (item?.userID === myUserID) return false;
-            if ((item as any)?.muteUntil * 1000 - time > 0) {
-              return false;
-            }
-            return item;
-          });
-        }
-        if (data?.conversation?.groupProfile?.muteAllMembers) {
-          memberList = [];
-        }
-        data.memberList = memberList;
-        data.searchUserList = memberList;
-      });
-    };
-
-    const handleSearch = async (val: any) => {
-      const user = data.memberList?.filter((item: any) => item?.userID === val);
-      data.searchUserList = user?.length ? user : data.memberList;
-    };
-
-    const submit = (userList: any) => {
-      data.searchUserList = data.memberList;
-      data.showGroupUserDialog = false;
-      const userIDList = userList?.map((item: any) => item?.userID);
-      handleCall(data.conversation, data.mediaType, userIDList);
-    };
-
-    const cancle = () => {
-      data.showGroupUserDialog = false;
-      data.mediaType = 0;
-    };
-
-    const openLink = (url: any) => {
-      if (url) {
-        window.open(url);
-      }
-    };
-
-    const handleUnsupportDialog = (error?: any) => {
-      if (!error) {
-        data.showUnsupportDialog = true;
-        data.errorContent = t(
-          'TUIChat.检测到您暂未集成TUICallKit，无法体验音视频通话功能'
-        );
-        data.errorLink = Link.implement;
-      } else if (
-        error?.message?.indexOf(
-          'The package you purchased does not support this ability.'
-        ) >= 0
-      ) {
-        data.showUnsupportDialog = true;
-        data.errorContent = t('TUIChat.您当前购买使用的套餐包暂未开通此功能');
-        data.errorLink = Link.purchase;
-      } else {
-        data.errorContent = error?.message || error;
-        data.showUnsupportDialog = false;
-        data.errorLink = {};
-      }
-    };
-
-    return {
-      ...toRefs(data),
-      toggleShowSelectDialog,
-      dialog,
-      onClickCall,
-      handleCallDialogPosition,
-      handleCall,
-      handleGroupDialog,
-      handleSearch,
-      submit,
-      cancle,
-      handleShowCallIcon,
-      openLink,
-      handleUnsupportDialog
-    };
-  }
-});
-export default Call;
-</script>
-
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/call/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/call/style/h5.scss

@@ -1,45 +0,0 @@
-.call {
-  &-main-h5 {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 100vw;
-    height: auto;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: 0;
-    background: rgba(0, 0, 0, 0.5);
-    box-shadow: 0 2Px 12Px 0 rgb(0 0 0 / 10%);
-
-    .call-main-content {
-      border-radius: 12Px 12Px 0 0;
-      background-color: #ffffff;
-    }
-
-    .call-main-voice,
-    .call-main-video {
-      height: 30Px;
-      padding: 10Px;
-      font-size: 16Px;
-      border-bottom: 1Px solid #f7f8fa;
-      display: flex;
-      justify-content: center;
-
-      i {
-        margin-right: 10Px;
-      }
-    }
-
-    footer {
-      border-top: 10Px solid #f7f8fa;
-      height: 30Px;
-      font-size: 16Px;
-      padding: 10Px;
-      text-align: center;
-      align-items: center;
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/call/style/index.scss

@@ -1,4 +0,0 @@
-@import url('../../../../../styles/common.scss');
-@import url('../../../../../styles/icon.scss');
-@import './web.scss';
-@import './h5.scss';

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/call/style/web.scss

@@ -1,94 +0,0 @@
-.call {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-
-  &-icon {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-
-    .icon-down-arrow {
-      margin: 12Px 1Px 0;
-    }
-  }
-
-  &-main {
-    position: absolute;
-    z-index: 5;
-    background: #ffffff;
-    top: 37Px;
-    left: calc(-50% + 20Px);
-    border-radius: 2Px;
-    display: flex;
-    flex-direction: column;
-    width: 80Px;
-    border: 0.5Px solid #e0e0e0;
-    box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
-
-    &-voice,
-    &-video {
-      height: 34Px;
-      text-align: center;
-      font-size: 13Px;
-      line-height: 34Px;
-      align-items: center;
-    }
-
-    &-voice:hover,
-    &-video:hover {
-      background: #dceafd;
-    }
-  }
-
-  &-main:before {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: calc(50% - 9Px);
-    border-left: 7Px solid transparent;
-    border-right: 7Px solid transparent;
-    border-bottom: 7Px solid #e0e0e0;
-  }
-
-  &-main:after {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: calc(50% - 8Px);
-    border-left: 6Px solid transparent;
-    border-right: 6Px solid transparent;
-    border-bottom: 6Px solid #ffffff;
-  }
-
-  .uncall-dialog {
-    width: 500Px;
-    height: 300Px;
-    background: linear-gradient(180deg, #e9f3ff 0%, #f4f8ff 100%);
-    border-radius: 20Px;
-
-    &-body {
-      a {
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        color: #006eff;
-        letter-spacing: 0;
-      }
-    }
-  }
-}
-
-.call-kit-container {
-  position: fixed;
-  left: calc(50% - 25rem);
-  top: calc(50% - 18rem);
-  width: 50rem;
-  height: 36rem;
-  border-radius: 16Px;
-  box-shadow: rgba(0, 0, 0, 0.16) 0Px 3Px 6Px, rgba(0, 0, 0, 0.23) 0Px 3Px 6Px;
-
-  &-left {
-    left: calc(50% - 25rem + 150Px);
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/custom/Custom.vue

@@ -1,165 +0,0 @@
-<template>
-  <div class="custom">
-    <i class="icon icon-custom" @click="toggleShow"></i>
-    <main class="custom-main" v-if="show">
-      <ul class="custom-list">
-        <li class="custom-list-item">
-          <label>data</label>
-          <input type="text" v-model="custom.data" />
-        </li>
-        <li class="custom-list-item">
-          <label>description</label>
-          <input type="text" v-model="custom.description" />
-        </li>
-        <li class="custom-list-item">
-          <label>extension</label>
-          <input type="text" v-model="custom.extension" />
-        </li>
-      </ul>
-      <ul class="custom-footer">
-        <button class="btn btn-cancel" @click="cancel">{{ $t('取消') }}</button>
-        <button
-          class="btn btn-default"
-          :disabled="!custom.data && !custom.description && custom.extension"
-          @click="submit"
-        >
-          {{ $t('发送') }}
-        </button>
-      </ul>
-    </main>
-    <div v-if="show" class="mask" @click.self="toggleShow"></div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs } from 'vue';
-
-const Custom = defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      show: false,
-      custom: {
-        data: '',
-        description: '',
-        extension: ''
-      },
-      TUIServer: null
-    });
-
-    data.TUIServer = Custom.TUIServer;
-
-    watchEffect(() => {
-      data.show = props.show;
-    });
-
-    const toggleShow = () => {
-      data.show = !data.show;
-    };
-
-    const cancel = () => {
-      data.custom = {
-        data: '',
-        description: '',
-        extension: ''
-      };
-      toggleShow();
-    };
-
-    const submit = () => {
-      Custom.TUIServer.sendCustomMessage(data.custom);
-      cancel();
-    };
-
-    return {
-      ...toRefs(data),
-      toggleShow,
-      cancel,
-      submit
-    };
-  }
-});
-export default Custom;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../../../styles/common.scss');
-@import url('../../../../../styles/icon.scss');
-.custom {
-  display: inline-block;
-  position: relative;
-  &-main {
-    position: absolute;
-    z-index: 5;
-    width: 315Px;
-    background: #ffffff;
-    top: -180Px;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-    padding: 10Px;
-    display: flex;
-    flex-direction: column;
-  }
-  &-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    &-item {
-      padding-bottom: 15Px;
-      label {
-        width: 88Px;
-        font-size: 18Px;
-        padding: 0 20Px;
-        display: inline-block;
-      }
-      input {
-        flex: 1;
-        height: 24Px;
-        padding: 0 10Px;
-        border: 1Px solid #dddddd;
-        border-radius: 5Px;
-      }
-    }
-  }
-  &-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
-}
-.btn {
-  padding: 8Px 20Px;
-  border-radius: 4Px;
-  border: none;
-  font-weight: 400;
-  font-size: 14Px;
-  color: #ffffff;
-  letter-spacing: 0;
-  text-align: center;
-  line-height: 20Px;
-  &-cancel {
-    border: 1Px solid #dddddd;
-    color: #666666;
-  }
-  &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
-  }
-  &:disabled {
-    opacity: 0.3;
-  }
-}
-.mask {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/custom/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/evaluate/evaluate.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="evaluate" :class="[isH5 && 'evaluate-H5']">
-    <i class="icon icon-evaluate" title="服务评价" @click.stop="toggleShow"></i>
-    <main class="evaluate-main" v-if="show && !isMute">
-      <div class="evaluate-main-content" ref="dialog">
-        <header>
-          <aside>
-            <h1>{{ $t('Evaluate.请对本次服务进行评价') }}</h1>
-            <p v-if="isH5">
-              {{ $t('Evaluate.服务评价工具') }}（{{ $t('Evaluate.使用')
-              }}<a @click="openLink(Link.customMessage)">{{ $t(`Evaluate.${Link.customMessage.label}`) }}</a
-              >{{ $t('Evaluate.搭建') }}）
-            </p>
-          </aside>
-          <span v-if="isH5" class="close" @click.stop="toggleShow">关闭</span>
-        </header>
-        <div class="evaluate-content">
-          <ul class="evaluate-list">
-            <li
-              class="evaluate-list-item"
-              :class="[index < num && 'small-padding', isH5 && 'evaluate-item']"
-              v-for="(item, index) in list"
-              :key="index"
-              @click.stop="select(item, index)"
-            >
-              <i class="icon icon-star-light" v-if="index < num"></i>
-              <i class="icon icon-star" v-else></i>
-            </li>
-          </ul>
-          <textarea v-model="options.data.comment"></textarea>
-          <div class="evaluate-main-footer">
-            <button class="btn" @click="submit">{{ $t('Evaluate.提交评价') }}</button>
-          </div>
-        </div>
-        <footer v-if="!isH5">
-          {{ $t('Evaluate.服务评价工具') }}（{{ $t('Evaluate.使用')
-          }}<a @click="openLink(Link.customMessage)">{{ $t(`Evaluate.${Link.customMessage.label}`) }}</a
-          >{{ $t('Evaluate.搭建') }}）
-        </footer>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script lang="ts">
-import { onClickOutside } from '@vueuse/core';
-import { defineComponent, reactive, watchEffect, toRefs, ref } from 'vue';
-import Link from '../../../../../utils/link';
-import constant from '../../../constant';
-import { handleOptions } from '../../utils/utils';
-
-const Evaluate = defineComponent({
-  type: 'custom',
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-    isMute: {
-      type: Boolean,
-      default: () => false,
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      link: 'https://web.sdk.qcloud.com/im/doc/zh-cn//SDK.html#createCustomMessage',
-      list: 5,
-      show: false,
-      isMute: false,
-      options: {
-        data: {
-          businessID: constant.typeEvaluate,
-          version: 1,
-          score: '',
-          comment: '',
-        },
-        description: '对本次的服务评价',
-        extension: '对本次的服务评价',
-      },
-      num: 0,
-    });
-
-    const dialog: any = ref();
-
-    onClickOutside(dialog, () => {
-      data.show = false;
-    });
-
-    watchEffect(() => {
-      data.show = props.show;
-      data.isMute = props.isMute;
-    });
-
-    const toggleShow = () => {
-      data.show = !data.show;
-      if (data.show) {
-        data.options = {
-          data: {
-            ...handleOptions(constant.typeEvaluate, 1, { score: '', comment: '' }),
-          },
-          description: '对本次的服务评价',
-          extension: '对本次的服务评价',
-        };
-        data.num = 0;
-      }
-    };
-
-    const select = (item: any, index: number) => {
-      data.num = index + 1;
-      (data.options.data as any).score = `${data.num}`;
-    };
-
-    const submit = () => {
-      Evaluate.TUIServer.sendCustomMessage(data.options);
-      toggleShow();
-    };
-    const openLink = (type: any) => {
-      window.open(type.url);
-    };
-    return {
-      ...toRefs(data),
-      toggleShow,
-      select,
-      submit,
-      dialog,
-      Link,
-      openLink,
-    };
-  },
-});
-export default Evaluate;
-</script>
-
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/evaluate/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/evaluate/style/color.scss

@@ -1,64 +0,0 @@
-.evaluate {
-  &-main {
-    background: #ffffff;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-
-    header {
-      font-weight: 500;
-      color: #1c1c1c;
-    }
-
-    footer {
-      font-weight: 500;
-      color: #999999;
-
-      a {
-        color: #006eff;
-      }
-    }
-  }
-
-  &-content {
-    textarea {
-      background: #f8f8f8;
-      border: 1Px solid #ececec;
-    }
-
-    .btn {
-      background: #3370ff;
-      font-weight: 400;
-      color: #ffffff;
-      cursor: pointer;
-    }
-  }
-
-  &-list {
-    &-item {
-      font-weight: 400;
-      color: #50545c;
-    }
-  }
-
-  &-H5 {
-    &-main {
-      background: rgba(0, 0, 0, 0.5);
-
-      .evaluate-main-content {
-        background: #ffffff;
-
-        p {
-          a {
-            color: #3370ff;
-          }
-        }
-
-        .close {
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          color: #3370ff;
-          letter-spacing: 0;
-        }
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/evaluate/style/h5.scss

@@ -1,81 +0,0 @@
-.evaluate-H5 {
-  display: inline-block;
-  position: relative;
-  cursor: auto;
-
-  .evaluate-main {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 100vw;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    background: rgba(0, 0, 0, 0.5);
-    padding: 0;
-
-    .evaluate-main-content {
-      background: #ffffff;
-      padding: 23Px;
-
-      header {
-        display: flex;
-        justify-content: space-between;
-
-        aside {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          font-size: 16Px;
-          line-height: 28Px;
-
-          h1 {
-            font-size: 20Px;
-          }
-        }
-
-        .close {
-          font-size: 18Px;
-          line-height: 27Px;
-        }
-      }
-
-      .evaluate-item {
-        width: 40Px;
-        height: 24Px;
-        text-align: center;
-        cursor: auto;
-        // padding: 4Px 0;
-        font-size: 12Px;
-      }
-
-      .evaluate-content {
-        background: none;
-
-        .evaluate-list-item {
-          .icon {
-            transform: scale(1.5);
-          }
-        }
-      }
-
-      textarea {
-        font-size: 16Px;
-        width: 100%;
-      }
-    }
-
-    .evaluate-main-footer {
-      width: 100%;
-      display: flex;
-
-      .btn {
-        flex: 1;
-        padding: 14Px 0;
-        font-size: 18Px;
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/evaluate/style/index.scss

@@ -1,5 +0,0 @@
-@import './color.scss';
-@import './web.scss';
-@import './h5.scss';
-@import url('../../../../../styles/common.scss');
-@import url('../../../../../styles/icon.scss');

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/evaluate/style/web.scss

@@ -1,81 +0,0 @@
-.evaluate {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-
-  .icon-evaluate {
-    margin: 12Px 10Px 0;
-  }
-
-  &-main {
-    position: absolute;
-    z-index: 5;
-    width: 315Px;
-    top: -275Px;
-    padding: 12Px;
-    display: flex;
-    flex-direction: column;
-
-    header {
-      h1 {
-        font-size: 12Px;
-        text-align: center;
-      }
-    }
-
-    footer {
-      font-size: 12Px;
-      text-align: center;
-    }
-  }
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 12Px 0;
-    background: url('https://web.sdk.qcloud.com/im/assets/images/login-background.png') no-repeat;
-    background-size: cover;
-    background-position-x: 128Px;
-    background-position-y: 77Px;
-
-    textarea {
-      box-sizing: border-box;
-      width: 288Px;
-      height: 90Px;
-      margin: 12Px 0;
-      padding: 12Px;
-      border-radius: 2Px;
-      resize: none;
-    }
-
-    .btn {
-      border: none;
-      border-radius: 5Px;
-      font-size: 12Px;
-      text-align: center;
-      line-height: 24Px;
-      padding: 2Px 46Px;
-      cursor: pointer;
-    }
-  }
-
-  &-list {
-    flex: 1;
-    display: flex;
-
-    &-item {
-      width: 24Px;
-      height: 24Px;
-      text-align: center;
-      cursor: pointer;
-      padding: 4Px 0;
-      font-size: 12Px;
-      padding-right: 15Px;
-
-      &:last-child {
-        padding-right: 0 !important;
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/face/Face.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="face" id="face">
-    <i class="icon icon-face" title="表情" @click="toggleShow"></i>
-    <main class="face-main" :class="[isH5 && 'face-H5-main']" v-show="show" ref="dialog">
-      <ul class="face-list" v-for="(item, index) in list" :key="index" v-show="currentIndex === index">
-        <li
-          class="face-list-item"
-          v-for="(childrenItem, childrenIndex) in item"
-          :key="childrenIndex"
-          @click="select(childrenItem, childrenIndex)"
-        >
-          <img v-if="index === 0" :src="emojiUrl + emojiMap[childrenItem]" />
-          <img class="face-img" v-else :src="faceUrl + childrenItem + '@2x.png'" />
-        </li>
-      </ul>
-      <ul class="face-tab">
-        <li class="face-tab-item" @click="selectFace(0)">
-          <i class="icon icon-face"></i>
-        </li>
-        <li class="face-tab-item" v-for="(item, index) in bigEmojiList" :key="index" @click="selectFace(index + 1)">
-          <img :src="faceUrl + item.list[0] + '@2x.png'" />
-        </li>
-      </ul>
-    </main>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs, computed, ref } from 'vue';
-import { emojiUrl, emojiMap, emojiName, faceUrl, bigEmojiList } from '../../utils/emojiMap';
-import { onClickOutside } from '@vueuse/core';
-import { handleErrorPrompts } from '../../../utils';
-
-const Face = defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-    isMute: {
-      type: Boolean,
-      default: () => false,
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false,
-    },
-    parentID: {
-      type: String,
-      default: () => '',
-    },
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      emojiUrl,
-      emojiMap,
-      emojiName,
-      faceUrl,
-      bigEmojiList:(window as any)?.TUIKitTUICore?.isOfficial && bigEmojiList || [],
-      show: false,
-      currentIndex: 0,
-      isMute: false,
-      transDom: false,
-    });
-
-    const dialog: any = ref();
-
-    watchEffect(() => {
-      data.show = props.show;
-      data.isMute = props.isMute;
-    });
-
-    const toggleShow = () => {
-      const main: any = document.getElementsByClassName('face-main')[0];
-      if (!data.isMute) {
-        main.style.display = main.style.display === 'none' ? 'flex' : 'none';
-      }
-      if (main.style.display === 'none') {
-        selectFace(0);
-      }
-      toggleH5Show();
-    };
-
-    const toggleH5Show = () => {
-      const parent = document.getElementById(props.parentID);
-      const main = document.getElementsByClassName('face-H5-main')[0];
-      if (props.isH5) {
-        parent?.appendChild(main);
-      }
-    };
-
-    onClickOutside(dialog, () => {
-      const main: any = document.getElementsByClassName('face-main')[0];
-      if (main) {
-        main.style.display = 'none';
-      }
-    });
-
-    const select = async (item: string, index: number) => {
-      const options: any = {
-        name: item,
-      };
-      if (data.currentIndex === 0) {
-        options.type = 'emo';
-        options.url = emojiUrl + emojiMap[item];
-        options.template = `<img src="${emojiUrl + emojiMap[item]}">`;
-        if (!props.isH5) {
-          toggleShow();
-        }
-        return ctx.emit('send', options);
-      }
-      try {
-        await Face.TUIServer.sendFaceMessage({
-          // Change large expression display field
-          index: data.bigEmojiList[data.currentIndex - 1].icon,
-          data: data.bigEmojiList[data.currentIndex - 1].list[index],
-        });
-      } catch (error) {
-        handleErrorPrompts(error, props);
-      }
-      if (!props.isH5) {
-        toggleShow();
-      }
-    };
-
-    const list = computed(() => {
-      const emojiList = [data.emojiName];
-      for (let i = 0; i < data.bigEmojiList.length; i++) {
-        emojiList.push(data.bigEmojiList[i].list);
-      }
-      return emojiList;
-    });
-
-    const selectFace = (index: number) => {
-      data.currentIndex = index;
-    };
-
-    return {
-      ...toRefs(data),
-      toggleShow,
-      select,
-      selectFace,
-      list,
-      dialog,
-    };
-  },
-});
-export default Face;
-</script>
-
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/face/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/face/style/color.scss

@@ -1,6 +0,0 @@
-.face {
-  &-main {
-    background: #ffffff;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/face/style/h5.scss

@@ -1,7 +0,0 @@
-.face-H5 {
-  &-main {
-    position: static !important;
-    width: 100%;
-    box-shadow: none;
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/face/style/index.scss

@@ -1,5 +0,0 @@
-@import './color.scss';
-@import './web.scss';
-@import './h5.scss';
-@import url('../../../../../styles/common.scss');
-@import url('../../../../../styles/icon.scss');

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/face/style/web.scss

@@ -1,48 +0,0 @@
-.face {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-
-  &-main {
-    position: absolute;
-    z-index: 5;
-    width: 435Px;
-    height: 250Px;
-    top: -270Px;
-    padding: 10Px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-list {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    overflow-y: auto;
-
-    &-item {
-      padding: 5Px;
-    }
-
-    img {
-      width: 30Px;
-    }
-
-    .face-img {
-      width: 60Px;
-    }
-  }
-
-  &-tab {
-    display: flex;
-    align-items: center;
-
-    &-item {
-      padding: 0 10Px;
-
-      img {
-        width: 30Px;
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/file/file.vue

@@ -1,72 +0,0 @@
-<template>
-  <span class="upload-btn icon icon-files">
-      <input title="文件" v-if="!isMute" type="file" data-type="file" accept="*" @change="sendUploadMessage" />
-      <slot />
-  </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
-import { handleErrorPrompts } from '../../../utils';
-
-const File = defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-    isMute: {
-      type: Boolean,
-      default: () => false,
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  setup(props:any, ctx:any) {
-    const data = reactive({
-      isMute: false,
-    });
-
-    watchEffect(() => {
-      data.isMute = props.isMute;
-    });
-
-    // 发送需要上传的消息：文件
-    const sendUploadMessage = async (e:any) => {
-      if (e.target.files.length > 0) {
-        try {
-          await File.TUIServer.sendFileMessage(e.target);
-        } catch (error) {
-          handleErrorPrompts(error, props);
-        }
-      }
-      e.target.value = '';
-    };
-
-    return {
-      ...toRefs(data),
-      sendUploadMessage,
-    };
-  },
-});
-export default File;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
-.upload-btn {
-  position: relative;
-  input {
-    position: absolute;
-    cursor: pointer;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/file/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/forward/forward.vue

@@ -1,169 +0,0 @@
-<template>
-  <div>
-    <div
-      class="forward"
-      :class="[isH5 ? 'forward-h5' : '']"
-      v-if="show"
-      ref="dialog"
-    >
-      <Transfer
-        title="转发"
-        :list="list"
-        :isSearch="false"
-        :isH5="isH5"
-        :isCustomItem="true"
-        :resultShow="true"
-        @submit="handleForWordMessage"
-        @cancel="toggleShow"
-      >
-        <template #left="{ data }">
-          <slot name="left" :data="data" />
-        </template>
-        <template #right="{ data }">
-          <slot name="right" :data="data" />
-        </template>
-      </Transfer>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs, ref } from 'vue';
-import Transfer from '../../../../components/transfer/index.vue';
-import { handleErrorPrompts } from '../../../utils';
-import { onClickOutside } from '@vueuse/core';
-
-const Forward = defineComponent({
-  components: {
-    Transfer
-  },
-  name: '转发',
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    },
-    message: {
-      type: Object,
-      default: () => ({})
-    },
-    show: {
-      type: Boolean,
-      default: () => false
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      list: [],
-      show: false,
-      to: -1
-    });
-
-    const dialog: any = ref();
-
-    watchEffect(() => {
-      data.list = props.list;
-      data.show = props.show;
-    });
-
-    const toggleShow = () => {
-      data.show = !data.show;
-      if (!data.show) {
-        ctx.emit('update:show', data.show);
-        data.to = -1;
-      }
-    };
-
-    onClickOutside(dialog, () => {
-      data.show = false;
-      ctx.emit('update:show', data.show);
-      data.to = -1;
-    });
-
-    const handleForWordMessage = async (list: any) => {
-      list.map(async (item: any) => {
-        try {
-          await Forward.TUIServer.forwardMessage(props.message, item);
-        } catch (error) {
-          handleErrorPrompts(error, props);
-        }
-      });
-      toggleShow();
-    };
-
-    return {
-      ...toRefs(data),
-      toggleShow,
-      handleForWordMessage,
-      dialog
-    };
-  }
-});
-export default Forward;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
-.forward {
-  position: absolute;
-  z-index: 5;
-  box-sizing: border-box;
-  border-radius: 8Px;
-  padding: 15Px 20Px;
-  padding: 0;
-  left: -90Px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-  header {
-    padding: 20Px;
-    display: flex;
-    justify-content: space-between;
-  }
-  .list {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 20Px;
-    width: 100%;
-    height: 100%;
-    background: #ffffff;
-    overflow-y: auto;
-    list-style: none;
-    &-item {
-      display: flex;
-      align-items: center;
-      padding: 10Px;
-      &:hover {
-        background: #dddddd;
-      }
-      .avatar {
-        width: 36Px;
-        height: 36Px;
-        border-radius: 4Px;
-        font-size: 12Px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-  footer {
-    display: flex;
-    justify-content: space-around;
-    padding: 20Px 0;
-  }
-}
-.forward-h5 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/forward/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/image/image.vue

@@ -1,71 +0,0 @@
-<template>
-  <span class="upload-btn icon icon-image">
-      <input title="图片" v-if="!isMute" type="file" data-type="image" accept="image/*" @change="sendUploadMessage" />
-      <slot />
-  </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
-import { handleErrorPrompts } from '../../../utils';
-
-const Image = defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-    isMute: {
-      type: Boolean,
-      default: () => false,
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  setup(props:any, ctx:any) {
-    const data = reactive({
-      isMute: false,
-    });
-
-    watchEffect(() => {
-      data.isMute = props.isMute;
-    });
-    // 发送需要上传的消息：图片
-    const sendUploadMessage = async (e:any) => {
-      if (e.target.files.length > 0) {
-        try {
-          await Image.TUIServer.sendImageMessage(e.target);
-        } catch (error) {
-          handleErrorPrompts(error, props);
-        }
-      }
-      e.target.value = '';
-    };
-
-    return {
-      ...toRefs(data),
-      sendUploadMessage,
-    };
-  },
-});
-export default Image;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
-.upload-btn {
-  position: relative;
-  input {
-    position: absolute;
-    cursor: pointer;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/image/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/imagePreviewer/imagePreviewer.vue

@@ -1,416 +0,0 @@
-<template>
-  <div class="image-previewer" :class="[isH5 && 'image-previewer-h5']">
-    <div class="image-wrapper" ref="image">
-      <ul
-        class="image-list"
-        :style="{
-          width: `${imageList.length * 100}%`,
-          transform: `translateX(-${
-            (currentImageIndex * 100) / imageList.length
-          }%)`
-        }"
-        ref="ul"
-      >
-        <li class="image-item" v-for="(item, index) in imageList" :key="index">
-          <img
-            class="image-preview"
-            :style="{
-              transform: `scale(${zoom}) rotate(${rotate}deg)`
-            }"
-            :src="item?.payload?.imageInfoArray[0]?.url"
-          />
-        </li>
-      </ul>
-    </div>
-    <i class="icon icon-close" @click="close" v-show="!isH5" />
-    <div
-      class="image-button image-button-left"
-      v-show="!isH5 && currentImageIndex > 0"
-      @click="goPrev"
-    >
-      <i class="icon icon-left-arrow"></i>
-    </div>
-    <div
-      class="image-button image-button-right"
-      v-show="!isH5 && currentImageIndex < imageList?.length - 1"
-      @click="goNext"
-    >
-      <i class="icon icon-right-arrow"></i>
-    </div>
-    <div class="actions-bar">
-      <i class="icon icon-zoom-in" @click="zoomIn"></i>
-      <i class="icon icon-zoom-out" @click="zoomOut"></i>
-      <i class="icon icon-refresh-left" @click="rotateLeft"></i>
-      <i class="icon icon-refresh-right" @click="rotateRight"></i>
-      <span class="image-counter">
-        {{ currentImageIndex + 1 }} / {{ imageList.length }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import TUIEnv from '../../../../../TUIPlugin/TUIEnv';
-import {
-  defineProps,
-  ref,
-  defineEmits,
-  watchEffect,
-  onMounted,
-  onUnmounted
-} from 'vue';
-import { Message } from '../../interface';
-// import { isNumber } from '@vueuse/core';
-function isNumber(obj: any) {
-  return typeof obj === 'number' && isFinite(obj);
-}
-interface touchesPosition {
-  pageX1?: number;
-  pageY1?: number;
-  pageX2?: number;
-  pageY2?: number;
-}
-const props = defineProps({
-  imageList: {
-    type: Array,
-    default: () => [] as Array<Message>
-  },
-  currentImage: {
-    type: Object,
-    default: () => ({} as Message)
-  }
-});
-const emit = defineEmits(['close']);
-const zoom = ref(1);
-const rotate = ref(0);
-const minZoom = ref(0.1);
-const currentImageIndex = ref(0);
-const image = ref();
-const ul = ref();
-const { isH5 } = TUIEnv();
-// touch
-let startX = 0;
-let touchStore = {} as touchesPosition;
-let moveFlag = false;
-let twoTouchesFlag = false;
-let timer: number | null = null;
-
-watchEffect(() => {
-  currentImageIndex.value = props.imageList.findIndex((message: any) => {
-    return message.ID === props.currentImage.ID;
-  });
-});
-
-const debounce = (func: any, wait = 200) => {
-  let timer: any;
-  return function () {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(func, wait);
-  };
-};
-
-const handleTouchStart = (e: any) => {
-  e.preventDefault();
-  moveInit(e);
-  twoTouchesInit(e);
-};
-
-const handleTouchMove = (e: any) => {
-  e.preventDefault();
-  moveFlag = true;
-  if (e.touches && e.touches.length === 2) {
-    twoTouchesFlag = true;
-    handleTwoTouches(e);
-  }
-};
-
-const handleTouchEnd = (e: any) => {
-  e.preventDefault();
-  let moveEndX = 0;
-  let X = 0;
-  if (twoTouchesFlag) {
-    if (!timer) {
-      twoTouchesFlag = false;
-      delete touchStore.pageX2;
-      delete touchStore.pageY2;
-      timer = setTimeout(() => {
-        timer = null;
-      }, 200);
-    }
-    return;
-  }
-  // H5 touch move to left to go to prev image
-  // H5 touch move to right to go to next image
-  if (timer === null) {
-    switch (moveFlag) {
-      // touch event
-      case true:
-        moveEndX = e?.changedTouches[0]?.pageX;
-        X = moveEndX - startX;
-        if (X > 100) {
-          goPrev();
-        } else if (X < -100) {
-          goNext();
-        }
-        break;
-      // click event
-      case false:
-        close();
-        break;
-    }
-    timer = setTimeout(() => {
-      timer = null;
-    }, 200);
-  }
-};
-
-const handleTouchCancel = (e: any) => {
-  twoTouchesFlag = false;
-  delete touchStore.pageX1;
-  delete touchStore.pageY1;
-};
-
-const handleWheel = (e: any) => {
-  e.preventDefault();
-  if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) return;
-  let scale = zoom.value;
-  scale += e.deltaY * (e.ctrlKey ? -0.01 : 0.002);
-  scale = Math.min(Math.max(0.125, scale), 4);
-  zoom.value = scale;
-};
-
-const moveInit = (e: any) => {
-  startX = e?.changedTouches[0]?.pageX;
-  moveFlag = false;
-};
-
-const twoTouchesInit = (e: any) => {
-  let touch1 = e?.touches[0];
-  let touch2 = e?.touches[1];
-  touchStore.pageX1 = touch1?.pageX;
-  touchStore.pageY1 = touch1?.pageY;
-  if (touch2) {
-    touchStore.pageX2 = touch2?.pageX;
-    touchStore.pageY2 = touch2?.pageY;
-  }
-};
-
-const handleTwoTouches = (e: any) => {
-  let touch1 = e?.touches[0];
-  let touch2 = e?.touches[1];
-  if (touch2) {
-    if (!isNumber(touchStore.pageX2)) {
-      touchStore.pageX2 = touch2.pageX;
-    }
-    if (!isNumber(touchStore.pageY2)) {
-      touchStore.pageY2 = touch2.pageY;
-    }
-  }
-  const getDistance = (
-    startX: number,
-    startY: number,
-    stoPx: number,
-    stopY: number
-  ) => {
-    return Math.hypot(stoPx - startX, stopY - startY);
-  };
-  if (
-    !isNumber(touchStore.pageX1) ||
-    !isNumber(touchStore.pageY1) ||
-    !isNumber(touchStore.pageX2) ||
-    !isNumber(touchStore.pageY2)
-  ) {
-    return;
-  }
-  let touchZoom =
-    getDistance(touch1.pageX, touch1.pageY, touch2.pageX, touch2.pageY) /
-    getDistance(
-      touchStore.pageX1,
-      touchStore.pageY1,
-      touchStore.pageX2,
-      touchStore.pageY2
-    );
-  zoom.value = Math.min(Math.max(0.5, zoom.value * touchZoom), 4);
-};
-
-onMounted(() => {
-  image?.value?.addEventListener('touchstart', handleTouchStart);
-  image?.value?.addEventListener('touchmove', handleTouchMove);
-  image?.value?.addEventListener('touchend', handleTouchEnd);
-  image?.value?.addEventListener('touchcancel;', handleTouchCancel);
-  // web: mouse wheel & mac wheel
-  image?.value?.addEventListener('wheel', handleWheel);
-  // web: close on esc keydown
-  document?.addEventListener('keydown', handleEsc);
-});
-
-const handleEsc = (e: any) => {
-  e.preventDefault();
-  if (e?.keyCode === 27) {
-    close();
-  }
-};
-const zoomIn = () => {
-  zoom.value += 0.1;
-};
-const zoomOut = () => {
-  zoom.value =
-    zoom.value - 0.1 > minZoom.value ? zoom.value - 0.1 : minZoom.value;
-};
-const close = () => {
-  emit('close');
-};
-const rotateLeft = () => {
-  rotate.value -= 90;
-};
-const rotateRight = () => {
-  rotate.value += 90;
-};
-const goNext = () => {
-  ul.value.style.transition = '0.5s';
-  currentImageIndex.value < props.imageList.length - 1 &&
-    currentImageIndex.value++;
-  initStyle();
-};
-const goPrev = () => {
-  ul.value.style.transition = '0.5s';
-  currentImageIndex.value > 0 && currentImageIndex.value--;
-  initStyle();
-};
-const initStyle = () => {
-  zoom.value = 1;
-  rotate.value = 0;
-};
-
-onUnmounted(() => {
-  image?.value?.removeEventListener('touchstart', handleTouchStart);
-  image?.value?.removeEventListener('touchmove', handleTouchMove);
-  image?.value?.removeEventListener('touchend', handleTouchEnd);
-  image?.value?.removeEventListener('touchcancel;', handleTouchCancel);
-  image?.value?.removeEventListener('wheel', handleWheel);
-  document?.removeEventListener('keydown', handleEsc);
-});
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
-.image-previewer {
-  position: fixed;
-  z-index: 12;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(#000000, 0.3);
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .image-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-  }
-  .image-list {
-    position: absolute;
-    height: 100%;
-    left: 0;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-content: center;
-    .image-item {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    }
-  }
-  .image-preview {
-    max-width: 100%;
-    max-height: 100%;
-    transition: transform 0.1s ease 0s;
-    pointer-events: auto;
-  }
-  .image-button {
-    position: absolute;
-    cursor: pointer;
-    width: 40Px;
-    height: 40Px;
-    border-radius: 50%;
-    top: calc(50% - 20Px);
-    background: rgba(255, 255, 255, 0.8);
-    &-left {
-      left: 10Px;
-    }
-    &-right {
-      right: 10Px;
-    }
-    .icon {
-      position: absolute;
-      bottom: 0;
-      top: 0;
-      left: 0;
-      right: 0;
-      margin: auto;
-      line-height: 40Px;
-    }
-  }
-  .icon-close {
-    position: absolute;
-    cursor: pointer;
-    width: 40Px;
-    height: 40Px;
-    border-radius: 50%;
-    top: 3%;
-    right: 3%;
-    padding: 6Px;
-    background: rgba(255, 255, 255, 0.8);
-    &::before,
-    &::after {
-      background-color: #444444;
-    }
-  }
-}
-.image-previewer-h5 {
-  width: 100%;
-  height: 100%;
-  background: #000000;
-  display: flex;
-  flex-direction: column;
-}
-.actions-bar {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  position: absolute;
-  bottom: 5%;
-  padding: 12Px;
-  border-radius: 6Px;
-  background: rgba(255, 255, 255, 0.8);
-  .icon {
-    position: static;
-    font-size: 24Px;
-    cursor: pointer;
-    margin: 0 6Px;
-    width: 27Px;
-    height: 27Px;
-    margin: 5Px;
-  }
-}
-.image-counter {
-  background: rgba(20, 18, 20, 0.53);
-  padding: 3Px 5Px;
-  margin: 5Px;
-  border-radius: 3Px;
-  color: #fff;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/imagePreviewer/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/location/Location.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="location">
-    <i class="icon icon-location" @click="toggleShow"></i>
-    <main class="location-main" v-if="show">
-      <ul class="location-list">
-        <li class="location-list-item">
-          <label>{{ $t('TUIChat.描述') }}</label>
-          <input type="text" v-model="location.description" />
-        </li>
-        <li class="location-list-item">
-          <label>{{ $t('TUIChat.经度') }}</label>
-          <input type="number" v-model="location.longitude" />
-        </li>
-        <li class="location-list-item">
-          <label>{{ $t('TUIChat.纬度') }}</label>
-          <input type="number" v-model="location.latitude" />
-        </li>
-      </ul>
-      <ul class="location-footer">
-        <button class="btn btn-cancel" @click="cancel">{{ $t('取消') }}</button>
-        <button
-          class="btn btn-default"
-          :disabled="
-            !location.data && !location.description && location.extension
-          "
-          @click="submit"
-        >
-          {{ $t('发送') }}
-        </button>
-      </ul>
-    </main>
-    <div v-if="show" class="mask" @click.self="toggleShow"></div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs } from 'vue';
-
-const Location = defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false
-    }
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      show: false,
-      location: {
-        description: '深圳市深南大道10000号腾讯大厦',
-        longitude: 113.941079,
-        latitude: 22.546103
-      }
-    });
-
-    watchEffect(() => {
-      data.show = props.show;
-    });
-
-    const toggleShow = () => {
-      data.show = !data.show;
-    };
-
-    const cancel = () => {
-      toggleShow();
-    };
-
-    const submit = () => {
-      Location.TUIServer.sendLocationMessage(data.location);
-      cancel();
-    };
-
-    return {
-      ...toRefs(data),
-      toggleShow,
-      cancel,
-      submit
-    };
-  }
-});
-export default Location;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
-.location {
-  display: inline-block;
-  position: relative;
-  &-main {
-    position: absolute;
-    z-index: 5;
-    width: 315Px;
-    background: #ffffff;
-    top: -180Px;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-    padding: 10Px;
-    display: flex;
-    flex-direction: column;
-  }
-  &-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    &-item {
-      padding-bottom: 15Px;
-      label {
-        width: 88Px;
-        font-size: 18Px;
-        padding: 0 20Px;
-        display: inline-block;
-      }
-      input {
-        flex: 1;
-        height: 24Px;
-        padding: 0 10Px;
-        border: 1Px solid #dddddd;
-        border-radius: 5Px;
-        &::-webkit-inner-spin-button {
-          display: none;
-        }
-      }
-    }
-  }
-  &-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
-}
-.btn {
-  padding: 8Px 20Px;
-  border-radius: 4Px;
-  border: none;
-  font-weight: 400;
-  font-size: 14Px;
-  color: #ffffff;
-  letter-spacing: 0;
-  text-align: center;
-  line-height: 20Px;
-  &-cancel {
-    border: 1Px solid #dddddd;
-    color: #666666;
-  }
-  &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
-  }
-  &:disabled {
-    opacity: 0.3;
-  }
-}
-.mask {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/location/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/readReceiptDialog/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/readReceiptDialog/readReceiptDialog.vue

@@ -1,339 +0,0 @@
-<template>
-  <div
-    class="read-receipt"
-    :class="[isH5 ? 'read-receipt-H5' : '', isMenuOpen ? 'read-receipt-menu-open' : '']"
-    v-if="show"
-    ref="dialog"
-  >
-    <div class="header">
-      <div class="header-back">
-        <i v-if="isH5" class="icon icon-back" @click="toggleShow"></i>
-      </div>
-      <div class="header-title">
-        <span>{{ $t('TUIChat.消息详情') }}</span>
-      </div>
-      <div class="header-close">
-        <i v-if="!isH5" class="icon icon-close" @click="toggleShow"></i>
-      </div>
-    </div>
-    <div class="body">
-      <div v-if="isH5" class="body-message">
-        <div class="message">
-          <div class="message-info">
-            <span>{{ message.from }}</span>
-            <span>{{ caculateTimeago(message.time * 1000) }}</span>
-          </div>
-          <div class="message-cont">
-            <img v-if="messageInfo.isImg" class="message-cont-img" :src="messageInfo.content" />
-            <p v-else>{{ messageInfo.content }}</p>
-          </div>
-        </div>
-      </div>
-      <div class="body-tab">
-        <template v-for="(val, key) in readReceiptList">
-          <div
-            class="tab-item"
-            :class="key === showListNow && 'tab-item-now'"
-            v-if="val.show"
-            :key="key"
-            @click="showListNow = key"
-          >
-            <div class="tab-item-title">{{ val?.label }}</div>
-            <div class="tab-item-count">{{ val?.count }}</div>
-          </div>
-        </template>
-      </div>
-      <div class="body-list">
-        <ul>
-          <li v-for="(item, index) in readReceiptList[showListNow].userList" :key="index" class="body-list-item">
-            <img
-              class="avatar"
-              :src="item?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-              onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-            />
-            <div class="name">
-              {{ item?.nick || item?.userID }}
-            </div>
-          </li>
-        </ul>
-        <div class="more" v-if="!readReceiptList[showListNow].isCompleted" @click="getMoreList">查看更多</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs, watch, ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import { caculateTimeago, handleErrorPrompts } from '../../../utils';
-import { Message, userListItem } from '../../interface';
-import {
-  handleImageMessageShowContext,
-  handleVideoMessageShowContext,
-  handleFaceMessageShowContext,
-} from '../../utils/utils';
-import { TUIEnv } from '../../../../../TUIPlugin';
-const ReadReceiptDialog = defineComponent({
-  type: 'custom',
-  props: {
-    message: {
-      type: Object,
-      default: () => ({}),
-    },
-    isH5: {
-      type: Boolean,
-      default: false,
-    },
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  setup(props: any, ctx: any) {
-    const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-    const data = reactive({
-      message: {} as Message,
-      isGroup: false,
-      show: false,
-      isH5: false,
-      messageInfo: {
-        isImg: false,
-        content: '',
-      },
-      readReceiptList: [
-        {
-          label: props.isH5 ? t('TUIChat.人已读') : t('TUIChat.已读'),
-          count: 0,
-          userList: [] as userListItem[],
-          isCompleted: true,
-          cursor: '',
-          show: true,
-        },
-        {
-          label: props.isH5 ? t('TUIChat.人未读') : t('TUIChat.未读'),
-          count: 0,
-          userList: [] as userListItem[],
-          isCompleted: true,
-          cursor: '',
-          show: true,
-        },
-        {
-          label: props.isH5 ? t('TUIChat.人关闭阅读状态') : t('TUIChat.关闭阅读状态'),
-          count: 0,
-          userList: [] as userListItem[],
-          isCompleted: true,
-          cursor: '',
-          show: false,
-        },
-      ],
-      showListNow: 0,
-      isMenuOpen: true,
-      env: TUIEnv(),
-    });
-
-    const dialog: any = ref();
-
-    watchEffect(() => {
-      data.show = props.show;
-      data.isH5 = props.isH5;
-    });
-
-    watch(
-      () => {
-        props.message, data.show;
-      },
-      async () => {
-        if (!data.show) return;
-        handleDialogPosition();
-        data.message = props.message;
-        isGroup();
-        showMessage();
-        data.readReceiptList[0].count = data.message?.readReceiptInfo?.readCount || data.readReceiptList[0].count;
-        data.readReceiptList[1].count = data.message?.readReceiptInfo?.unreadCount || data.readReceiptList[1].count;
-        getReadList();
-        getUnreadList();
-      },
-      { deep: true }
-    );
-
-    const toggleShow = () => {
-      data.show = !data.show;
-      if (!data.show) {
-        ctx.emit('closeDialog', 'receipt');
-        close();
-      }
-    };
-
-    onClickOutside(dialog, () => {
-      data.show = false;
-      ctx.emit('closeDialog', 'receipt');
-      close();
-    });
-
-    const getReadList = async (more = false) => {
-      if (!data.isGroup || !data.message || Object.keys(data.message).length === 0) return;
-      try {
-        const obj = await ReadReceiptDialog.TUIServer.getGroupReadMemberList(
-          data.message,
-          more ? data.readReceiptList[0].cursor : ''
-        );
-        data.readReceiptList[0].isCompleted = obj?.data?.isCompleted;
-        data.readReceiptList[0].cursor = obj?.data?.cursor || '';
-        const list = obj.data.readUserIDList;
-        const readList: userListItem[] = await handleAvatarAndName(list);
-        data.readReceiptList[0].userList = more
-          ? ([...data.readReceiptList[0].userList, ...readList] as userListItem[])
-          : readList;
-      } catch (error) {
-        if (error && (error as any)?.code === 10062) {
-          const message = t('TUIChat.您当前购买使用的套餐包暂未开通群消息已读回执功能');
-          handleErrorPrompts(message, data.env);
-          console.warn(message);
-        }
-      }
-    };
-
-    const getUnreadList = async (more = false) => {
-      if (!data.isGroup || !data.message || Object.keys(data.message).length === 0) return;
-      const obj = await ReadReceiptDialog.TUIServer.getGroupUnreadMemberList(
-        data.message,
-        more ? data.readReceiptList[1].cursor : ''
-      );
-      data.readReceiptList[1].isCompleted = obj?.data.isCompleted;
-      data.readReceiptList[1].cursor = obj?.data?.cursor || '';
-      const list = obj.data.unreadUserIDList;
-      const unreadList: userListItem[] = await handleAvatarAndName(list);
-      data.readReceiptList[1].userList = more
-        ? ([...data.readReceiptList[1].userList, ...unreadList] as userListItem[])
-        : unreadList;
-    };
-
-    const handleAvatarAndName = async (list: any) => {
-      const avatarAndNameList: userListItem[] = [];
-      if (list.length && data.isGroup) {
-        const obj = await ReadReceiptDialog.TUIServer.getUserProfile(list);
-        const userProfileList = obj.data;
-        userProfileList.forEach((item: any) => {
-          avatarAndNameList.push({
-            nick: item?.nick,
-            avatar: item?.avatar,
-            userID: item?.userID,
-          });
-        });
-      }
-      return avatarAndNameList;
-    };
-
-    const isGroup = () => {
-      if (data.message?.conversationType === ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.CONV_GROUP) {
-        data.isGroup = true;
-      } else {
-        data.isGroup = false;
-      }
-      return;
-    };
-
-    const getMoreList = () => {
-      switch (data.showListNow) {
-        case 0:
-          getReadList(true);
-          break;
-        case 1:
-          getUnreadList(true);
-          break;
-        default:
-          break;
-      }
-    };
-
-    const close = () => {
-      data.message = {};
-      data.readReceiptList = [
-        {
-          label: props.isH5 ? t('TUIChat.人已读') : t('TUIChat.已读'),
-          count: 0,
-          userList: [] as userListItem[],
-          isCompleted: true,
-          cursor: '',
-          show: true,
-        },
-        {
-          label: props.isH5 ? t('TUIChat.人未读') : t('TUIChat.未读'),
-          count: 0,
-          userList: [] as userListItem[],
-          isCompleted: true,
-          cursor: '',
-          show: true,
-        },
-        {
-          label: props.isH5 ? t('TUIChat.人关闭阅读状态') : t('TUIChat.关闭阅读状态'),
-          count: 0,
-          userList: [] as userListItem[],
-          isCompleted: true,
-          cursor: '',
-          show: false,
-        },
-      ];
-      data.showListNow = 0;
-      data.messageInfo = {
-        isImg: false,
-        content: '',
-      };
-    };
-
-    const showMessage = () => {
-      if (!data.message || !data.isH5) return;
-      switch ((data.message as any).type) {
-        case ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.MSG_TEXT:
-          data.messageInfo.content = data.message?.payload?.text;
-          data.messageInfo.isImg = false;
-          break;
-        case ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.MSG_CUSTOM:
-          data.messageInfo.content = t('TUIChat.自定义');
-          data.messageInfo.isImg = false;
-          break;
-        case ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.MSG_IMAGE:
-          data.messageInfo.content = handleImageMessageShowContext(data.message)?.url;
-          data.messageInfo.isImg = true;
-          break;
-        case ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.MSG_AUDIO:
-          data.messageInfo.content = t('TUIChat.语音');
-          data.messageInfo.isImg = false;
-          break;
-        case ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.MSG_VIDEO:
-          data.messageInfo.content = handleVideoMessageShowContext(data.message)?.snapshotUrl;
-          data.messageInfo.isImg = true;
-          break;
-        case ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.MSG_FILE:
-          data.messageInfo.content = t('TUIChat.文件') + data.message?.payload?.fileName;
-          data.messageInfo.isImg = false;
-          break;
-        case ReadReceiptDialog.TUIServer.TUICore.TIM.TYPES.MSG_FACE:
-          data.messageInfo.content = handleFaceMessageShowContext(data.message)?.url;
-          data.messageInfo.isImg = true;
-          break;
-      }
-    };
-
-    const handleDialogPosition = () => {
-      data.isMenuOpen = !!document?.getElementsByClassName('home-menu')?.length;
-    };
-
-    return {
-      ...toRefs(data),
-      dialog,
-      toggleShow,
-      getReadList,
-      getUnreadList,
-      isGroup,
-      handleAvatarAndName,
-      close,
-      getMoreList,
-      showMessage,
-      caculateTimeago,
-      handleDialogPosition,
-    };
-  },
-});
-export default ReadReceiptDialog;
-</script>
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/readReceiptDialog/style/h5.scss

@@ -1,141 +0,0 @@
-.read-receipt-H5 {
-  z-index: 5;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  transform: none;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-  background: #ffffff;
-  border-radius: 8Px;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-
-  .header {
-    padding-left: 20Px;
-    padding-right: 20Px;
-  }
-
-  .body {
-    padding: 0;
-
-    .body-tab,
-    .body-list {
-      width: 100%;
-    }
-
-    .body-list-item {
-      background-color: #ffffff;
-      padding-left: 10Px;
-      display: flex;
-      flex-direction: row;
-
-      .avatar {
-        border-radius: 10%;
-        padding: 0;
-        margin: 10Px;
-      }
-
-      .name {
-        width: calc(100% - 40Px);
-        height: 56Px;
-        line-height: 56Px;
-        border-bottom: 1Px solid #efefef;
-      }
-    }
-
-    .body-tab {
-      height: 22Px;
-      padding: 15Px;
-      width: calc(100% - 30Px);
-      border-bottom: none;
-
-      .tab-item {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
-        font-size: 16Px;
-        height: 22Px;
-        font-family: PingFangSC-Medium;
-
-        &-title,
-        &-count {
-          height: 22Px;
-          font-size: 15Px;
-          letter-spacing: 0;
-          text-align: center;
-          line-height: 20Px;
-          font-weight: 400;
-          color: #8d8d8d;
-        }
-
-        &-count {
-          font-size: 17Px;
-          font-weight: 800;
-        }
-
-        &-now {
-          color: #147aff;
-          padding-bottom: 3Px;
-          border-bottom: 2.6Px solid #147aff;
-
-          .tab-item-title,
-          .tab-item-count {
-            color: #147aff;
-          }
-        }
-      }
-    }
-
-    .body-message {
-      background-color: #f7f8fa;
-
-      .message {
-        margin: 10Px 0;
-        background-color: #ffffff;
-        padding: 5Px;
-
-        .message-info {
-          span {
-            padding-left: 10Px;
-            padding-right: 10Px;
-            width: 94Px;
-            height: 30Px;
-            font-family: PingFangSC-Regular;
-            font-weight: 400;
-            font-size: 12Px;
-            color: #999999;
-            letter-spacing: 0;
-            text-align: center;
-            line-height: 30Px;
-          }
-        }
-
-        .message-cont {
-          padding: 0 10Px 10Px 10Px;
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          font-size: 14Px;
-          color: #111111;
-          letter-spacing: 0;
-          max-height: 100Px;
-
-          p {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          &-img {
-            max-height: 70Px;
-          }
-        }
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/readReceiptDialog/style/index.scss

@@ -1,4 +0,0 @@
-@import './web.scss';
-@import './h5.scss';
-@import url('../../../../../styles/common.scss');
-@import url('../../../../../styles/icon.scss');

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/readReceiptDialog/style/web.scss

@@ -1,164 +0,0 @@
-.read-receipt {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 5;
-  box-sizing: border-box;
-  padding: 20Px;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-  width: 368Px;
-  height: 510Px;
-  background: #ffffff;
-  border-radius: 8Px;
-  overflow: hidden;
-
-  &-menu-open {
-    left: calc(50% + 150Px);
-  }
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 30Px;
-    padding: 10Px 0;
-
-    &-title {
-      width: calc(100% - 40Px);
-      text-align: center;
-      height: 30Px;
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      font-size: 16Px;
-      color: #333333;
-      line-height: 30Px;
-    }
-
-    &-close {
-      width: 20Px;
-
-      i {
-        width: 12Px;
-        height: 12Px;
-      }
-    }
-
-    &-back {
-      width: 20Px;
-    }
-  }
-
-  .body {
-    padding: 10Px 0;
-    width: 100%;
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    .body-tab {
-      padding: 10Px 0;
-      width: 100%;
-      height: 55Px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-      border-bottom: 1Px solid #e8e8e9;
-
-      .tab-item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        &-title {
-          height: 20Px;
-          opacity: 0.8;
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          font-size: 14Px;
-          color: #000000;
-        }
-
-        &-count {
-          height: 35Px;
-          opacity: 0.8;
-          font-family: DINAlternate-Bold;
-          font-weight: Bold;
-          font-size: 30Px;
-          color: #000000;
-        }
-
-        &-now {
-          color: #679ce1;
-
-          .tab-item-title,
-          .tab-item-count {
-            color: #679ce1;
-          }
-        }
-      }
-    }
-
-    .body-list {
-      width: 100%;
-      flex: 1 1 auto;
-      overflow-y: auto;
-
-      &-item {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        align-items: center;
-
-        .avatar {
-          width: 36Px;
-          height: 36Px;
-          margin: 10Px 10Px 10Px 0Px;
-          border-radius: 10%;
-        }
-
-        .name {
-          width: calc(100% - 60Px);
-          height: 20Px;
-          display: inline-block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          line-height: 20Px;
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          font-size: 14Px;
-          color: #000000;
-          letter-spacing: 0;
-        }
-      }
-
-      .more {
-        text-align: center;
-        color: rgba(0, 0, 0, 0.3);
-        font-size: 12Px;
-        padding: 10Px;
-      }
-    }
-  }
-}
-
-::-webkit-scrollbar {
-  width: 4Px;
-  height: 140Px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10Px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10Px;
-  background-color: #d8d8d8;
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/replies/index.ts

@@ -1,2 +0,0 @@
-import Replies from './replies.vue'
-export default Replies

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/replies/replies-item.vue

@@ -1,312 +0,0 @@
-<template>
-  <div class="replies-item" :class="!isRoot ? 'replies-item-normal' : ''">
-    <div class="message-bubble" ref="htmlRefHook">
-      <img
-        class="avatar"
-        :src="
-          message?.avatar ||
-          'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-        "
-        onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-      />
-      <main class="message-area">
-        <div class="message-area-title">
-          <label class="name">
-            {{
-              isRoot
-                ? message.nameCard || message.nick || message.from
-                : message.messageSender
-            }}
-          </label>
-          <label class="time">
-            {{
-              caculateTimeago(
-                (isRoot ? message?.time : message?.messageTime) * 1000
-              )
-            }}
-          </label>
-        </div>
-        <div class="content content-in">
-          <MessageText
-            v-if="
-              message.messageType === constant.typeText ||
-              message.type === TIM.TYPES.MSG_TEXT ||
-              !isRoot
-            "
-            :data="
-              handleTextMessageShowContext(
-                isRoot
-                  ? message
-                  : { payload: { text: message?.messageAbstract } }
-              )
-            "
-          />
-          <span
-            v-if="
-              message.messageType === constant.typeCustom ||
-              message.type === TIM.TYPES.MSG_CUSTOM
-            "
-          >
-            {{ handleCustomMessageShowContext(message)?.custom }}
-          </span>
-          <img
-            v-if="
-              message.messageType === constant.typeImage ||
-              message.type === TIM.TYPES.MSG_IMAGE
-            "
-            class="message-img"
-            :src="message?.payload?.imageInfoArray[1].url"
-          />
-          <div
-            v-if="
-              message.messageType === constant.typeAudio ||
-              message.type === TIM.TYPES.MSG_AUDIO
-            "
-            class="message-audio"
-            :style="`width: ${message?.payload?.second * 10 + 40}Px`"
-          >
-            <i class="icon icon-voice"></i>
-            <label>{{ message?.payload?.second }}s</label>
-          </div>
-          <div
-            v-if="
-              message.messageType === constant.typeVideo ||
-              message.type === TIM.TYPES.MSG_VIDEO
-            "
-            class="message-video-cover"
-          >
-            <img
-              class="message-videoimg"
-              :src="message?.payload?.snapshotUrl || message?.payload?.thumbUrl"
-            />
-          </div>
-          <img
-            v-if="
-              message.messageType === constant.typeFace ||
-              message.type === TIM.TYPES.MSG_FACE
-            "
-            class="message-img"
-            :src="url"
-          />
-          <div
-            v-if="
-              message.messageType === constant.typeFile ||
-              message.type === TIM.TYPES.MSG_FILE
-            "
-            class="message-file"
-          >
-            <i class="icon icon-files"></i>
-            <div class="message-file-content">
-              <label>{{ message?.payload?.fileName }}</label>
-              <span>
-                {{
-                  handleFileMessageShowContext(message)?.size ||
-                  message?.payload?.fileSize
-                }}
-              </span>
-            </div>
-          </div>
-          <MessageEmojiReact :message="message" type="content" />
-        </div>
-      </main>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
-import { Message } from '../../interface';
-import {
-  handleTextMessageShowContext,
-  handleCustomMessageShowContext,
-  handleFileMessageShowContext
-} from '../../utils/utils';
-import { MessageText, MessageEmojiReact } from '../../components';
-import { caculateTimeago } from '../../../utils';
-import constant from '../../../constant';
-import TIM from '../../../../../TUICore/tim/index';
-const RepliesItem = defineComponent({
-  props: {
-    message: {
-      type: Object,
-      default: () => ({})
-    },
-    isH5: {
-      type: Boolean,
-      default: false
-    },
-    isRoot: {
-      type: Boolean,
-      default: false
-    }
-  },
-  components: {
-    MessageText,
-    MessageEmojiReact
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      message: {} as Message,
-      isH5: false,
-      url: '',
-      isRoot: false,
-      constant,
-      TIM
-    });
-    watchEffect(() => {
-      data.message = props.message;
-      data.isH5 = props.isH5;
-      data.isRoot = props.isRoot;
-      if (data.message.type === TIM.TYPES.MSG_FACE) {
-        data.url = `https://web.sdk.qcloud.com/im/assets/face-elem/${data.message?.payload?.data}@2x.png`;
-      }
-    });
-    return {
-      ...toRefs(data),
-      handleTextMessageShowContext,
-      handleCustomMessageShowContext,
-      handleFileMessageShowContext,
-      caculateTimeago
-    };
-  }
-});
-export default RepliesItem;
-</script>
-<style lang="scss" scoped>
-.replies-item {
-  padding: 15Px;
-  width: auto;
-  &-normal {
-    padding: 12.8Px 15Px 0 17Px;
-    .message-bubble {
-      padding-bottom: 0;
-      .avatar {
-        width: 48Px;
-        height: 48Px;
-        border-radius: 8Px;
-      }
-      .message-area {
-        padding: 0 0 8Px 0;
-        margin: 0 0 0 16Px;
-        border-bottom: 0.1Px solid #dbdbdb;
-        &-title {
-          .name {
-            font-size: 14Px;
-            line-height: 20Px;
-          }
-          .time {
-            font-size: 12Px;
-            line-height: 18Px;
-          }
-        }
-        .content,
-        .content-in {
-          background: inherit;
-          border-radius: 0;
-          padding: 0;
-          line-height: 22Px;
-        }
-      }
-    }
-  }
-  .avatar {
-    width: 36Px;
-    height: 36Px;
-    border-radius: 5Px;
-  }
-  .message-bubble {
-    width: 100%;
-    display: flex;
-    padding-bottom: 5Px;
-  }
-  .line-left {
-    border: 1Px solid rgba(0, 110, 255, 0.5);
-  }
-
-  .message-area {
-    max-width: calc(100% - 54Px);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding: 0 8Px;
-    flex: 1;
-    &-title {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      .name,
-      .time {
-        padding-bottom: 4Px;
-        font-weight: 400;
-        font-size: 0.8rem;
-        color: #999999;
-        letter-spacing: 0;
-      }
-      .name {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-    .content {
-      padding: 12Px;
-      font-weight: 400;
-      font-size: 14Px;
-      color: #000000;
-      letter-spacing: 0;
-      word-wrap: break-word;
-      word-break: break-all;
-      width: fit-content;
-      &-in {
-        background: #f2f2f2;
-        border-radius: 0Px 10Px 10Px 10Px;
-        .message-img,
-        .message-videoimg {
-          width: inherit;
-          height: inherit;
-          max-height: 100%;
-          max-width: 100%;
-          max-height: 300Px;
-        }
-      }
-    }
-  }
-  .message-label {
-    align-self: flex-end;
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    font-size: 12Px;
-    color: #b6b8ba;
-    word-break: keep-all;
-  }
-  .message-file {
-    flex: 1;
-    display: flex;
-    cursor: pointer;
-    .message-file-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .message-audio {
-    display: flex;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    max-width: 100%;
-    overflow: hidden;
-    .icon {
-      margin: 0 4Px;
-    }
-    audio {
-      width: 0;
-      height: 0;
-    }
-  }
-  .reserve {
-    flex-direction: row-reverse;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/replies/replies.vue

@@ -1,156 +0,0 @@
-<template>
-  <div
-    class="replies"
-    :class="[isH5 ? 'replies-H5' : '', isMenuOpen ? 'replies-menu-open' : '']"
-    v-if="show"
-    ref="dialog"
-  >
-    <div class="header">
-      <div class="header-back">
-        <i v-if="isH5" class="icon icon-back" @click="toggleShow"></i>
-      </div>
-      <div class="header-title">
-        <span>{{ $t('TUIChat.回复详情') }}</span>
-      </div>
-      <div class="header-close">
-        <i v-if="!isH5" class="icon icon-close" @click="toggleShow"></i>
-      </div>
-    </div>
-    <div class="body">
-      <div class="body-message">
-        <RepliesItem :message="message" :isH5="isH5" :isRoot="true" />
-      </div>
-      <div class="body-list">
-        <ul>
-          <li v-for="(item, index) in replies" :key="index" class="body-list-item">
-            <RepliesItem :message="item" :isH5="isH5" :isRoot="false" />
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs, watch, ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import { caculateTimeago } from '../../../utils';
-import { Message } from '../../interface';
-import TIM from '../../../../../TUICore/tim';
-import RepliesItem from './replies-item.vue';
-import { JSONToObject } from '../../utils/utils';
-const ReadReceiptDialog = defineComponent({
-  type: 'custom',
-  components: {
-    RepliesItem,
-  },
-  props: {
-    message: {
-      type: Object,
-      default: () => ({}),
-    },
-    isH5: {
-      type: Boolean,
-      default: false,
-    },
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-    url: {
-      type: String,
-      default: '',
-    },
-    messageList: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      message: {} as Message,
-      isGroup: false,
-      show: false,
-      isH5: false,
-      url: '',
-      showListNow: 0,
-      isMenuOpen: true,
-      replies: [],
-      messageList: [],
-      TIM,
-    });
-
-    const dialog: any = ref();
-
-    watchEffect(() => {
-      data.message = props.message;
-      data.show = props.show;
-      data.isH5 = props.isH5;
-      data.url = props.url;
-      data.messageList = props.messageList;
-    });
-
-    watch(
-      () => {
-        data.message, data.messageList;
-      },
-      () => {
-        data.message = props.message;
-        data.messageList = props.messageList;
-        handleReplies(data.message);
-      },
-      { deep: true }
-    );
-
-    const toggleShow = () => {
-      data.show = !data.show;
-      if (!data.show) {
-        ctx.emit('closeDialog', 'replies');
-        close();
-      }
-    };
-
-    onClickOutside(dialog, () => {
-      data.show = false;
-      ctx.emit('closeDialog', 'replies');
-      close();
-    });
-
-    const handleReplies = (message: Message) => {
-      try {
-        const { cloudCustomData } = message;
-        if (!cloudCustomData) return;
-        const cloudCustomObject = JSONToObject(cloudCustomData);
-        data.replies = cloudCustomObject?.messageReplies?.replies;
-        data?.replies?.forEach((item: any) => {
-          const { messageID, messageSender } = item;
-          const message = data.messageList.find((item: Message) => 
-            (item.ID === messageID || item.from === messageSender)
-          );
-          item.avatar = message ? (message as Message)?.avatar : '';
-        });
-      } catch (err) {
-        console.log(err);
-      }
-    };
-
-    const close = () => {
-      data.message = {};
-    };
-
-    const handleDialogPosition = () => {
-      data.isMenuOpen = !!document?.getElementsByClassName('home-menu')?.length;
-    };
-
-    return {
-      ...toRefs(data),
-      dialog,
-      toggleShow,
-      close,
-      caculateTimeago,
-      handleDialogPosition,
-    };
-  },
-});
-export default ReadReceiptDialog;
-</script>
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/replies/style/h5.scss

@@ -1,143 +0,0 @@
-.replies-H5 {
-  z-index: 5;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  transform: none;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-  background: #ffffff;
-  border-radius: 8Px;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-
-  .header {
-    padding-left: 20Px;
-    padding-right: 20Px;
-
-    &-title {
-      text-align: center;
-    }
-  }
-
-  .body {
-    padding: 0;
-
-    .body-tab,
-    .body-list {
-      width: 100%;
-    }
-
-    .body-list-item {
-      background-color: #ffffff;
-      padding-left: 10Px;
-      display: flex;
-      flex-direction: row;
-
-      .avatar {
-        border-radius: 10%;
-        padding: 0;
-        margin: 10Px;
-      }
-
-      .name {
-        width: calc(100% - 40Px);
-        height: 56Px;
-        line-height: 56Px;
-        border-bottom: 1Px solid #efefef;
-      }
-    }
-
-    .body-tab {
-      height: 22Px;
-      padding: 15Px;
-      width: calc(100% - 30Px);
-      border-bottom: none;
-
-      .tab-item {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
-        font-size: 16Px;
-        height: 22Px;
-        font-family: PingFangSC-Medium;
-
-        &-title,
-        &-count {
-          height: 22Px;
-          font-size: 15Px;
-          letter-spacing: 0;
-          text-align: center;
-          line-height: 20Px;
-          font-weight: 400;
-          color: #8d8d8d;
-        }
-
-        &-count {
-          font-size: 17Px;
-          font-weight: 800;
-        }
-
-        &-now {
-          color: #147aff;
-          padding-bottom: 3Px;
-          border-bottom: 2.6Px solid #147aff;
-
-          .tab-item-title,
-          .tab-item-count {
-            color: #147aff;
-          }
-        }
-      }
-    }
-
-    .body-message {
-      .message {
-        margin: 10Px 0;
-        background-color: #ffffff;
-        padding: 5Px;
-
-        .message-info {
-          span {
-            padding-left: 10Px;
-            padding-right: 10Px;
-            width: 94Px;
-            height: 30Px;
-            font-family: PingFangSC-Regular;
-            font-weight: 400;
-            font-size: 12Px;
-            color: #999999;
-            letter-spacing: 0;
-            text-align: center;
-            line-height: 30Px;
-          }
-        }
-
-        .message-cont {
-          padding: 0 10Px 10Px 10Px;
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          font-size: 14Px;
-          color: #111111;
-          letter-spacing: 0;
-          max-height: 100Px;
-
-          p {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          &-img {
-            max-height: 70Px;
-          }
-        }
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/replies/style/index.scss

@@ -1,4 +0,0 @@
-@import './web.scss';
-@import './h5.scss';
-@import url('../../../../../styles/common.scss');
-@import url('../../../../../styles/icon.scss');

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/replies/style/web.scss

@@ -1,122 +0,0 @@
-.replies {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 400Px;
-  overflow-y: auto;
-  border-radius: 8Px 0 0 8Px;
-  position: absolute;
-  right: 0;
-  height: calc(100% - 40Px);
-  z-index: 2;
-  top: 40Px;
-  background: #ffffff;
-  box-shadow: 0 1Px 10Px 0 rgb(2 16 43 / 15%);
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 30Px;
-    padding: 10Px 0;
-
-    &-title {
-      width: calc(100% - 40Px);
-      text-align: left;
-      height: 30Px;
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      font-size: 16Px;
-      color: #333333;
-      line-height: 30Px;
-    }
-
-    &-close {
-      width: 20Px;
-
-      i {
-        width: 12Px;
-        height: 12Px;
-      }
-    }
-
-    &-back {
-      width: 20Px;
-    }
-  }
-
-  .body {
-    padding: 10Px 0;
-    width: 100%;
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    .body-message {
-      border-bottom: 1Px dashed #e0e0e0;
-    }
-
-    .body-list {
-      width: 100%;
-      flex: 1 1 auto;
-      overflow-y: auto;
-
-      &-item {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        align-items: center;
-
-        .replies-item {
-          flex: 1;
-        }
-
-        .avatar {
-          width: 36Px;
-          height: 36Px;
-          margin: 10Px 10Px 10Px 0Px;
-          border-radius: 10%;
-        }
-
-        .name {
-          width: calc(100% - 60Px);
-          height: 20Px;
-          display: inline-block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          line-height: 20Px;
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          font-size: 14Px;
-          color: #000000;
-          letter-spacing: 0;
-        }
-      }
-
-      .more {
-        text-align: center;
-        color: rgba(0, 0, 0, 0.3);
-        font-size: 12Px;
-        padding: 10Px;
-      }
-    }
-  }
-}
-
-::-webkit-scrollbar {
-  width: 4Px;
-  height: 140Px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10Px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10Px;
-  background-color: #d8d8d8;
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/typingHeader/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/typingHeader/typingHeader.vue

@@ -1,210 +0,0 @@
-<template>
-  <h1>{{ title === '对方正在输入' ? $t('TUIChat.对方正在输入') : title }}</h1>
-</template>
-
-<script lang="ts">
-import { defineComponent, watchEffect, watch, reactive, toRefs, computed, nextTick } from 'vue';
-import { handleName, JSONToObject, isTypingMessage } from '../../utils/utils';
-import constant from '../../../constant';
-const TypingHeader = defineComponent({
-  props: {
-    needTyping: {
-      type: Boolean,
-      default: false,
-    },
-    conversation: {
-      type: Object,
-      default: () => ({}),
-    },
-    messageList: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup(props: any, ctx: any) {
-    const data = reactive({
-      messageList: [],
-      conversation: {},
-      title: '',
-      timeValid: 0,
-      myTypingStatus: 0,
-      otherTypingStatus: 0,
-      needTyping: false,
-      lastOtherMessageTime: 0,
-      lastMyTypingTime: 0,
-      lastOtherTypingTime: 0,
-      options: {
-        data: {
-          businessID: constant.typeUserTyping,
-          typingStatus: 0,
-          version: 1,
-          userAction: 0,
-          actionParam: constant.typeInputStatusEnd,
-        },
-        description: '',
-        extension: '',
-      },
-    });
-
-    watchEffect(() => {
-      data.messageList = props.messageList;
-      data.conversation = props.conversation;
-      data.needTyping = props.needTyping;
-    });
-    const conversationID = computed(() => {
-      const { conversation }: any = data;
-      return conversation?.conversationID ? conversation.conversationID : '';
-    });
-    const conversationName = computed(() => {
-      const { conversation }: any = data;
-      return handleName(conversation);
-    });
-    const conversationType = computed(() => {
-      const { conversation }: any = data;
-      return conversation?.type ? conversation?.type : '';
-    });
-
-    const title = computed(() => {
-      if (data.needTyping && data.otherTypingStatus) {
-        return '对方正在输入';
-      }
-      return conversationName?.value;
-    });
-
-
-    const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
-      if (!data.needTyping || conversationType.value !== 'C2C') return;
-      if (new Date().getTime() / 1000 - data.lastOtherMessageTime < 30) {
-        data.timeValid = 1;
-      }
-      if (!data.timeValid) return;
-      if (!inputContentEmpty && !inputBlur) {
-        data.myTypingStatus = 1;
-        const now = new Date().getTime();
-        if (now - data.lastMyTypingTime > 4000) {
-          data.lastMyTypingTime = now;
-          sendTypingMessage(data.myTypingStatus);
-        }
-      } else {
-        data.myTypingStatus = 0;
-        data.lastMyTypingTime = 0;
-        sendTypingMessage(data.myTypingStatus);
-      }
-    };
-
-    watch(conversationID, (newVal: any, oldVal: any) => {
-      if (newVal === oldVal) return;
-      data.needTyping = false;
-      data.timeValid = 0;
-    });
-
-    watch(
-      () => data.needTyping,
-      (newVal: any, oldVal: any) => {
-        if (!newVal) {
-          data.myTypingStatus = 0;
-          data.otherTypingStatus = 0;
-          data.lastOtherMessageTime = 0;
-        }
-      }
-    );
-
-    watch(
-      () => data.messageList,
-      (newVal: any, oldVal: any) => {
-        nextTick(() => {
-          if (newVal.length === 0 || conversationType.value !== 'C2C') {
-            return;
-          }
-          data.lastOtherMessageTime = getLastOtherMessageTime(newVal);
-          if (newVal[newVal.length - 1]?.flow === 'in') {
-            if (!isTypingMessage(newVal[newVal.length - 1])) {
-              data.lastOtherMessageTime = newVal[newVal.length - 1]?.time;
-              data.otherTypingStatus = 0;
-            } else {
-              data.otherTypingStatus = handleTypingMessageStatus(newVal[newVal.length - 1]);
-              waitTypingEnd();
-            }
-          }
-        });
-      },
-      { deep: true }
-    );
-
-    const handleTypingMessageStatus = (item: any) => {
-      try {
-        const { typingStatus, actionParam }: any = JSONToObject(item?.payload?.data);
-        if (typingStatus === 1 && actionParam === constant.typeInputStatusIng) {
-          return 1;
-        }
-        return 0;
-      } catch {
-        return 0;
-      }
-    };
-
-    const sendTypingMessage = (isTyping: any) => {
-      data.options = {
-        data: {
-          businessID: constant.typeUserTyping,
-          typingStatus: isTyping ? 1 : 0,
-          version: 1,
-          userAction: isTyping ? 14 : 0,
-          actionParam: isTyping ? constant.typeInputStatusIng : constant.typeInputStatusEnd,
-        },
-        description: '',
-        extension: '',
-      };
-      TypingHeader.TUIServer.sendTypingMessage(data.options);
-      return;
-    };
-
-    const getLastOtherMessageTime = (messageList: any) => {
-      if (!messageList) return 0;
-      for (let i = messageList.length - 1; i >= 0; i--) {
-        if (!isTypingMessage(messageList[i]) && messageList[i].flow === 'in') {
-          return messageList[i].time;
-        }
-      }
-      return 0;
-    };
-
-    const debounce = (func: any, wait = 2000) => {
-      let timer: any;
-      return function () {
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(func, wait);
-      };
-    };
-
-    const waitTypingEnd = debounce(() => {
-      data.otherTypingStatus = 0;
-    }, 5000);
-
-    return {
-      ...toRefs(data),
-      conversationID,
-      conversationName,
-      conversationType,
-      title,
-      isTypingMessage,
-      sendTypingMessage,
-      handleTypingMessageStatus,
-      getLastOtherMessageTime,
-      debounce,
-      waitTypingEnd,
-      onTyping,
-    };
-  },
-});
-export default TypingHeader;
-</script>
-<style scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
-h1 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/video/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/video/video.vue

@@ -1,72 +0,0 @@
-<template>
-  <span class="upload-btn icon icon-video">
-      <input title="视频" v-if="!isMute" type="file" data-type="video" accept="video/*" @change="sendUploadMessage" />
-      <slot />
-  </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
-import { handleErrorPrompts } from '../../../utils';
-
-
-const Video = defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-    isMute: {
-      type: Boolean,
-      default: () => false,
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  setup(props:any, ctx:any) {
-    const data = reactive({
-      isMute: false,
-    });
-
-    watchEffect(() => {
-      data.isMute = props.isMute;
-    });
-    // 发送需要上传的消息：视频
-    const sendUploadMessage = async (e:any) => {
-      if (e.target.files.length > 0) {
-        try {
-          await Video.TUIServer.sendVideoMessage(e.target);
-        } catch (error) {
-          handleErrorPrompts(error, props);
-        }
-      }
-      e.target.value = '';
-    };
-
-    return {
-      ...toRefs(data),
-      sendUploadMessage,
-    };
-  },
-});
-export default Video;
-</script>
-
-<style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
-.upload-btn {
-  position: relative;
-  input {
-    position: absolute;
-    cursor: pointer;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/words/index.ts

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

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/words/style/color.scss

@@ -1,59 +0,0 @@
-.words {
-  &-main {
-    background: #ffffff;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-
-    header {
-      aside {
-        font-weight: 500;
-        color: #000000;
-
-        h1 {
-          font-weight: 500;
-          color: #000000;
-        }
-
-        a {
-          color: #006eff;
-        }
-      }
-    }
-  }
-
-  &-list {
-    &-item {
-      cursor: pointer;
-      font-weight: 400;
-      color: #50545c;
-
-      &:hover {
-        color: #006eff;
-      }
-    }
-  }
-}
-
-.words-H5-main {
-  background: rgba(0, 0, 0, 0.5);
-
-  .words-main-content {
-    background: #ffffff;
-
-    .words-list {
-      &-item {
-        border-bottom: 1Px solid #eeeeee;
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        color: #333333;
-        letter-spacing: 0;
-      }
-    }
-
-    .close {
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      color: #3370ff;
-      letter-spacing: 0;
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/words/style/h5.scss

@@ -1,52 +0,0 @@
-.words-H5 {
-  display: inline-block;
-  position: relative;
-  cursor: auto;
-
-  .words-H5-main {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 100vw;
-    height: auto;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: 0;
-
-    .words-main-content {
-      padding: 23Px 27Px 12Px;
-      border-radius: 12Px 12Px 0 0;
-
-      header {
-        padding: 0;
-
-        aside {
-          flex-direction: column;
-          align-items: flex-start;
-          font-size: 16Px;
-          line-height: 28Px;
-
-          h1 {
-            font-size: 20Px;
-          }
-        }
-
-        .close {
-          font-size: 18Px;
-          line-height: 27Px;
-        }
-      }
-
-      .words-list {
-        &-item {
-          padding: 12Px 0;
-          font-size: 18Px;
-          line-height: 25Px;
-        }
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/words/style/index.scss

@@ -1,5 +0,0 @@
-@import './color.scss';
-@import './web.scss';
-@import './h5.scss';
-@import url('../../../../../styles/common.scss');
-@import url('../../../../../styles/icon.scss');

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/words/style/web.scss

@@ -1,49 +0,0 @@
-.words {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-
-  .icon {
-    margin: 12Px 10Px 0;
-  }
-
-  &-main {
-    position: absolute;
-    z-index: 5;
-    width: 315Px;
-    top: -200Px;
-    padding: 12Px;
-    display: flex;
-    flex-direction: column;
-    width: 19.13rem;
-    height: 12.44rem;
-    overflow-y: auto;
-
-    header {
-      display: flex;
-      justify-content: space-between;
-
-      aside {
-        display: flex;
-        align-items: center;
-        font-size: 12Px;
-
-        h1 {
-          font-size: 12Px;
-        }
-      }
-    }
-  }
-
-  &-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    &-item {
-      cursor: pointer;
-      padding: 4Px 0;
-      font-size: 12Px;
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/plugin-components/words/words.vue

@@ -1,122 +0,0 @@
-<template>
-  <div class="words" :class="[isH5 ? 'words-H5' : '']">
-      <i class="icon icon-words" title="快速回复" @click="toggleShow"></i>
-      <main class="words-main" :class="[isH5 ? 'words-H5-main' : '']" v-show="show&&!isMute">
-        <div class="words-main-content" ref="dialog">
-          <header>
-            <aside>
-              <h1>{{$t('Words.常用语-快捷回复工具')}}</h1>
-            </aside>
-            <span v-if="isH5" class="close" @click="toggleShow">关闭</span>
-          </header>
-          <ul class="words-list">
-            <li class="words-list-item" v-for="(item, index) in list" :key="index"  @click="select(item)">
-              <label>{{item.value}}</label>
-            </li>
-          </ul>
-        </div>
-      </main>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs, watch, ref } from 'vue';
-import { useI18nLocale  } from '../../../../../TUIPlugin/TUIi18n';
-import { onClickOutside } from '@vueuse/core';
-
-const Words = defineComponent({
-  type: 'custom',
-  props: {
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-    isMute: {
-      type: Boolean,
-      default: () => false,
-    },
-    isH5: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  setup(props:any, ctx:any) {
-    const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-    const list:any = [
-      {
-        value: '在吗？在吗？在吗？重要的话说三遍。',
-      },
-      {
-        value: '好久没聊天了，快来和我说说话～',
-      },
-      {
-        value: '好的，就这么说定了。',
-      },
-      {
-        value: '感恩的心，感谢有你。',
-      },
-      {
-        value: '糟糕！是心动的感觉！',
-      },
-      {
-        value: '心疼地抱抱自己，我太难了！',
-      },
-      {
-        value: '没关系，别在意，事情过去就过去了。',
-      },
-      {
-        value: '早上好，今天也是让人期待的一天呢！',
-      },
-      {
-        value: '熬夜有什么用，又没人陪你聊天，早点休息吧。',
-      },
-    ];
-    const data = reactive({
-      list: [],
-      show: false,
-      isMute: false,
-      locale: useI18nLocale(),
-    });
-
-    const dialog:any = ref();
-
-    watch(() => data.locale, (newVal:any, oldVal:any) => {
-      data.list = list.map((item:any) => ({
-        value: t(`Words.${item.value}`),
-      }));
-    });
-
-    watchEffect(() => {
-      data.show = props.show;
-      data.isMute = props.isMute;
-    });
-
-    const toggleShow = () => {
-      data.show = !data.show;
-      if (data.show) {
-        data.list = list.map((item:any) => ({
-          value: t(`Words.${item.value}`),
-        }));
-      }
-    };
-
-    onClickOutside(dialog, () => {
-      data.show = false;
-    });
-
-    const select = (item:any, index?:number) => {
-      const text = item.value;
-      toggleShow();
-      Words.TUIServer.sendTextMessage(text);
-    };
-    return {
-      ...toRefs(data),
-      toggleShow,
-      select,
-      dialog,
-    };
-  },
-});
-export default Words;
-</script>
-<style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/TUIComponents/container/TUIChat-temp/server.ts

@@ -1,1354 +0,0 @@
-import { TUINotification } from '../../../TUIPlugin';
-import Message from '../../../TUICore/tim/index';
-import IComponentServer from '../IComponentServer';
-import { JSONToObject } from './utils/utils';
-/**
- * class TUIChatServer
- *
- * TUIChat 逻辑主体
- */
-export default class TUIChatServer extends IComponentServer {
-  public TUICore: any;
-  public store: any;
-  public currentStore: any = {};
-  constructor(TUICore: any) {
-    super();
-    this.TUICore = TUICore;
-    this.bindTIMEvent();
-    this.store = TUICore.setComponentStore(
-      'TUIChat',
-      {},
-      this.updateStore.bind(this)
-    );
-  }
-
-  /**
-   * 组件销毁
-   * destroy
-   */
-  public destroyed() {
-    this.unbindTIMEvent();
-  }
-
-  /**
-   * 数据监听回调
-   * data listener callback
-   *
-   * @param {any} newValue 新数据
-   * @param {any} oldValue 旧数据
-   *
-   */
-  updateStore(newValue: any, oldValue: any) {
-    Object.assign(this.currentStore, newValue);
-    if (!newValue.conversation.conversationID) {
-      this.currentStore.messageList = [];
-      return;
-    }
-    if (
-      newValue.conversation.conversationID &&
-      newValue.conversation.conversationID !==
-        oldValue.conversation.conversationID
-    ) {
-      this.render(newValue.conversation);
-    }
-  }
-
-  public render(conversation: any) {
-    const len = 15;
-    this.currentStore.isFirstRender = true;
-    this.currentStore.messageList = [];
-    this.currentStore.readSet.clear();
-    this.getMessageList({
-      conversationID: conversation.conversationID,
-      count: len
-    });
-    if (conversation.type === this.TUICore.TIM.TYPES.CONV_GROUP) {
-      this.currentStore.userInfo.isGroup = true;
-      const options = {
-        groupID: conversation.groupProfile.groupID,
-        userIDList: [conversation.groupProfile.selfInfo.userID]
-      };
-      this.getGroupProfile({ groupID: conversation.groupProfile.groupID });
-      this.getGroupMemberProfile(options).then((res: any) => {
-        const { memberList } = res.data;
-        const [selfInfo] = memberList;
-        this.currentStore.selfInfo = selfInfo;
-      });
-      this?.TUICore?.TUIServer?.TUIGroup?.getGroupMemberList({
-        groupID: conversation.groupProfile.groupID,
-        count: 100,
-        offset: 0
-      }).then((res: any) => {
-        this.currentStore.allMemberList = res.data?.memberList;
-      });
-    } else {
-      this.currentStore.userInfo.isGroup = false;
-      this.currentStore.userInfo.list = [conversation?.userProfile];
-    }
-  }
-
-  /**
-   * /////////////////////////////////////////////////////////////////////////////////
-   * //
-   * //                                    TIM 事件监听注册接口
-   * //                        TIM Event listener registration interface
-   * //
-   * /////////////////////////////////////////////////////////////////////////////////
-   */
-
-  private bindTIMEvent() {
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_RECEIVED,
-      this.handleMessageReceived,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_MODIFIED,
-      this.handleMessageModified,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_REVOKED,
-      this.handleMessageRevoked,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER,
-      this.handleMessageReadByPeer,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED,
-      this.handleGroupListUpdated,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED,
-      this.handleMessageReadReceiptReceived,
-      this
-    );
-  }
-
-  private unbindTIMEvent() {
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_RECEIVED,
-      this.handleMessageReceived
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_MODIFIED,
-      this.handleMessageModified
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_REVOKED,
-      this.handleMessageRevoked
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_BY_PEER,
-      this.handleMessageReadByPeer
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.GROUP_LIST_UPDATED,
-      this.handleGroupListUpdated
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.MESSAGE_READ_RECEIPT_RECEIVED,
-      this.handleMessageReadReceiptReceived
-    );
-  }
-
-  private handleMessageReceived(event: any) {
-    event?.data?.forEach((message: Message) => {
-      if (
-        message?.conversationID === this?.store?.conversation?.conversationID
-      ) {
-        this.currentStore.messageList = [
-          ...this.currentStore.messageList,
-          message
-        ];
-      }
-      TUINotification.getInstance().notify(message);
-    });
-  }
-
-  private handleMessageModified(event: any) {
-    const middleData = this.currentStore.messageList;
-    this.currentStore.messageList = [];
-    this.currentStore.messageList = middleData;
-  }
-  private handleMessageRevoked(event: any) {
-    const middleData = this.currentStore.messageList;
-    this.currentStore.messageList = [];
-    this.currentStore.messageList = middleData;
-  }
-  private handleMessageReadByPeer(event: any) {
-    const middleData = this.currentStore.messageList;
-    this.currentStore.messageList = [];
-    this.currentStore.messageList = middleData;
-  }
-
-  private handleGroupListUpdated(event: any) {
-    event?.data.map((item: any) => {
-      if (item?.groupID === this?.store?.conversation?.groupProfile?.groupID) {
-        this.store.conversation.groupProfile = item;
-        this.currentStore.conversation = {};
-        this.currentStore.conversation = this.store.conversation;
-      }
-      return item;
-    });
-  }
-
-  private handleMessageReadReceiptReceived(event: any) {
-    const middleData = this.currentStore.messageList;
-    this.currentStore.messageList = [];
-    this.currentStore.messageList = middleData;
-  }
-
-  /**
-   * /////////////////////////////////////////////////////////////////////////////////
-   * //
-   * //                                 处理 TIM 接口参数及回调
-   * //                     Handling TIM interface parameters and callbacks
-   * //
-   * /////////////////////////////////////////////////////////////////////////////////
-   */
-
-  /**
-   * 创建消息生成参数
-   * Create message generation parameters
-   *
-   * @param {Object} content 消息体
-   * @param {String} type 消息类型 text: 文本类型 file: 文件类型 face: 表情 location: 地址 custom: 自定义 merger: 合并 forward: 转发
-   * @param {Callback} callback 回调函数
-   * @param {any} to 发送的对象
-   * @returns {options} 消息参数
-   */
-  public handleMessageOptions(
-    content: any,
-    type: string,
-    callback?: any,
-    to?: any
-  ) {
-    const options: any = {
-      to: '',
-      conversationType: to?.type || this.store.conversation.type,
-      payload: content,
-      needReadReceipt: this.currentStore.needReadReceipt
-    };
-    if (this.currentStore.needTyping) {
-      options.cloudCustomData = {
-        messageFeature: {
-          needTyping: 1,
-          version: 1
-        }
-      };
-      options.cloudCustomData = JSON.stringify(options.cloudCustomData);
-    }
-    if (type === 'file' && callback) {
-      options.onProgress = callback;
-    }
-    switch (options.conversationType) {
-      case this.TUICore.TIM.TYPES.CONV_C2C:
-        options.to =
-          to?.userProfile?.userID ||
-          this.store.conversation?.userProfile?.userID ||
-          '';
-        break;
-      case this.TUICore.TIM.TYPES.CONV_GROUP:
-        options.to =
-          to?.groupProfile?.groupID ||
-          this.store.conversation?.groupProfile?.groupID ||
-          '';
-        break;
-      default:
-        break;
-    }
-    return options;
-  }
-
-  /**
-   * 处理异步函数
-   * Handling asynchronous functions
-   *
-   * @param {callback} callback 回调函数
-   * @returns {Promise} 返回异步函数
-   */
-  public handlePromiseCallback(callback: any) {
-    return new Promise<void>((resolve, reject) => {
-      const config = {
-        TUIName: 'TUIChat',
-        callback: () => {
-          callback && callback(resolve, reject);
-        }
-      };
-      this.TUICore.setAwaitFunc(config.TUIName, config.callback);
-    });
-  }
-
-  /**
-   * 重试异步函数
-   * Retry asynchronous functions
-   * 默认执行一次，之后按时间间隔列表重复执行直到成功，重复次数完毕后仍失败则失败
-   * Execute once by default, and then repeat it according to the time interval list until it succeeds.
-   * If it still fails after the number of repetitions is complete, it will reject.
-   *
-   * @param {callback} callback 回调函数/callback function
-   * @param {Array<number>} intervalList 间隔时间列表/interval list
-   * @param {callback} retryBreakFn 强制重复结束条件函数/break retry function
-   * @returns {Promise} 返回异步函数/return
-   */
-  public handlePromiseCallbackRetry(
-    callback: any,
-    intervalList: Array<number> = [],
-    retryBreakFn: any = function () {
-      return false;
-    }
-  ): Promise<any> {
-    return new Promise<void>((resolve, reject) => {
-      let times = 0;
-      function tryFn() {
-        times++;
-        callback()
-          .then(resolve)
-          .catch((error: any) => {
-            if (
-              times > intervalList.length ||
-              (retryBreakFn && retryBreakFn(error))
-            ) {
-              reject(error);
-              return;
-            }
-            setTimeout(tryFn, intervalList[times - 1]);
-          });
-      }
-      tryFn();
-    });
-  }
-
-  /**
-   * 文件上传进度函数处理
-   * File upload progress function processing
-   *
-   * @param {number} progress 文件上传进度 1表示完成
-   * @param {message} message 文件消息
-   */
-  public handleUploadProgress(progress: number, message: any) {
-    this.currentStore.messageList.map((item: any) => {
-      if (item.ID === message.ID) {
-        item.progress = progress;
-      }
-      return item;
-    });
-  }
-
-  /**
-   * /////////////////////////////////////////////////////////////////////////////////
-   * //
-   * //                                 TIM 方法
-   * //                               TIM methods
-   * //
-   * /////////////////////////////////////////////////////////////////////////////////
-   */
-
-  /**
-   * 发送表情消息
-   * Send face messages
-   *
-   * @param {Object} data 消息内容/message content
-   * @param {Number} data.index 表情索引/face index
-   * @param {String} data.data 额外数据/extra data
-   * @returns {Promise}
-   */
-  public sendFaceMessage(data: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(data, 'face');
-        const message = this.TUICore.tim.createFaceMessage(options);
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送图片消息
-   * Send image message
-   *
-   * @param {Image} image 图片文件/image
-   * @returns {Promise}
-   */
-  public sendImageMessage(image: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(
-          { file: image },
-          'file',
-          (progress: number) => {
-            this.handleUploadProgress(progress, message);
-          }
-        );
-        const message = this.TUICore.tim.createImageMessage(options);
-        message.progress = 0.01;
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送视频消息
-   * Send video message
-   *
-   * @param {Video} video 视频文件/video
-   * @returns {Promise}
-   */
-  public sendVideoMessage(video: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(
-          { file: video },
-          'file',
-          (progress: number) => {
-            this.handleUploadProgress(progress, message);
-          }
-        );
-        const message = this.TUICore.tim.createVideoMessage(options);
-        message.progress = 0.01;
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送文件消息
-   * Send file message
-   *
-   * @param {File} file 文件/file
-   * @returns {Promise}
-   */
-  public sendFileMessage(file: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(
-          { file },
-          'file',
-          (progress: number) => {
-            this.handleUploadProgress(progress, message);
-          }
-        );
-        const message = this.TUICore.tim.createFileMessage(options);
-        message.progress = 0.01;
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送自定义消息
-   * Send Custom message
-   *
-   * @param {Object} data 消息内容/message content
-   * @param {String} data.data 自定义消息的数据字段/custom message data fields
-   * @param {String} data.description 自定义消息的说明字段/custom message description fields
-   * @param {String} data.extension 自定义消息的扩展字段/custom message extension fields
-   * @returns {Promise}
-   */
-  public sendCustomMessage(data: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        data.data = JSON.stringify(data.data);
-        const options = this.handleMessageOptions(data, 'custom');
-        const message = this.TUICore.tim.createCustomMessage(options);
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送地理位置消息
-   * Send location message
-   *
-   * @param {Object} data 消息内容/message content
-   * @param {String} data.description 地理位置描述信息/geographic descriptive information
-   * @param {Number} data.longitude 经度/longitude
-   * @param {Number} data.latitude 纬度/latitude
-   * @returns {Promise}
-   */
-  public sendLocationMessage(data: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(data, 'location');
-        const message = this.TUICore.tim.createLocationMessage(options);
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 转发消息
-   * forward message
-   *
-   * @param {message} message 消息实例/message
-   * @param {any} to 转发的对象/forward to
-   * @returns {Promise}
-   */
-  public forwardMessage(message: any, to: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(message, 'forward', {}, to);
-        const imMessage = this.TUICore.tim.createForwardMessage(options);
-        const imResponse = await this.TUICore.tim.sendMessage(imMessage);
-        if (
-          this.store.conversation.conversationID ===
-          imResponse.data.message.conversationID
-        ) {
-          this.currentStore.messageList.push(imResponse.data.message);
-        }
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送消息已读回执
-   * Send message read receipt
-   *
-   * @param {Array} messageList 同一个 C2C 或 GROUP 会话的消息列表，最大长度为30/A list of messages for the same C2C or GROUP conversation, with a maximum length of 30
-   * @returns {Promise}
-   */
-  public async sendMessageReadReceipt(messageList: Array<any>) {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse: any = await this.TUICore.tim.sendMessageReadReceipt(
-          messageList
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 拉取已读回执列表
-   * Pull read receipt list
-   *
-   * @param {Array} messageList 同一群会话的消息列表/The message list of the same group of the conversation
-   * @returns {Promise}
-   */
-  public async getMessageReadReceiptList(messageList: Array<any>) {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse: any =
-          await this.TUICore.tim.getMessageReadReceiptList(messageList);
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * /////////////////////////////////////////////////////////////////////////////////
-   * //
-   * //                                 对外方法
-   * //
-   * /////////////////////////////////////////////////////////////////////////////////
-   */
-
-  /**
-   * 获取 messageList
-   * get messagelist
-   *
-   * @param {any} options 获取 messageList 参数/messageList options
-   * @param {Boolean} history  是否获取历史消息/Whether to get historical information
-   * @returns {Promise}
-   */
-  public async getMessageList(options: any, history?: boolean) {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getMessageList(options);
-        if (imResponse.data.messageList.length) {
-          await this.getMessageReadReceiptList(imResponse.data.messageList);
-        }
-        if (!history) {
-          this.currentStore.messageList = imResponse.data.messageList;
-        } else {
-          this.currentStore.messageList = [
-            ...imResponse.data.messageList,
-            ...this.currentStore.messageList
-          ];
-        }
-        this.currentStore.nextReqMessageID = imResponse.data.nextReqMessageID;
-        this.currentStore.isCompleted = imResponse.data.isCompleted;
-
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 获取历史消息
-   * get history messagelist
-   *
-   * @returns {Promise}
-   */
-  public async getHistoryMessageList() {
-    const options = {
-      conversationID: this.currentStore.conversation.conversationID,
-      nextReqMessageID: this.currentStore.nextReqMessageID,
-      count: 15
-    };
-    if (!this.currentStore.isCompleted) {
-      this.getMessageList(options, true);
-    }
-  }
-
-  /**
-   * 发送文本消息
-   * send text message
-   *
-   * @param {any} text 发送的消息/text message
-   * @param {object} data 被引用消息的内容/The content of the quoted message
-   * @returns {Promise}
-   */
-  public sendTextMessage(text: any, data: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions({ text }, 'text');
-        let cloudCustomDataObj = {};
-        if (options.cloudCustomData) {
-          try {
-            cloudCustomDataObj = JSONToObject(options.cloudCustomData);
-          } catch {
-            cloudCustomDataObj = {};
-          }
-        }
-        const cloudCustomData = JSON.stringify(data);
-        const secondOptions = Object.assign(options, {
-          cloudCustomData,
-          ...cloudCustomDataObj
-        });
-        const message = this.TUICore.tim.createTextMessage(secondOptions);
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送【对方正在输入中】在线自定义消息
-   * send typing online custom message
-   *
-   * @param {Object} data 消息内容/message content
-   * @param {String} data.data 自定义消息的数据字段/custom message data field
-   * @param {String} data.description 自定义消息的说明字段/custom message description field
-   * @param {String} data.extension 自定义消息的扩展字段/custom message extension field
-   * @returns {Promise}
-   */
-  public sendTypingMessage(data: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        data.data = JSON.stringify(data.data);
-        const options = this.handleMessageOptions(data, 'custom');
-        const message = this.TUICore.tim.createCustomMessage(options);
-        const imResponse = await this.TUICore.tim.sendMessage(message, {
-          onlineUserOnly: true
-        });
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送@ 提醒功能的文本消息
-   * Send @ Reminder text message
-   *
-   * @param {any} data 消息内容/message content
-   * @param {String} data.text 文本消息/text message
-   * @param {Array} data.atUserList 需要 @ 的用户列表，如果需要 @ALL，请传入 TIM.TYPES.MSG_AT_ALL / List of users who need @, if you need @ALL, please pass in TIM.TYPES.MSG_AT_ALL
-   * @returns {message}
-   *
-   * - 注：此接口仅用于群聊/This interface is only used for group chat
-   */
-  public sendTextAtMessage(data: any) {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(data, 'text');
-        const message = this.TUICore.tim.createTextAtMessage(options);
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 发送合并消息
-   * send merger message
-   *
-   * @param {Object} data 消息内容/message content
-   * @param {Array.<Message>} data.messageList 合并的消息列表/merger message list
-   * @param {String} data.title 合并的标题/merger title
-   * @param {String} data.abstractList 摘要列表，不同的消息类型可以设置不同的摘要信息/Summary list, different message types can set different summary information
-   * @param {String} data.compatibleText 兼容文本/ompatible text
-   * @returns {Promise}
-   */
-  public sendMergerMessage(data: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const options = this.handleMessageOptions(data, 'merger');
-        const message = this.TUICore.tim.createMergerMessage(options);
-        this.currentStore.messageList.push(message);
-        const imResponse = await this.TUICore.tim.sendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.map(
-          (item: any) => {
-            if (item.ID === imResponse.data.message.ID) {
-              return imResponse.data.message;
-            }
-            return item;
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 消息撤回
-   * revoke message
-   *
-   * @param {message} message 消息实例/message
-   * @returns {Promise}
-   */
-  public revokeMessage(message: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.revokeMessage(message);
-        const cloudCustomData = JSONToObject(message?.cloudCustomData);
-        if (cloudCustomData?.messageReply?.messageRootID) {
-          await this.revokeReplyMessage(message);
-        }
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      }
-    });
-  }
-
-  /**
-   * 重发消息
-   * resend message
-   *
-   * @param {message} message 消息实例/message
-   * @returns {Promise}
-   */
-  public resendMessage(message: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.resendMessage(message);
-        this.currentStore.messageList = this.currentStore.messageList.filter(
-          (item: any) => item.ID !== message.ID
-        );
-        this.currentStore.messageList.push(imResponse.data.message);
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 删除消息
-   * delete message
-   *
-   * @param {Array.<message>} messages 消息实例/message
-   * @returns {Promise}
-   */
-  public deleteMessage(messages: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.deleteMessage(messages);
-        resolve(imResponse);
-        const middleData = this.currentStore.messageList;
-        this.currentStore.messageList = [];
-        this.currentStore.messageList = middleData;
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 变更消息
-   * modify message
-   *
-   * @param {Array.<message>} message 消息实例/message
-   * @returns {Promise}
-   */
-  public modifyMessage(message: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.modifyMessage(message);
-        resolve(imResponse);
-      } catch (error) {
-        // 修改消息失败
-        // Modify message error
-        const code = (error as any)?.code;
-        const data = (error as any)?.data;
-        if (code === 2480) {
-          console.warn(
-            'MODIFY_MESSAGE_ERROR',
-            '修改消息发生冲突，data.message 是最新的消息',
-            'data.message:',
-            data?.message
-          );
-        } else if (code === 2481) {
-          console.warn('MODIFY_MESSAGE_ERROR', '不支持修改直播群消息');
-        } else if (code === 20026) {
-          console.warn('MODIFY_MESSAGE_ERROR', '消息不存在');
-        }
-        reject(error);
-      }
-    });
-  }
-  /**
-   * 回复消息
-   * reply message
-   * @param {Array.<message>} message 消息实例/message
-   * @returns {Promise}
-   */
-  public replyMessage(message: any, messageRoot?: any): Promise<any> {
-    const replyFunction = () => {
-      return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-        try {
-          const repliesObject = {
-            messageAbstract: message?.payload?.text,
-            messageSender: message?.from,
-            messageID: message?.ID,
-            messageType: message?.type,
-            messageTime: message?.time,
-            messageSequence: message?.sequence,
-            version: 1
-          };
-          if (!messageRoot) {
-            const cloudCustomData = JSONToObject(message?.cloudCustomData);
-            const messageRootID = cloudCustomData?.messageReply?.messageRootID;
-            messageRoot =
-              (await this?.currentStore?.messageList?.find(
-                (item: any) => item?.ID === messageRootID
-              )) || this.findMessage(messageRootID);
-          }
-          const rootCloudCustomData = messageRoot?.cloudCustomData
-            ? JSONToObject(messageRoot?.cloudCustomData)
-            : { messageReplies: {} };
-          if (rootCloudCustomData?.messageReplies?.replies) {
-            rootCloudCustomData.messageReplies.replies = [
-              // eslint-disable-next-line no-unsafe-optional-chaining
-              ...rootCloudCustomData?.messageReplies?.replies,
-              repliesObject
-            ];
-          } else {
-            rootCloudCustomData.messageReplies = {
-              replies: [repliesObject],
-              version: 1
-            };
-          }
-          messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
-          const imResponse = this.modifyMessage(messageRoot);
-          resolve(imResponse);
-        } catch (error) {
-          reject(error);
-        }
-      });
-    };
-    const retryBreakFunction = function (error: any) {
-      if (error && error?.code === 2480) return false;
-      return true;
-    };
-    return this.handlePromiseCallbackRetry(
-      replyFunction,
-      [500, 1000, 3000],
-      retryBreakFunction
-    );
-  }
-
-  /**
-   * 撤回回复消息
-   * revoke reply message
-   * @param {Array.<message>} message 消息实例/message
-   * @returns {Promise}
-   */
-  public revokeReplyMessage(message: any, messageRoot?: any): Promise<any> {
-    const revokeReplyFunction = () => {
-      return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-        try {
-          if (!messageRoot) {
-            const cloudCustomData = JSONToObject(message?.cloudCustomData);
-            const messageRootID = cloudCustomData?.messageReply?.messageRootID;
-            messageRoot =
-              (await this?.currentStore?.messageList?.find(
-                (item: any) => item?.ID === messageRootID
-              )) || this.findMessage(messageRootID);
-          }
-          const rootCloudCustomData = messageRoot?.cloudCustomData
-            ? JSONToObject(messageRoot?.cloudCustomData)
-            : { messageReplies: {} };
-          if (rootCloudCustomData?.messageReplies?.replies) {
-            const index = rootCloudCustomData.messageReplies.replies.findIndex(
-              (item: any) => item?.messageID === message?.ID
-            );
-            rootCloudCustomData?.messageReplies?.replies?.splice(index, 1);
-          }
-          messageRoot.cloudCustomData = JSON.stringify(rootCloudCustomData);
-          const imResponse = this.modifyMessage(messageRoot);
-          resolve(imResponse);
-        } catch (error) {
-          reject(error);
-        }
-      });
-    };
-    const retryBreakFunction = function (error: any) {
-      if (error && error?.code === 2480) return false;
-      return true;
-    };
-    return this.handlePromiseCallbackRetry(
-      revokeReplyFunction,
-      [500, 1000, 3000],
-      retryBreakFunction
-    );
-  }
-
-  /**
-   * 表情回应
-   * emoji react
-   * @param {Array.<message>} message 消息实例/message
-   * @returns {Promise}
-   */
-  public emojiReact(message: any, emojiID: any): Promise<any> {
-    const emojiReactFunction = () => {
-      return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-        try {
-          if (!message || !message?.ID || !emojiID) reject();
-          const userID =
-            this.TUICore?.TUIServer?.TUIProfile?.store?.profile?.userID;
-          message =
-            (await this?.currentStore?.messageList?.find(
-              (item: any) => item?.ID === message?.ID
-            )) || this.findMessage(message?.ID);
-          const cloudCustomData = message?.cloudCustomData
-            ? JSONToObject(message?.cloudCustomData)
-            : { messageReact: {} };
-          if (cloudCustomData?.messageReact?.reacts) {
-            if (cloudCustomData?.messageReact?.reacts[emojiID]) {
-              const index =
-                cloudCustomData?.messageReact?.reacts[emojiID]?.indexOf(userID);
-              if (index === -1) {
-                cloudCustomData?.messageReact?.reacts[emojiID]?.push(userID);
-              } else {
-                cloudCustomData?.messageReact?.reacts[emojiID]?.splice(
-                  index,
-                  1
-                );
-                if (
-                  cloudCustomData?.messageReact?.reacts[emojiID]?.length === 0
-                ) {
-                  delete cloudCustomData?.messageReact?.reacts[emojiID];
-                }
-              }
-            } else {
-              cloudCustomData.messageReact.reacts[emojiID] = [userID];
-            }
-          } else {
-            cloudCustomData.messageReact = {
-              reacts: {},
-              version: 1
-            };
-            cloudCustomData.messageReact.reacts[emojiID] = [userID];
-          }
-          message.cloudCustomData = JSON.stringify(cloudCustomData);
-          const imResponse = this.modifyMessage(message);
-          resolve(imResponse);
-        } catch (error) {
-          reject(error);
-        }
-      });
-    };
-    const retryBreakFunction = function (error: any) {
-      if (error && error?.code === 2480) return false;
-      return true;
-    };
-    return this.handlePromiseCallbackRetry(
-      emojiReactFunction,
-      [500, 1000, 3000],
-      retryBreakFunction
-    );
-  }
-
-  /**
-   * 查询消息
-   * find message
-   * @param {String} messageID 消息实例ID/messageID
-   * @returns {Promise}
-   */
-  public findMessage(messageID: string): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.findMessage(messageID);
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 获取群组属性
-   * get group profile
-   *
-   * @param {any} options 参数
-   * @param {String} options.groupID 群组ID
-   * @param {Array.<String>} options.groupProfileFilter 群资料过滤器
-   * @returns {Promise}
-   */
-  public getGroupProfile(options: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getGroupProfile(options);
-        this.currentStore.conversation.groupProfile = imResponse.data.group;
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 获取群成员资料
-   * get group member profile
-   *
-   * @param {any} options 参数
-   * @param {String} options.groupID 群组ID
-   * @param {Array.<String>} options.userIDList 要查询的群成员用户 ID 列表
-   * @param {	Array.<String>} options.memberCustomFieldFilter 群成员自定义字段筛选
-   * @returns {Promise}
-   */
-  public getGroupMemberProfile(options: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getGroupMemberProfile(
-          options
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 处理申请加群
-   * handling group application
-   * - 管理员
-   *   administrator
-   *
-   * @param {any} options 参数
-   * @param {String} options.handleAction 处理结果 Agree(同意) / Reject(拒绝)
-   * @param {String} options.handleMessage 附言
-   * @param {Message} options.message 对应【群系统通知】的消息实例
-   * @returns {Promise}
-   */
-  public handleGroupApplication(options: any): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.handleGroupApplication(
-          options
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 获取其他用户资料
-   * get user profile
-   *
-   * @param {Array<string>} userIDList 用户的账号列表/userID list
-   * @returns {Promise}
-   */
-  public async getUserProfile(userIDList: Array<string>) {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getUserProfile({
-          userIDList
-        });
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 获取 SDK 缓存的好友列表
-   * Get the friend list cached by the SDK
-   *
-   * @param {Array<string>} userIDList 用户的账号列表
-   * @returns {Promise}
-   */
-  public async getFriendList(): Promise<void> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getFriendList();
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 校验好友关系
-   * check friend
-   *
-   * @param {string} userID 用户账号
-   * @returns {Promise}
-   */
-  public async checkFriend(userID: string, type: string): Promise<void> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.checkFriend({
-          userIDList: [userID],
-          type
-        });
-        const isFriendShip = imResponse?.data?.successUserIDList[0]?.relation;
-        resolve(isFriendShip);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 获取群消息已读成员列表
-   * Get the list of memebers who have read the group message.
-   *
-   * @param {message} message 消息实例/message
-   * @param {string} cursor 分页拉取的游标，第一次拉取传''/Paging pull the cursor,first pull pass ''
-   * @param {number} count 分页拉取的个数/The number of page pulls
-   * @returns {Promise}
-   */
-  public async getGroupReadMemberList(
-    message: any,
-    cursor = '',
-    count = 15
-  ): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getGroupMessageReadMemberList(
-          {
-            message,
-            filter: 0,
-            cursor,
-            count
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 获取群消息未读成员列表
-   * Get the list of memebers who have not read the group message.
-   *
-   * @param {message} message 消息实例/message
-   * @param {string} cursor 分页拉取的游标，第一次拉取传''/Paging pull the cursor,first pull pass ''
-   * @param {number} count 分页拉取的个数/The number of page pulls
-   * @returns {Promise}
-   */
-  public async getGroupUnreadMemberList(
-    message: any,
-    cursor = '',
-    count = 15
-  ): Promise<any> {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getGroupMessageReadMemberList(
-          {
-            message,
-            filter: 1,
-            cursor,
-            count
-          }
-        );
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * 自己发送消息上屏显示
-   *
-   * @param {message} message 消息实例/message
-   */
-  public async handleMessageSentByMeToView(message: any) {
-    if (message?.conversationID === this?.store?.conversation?.conversationID) {
-      this.currentStore.messageList.push(message);
-    }
-    return;
-  }
-
-  /**
-   * /////////////////////////////////////////////////////////////////////////////////
-   * //
-   * //                                    UI 数据绑定server数据同步
-   * //                           UI data binding server data synchronization
-   * //
-   * /////////////////////////////////////////////////////////////////////////////////
-   */
-
-  /**
-   * 赋值
-   * bind
-   *
-   * @param {Object} params 使用的数据/params
-   * @returns {Object} 数据/data
-   */
-  public bind(params: any) {
-    return (this.currentStore = params);
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/style/color.scss

@@ -1,151 +0,0 @@
-.TUIChat {
-  &-header {
-    h1 {
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      color: #000000;
-      letter-spacing: 0;
-    }
-  }
-
-  .TUIChat-setting {
-    background: #ffffff;
-  }
-
-  &-footer {
-    border-top: 1Px solid #f4f5f9;
-
-    .input {
-      textarea {
-        &::placeholder {
-          color: #dddddd;
-        }
-      }
-
-      p {
-        color: #dddddd;
-      }
-
-      .input-btn {
-        font-weight: 400;
-        background: #006eff;
-        color: #ffffff;
-        letter-spacing: 0;
-
-        &:disabled {
-          opacity: 0.3;
-        }
-
-        &-hover {
-          background: #000000;
-
-          &::before {
-            border: 10Px solid transparent;
-            border-left: 10Px solid #000000;
-          }
-        }
-      }
-    }
-  }
-
-  .disabled {
-    &::before {
-      background: #fbfbfb;
-    }
-  }
-}
-
-.TUI-message-list {
-  .message-more {
-    color: #999999;
-    cursor: pointer;
-  }
-}
-
-.dialog {
-  background: #ffffff;
-
-  &-item {
-    background: #ffffff;
-    border: 1Px solid #e0e0e0;
-    box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
-
-    p {
-      font-weight: 400;
-      color: #4f4f4f;
-
-      &:hover {
-        background: rgba(0, 110, 255, 0.1);
-      }
-    }
-  }
-
-  &-userInfo {
-    background: rgba(#000000, 0.3);
-
-    .userInfo-main {
-      background: #ffffff;
-
-      main {
-        ol {
-          dl {
-            .userInfo-mask {
-              background: #ffffff;
-              box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.image-dialog {
-  background: rgba(0, 0, 0, 0.3);
-
-  header {
-    background: rgba(0, 0, 0, 0.49);
-  }
-}
-
-.btn {
-  font-weight: 400;
-  color: #ffffff;
-  letter-spacing: 0;
-
-  &-cancel {
-    border: 1Px solid #dddddd;
-    color: #666666;
-  }
-
-  &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
-  }
-
-  &:disabled {
-    opacity: 0.3;
-  }
-}
-
-.toggleMask {
-  &::before {
-    opacity: 0;
-  }
-}
-
-.TUIChat-H5 {
-  .TUIChat-header {
-    background: #ffffff;
-  }
-
-  .TUIChat-footer {
-    background: #ffffff;
-
-    .input {
-      input {
-        background: #f4f5f9;
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/style/dist/h5.css

@@ -1,219 +0,0 @@
-.TUIChat-H5 {
-  flex: 1;
-  position: static;
-}
-.TUIChat-H5 .TUIChat-header {
-  width: 100%;
-  box-sizing: border-box;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-.TUIChat-H5 .TUIChat-header .setting {
-  width: 27px;
-}
-.TUIChat-H5 .TUIChat-main .TUI-message-list {
-  height: auto;
-}
-.TUIChat-H5 .TUIChat-footer {
-  width: 100%;
-  box-sizing: border-box;
-  position: sticky;
-  bottom: 0;
-  flex-direction: column-reverse;
-  height: auto;
-  padding: 14px 23px 23px;
-  z-index: 1;
-}
-.TUIChat-H5 .TUIChat-footer .func {
-  display: flex;
-  flex-direction: column;
-}
-.TUIChat-H5 .TUIChat-footer .func-main {
-  display: flex;
-  justify-content: space-between;
-}
-.TUIChat-H5 .TUIChat-footer .reply {
-  order: 1;
-  padding-bottom: 10px;
-}
-.TUIChat-H5 .TUIChat-footer .reply-box {
-  padding: 0;
-}
-.TUIChat-H5 .TUIChat-footer .reply-box i {
-  display: none;
-}
-.TUIChat-H5 .TUIChat-footer .reply-box-show {
-  flex-direction: row;
-}
-.TUIChat-H5 .TUIChat-footer .reply-box-show span {
-  width: auto;
-}
-.TUIChat-H5 .TUIChat-footer .reply-box-show span:first-child {
-  padding-right: 2px;
-}
-.TUIChat-H5 .TUIChat-footer .reply-box-show span:last-child {
-  flex: 1;
-}
-.TUIChat-H5 .TUIChat-footer .input {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  align-items: flex-end;
-}
-.TUIChat-H5 .TUIChat-footer .input textarea {
-  width: auto;
-  height: auto;
-  padding: 0;
-  flex: 1;
-  background: #f4f5f9;
-  border-radius: 9.4px;
-  padding: 7px 18px;
-  font-size: 16px;
-  line-height: 18px;
-}
-.TUIChat-H5 .TUIChat-footer .input .reference {
-  overflow: hidden;
-  order: 1;
-  width: 100%;
-  max-width: 100%;
-  margin: 0;
-}
-.TUIChat-H5 .TUIChat-footer .input .reference-box {
-  overflow: hidden;
-  padding: 0;
-  width: 100%;
-  max-width: 100%;
-  padding: 10px;
-  margin: 5px 0;
-}
-.TUIChat-H5 .TUIChat-footer .input .reference-box-show {
-  overflow: hidden;
-  width: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  text-overflow: ellipsis;
-}
-.TUIChat-H5 .TUIChat-footer .input .reference-box-show span:last-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.TUIChat-H5 .TUIChat-footer .input button {
-  position: static !important;
-  margin-left: 7px;
-  word-break: keep-all;
-  height: 32px;
-  flex: 0;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background: rgba(0, 0, 0, 0.5);
-  max-height: none;
-  display: flex;
-  align-items: flex-end;
-  z-index: 1;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box {
-  position: static;
-  flex: 1;
-  max-height: 90%;
-  border-radius: 12px 12px 0 0;
-  padding: 14px 23px;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box-title h1 {
-  font-family: PingFangSC-Medium;
-  font-weight: 500;
-  font-size: 20px;
-  color: #000000;
-  letter-spacing: 0;
-  line-height: 28px;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box-title .close {
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  font-size: 18px;
-  color: #3370ff;
-  letter-spacing: 0;
-  line-height: 27px;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box li {
-  padding: 8px 0;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box li img {
-  width: 30px;
-  height: 30px;
-  border-radius: 6.4px;
-  padding: 0;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box li span {
-  font-size: 16px;
-  padding-left: 12px;
-}
-.TUIChat-H5 .TUIChat-footer .input .memberList-box-header span:last-child {
-  padding-left: 0;
-}
-.TUIChat-H5 .manage {
-  position: fixed;
-  height: 100%;
-  top: 0;
-}
-.TUIChat-H5 .mask {
-  position: fixed;
-  width: 100vw;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 9;
-}
-.TUIChat-H5 .mask-main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 150px;
-  background: white;
-  border-radius: 4px;
-}
-.TUIChat-H5 .mask header {
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  font-size: 14px;
-  color: #000000;
-  letter-spacing: 0;
-  text-align: center;
-  padding: 20px 0;
-}
-.TUIChat-H5 .mask footer {
-  display: flex;
-  width: 100%;
-  justify-content: space-around;
-  border-top: 1px solid #dddddd;
-  height: 40px;
-  align-items: center;
-}
-.TUIChat-H5 .mask footer p {
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  font-size: 14px;
-  color: #000000;
-  letter-spacing: 0;
-  text-align: center;
-}
-.TUIChat-H5 .mask footer i {
-  height: 40px;
-  width: 1px;
-  background: #dddddd;
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/style/h5.scss

@@ -1,261 +0,0 @@
-.TUIChat-H5 {
-  flex: 1;
-  position: static;
-
-  .TUIChat-header {
-    width: 100%;
-    box-sizing: border-box;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-
-    .setting {
-      width: 27Px;
-    }
-  }
-
-  .TUIChat-main {
-    .TUI-message-list {
-      height: auto;
-    }
-  }
-
-  .TUIChat-footer {
-    width: 100%;
-    box-sizing: border-box;
-    position: sticky;
-    bottom: 0;
-    flex-direction: column-reverse;
-    height: auto;
-    padding: 14Px 23Px 23Px;
-    z-index: 1;
-
-    .func {
-      display: flex;
-      flex-direction: column;
-
-      &-main {
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-
-    .reply {
-      order: 1;
-      padding-bottom: 10Px;
-
-      &-box {
-        padding: 0;
-
-        i {
-          display: none;
-        }
-
-        &-show {
-          flex-direction: row;
-
-          span {
-            width: auto;
-          }
-
-          span:first-child {
-            padding-right: 2Px;
-          }
-
-          span:last-child {
-            flex: 1;
-          }
-        }
-      }
-    }
-
-    .input {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-      align-items: flex-end;
-
-      textarea {
-        width: auto;
-        height: auto;
-        padding: 0;
-        flex: 1;
-        background: #f4f5f9;
-        border-radius: 9.4Px;
-        padding: 7Px 18Px;
-        font-size: 16Px;
-        line-height: 18Px;
-      }
-
-      .reference {
-        overflow: hidden;
-        order: 1;
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-
-        &-box {
-          overflow: hidden;
-          padding: 0;
-          width: 100%;
-          max-width: 100%;
-          padding: 10Px;
-          margin: 5Px 0;
-
-          &-show {
-            overflow: hidden;
-            width: 0;
-            flex: 1;
-            display: flex;
-            flex-direction: row;
-            text-overflow: ellipsis;
-
-            span:last-child {
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-          }
-        }
-      }
-
-      button {
-        position: static !important;
-        margin-left: 7Px;
-        word-break: keep-all;
-        height: 32Px;
-        flex: 0;
-      }
-
-      .memberList {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        background: rgba(0, 0, 0, 0.5);
-        max-height: none;
-        display: flex;
-        align-items: flex-end;
-        z-index: 1;
-
-        &-box {
-          position: static;
-          flex: 1;
-          max-height: 90%;
-          border-radius: 12Px 12Px 0 0;
-          padding: 14Px 23Px;
-
-          &-title {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 12Px 0;
-
-            h1 {
-              font-family: PingFangSC-Medium;
-              font-weight: 500;
-              font-size: 20Px;
-              color: #000000;
-              letter-spacing: 0;
-              line-height: 28Px;
-            }
-
-            .close {
-              font-family: PingFangSC-Regular;
-              font-weight: 400;
-              font-size: 18Px;
-              color: #3370ff;
-              letter-spacing: 0;
-              line-height: 27Px;
-            }
-          }
-
-          li {
-            padding: 8Px 0;
-
-            img {
-              width: 30Px;
-              height: 30Px;
-              border-radius: 6.4Px;
-              padding: 0;
-            }
-
-            span {
-              font-size: 16Px;
-              padding-left: 12Px;
-            }
-          }
-
-          &-header {
-            span {
-              &:last-child {
-                padding-left: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .manage {
-    position: fixed;
-    height: 100%;
-    top: 0;
-  }
-
-  .mask {
-    position: fixed;
-    width: 100vw;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 9;
-
-    &-main {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 150Px;
-      background: white;
-      border-radius: 4Px;
-    }
-
-    header {
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      font-size: 14Px;
-      color: #000000;
-      letter-spacing: 0;
-      text-align: center;
-      padding: 20Px 0;
-    }
-
-    footer {
-      display: flex;
-      width: 100%;
-      justify-content: space-around;
-      border-top: 1Px solid #dddddd;
-      height: 40Px;
-      align-items: center;
-
-      p {
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        font-size: 14Px;
-        color: #000000;
-        letter-spacing: 0;
-        text-align: center;
-      }
-
-      i {
-        height: 40Px;
-        width: 1Px;
-        background: #dddddd;
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/style/index.scss

@@ -1,5 +0,0 @@
-@import url('../../../styles/common.scss');
-@import url('../../../styles/icon.scss');
-@import "./color.scss";
-@import "./web.scss";
-@import "./h5.scss";

src/TUIKit/TUIComponents/container/TUIChat-temp/style/web.scss

@@ -1,526 +0,0 @@
-.TUIChat {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-
-  &-header {
-    padding: 12Px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 2px solid #DFE1E3;
-    background-color: #F1F2F3;
-
-    h1 {
-      font-size: 16Px;
-      line-height: 30Px;
-    }
-  }
-
-  &-safe-tips {
-    padding: 12Px 20Px;
-    background-color: rgba(255, 149, 0, 0.1);
-    color: #ff8c39;
-    line-height: 18Px;
-    font-family: 'PingFang SC';
-    font-style: normal;
-    font-weight: 400;
-    text-align: justify;
-    font-size: 12Px;
-
-    a {
-      color: #006eff;
-      float: right;
-    }
-  }
-
-  .TUIChat-setting {
-    position: absolute;
-    right: 0;
-    height: calc(100% - 40Px);
-    z-index: 2;
-    top: 40Px;
-  }
-
-  &-main {
-    min-height: 0Px;
-    flex: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-footer {
-    border-top: 2px solid #DFE1E3;
-    height: 173Px;
-    display: flex;
-    flex-direction: column;
-    background-color: #f1f2f3;
-
-    .input {
-      flex: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-
-      textarea {
-        width: 100%;
-        line-height: 20Px;
-        margin: 0;
-        padding: 2Px 20Px;
-        resize: none;
-        box-sizing: border-box;
-        border: none;
-        background: no-repeat;
-
-        &:focus {
-          outline: none;
-          border: none;
-        }
-      }
-
-      p {
-        padding: 12Px 20Px 20Px;
-      }
-
-      .input-btn {
-        position: absolute;
-        bottom: 20Px;
-        right: 20Px;
-        padding: 8Px 20Px;
-        border-radius: 4Px;
-        border: none;
-        font-size: 14Px;
-        text-align: center;
-        line-height: 20Px;
-
-        &:hover {
-          .input-btn-hover {
-            display: flex;
-          }
-        }
-
-        &-hover {
-          display: none;
-          justify-content: center;
-          align-items: center;
-          position: absolute;
-          right: 120%;
-          word-break: keep-all;
-          height: 30Px;
-          white-space: nowrap;
-          top: 0;
-          bottom: 0;
-          margin: auto 0;
-          padding: 5Px 10Px;
-          border-radius: 3Px;
-
-          &::before {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 0;
-            right: -20Px;
-          }
-        }
-      }
-    }
-  }
-
-  .disabled {
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.TUI-message-list {
-  flex: 1;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative;
-  background-color: #F1F2F3;
-
-  .message-more {
-    font-size: 0.9rem;
-    padding: 5Px;
-    text-align: center;
-  }
-
-  li:first-child {
-    margin-top: 5Px;
-  }
-
-  li {
-    display: flex;
-    position: relative;
-    padding: 0 20Px 30Px;
-    flex-direction: column;
-
-    .message-label {
-      max-width: 50Px;
-    }
-  }
-
-  .right {
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-  }
-
-  .to-bottom-tip {
-    position: sticky;
-    bottom: 10Px;
-    left: 100%;
-    margin-right: 15Px;
-    width: 92Px;
-    height: 28Px;
-    padding: 0 5Px;
-    background: #ffffff;
-    border: 1Px solid #e0e0e0;
-    box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    border-radius: 3Px;
-
-    .icon {
-      width: 10Px;
-      height: 10Px;
-    }
-
-    &-cont {
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      font-size: 10Px;
-      color: #147aff;
-      letter-spacing: 0;
-      text-align: center;
-      padding-left: 3Px;
-    }
-  }
-}
-
-.dialog {
-  position: absolute;
-  z-index: 5;
-
-  &-item {
-    min-width: min-content;
-    max-width: 220Px;
-    width: 72Px;
-    word-break: keep-all;
-    top: 30Px;
-    border-radius: 8Px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    white-space: nowrap;
-
-    li:first-child {
-      margin-top: 0;
-    }
-
-    li {
-      padding: 4Px 12Px;
-      font-size: 12Px;
-      line-height: 17Px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      flex-direction: row;
-
-      span {
-        padding-left: 4Px;
-      }
-    }
-  }
-
-  &-conversation {
-    .avatar {
-      width: 36Px;
-      height: 36Px;
-      margin: 0 5Px 0 8Px;
-    }
-
-    .name {
-      font-size: 14Px;
-    }
-  }
-
-  &-userInfo {
-    box-sizing: border-box;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-end;
-
-    .userInfo-main {
-      height: 100%;
-      box-sizing: border-box;
-      padding: 20Px;
-      width: 240Px;
-
-      header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      main {
-        display: flex;
-        padding: 20Px 0;
-
-        ol {
-          flex: 1;
-          display: flex;
-          flex-wrap: wrap;
-
-          dl {
-            position: relative;
-            flex: 0 0 33%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            img {
-              width: 40Px;
-              height: 40Px;
-            }
-
-            .more {
-              padding-top: 10Px;
-            }
-
-            dd {
-              max-width: 60Px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-
-            .userInfo-mask {
-              position: absolute;
-              z-index: 5;
-              padding: 20Px;
-              left: 100%;
-
-              li {
-                display: flex;
-                align-items: center;
-
-                label {
-                  width: 60Px;
-                }
-
-                span {
-                  max-width: 200Px;
-                  word-break: keep-all;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.image-dialog {
-  position: fixed;
-  z-index: 5;
-  width: 100vw;
-  height: calc(100vh - 63Px);
-  top: 63Px;
-  left: 0;
-
-  header {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10Px 10Px;
-  }
-}
-
-.memberList-box {
-  position: absolute;
-  bottom: 128Px;
-  width: 21.94rem;
-  max-height: 10rem;
-  overflow-y: auto;
-  background: #ffffff;
-  box-shadow: 0 0.06rem 0.63rem 0 rgba(2, 16, 43, 0.15);
-  border-radius: 0.13rem;
-
-  &-header {
-    height: 2.5rem;
-    padding-top: 5Px;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(0, 110, 255, 0.1);
-    }
-  }
-
-  span {
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    font-size: 0.88rem;
-    color: #000000;
-    letter-spacing: 0;
-    padding-left: 5Px;
-  }
-
-  &-body {
-    height: 2.5rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      background: rgba(0, 110, 255, 0.1);
-    }
-  }
-
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-    padding-left: 10Px;
-  }
-
-  .selected {
-    background: rgba(0, 110, 255, 0.1);
-  }
-}
-
-.reply {
-  display: flex;
-  width: 100%;
-
-  &-box {
-    flex: 1;
-    align-items: center;
-    display: flex;
-    padding: 0 18Px;
-
-    i {
-      height: 3.5rem;
-      border: 1Px solid #e8e8e9;
-    }
-
-    label {
-      margin-top: 5Px;
-    }
-
-    &-show {
-      flex: 1;
-      display: flex;
-      width: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex-direction: column;
-      justify-content: center;
-      padding-left: 6Px;
-
-      span {
-        height: 1.25rem;
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        font-size: 0.88rem;
-        color: #bfc1c5;
-        letter-spacing: 0;
-        text-overflow: ellipsis;
-        width: 100%;
-        overflow: hidden;
-      }
-    }
-  }
-}
-
-.reference {
-  width: auto;
-  padding-bottom: 0Px;
-  margin: 0Px 100Px 10Px 10Px;
-  display: flex;
-
-  &-box {
-    padding: 0;
-    overflow: hidden;
-    width: max-content;
-    padding: 10Px;
-    background-color: #fbfbfb;
-    display: flex;
-    border-radius: 8Px;
-
-    &-show {
-      width: max-content;
-      padding-right: 10Px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      flex: 1;
-
-      &-name {
-        padding-right: 5Px;
-      }
-
-      span {
-        width: max-content;
-        font-family: 'PingFang SC';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 12Px;
-        line-height: 17Px;
-        color: #666666;
-      }
-    }
-  }
-}
-
-.btn {
-  padding: 8Px 20Px;
-  border-radius: 4Px;
-  border: none;
-  font-size: 14Px;
-  text-align: center;
-  line-height: 20Px;
-}
-
-.toggleMask {
-  &::before {
-    position: fixed;
-    z-index: 1;
-    content: '';
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    opacity: 0;
-  }
-}
-
-::-webkit-scrollbar {
-  width: 6Px;
-  height: 140Px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10Px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10Px;
-  background-color: #9a999c;
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/utils/decodeText.ts

@@ -1,61 +0,0 @@
-import { emojiMap, emojiUrl } from './emojiMap';
-/** 传入messageBody（群系统消息SystemMessage，群提示消息GroupTip除外）
- * payload = {
- *  msgType: 'TIMTextElem',
- *  msgContent: {
- *    text: 'AAA[龇牙]AAA[龇牙]AAA[龇牙AAA]'
- *  }
- *}
- **/
-export function decodeText(payload:any) {
-  const renderDom = [];
-  // 文本消息
-  let temp = payload.text;
-  let left = -1;
-  let right = -1;
-  while (temp !== '') {
-    left = temp.indexOf('[');
-    right = temp.indexOf(']');
-    switch (left) {
-      case 0:
-        if (right === -1) {
-          renderDom.push({
-            name: 'text',
-            text: temp,
-          });
-          temp = '';
-        } else {
-          const emojiKey = temp.slice(0, right + 1);
-          if (emojiMap[emojiKey]) {
-            renderDom.push({
-              name: 'img',
-              src: emojiUrl + emojiMap[emojiKey],
-            });
-            temp = temp.substring(right + 1);
-          } else {
-            renderDom.push({
-              name: 'text',
-              text: '[',
-            });
-            temp = temp.slice(1);
-          }
-        }
-        break;
-      case -1:
-        renderDom.push({
-          name: 'text',
-          text: temp,
-        });
-        temp = '';
-        break;
-      default:
-        renderDom.push({
-          name: 'text',
-          text: temp.slice(0, left),
-        });
-        temp = temp.substring(left);
-        break;
-    }
-  }
-  return renderDom;
-}

src/TUIKit/TUIComponents/container/TUIChat-temp/utils/dist/utils.js

@@ -1,1078 +0,0 @@
-'use strict';
-var __assign =
-  (this && this.__assign) ||
-  function () {
-    __assign =
-      Object.assign ||
-      function (t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-      };
-    return __assign.apply(this, arguments);
-  };
-var __spreadArrays =
-  (this && this.__spreadArrays) ||
-  function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-      s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-      for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-        r[k] = a[j];
-    return r;
-  };
-var _this = this;
-exports.__esModule = true;
-exports.handleSkeletonSize =
-  exports.isMessageTip =
-  exports.throttle =
-  exports.deepCopy =
-  exports.isTypingMessage =
-  exports.JSONToObject =
-  exports.isJSON =
-  exports.handleOptions =
-  exports.isUrl =
-  exports.getImgLoad =
-  exports.translateGroupSystemNotice =
-  exports.handleCustomMessageShowContext =
-  exports.extractCallingInfoFromMessage =
-  exports.handleMergerMessageShowContext =
-  exports.handleFileMessageShowContext =
-  exports.handleAudioMessageShowContext =
-  exports.handleVideoMessageShowContext =
-  exports.handleImageMessageShowContext =
-  exports.handleLocationMessageShowContext =
-  exports.handleFaceMessageShowContext =
-  exports.handleTextMessageShowContext =
-  exports.handleTipMessageShowContext =
-  exports.handleShowLastMessage =
-  exports.handleReferenceForShow =
-  exports.handleAt =
-  exports.handleName =
-  exports.handleAvatar =
-    void 0;
-var date_1 = require('../../../utils/date');
-var decodeText_1 = require('./decodeText');
-var tim_1 = require('../../../../TUICore/tim');
-var constant_1 = require('../../constant');
-// Handling avatars
-function handleAvatar(item) {
-  var _a, _b, _c, _d, _e, _f;
-  var avatar = '';
-  switch (item.type) {
-    case tim_1['default'].TYPES.CONV_C2C:
-      avatar = isUrl(
-        (_a = item === null || item === void 0 ? void 0 : item.userProfile) ===
-          null || _a === void 0
-          ? void 0
-          : _a.avatar
-      )
-        ? (_b =
-            item === null || item === void 0 ? void 0 : item.userProfile) ===
-            null || _b === void 0
-          ? void 0
-          : _b.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png';
-      break;
-    case tim_1['default'].TYPES.CONV_GROUP:
-      avatar = isUrl(
-        (_c = item === null || item === void 0 ? void 0 : item.groupProfile) ===
-          null || _c === void 0
-          ? void 0
-          : _c.avatar
-      )
-        ? (_d =
-            item === null || item === void 0 ? void 0 : item.groupProfile) ===
-            null || _d === void 0
-          ? void 0
-          : _d.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png';
-      break;
-    case tim_1['default'].TYPES.CONV_SYSTEM:
-      avatar = isUrl(
-        (_e = item === null || item === void 0 ? void 0 : item.groupProfile) ===
-          null || _e === void 0
-          ? void 0
-          : _e.avatar
-      )
-        ? (_f =
-            item === null || item === void 0 ? void 0 : item.groupProfile) ===
-            null || _f === void 0
-          ? void 0
-          : _f.avatar
-        : 'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png';
-      break;
-  }
-  return avatar;
-}
-exports.handleAvatar = handleAvatar;
-// Handling names
-function handleName(item) {
-  var _a, _b;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var name = '';
-  switch (item.type) {
-    case tim_1['default'].TYPES.CONV_C2C:
-      name =
-        (item === null || item === void 0 ? void 0 : item.userProfile.nick) ||
-        ((_a = item === null || item === void 0 ? void 0 : item.userProfile) ===
-          null || _a === void 0
-          ? void 0
-          : _a.userID) ||
-        '';
-      break;
-    case tim_1['default'].TYPES.CONV_GROUP:
-      name =
-        item.groupProfile.name ||
-        ((_b =
-          item === null || item === void 0 ? void 0 : item.groupProfile) ===
-          null || _b === void 0
-          ? void 0
-          : _b.groupID) ||
-        '';
-      break;
-    case tim_1['default'].TYPES.CONV_SYSTEM:
-      name = t('系统通知');
-      break;
-  }
-  return name;
-}
-exports.handleName = handleName;
-// Handle whether there is someone@
-function handleAt(item) {
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var List = [
-    '[' + t('TUIConversation.有人@我') + ']',
-    '[' + t('TUIConversation.@所有人') + ']',
-    '[' +
-      t('TUIConversation.@所有人') +
-      '][' +
-      t('TUIConversation.有人@我') +
-      ']'
-  ];
-  var showAtType = '';
-  for (var index = 0; index < item.groupAtInfoList.length; index++) {
-    if (item.groupAtInfoList[index].atTypeArray[0] && item.unreadCount > 0) {
-      showAtType = List[item.groupAtInfoList[index].atTypeArray[0] - 1];
-    }
-  }
-  return showAtType;
-}
-exports.handleAt = handleAt;
-function handleReferenceForShow(message) {
-  var _a;
-  var data = {
-    referenceMessageForShow: '',
-    referenceMessageType: 0
-  };
-  if (
-    !message ||
-    !(message === null || message === void 0 ? void 0 : message.ID) ||
-    !(message === null || message === void 0 ? void 0 : message.type)
-  )
-    return data;
-  switch (message.type) {
-    case tim_1['default'].TYPES.MSG_TEXT:
-      data.referenceMessageForShow =
-        (_a =
-          message === null || message === void 0 ? void 0 : message.payload) ===
-          null || _a === void 0
-          ? void 0
-          : _a.text;
-      data.referenceMessageType = 1;
-      break;
-    case tim_1['default'].TYPES.MSG_CUSTOM:
-      data.referenceMessageForShow = '[自定义消息]';
-      data.referenceMessageType = 2;
-      break;
-    case tim_1['default'].TYPES.MSG_IMAGE:
-      data.referenceMessageForShow = '[图片]';
-      data.referenceMessageType = 3;
-      break;
-    case tim_1['default'].TYPES.MSG_AUDIO:
-      data.referenceMessageForShow = '[语音]';
-      data.referenceMessageType = 4;
-      break;
-    case tim_1['default'].TYPES.MSG_VIDEO:
-      data.referenceMessageForShow = '[视频]';
-      data.referenceMessageType = 5;
-      break;
-    case tim_1['default'].TYPES.MSG_FILE:
-      data.referenceMessageForShow = '[文件]';
-      data.referenceMessageType = 6;
-      break;
-    case tim_1['default'].TYPES.MSG_FACE:
-      data.referenceMessageForShow = '[表情]';
-      data.referenceMessageType = 8;
-      break;
-  }
-  return data;
-}
-exports.handleReferenceForShow = handleReferenceForShow;
-// Internal display of processing message box
-function handleShowLastMessage(item) {
-  var _a;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var lastMessage = item.lastMessage;
-  var conversation = item;
-  var showNick = '';
-  var lastMessagePayload = '';
-  // Judge the number of unread messages and display them only when the message is enabled without interruption.
-  var showUnreadCount =
-    conversation.unreadCount > 0 &&
-    conversation.messageRemindType ===
-      tim_1['default'].TYPES.MSG_REMIND_ACPT_NOT_NOTE
-      ? '[' +
-        (conversation.unreadCount > 99 ? '99+' : conversation.unreadCount) +
-        t('TUIConversation.条') +
-        '] '
-      : '';
-  // Determine the lastmessage sender of the group. Namecard / Nick / userid is displayed by priority
-  if (conversation.type === tim_1['default'].TYPES.CONV_GROUP) {
-    if (lastMessage.fromAccount === conversation.groupProfile.selfInfo.userID) {
-      showNick = t('TUIConversation.我');
-    } else {
-      showNick =
-        lastMessage.nameCard || lastMessage.nick || lastMessage.fromAccount;
-    }
-  }
-  // Display content of lastmessage message body
-  if (lastMessage.type === tim_1['default'].TYPES.MSG_TEXT) {
-    lastMessagePayload = lastMessage.payload.text;
-  } else if (lastMessage.type === tim_1['default'].TYPES.MSG_CUSTOM) {
-    var data = JSONToObject(
-      (_a =
-        lastMessage === null || lastMessage === void 0
-          ? void 0
-          : lastMessage.payload) === null || _a === void 0
-        ? void 0
-        : _a.data
-    );
-    if ((data === null || data === void 0 ? void 0 : data.businessID) === 1) {
-      lastMessagePayload = extractCallingInfoFromMessage(lastMessage);
-      return lastMessagePayload;
-    }
-    lastMessagePayload = lastMessage.messageForShow;
-  } else {
-    lastMessagePayload = lastMessage.messageForShow;
-  }
-  if (lastMessage.isRevoked) {
-    lastMessagePayload = t('TUIChat.撤回了一条消息');
-  }
-  if (
-    conversation.type === tim_1['default'].TYPES.CONV_GROUP &&
-    lastMessage.type === tim_1['default'].TYPES.MSG_GRP_TIP
-  ) {
-    return lastMessagePayload;
-  }
-  // Specific display content of message box
-  return (
-    '' + showUnreadCount + (showNick ? showNick + ':' : '') + lastMessagePayload
-  );
-}
-exports.handleShowLastMessage = handleShowLastMessage;
-// Handling system tip message display
-function handleTipMessageShowContext(message) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var options = {
-    message: message,
-    text: ''
-  };
-  var userName =
-    (message === null || message === void 0 ? void 0 : message.nick) ||
-    ((_b =
-      (_a =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.userIDList) === null || _b === void 0
-      ? void 0
-      : _b.join(','));
-  if (
-    ((_d =
-      (_c =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _c === void 0
-        ? void 0
-        : _c.memberList) === null || _d === void 0
-      ? void 0
-      : _d.length) > 0
-  ) {
-    userName = '';
-    (_f =
-      (_e =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _e === void 0
-        ? void 0
-        : _e.memberList) === null || _f === void 0
-      ? void 0
-      : _f.map(function (user) {
-          userName +=
-            ((user === null || user === void 0 ? void 0 : user.nick) ||
-              (user === null || user === void 0 ? void 0 : user.userID)) + ',';
-        });
-    userName =
-      userName === null || userName === void 0 ? void 0 : userName.slice(0, -1);
-  }
-  if (
-    (message === null || message === void 0 ? void 0 : message.type) ===
-    ((_g =
-      tim_1['default'] === null || tim_1['default'] === void 0
-        ? void 0
-        : tim_1['default'].TYPES) === null || _g === void 0
-      ? void 0
-      : _g.MSG_GRP_TIP)
-  ) {
-    switch (message.payload.operationType) {
-      case tim_1['default'].TYPES.GRP_TIP_MBR_JOIN:
-        options.text = userName + ' ' + t('message.tip.加入群组');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_QUIT:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.退出群组');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_KICKED_OUT:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.被') +
-          message.payload.operatorID +
-          t('message.tip.踢出群组');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_SET_ADMIN:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.成为管理员');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.被撤销管理员');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
-        // options.text =  `${userName} 修改群组资料`;
-        options.text = handleTipGrpUpdated(message);
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
-        for (
-          var _i = 0, _k = message.payload.memberList;
-          _i < _k.length;
-          _i++
-        ) {
-          var member = _k[_i];
-          if (member.muteTime > 0) {
-            options.text =
-              t('message.tip.群成员') +
-              '\uFF1A' +
-              member.userID +
-              t('message.tip.被禁言');
-          } else {
-            options.text =
-              t('message.tip.群成员') +
-              '\uFF1A' +
-              member.userID +
-              t('message.tip.被取消禁言');
-          }
-        }
-        break;
-      default:
-        options.text = '[' + t('message.tip.群提示消息') + ']';
-        break;
-    }
-  } else if (
-    ((_h =
-      message === null || message === void 0 ? void 0 : message.payload) ===
-      null || _h === void 0
-      ? void 0
-      : _h.data) === 'group_create'
-  ) {
-    options.text =
-      (_j =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _j === void 0
-        ? void 0
-        : _j.extension;
-  } else {
-    options.text = extractCallingInfoFromMessage(message);
-  }
-  return options;
-}
-exports.handleTipMessageShowContext = handleTipMessageShowContext;
-function handleTipGrpUpdated(message) {
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var payload = message.payload;
-  var newGroupProfile = payload.newGroupProfile;
-  var operatorID = payload.operatorID;
-  var text = '';
-  if ('muteAllMembers' in newGroupProfile) {
-    if (newGroupProfile['muteAllMembers']) {
-      text =
-        t('message.tip.管理员') +
-        ' ' +
-        operatorID +
-        ' ' +
-        t('message.tip.开启全员禁言');
-    } else {
-      text =
-        t('message.tip.管理员') +
-        ' ' +
-        operatorID +
-        ' ' +
-        t('message.tip.取消全员禁言');
-    }
-  } else if ('ownerID' in newGroupProfile) {
-    text = newGroupProfile['ownerID'] + ' ' + t('message.tip.成为新的群主');
-  } else if ('groupName' in newGroupProfile) {
-    text =
-      operatorID +
-      ' ' +
-      t('message.tip.修改群名为') +
-      ' ' +
-      newGroupProfile['groupName'];
-  } else if ('notification' in newGroupProfile) {
-    text = operatorID + ' ' + t('message.tip.发布新公告');
-  }
-  return text;
-}
-// Parsing and handling text message display
-function handleTextMessageShowContext(item) {
-  var options = {
-    text: decodeText_1.decodeText(item.payload)
-  };
-  return options;
-}
-exports.handleTextMessageShowContext = handleTextMessageShowContext;
-// Parsing and handling face message display
-function handleFaceMessageShowContext(item) {
-  var face = {
-    message: item,
-    name: '',
-    url: ''
-  };
-  face.name = item.payload.data;
-  if (item.payload.data.indexOf('@2x') < 0) {
-    face.name = face.name + '@2x';
-  }
-  face.url =
-    'https://web.sdk.qcloud.com/im/assets/face-elem/' + face.name + '.png';
-  return face;
-}
-exports.handleFaceMessageShowContext = handleFaceMessageShowContext;
-// Parsing and handling location message display
-function handleLocationMessageShowContext(item) {
-  var location = {
-    lon: '',
-    lat: '',
-    href: '',
-    url: '',
-    description: '',
-    message: item
-  };
-  location.lon = item.payload.longitude.toFixed(6);
-  location.lat = item.payload.latitude.toFixed(6);
-  location.href =
-    'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&' +
-    ('pointx=' +
-      location.lon +
-      '&pointy=' +
-      location.lat +
-      '&name=' +
-      item.payload.description);
-  location.url =
-    'https://apis.map.qq.com/ws/staticmap/v2/?' +
-    ('center=' +
-      location.lat +
-      ',' +
-      location.lon +
-      '&zoom=10&size=300*150&maptype=roadmap&') +
-    ('markers=size:large|color:0xFFCCFF|label:k|' +
-      location.lat +
-      ',' +
-      location.lon +
-      '&') +
-    'key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD';
-  location.description = item.payload.description;
-  return location;
-}
-exports.handleLocationMessageShowContext = handleLocationMessageShowContext;
-// Parsing and handling image message display
-function handleImageMessageShowContext(item) {
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      item.progress,
-    url: item.payload.imageInfoArray[1].url,
-    width: item.payload.imageInfoArray[0].width,
-    height: item.payload.imageInfoArray[0].height,
-    message: item
-  };
-}
-exports.handleImageMessageShowContext = handleImageMessageShowContext;
-// Parsing and handling video message display
-function handleVideoMessageShowContext(item) {
-  var _a, _b, _c, _d;
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      (item === null || item === void 0 ? void 0 : item.progress),
-    url:
-      (_a = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.videoUrl,
-    snapshotUrl:
-      (_b = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _b === void 0
-        ? void 0
-        : _b.snapshotUrl,
-    snapshotWidth:
-      (_c = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _c === void 0
-        ? void 0
-        : _c.snapshotWidth,
-    snapshotHeight:
-      (_d = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _d === void 0
-        ? void 0
-        : _d.snapshotHeight,
-    message: item
-  };
-}
-exports.handleVideoMessageShowContext = handleVideoMessageShowContext;
-// Parsing and handling audio message display
-function handleAudioMessageShowContext(item) {
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      item.progress,
-    url: item.payload.url,
-    message: item,
-    second: item.payload.second
-  };
-}
-exports.handleAudioMessageShowContext = handleAudioMessageShowContext;
-// Parsing and handling file message display
-function handleFileMessageShowContext(item) {
-  var size = '';
-  if (item.payload.fileSize >= 1024 * 1024) {
-    size = (item.payload.fileSize / (1024 * 1024)).toFixed(2) + ' Mb';
-  } else if (item.payload.fileSize >= 1024) {
-    size = (item.payload.fileSize / 1024).toFixed(2) + ' Kb';
-  } else {
-    size = item.payload.fileSize.toFixed(2) + 'B';
-  }
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      item.progress,
-    url: item.payload.fileUrl,
-    message: item,
-    name: item.payload.fileName,
-    size: size
-  };
-}
-exports.handleFileMessageShowContext = handleFileMessageShowContext;
-// Parsing and handling merger message display
-function handleMergerMessageShowContext(item) {
-  return __assign({ message: item }, item.payload);
-}
-exports.handleMergerMessageShowContext = handleMergerMessageShowContext;
-// Parse audio and video call messages
-function extractCallingInfoFromMessage(message) {
-  var _a, _b;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var callingMessage = {};
-  var objectData = {};
-  try {
-    callingMessage = JSONToObject(
-      (_a =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.data
-    );
-  } catch (error) {
-    callingMessage = {};
-  }
-  if (callingMessage.businessID !== 1) {
-    return '';
-  }
-  try {
-    objectData = JSONToObject(callingMessage.data);
-  } catch (error) {
-    objectData = {};
-  }
-  var inviteeList = '';
-  (_b =
-    callingMessage === null || callingMessage === void 0
-      ? void 0
-      : callingMessage.inviteeList) === null || _b === void 0
-    ? void 0
-    : _b.forEach(function (userID, index) {
-        var _a;
-        if (
-          index <
-          ((_a =
-            callingMessage === null || callingMessage === void 0
-              ? void 0
-              : callingMessage.inviteeList) === null || _a === void 0
-            ? void 0
-            : _a.length) -
-            1
-        ) {
-          inviteeList += '"' + userID + '"\u3001';
-        } else {
-          inviteeList += '"' + userID + '" ';
-        }
-      });
-  var inviter =
-    '"' +
-    (callingMessage === null || callingMessage === void 0
-      ? void 0
-      : callingMessage.inviter) +
-    '" ';
-  switch (callingMessage.actionType) {
-    case 1: {
-      if (objectData.call_end >= 0 && !callingMessage.groupID) {
-        return (
-          t('message.custom.通话时长') +
-          '\uFF1A' +
-          date_1.formatTime(objectData.call_end)
-        );
-      }
-      if (callingMessage.groupID && callingMessage.timeout > 0) {
-        return '' + inviter + t('message.custom.发起通话');
-      }
-      if (callingMessage.groupID) {
-        return '' + t('message.custom.结束群聊');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return '' + t('message.custom.切换语音通话');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return '' + t('message.custom.切换视频通话');
-      }
-      return '' + t('message.custom.发起通话');
-    }
-    case 2:
-      return (
-        '' +
-        (callingMessage.groupID ? inviter : '') +
-        t('message.custom.取消通话')
-      );
-    case 3:
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return '' + t('message.custom.切换语音通话');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return '' + t('message.custom.切换视频通话');
-      }
-      return (
-        '' +
-        (callingMessage.groupID ? inviteeList : '') +
-        t('message.custom.已接听')
-      );
-    case 4:
-      return (
-        '' +
-        (callingMessage.groupID ? inviteeList : '') +
-        t('message.custom.拒绝通话')
-      );
-    case 5:
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return '' + t('message.custom.切换语音通话');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return '' + t('message.custom.切换视频通话');
-      }
-      return (
-        '' +
-        (callingMessage.groupID ? inviteeList : '') +
-        t('message.custom.无应答')
-      );
-    default:
-      return '';
-  }
-}
-exports.extractCallingInfoFromMessage = extractCallingInfoFromMessage;
-// Parsing and handling custom message display
-function handleCustomMessageShowContext(item) {
-  var _a;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var payloadObj = JSONToObject(
-    (_a = item === null || item === void 0 ? void 0 : item.payload) === null ||
-      _a === void 0
-      ? void 0
-      : _a.data
-  );
-  if (
-    (payloadObj === null || payloadObj === void 0
-      ? void 0
-      : payloadObj.businessID) === constant_1['default'].typeEvaluate
-  ) {
-    if (
-      !(
-        (payloadObj === null || payloadObj === void 0
-          ? void 0
-          : payloadObj.score) > 0
-      )
-    ) {
-      payloadObj.score = 1;
-      item.payload.data = JSON.stringify(payloadObj);
-    }
-  }
-  return {
-    message: item,
-    custom:
-      extractCallingInfoFromMessage(item) ||
-      '[' + t('message.custom.自定义消息') + ']'
-  };
-}
-exports.handleCustomMessageShowContext = handleCustomMessageShowContext;
-// Parsing and handling system message display
-function translateGroupSystemNotice(message) {
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var groupName =
-    message.payload.groupProfile.name || message.payload.groupProfile.groupID;
-  switch (message.payload.operationType) {
-    case 1:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.申请加入群组') +
-        '\uFF1A' +
-        groupName
-      );
-    case 2:
-      return t('message.tip.成功加入群组') + '\uFF1A' + groupName;
-    case 3:
-      return (
-        t('message.tip.申请加入群组') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.被拒绝')
-      );
-    case 4:
-      return (
-        '' +
-        t('message.tip.你被管理员') +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.踢出群组') +
-        '\uFF1A' +
-        groupName
-      );
-    case 5:
-      return (
-        t('message.tip.群') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.被') +
-        ' ' +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.解散')
-      );
-    case 6:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.创建群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 7:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.邀请你加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 8:
-      return t('message.tip.你退出群组') + '\uFF1A' + groupName;
-    case 9:
-      return (
-        '' +
-        t('message.tip.你被') +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.设置为群') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.的管理员')
-      );
-    case 10:
-      return (
-        '' +
-        t('message.tip.你被') +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.撤销群') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.的管理员身份')
-      );
-    case 12:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.邀请你加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 13:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.同意加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 14:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.拒接加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 255:
-      return (
-        t('message.tip.自定义群系统通知') +
-        ': ' +
-        message.payload.userDefinedField
-      );
-  }
-}
-exports.translateGroupSystemNotice = translateGroupSystemNotice;
-// Image loading complete
-function getImgLoad(container, className, callback) {
-  var images =
-    (container === null || container === void 0
-      ? void 0
-      : container.querySelectorAll('.' + className)) || [];
-  var promiseList = Array.prototype.slice.call(images).map(function (node) {
-    return new Promise(function (resolve, reject) {
-      node.onload = function () {
-        resolve(node);
-      };
-      node.onloadeddata = function () {
-        resolve(node);
-      };
-      node.onprogress = function () {
-        resolve(node);
-      };
-      if (node.complete) {
-        resolve(node);
-      }
-    });
-  });
-  return Promise.all(promiseList)
-    .then(function () {
-      callback && callback();
-    })
-    ['catch'](function (e) {
-      console.error('网络异常', e);
-    });
-}
-exports.getImgLoad = getImgLoad;
-// Determine whether it is url
-function isUrl(url) {
-  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
-    url
-  );
-}
-exports.isUrl = isUrl;
-// Handling custom message options
-function handleOptions(businessID, version, other) {
-  return __assign({ businessID: businessID, version: version }, other);
-}
-exports.handleOptions = handleOptions;
-// Determine if it is a JSON string
-function isJSON(str) {
-  // eslint-disable-next-line no-useless-escape
-  if (typeof str === 'string') {
-    try {
-      var data = JSON.parse(str);
-      if (data) {
-        return true;
-      }
-      return false;
-    } catch (error) {
-      return false;
-    }
-  }
-  return false;
-}
-exports.isJSON = isJSON;
-// Determine if it is a JSON string
-function JSONToObject(str) {
-  if (!str || !isJSON(str)) {
-    return str;
-  }
-  return JSON.parse(str);
-}
-exports.JSONToObject = JSONToObject;
-// Determine if it is a typing message
-function isTypingMessage(item) {
-  var _a;
-  if (!item) return false;
-  try {
-    var businessID = JSONToObject(
-      (_a = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.data
-    ).businessID;
-    if (businessID === constant_1['default'].typeUserTyping) return true;
-  } catch (_b) {
-    return false;
-  }
-  return false;
-}
-exports.isTypingMessage = isTypingMessage;
-function deepCopy(data, hash) {
-  if (hash === void 0) {
-    hash = new WeakMap();
-  }
-  if (typeof data !== 'object' || data === null) {
-    throw new TypeError('传入参数不是对象');
-  }
-  if (hash.has(data)) {
-    return hash.get(data);
-  }
-  var newData = Object.create(Object.getPrototypeOf(data));
-  var dataKeys = Object.keys(data);
-  dataKeys.forEach(function (value) {
-    var currentDataValue = data[value];
-    if (typeof currentDataValue !== 'object' || currentDataValue === null) {
-      newData[value] = currentDataValue;
-    } else if (Array.isArray(currentDataValue)) {
-      newData[value] = __spreadArrays(currentDataValue);
-    } else if (currentDataValue instanceof Set) {
-      newData[value] = new Set(__spreadArrays(currentDataValue));
-    } else if (currentDataValue instanceof Map) {
-      newData[value] = new Map(__spreadArrays(currentDataValue));
-    } else {
-      hash.set(data, data);
-      newData[value] = deepCopy(currentDataValue, hash);
-    }
-  });
-  return newData;
-}
-exports.deepCopy = deepCopy;
-exports.throttle = function (fn) {
-  var isRunning = false;
-  return function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-      args[_i] = arguments[_i];
-    }
-    if (isRunning) return;
-    setTimeout(function () {
-      fn.apply(_this, args);
-      isRunning = false;
-    }, 100);
-  };
-};
-exports.isMessageTip = function (message) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  if (
-    (message === null || message === void 0 ? void 0 : message.type) ===
-      ((_a =
-        tim_1['default'] === null || tim_1['default'] === void 0
-          ? void 0
-          : tim_1['default'].TYPES) === null || _a === void 0
-        ? void 0
-        : _a.MSG_GRP_TIP) ||
-    ((message === null || message === void 0 ? void 0 : message.type) ===
-      ((_b =
-        tim_1['default'] === null || tim_1['default'] === void 0
-          ? void 0
-          : tim_1['default'].TYPES) === null || _b === void 0
-        ? void 0
-        : _b.MSG_CUSTOM) &&
-      (message === null || message === void 0
-        ? void 0
-        : message.conversationType) ===
-        ((_c =
-          tim_1['default'] === null || tim_1['default'] === void 0
-            ? void 0
-            : tim_1['default'].TYPES) === null || _c === void 0
-          ? void 0
-          : _c.CONV_GROUP) &&
-      ((_e = JSONToObject(
-        (_d =
-          message === null || message === void 0 ? void 0 : message.payload) ===
-          null || _d === void 0
-          ? void 0
-          : _d.data
-      )) === null || _e === void 0
-        ? void 0
-        : _e.businessID) ===
-        (constant_1['default'] === null || constant_1['default'] === void 0
-          ? void 0
-          : constant_1['default'].TYPE_CALL_MESSAGE)) ||
-    ((message === null || message === void 0 ? void 0 : message.type) ===
-      ((_f =
-        tim_1['default'] === null || tim_1['default'] === void 0
-          ? void 0
-          : tim_1['default'].TYPES) === null || _f === void 0
-        ? void 0
-        : _f.MSG_CUSTOM) &&
-      (message === null || message === void 0
-        ? void 0
-        : message.conversationType) ===
-        ((_g =
-          tim_1['default'] === null || tim_1['default'] === void 0
-            ? void 0
-            : tim_1['default'].TYPES) === null || _g === void 0
-          ? void 0
-          : _g.CONV_GROUP) &&
-      ((_h =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _h === void 0
-        ? void 0
-        : _h.data) === 'group_create')
-  ) {
-    return true;
-  }
-  return false;
-};
-exports.handleSkeletonSize = function (width, height, maxWidth, maxHeight) {
-  var widthToHeight = width / height;
-  var maxWidthToHeight = maxWidth / maxHeight;
-  if (width <= maxWidth && height <= maxHeight) {
-    return { width: width, height: height };
-  } else if (
-    (width <= maxWidth && height > maxHeight) ||
-    (width > maxWidth &&
-      height > maxHeight &&
-      widthToHeight <= maxWidthToHeight)
-  ) {
-    return { width: width * (maxHeight / height), height: maxHeight };
-  } else {
-    return { width: maxWidth, height: height * (maxWidth / width) };
-  }
-};

src/TUIKit/TUIComponents/container/TUIChat-temp/utils/emojiMap.ts

@@ -1,304 +0,0 @@
-export const emojiUrl = 'https://web.sdk.qcloud.com/im/assets/emoji/';
-export const emojiMap:any = {
-  '[NO]': 'emoji_0@2x.png',
-  '[OK]': 'emoji_1@2x.png',
-  '[下雨]': 'emoji_2@2x.png',
-  '[么么哒]': 'emoji_3@2x.png',
-  '[乒乓]': 'emoji_4@2x.png',
-  '[便便]': 'emoji_5@2x.png',
-  '[信封]': 'emoji_6@2x.png',
-  '[偷笑]': 'emoji_7@2x.png',
-  '[傲慢]': 'emoji_8@2x.png',
-  '[再见]': 'emoji_9@2x.png',
-  '[冷汗]': 'emoji_10@2x.png',
-  '[凋谢]': 'emoji_11@2x.png',
-  '[刀]': 'emoji_12@2x.png',
-  '[删除]': 'emoji_13@2x.png',
-  '[勾引]': 'emoji_14@2x.png',
-  '[发呆]': 'emoji_15@2x.png',
-  '[发抖]': 'emoji_16@2x.png',
-  '[可怜]': 'emoji_17@2x.png',
-  '[可爱]': 'emoji_18@2x.png',
-  '[右哼哼]': 'emoji_19@2x.png',
-  '[右太极]': 'emoji_20@2x.png',
-  '[右车头]': 'emoji_21@2x.png',
-  '[吐]': 'emoji_22@2x.png',
-  '[吓]': 'emoji_23@2x.png',
-  '[咒骂]': 'emoji_24@2x.png',
-  '[咖啡]': 'emoji_25@2x.png',
-  '[啤酒]': 'emoji_26@2x.png',
-  '[嘘]': 'emoji_27@2x.png',
-  '[回头]': 'emoji_28@2x.png',
-  '[困]': 'emoji_29@2x.png',
-  '[坏笑]': 'emoji_30@2x.png',
-  '[多云]': 'emoji_31@2x.png',
-  '[大兵]': 'emoji_32@2x.png',
-  '[大哭]': 'emoji_33@2x.png',
-  '[太阳]': 'emoji_34@2x.png',
-  '[奋斗]': 'emoji_35@2x.png',
-  '[奶瓶]': 'emoji_36@2x.png',
-  '[委屈]': 'emoji_37@2x.png',
-  '[害羞]': 'emoji_38@2x.png',
-  '[尴尬]': 'emoji_39@2x.png',
-  '[左哼哼]': 'emoji_40@2x.png',
-  '[左太极]': 'emoji_41@2x.png',
-  '[左车头]': 'emoji_42@2x.png',
-  '[差劲]': 'emoji_43@2x.png',
-  '[弱]': 'emoji_44@2x.png',
-  '[强]': 'emoji_45@2x.png',
-  '[彩带]': 'emoji_46@2x.png',
-  '[彩球]': 'emoji_47@2x.png',
-  '[得意]': 'emoji_48@2x.png',
-  '[微笑]': 'emoji_49@2x.png',
-  '[心碎了]': 'emoji_50@2x.png',
-  '[快哭了]': 'emoji_51@2x.png',
-  '[怄火]': 'emoji_52@2x.png',
-  '[怒]': 'emoji_53@2x.png',
-  '[惊恐]': 'emoji_54@2x.png',
-  '[惊讶]': 'emoji_55@2x.png',
-  '[憨笑]': 'emoji_56@2x.png',
-  '[手枪]': 'emoji_57@2x.png',
-  '[打哈欠]': 'emoji_58@2x.png',
-  '[抓狂]': 'emoji_59@2x.png',
-  '[折磨]': 'emoji_60@2x.png',
-  '[抠鼻]': 'emoji_61@2x.png',
-  '[抱抱]': 'emoji_62@2x.png',
-  '[抱拳]': 'emoji_63@2x.png',
-  '[拳头]': 'emoji_64@2x.png',
-  '[挥手]': 'emoji_65@2x.png',
-  '[握手]': 'emoji_66@2x.png',
-  '[撇嘴]': 'emoji_67@2x.png',
-  '[擦汗]': 'emoji_68@2x.png',
-  '[敲打]': 'emoji_69@2x.png',
-  '[晕]': 'emoji_70@2x.png',
-  '[月亮]': 'emoji_71@2x.png',
-  '[棒棒糖]': 'emoji_72@2x.png',
-  '[汽车]': 'emoji_73@2x.png',
-  '[沙发]': 'emoji_74@2x.png',
-  '[流汗]': 'emoji_75@2x.png',
-  '[流泪]': 'emoji_76@2x.png',
-  '[激动]': 'emoji_77@2x.png',
-  '[灯泡]': 'emoji_78@2x.png',
-  '[炸弹]': 'emoji_79@2x.png',
-  '[熊猫]': 'emoji_80@2x.png',
-  '[爆筋]': 'emoji_81@2x.png',
-  '[爱你]': 'emoji_82@2x.png',
-  '[爱心]': 'emoji_83@2x.png',
-  '[爱情]': 'emoji_84@2x.png',
-  '[猪头]': 'emoji_85@2x.png',
-  '[猫咪]': 'emoji_86@2x.png',
-  '[献吻]': 'emoji_87@2x.png',
-  '[玫瑰]': 'emoji_88@2x.png',
-  '[瓢虫]': 'emoji_89@2x.png',
-  '[疑问]': 'emoji_90@2x.png',
-  '[白眼]': 'emoji_91@2x.png',
-  '[皮球]': 'emoji_92@2x.png',
-  '[睡觉]': 'emoji_93@2x.png',
-  '[磕头]': 'emoji_94@2x.png',
-  '[示爱]': 'emoji_95@2x.png',
-  '[礼品袋]': 'emoji_96@2x.png',
-  '[礼物]': 'emoji_97@2x.png',
-  '[篮球]': 'emoji_98@2x.png',
-  '[米饭]': 'emoji_99@2x.png',
-  '[糗大了]': 'emoji_100@2x.png',
-  '[红双喜]': 'emoji_101@2x.png',
-  '[红灯笼]': 'emoji_102@2x.png',
-  '[纸巾]': 'emoji_103@2x.png',
-  '[胜利]': 'emoji_104@2x.png',
-  '[色]': 'emoji_105@2x.png',
-  '[药]': 'emoji_106@2x.png',
-  '[菜刀]': 'emoji_107@2x.png',
-  '[蛋糕]': 'emoji_108@2x.png',
-  '[蜡烛]': 'emoji_109@2x.png',
-  '[街舞]': 'emoji_110@2x.png',
-  '[衰]': 'emoji_111@2x.png',
-  '[西瓜]': 'emoji_112@2x.png',
-  '[调皮]': 'emoji_113@2x.png',
-  '[象棋]': 'emoji_114@2x.png',
-  '[跳绳]': 'emoji_115@2x.png',
-  '[跳跳]': 'emoji_116@2x.png',
-  '[车厢]': 'emoji_117@2x.png',
-  '[转圈]': 'emoji_118@2x.png',
-  '[鄙视]': 'emoji_119@2x.png',
-  '[酷]': 'emoji_120@2x.png',
-  '[钞票]': 'emoji_121@2x.png',
-  '[钻戒]': 'emoji_122@2x.png',
-  '[闪电]': 'emoji_123@2x.png',
-  '[闭嘴]': 'emoji_124@2x.png',
-  '[闹钟]': 'emoji_125@2x.png',
-  '[阴险]': 'emoji_126@2x.png',
-  '[难过]': 'emoji_127@2x.png',
-  '[雨伞]': 'emoji_128@2x.png',
-  '[青蛙]': 'emoji_129@2x.png',
-  '[面条]': 'emoji_130@2x.png',
-  '[鞭炮]': 'emoji_131@2x.png',
-  '[风车]': 'emoji_132@2x.png',
-  '[飞吻]': 'emoji_133@2x.png',
-  '[飞机]': 'emoji_134@2x.png',
-  '[饥饿]': 'emoji_135@2x.png',
-  '[香蕉]': 'emoji_136@2x.png',
-  '[骷髅]': 'emoji_137@2x.png',
-  '[麦克风]': 'emoji_138@2x.png',
-  '[麻将]': 'emoji_139@2x.png',
-  '[鼓掌]': 'emoji_140@2x.png',
-  '[龇牙]': 'emoji_141@2x.png',
-};
-export const emojiName:Array<string> = [
-  '[龇牙]',
-  '[调皮]',
-  '[流汗]',
-  '[偷笑]',
-  '[再见]',
-  '[敲打]',
-  '[擦汗]',
-  '[猪头]',
-  '[玫瑰]',
-  '[流泪]',
-  '[大哭]',
-  '[嘘]',
-  '[酷]',
-  '[抓狂]',
-  '[委屈]',
-  '[便便]',
-  '[炸弹]',
-  '[菜刀]',
-  '[可爱]',
-  '[色]',
-  '[害羞]',
-  '[得意]',
-  '[吐]',
-  '[微笑]',
-  '[怒]',
-  '[尴尬]',
-  '[惊恐]',
-  '[冷汗]',
-  '[爱心]',
-  '[示爱]',
-  '[白眼]',
-  '[傲慢]',
-  '[难过]',
-  '[惊讶]',
-  '[疑问]',
-  '[困]',
-  '[么么哒]',
-  '[憨笑]',
-  '[爱情]',
-  '[衰]',
-  '[撇嘴]',
-  '[阴险]',
-  '[奋斗]',
-  '[发呆]',
-  '[右哼哼]',
-  '[抱抱]',
-  '[坏笑]',
-  '[飞吻]',
-  '[鄙视]',
-  '[晕]',
-  '[大兵]',
-  '[可怜]',
-  '[强]',
-  '[弱]',
-  '[握手]',
-  '[胜利]',
-  '[抱拳]',
-  '[凋谢]',
-  '[米饭]',
-  '[蛋糕]',
-  '[西瓜]',
-  '[啤酒]',
-  '[瓢虫]',
-  '[勾引]',
-  '[OK]',
-  '[爱你]',
-  '[咖啡]',
-  '[月亮]',
-  '[刀]',
-  '[发抖]',
-  '[差劲]',
-  '[拳头]',
-  '[心碎了]',
-  '[太阳]',
-  '[礼物]',
-  '[皮球]',
-  '[骷髅]',
-  '[挥手]',
-  '[闪电]',
-  '[饥饿]',
-  '[咒骂]',
-  '[折磨]',
-  '[抠鼻]',
-  '[鼓掌]',
-  '[糗大了]',
-  '[左哼哼]',
-  '[打哈欠]',
-  '[快哭了]',
-  '[吓]',
-  '[篮球]',
-  '[乒乓]',
-  '[NO]',
-  '[跳跳]',
-  '[怄火]',
-  '[转圈]',
-  '[磕头]',
-  '[回头]',
-  '[跳绳]',
-  '[激动]',
-  '[街舞]',
-  '[献吻]',
-  '[左太极]',
-  '[右太极]',
-  '[闭嘴]',
-  '[猫咪]',
-  '[红双喜]',
-  '[鞭炮]',
-  '[红灯笼]',
-  '[麻将]',
-  '[麦克风]',
-  '[礼品袋]',
-  '[信封]',
-  '[象棋]',
-  '[彩带]',
-  '[蜡烛]',
-  '[爆筋]',
-  '[棒棒糖]',
-  '[奶瓶]',
-  '[面条]',
-  '[香蕉]',
-  '[飞机]',
-  '[左车头]',
-  '[车厢]',
-  '[右车头]',
-  '[多云]',
-  '[下雨]',
-  '[钞票]',
-  '[熊猫]',
-  '[灯泡]',
-  '[风车]',
-  '[闹钟]',
-  '[雨伞]',
-  '[彩球]',
-  '[钻戒]',
-  '[沙发]',
-  '[纸巾]',
-  '[手枪]',
-  '[青蛙]',
-];
-export const faceUrl = 'https://web.sdk.qcloud.com/im/assets/face-elem/';
-
-export const bigEmojiList:Array<any> = [
-  {
-    icon: 1,
-    list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',
-      'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],
-  },
-  {
-    icon: 2,
-    list: ['ys00', 'ys01', 'ys02', 'ys03', 'ys04', 'ys05', 'ys06', 'ys07', 'ys08',
-      'ys09', 'ys10', 'ys11', 'ys12', 'ys13', 'ys14', 'ys15'],
-  },
-  {
-    icon: 3,
-    list: ['gcs00', 'gcs01', 'gcs02', 'gcs03', 'gcs04', 'gcs05', 'gcs06', 'gcs07',
-      'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
-  },
-];