cnhis-design-vue 2.1.16 → 2.1.19

package/packages/multi-chat/chat/chatMain.vue

@@ -1,1442 +1,1442 @@
-<template>
-  <div class="message-wrapper">
-    <chat-header :hideHeader="hideHeader" @openPortraitPanel="handleOpenPortraitPanel" v-if="isServer && enable"></chat-header>
-    <a-layout-content>
-      <slot></slot>
-      <div v-if="showBroadcast" class="broadcast-wrap">
-        <div v-if="broadcastCarousel" class="carousel-item" :class="{ 'has-link': assemblySetting.broadcast.PC.list[0].url }" @click="goToBroadcastLink(assemblySetting.broadcast.PC.list[0])">
-          <a-icon type="sound" />
-          <span class="ellips">
-            {{ assemblySetting.broadcast.PC.list[0].content }}
-          </span>
-        </div>
-        <template v-else>
-          <a-carousel dotPosition="right" autoplay :dots="false">
-            <div class="carousel-item" v-for="(item, i) in assemblySetting.broadcast.PC.list" :key="i" :class="{ 'has-link': item.url }" @click="goToBroadcastLink(item)">
-              <a-icon type="sound" />
-              <span class="ellips">{{ item.content }}</span>
-            </div>
-          </a-carousel>
-        </template>
-      </div>
-      <div v-if="sessionHistoryList.length > 1 && !(!onChating && currentTab === 'end') && !sessionEnd" style="position: absolute; top: 0; left: 20px; z-index: 1">
-        <a-radio-group :value="selectedSession" @change="handleSessionIdChange" buttonStyle="solid">
-          <a-radio-button :value="item.id + '-' + item.fromId" v-for="item in sessionHistoryList" :key="item.id + item.fromId">{{ item.fromName }}</a-radio-button>
-        </a-radio-group>
-      </div>
-      <div class="online-message" ref="message-wrapper" v-infinite-scroll="handleInfiniteOnLoad" @scroll="scrollEvent">
-        <template v-for="(item, index) in msgList">
-          <div :key="index" v-if="item">
-            <p v-if="isNeedShowTime(item, index)" class="message-time">
-              {{ formatDate(item.createdTime) }}
-            </p>
-            <div v-if="item.recallFlag" style="margin: 10px 0">
-              <template v-if="handleRecallFlag(item)">
-                {{ getRecallText(item, isServer) }}
-                <a style="text-decoration: underline" @click="reEditMessage(item)" v-if="[0, 4].includes(item.content && item.content.type) && onChating && isServer">,{{ i18nText('1.9.368') }}</a>
-              </template>
-              <template v-else>
-                {{ getRecallText(item) || `${item.fromName} ${i18nText('1.9.365')}` }}
-              </template>
-            </div>
-            <!--  系统消息 -->
-            <div class="system-msg" v-else-if="isSystemMsg(item)">
-              <a-icon class="system-icon" theme="filled" type="exclamation-circle" />
-              <div>
-                <span v-html="getSystemMsgContent(item)"></span>
-                <span class="system-btn" v-for="(btn, index) in getTemplateButton(item)" @click="handleTemplateButton(btn)" :key="index">{{ btn.title }}</span>
-              </div>
-            </div>
-            <div
-              v-else-if="!item.recallFlag"
-              class="message-item"
-              :class="[getMessageItemClass(item), { 'read-status': enableReadRecord && item.readStatus }]"
-              :data-rid="item.readStatus === 'N' ? item.id : ''"
-            >
-              <img v-if="!isServer && item.fromPortrait" class="msg-avatar" :src="item.fromPortrait" />
-
-              <div v-else-if="!isServer && item.fromName" class="first-name">
-                {{ item.fromName && item.fromName.slice(0, 2) }}
-              </div>
-              <img v-else-if="!isServer" class="msg-avatar" :src="getAvatar(item)" width="40" height="40" />
-
-              <template v-else>
-                <img :src="customerStaffIcon" class="msg-avatar" width="40" height="40" v-if="item.fromId === 'SYSTEM'" />
-
-                <img src="../img/system_message.png" class="msg-avatar" width="40" height="40" v-else-if="item.content && item.content.source === 1" />
-
-                <img v-else-if="item.portrait" class="msg-avatar" :src="item.portrait" />
-
-                <div v-else class="first-name">
-                  {{ item.fromName && item.fromName.slice(0, 2) }}
-                </div>
-              </template>
-              <div @contextmenu="handleContextmenu($event, item)" style="display: flex">
-                <a-spin v-if="item.sending">
-                  <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
-                </a-spin>
-                <a-popconfirm @confirm="handleSendFail(item)" :okText="i18nText('1.1.1.1.3')" :cancelText="i18nText('2.7.1.14')">
-                  <a-icon type="exclamation-circle" slot="icon" />
-                  <div slot="title">
-                    <span>确认重新发送该消息?</span>
-                  </div>
-                  <a-icon v-if="item.fail" theme="filled" type="exclamation-circle" style="font-size: 16px; display: flex; align-items: center; color: red" />
-                </a-popconfirm>
-                <div class="content-wrap" v-if="item.content.type === 0">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div
-                    :class="{
-                      content: true,
-                      'has-dictionary': item.dictionaryValues && item.dictionaryValues.length,
-                      'has-intention': item.intentionList && item.intentionList.length
-                    }"
-                  >
-                    <p v-html="getContentHtml(item)"></p>
-                    <template v-if="item.content.attachments && item.content.attachments.length > 0">
-                      <div v-for="(v, index) in item.content.attachments" :key="index" class="robot-item">
-                        <a v-if="v.type == 1" :href="v.url" target="_blank"> {{ v.desc }}(超链) </a>
-                        <a @click.prevent.stop="$emit('sendQuestion', v, item)" v-if="v.type == 2 || v.type == 3" href="javascript:void(0);">
-                          {{ v.desc }}
-                        </a>
-                      </div>
-                    </template>
-                    <div v-if="item.intentionList && item.intentionList.length" class="intention-wrap">
-                      <div v-for="(v, index) in item.intentionList" :key="index" @click.prevent.stop="$emit('sendIntention', v)">
-                        <svg-icon :icon-class="v.icon || 'moren'" style="font-size: 26px"></svg-icon>
-                        <span>{{ v.name }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <ul class="dictionary-ul" v-if="item.dictionaryValues && item.dictionaryValues.length">
-                    <li v-for="(v, i) in item.dictionaryValues" :key="i" @click.prevent.stop="$emit('sendDictionary', v, item)">
-                      {{ v }}
-                    </li>
-                  </ul>
-                  <div class="client-btn" v-if="item.autoAccess && item.autoAccess === 'false'">
-                    <svg-icon icon-class="kefu"></svg-icon>
-                    <span @click="$emit('goCustomServe')">转人工客服</span>
-                  </div>
-                </div>
-                <div v-else-if="item.content.type === 1" class="upload-image">
-                  <MsgPicture style="max-width: 345px" :image="item.content.content" @click="show(item)" />
-                </div>
-                <div class="content-wrap" v-else-if="item.content.type === 2">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div class="content">
-                    <img style="width: 16px;margin-right:8px" src="../img/multi-video.png" />
-                    {{ item.content.content }}&nbsp;
-                    <span @click.prevent.stop="reCall(item, 'video')" class="re-call" v-if="item.content.isRefuse == 1">
-                      {{ handleReCall(item) }}
-                    </span>
-                  </div>
-                </div>
-                <div class="content-wrap" v-else-if="item.content.type === 5">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div class="content">
-                    <img style="width: 16px;margin-right:8px" src="../img/multi-voice.png" />
-                    {{ item.content.content }}&nbsp;
-                    <span @click.prevent.stop="reCall(item, 'voice')" class="re-call" v-if="item.content.isRefuse == 1">
-                      {{ handleReCall(item) }}
-                    </span>
-                  </div>
-                </div>
-                <div class="content-wrap" v-else-if="item.content.type === 6">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div class="voice-bg content" @click.prevent.stop="playAudio(item)">
-                    <img v-if="item.content.isPlay" src="../img/audio-play.gif" alt="" />
-                    <img v-else src="../img/audio-new.png" alt="" />
-                    <span class="voice-text" :style="AudioStyle(item)"> {{ item.content.duration || 1 }}" </span>
-                  </div>
-                </div>
-                <template v-else-if="item.content.type === 4">
-                  <msg-describe v-if="isDescribeMsg(item)" :item="item" />
-                  <div v-else class="content-wrap">
-                    <span class="right-time">
-                      {{ formatDate(item.createdTime || item.sendTime, true) }}
-                    </span>
-                    <MsgPrescription :data="item" :isServer="isServer" :theme="isServer ? '' : 'customer'" @handleTemplateDetail="handleTemplateDetail" @handleTemplateButton="handleTemplateButton" />
-                  </div>
-                </template>
-              </div>
-              <ReadStatus v-if="enableReadRecord" :status="item.readStatus" @click="openReadRecord($event, item)" />
-            </div>
-          </div>
-        </template>
-        <ul class="menu-main" ref="contextMenu" :style="contextMenuStyle" v-if="contextMenuShow">
-          <template v-for="(item, index) in rightClickSetting">
-            <li :key="index" class="menu-item" @click="() => handleRightClick(contextMenuItem, item)">
-              {{ item.rightClickName }}
-            </li>
-          </template>
-        </ul>
-        <div class="session-end" v-if="sessionEnd && !isServer">
-          <span class="end">{{ i18nText('1.9.370') }}</span>
-        </div>
-        <a-spin v-if="loading" class="loading-icon" />
-      </div>
-      <!-- 图片预览 -->
-      <viewer class="viewer" ref="viewer" :images="images" @inited="inited" :options="options" style="display: none">
-        <template slot-scope="scope">
-          <img v-for="src in scope.images" :src="src" :key="src" />
-        </template>
-      </viewer>
-      <!-- 卡片详情 -->
-      <a-modal
-        wrapClassName="chat-footer-modal-small"
-        :title="modalData.title || i18nText('1.1.1.10')"
-        :visible="modalShow"
-        :maskClosable="false"
-        :mask="true"
-        width="80%"
-        destroyOnClose
-        :okText="i18nText('1.2.1.11.6')"
-        :footer="null"
-        @cancel="
-          () => {
-            this.modalShow = false;
-          }
-        "
-      >
-        <iframe id="chat-footer-modal" v-if="modalData.targetType === 'LINK_ADDRESS'" width="100%" height="100%" frameborder="0" :src="modalData.address" allow="camera;midi"></iframe>
-      </a-modal>
-    </a-layout-content>
-    <audio style="display: none" controls autoplay ref="audio" preload="auto" crossOrigin="anonymous" media-player="audioPlayer" :src="curAudioUrl" @ended="audioEnd"></audio>
-    <ReadRecord v-if="readRecordVisible" :style="readRecordStyle" :list="readRecordList" @close="closeReadRecord" />
-  </div>
-</template>
-
-<script>
-import { Layout, Modal, Icon, Spin, Popconfirm, Carousel, Radio } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import InfiniteScroll from '@/directive/scroll';
-import { mapGetters, mapMutations, mapActions } from '../store/helper';
-import fetch, { qs } from '@/utils/chatFetch';
-import MsgDescribe from '../components/msg-describe';
-import MsgPicture from '../components/msg-picture';
-import MsgPrescription from '../components/msg-prescription';
-import ReadStatus from '../components/read-status';
-import ReadRecord from '../components/read-record';
-import chatHeader from './chatHeader';
-import viewerOptions from './mixins/viewerOptions';
-import { getRecallText } from '../utils';
-import vexutils from '@/utils/vexutils';
-import ObserverScroll from '../utils/observer-scroll';
-
-const customerStaffIcon = require('../img/customer_staff.png');
-export default {
-  mixins: [viewerOptions],
-  inject: ['store', 'dispatchEvent', 'registerEvent', 'unregisterEvent', 'i18nText'],
-  props: {
-    hideHeader: {
-      type: Boolean,
-      default: false
-    },
-    robotAvatar: {
-      type: String,
-      default: ''
-    },
-    curChatType: {
-      type: String
-    },
-    isShowPortraitPanel: {
-      type: Boolean
-    },
-    activatedTime: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      // 卡片详情
-      modalShow: false,
-      modalData: {},
-      // 客户头像
-      // 右键操作
-      contextMenuStyle: {
-        position: 'fixed',
-        top: 0,
-        left: 0
-      },
-      contextMenuShow: false,
-      contextMenuItem: null,
-      // 查看历史消息滚动定位
-      scrollHeight: 0,
-      curAudioUrl: '',
-      lastAudioItem: null,
-      readRecordStyle: '',
-      readRecordVisible: false,
-      readRecordList: []
-    };
-  },
-  computed: {
-    ...mapGetters([
-      'userInfo',
-      'currentTab',
-      'isAppendMsg',
-      'message',
-      'msgList',
-      'sessionId',
-      'serviceId',
-      'scrollTo',
-      'isServer',
-      'clientId',
-      'sessionEnd',
-      'assemblyId',
-      'footerMessage',
-      'portraitPanelParams',
-      'assemblySetting',
-      'clientParams',
-      'onChating',
-      'classify',
-      'collapsed',
-      'barStatus',
-      'sessionHistoryList',
-      'enable',
-      'appendList',
-      'queueItem',
-      'isRecorderVoice'
-    ]),
-    orgId() {
-      const getters = this.store.getters;
-      return this.isServer ? this.userInfo?.sysParams?.orgId : getters.accessParams.orgId || getters.queryParams.orgId;
-    },
-    userId() {
-      const getters = this.store.getters;
-      return this.isServer ? this.userInfo?.sysParams?.userId : getters.accessParams.userId || getters.chatUserId || getters.queryParams.userId;
-    },
-    enableReadRecord() {
-      return this.assemblySetting?.readStatus === 'Y';
-    },
-    customerStaffIcon() {
-      return this.robotAvatar || customerStaffIcon;
-    },
-    selectedSession() {
-      let sessionMap = this.sessionHistoryList.find(item => item.fromId === this.serviceId);
-      if (sessionMap) {
-        return sessionMap.id + '-' + sessionMap.fromId;
-      }
-      return '';
-    },
-    isListClassify() {
-      return this.assemblySetting.isListClassify === 'Y';
-    },
-    showPanel() {
-      return this.assemblySetting.portraitPanelSetting?.targetIs;
-    },
-    showBroadcast() {
-      let res = (!this.isServer && this.assemblySetting?.broadcast?.PC?.isChecked == 'Y' && this.assemblySetting?.broadcast?.PC?.list?.length > 0) || false;
-      return res;
-    },
-    broadcastCarousel() {
-      return (this.assemblySetting.broadcast && this.assemblySetting.broadcast.PC.list.length == 1) || false;
-    },
-    rightClickSetting() {
-      const { isServer } = this;
-      if (!isServer) return [];
-      const isSelf = this.contextMenuItem.fromId === this.serviceId;
-      const setting = this.assemblySetting?.rightClickSetting || [];
-      const doArr = ['resend', 'rollBack'];
-      return setting.filter(item => {
-        const { rightClickDo } = item;
-        return isSelf || doArr.indexOf(rightClickDo) < 0;
-      });
-    },
-    handleReCall() {
-      return function(item) {
-        if (item.content?.source === 1) {
-          return '[点击回拨]';
-        } else if (item.senderFlag == 1) {
-          return `[点击${this.isServer ? '回拨' : '重拨'}]`;
-        }
-        if (item.senderFlag == 2) {
-          return `[点击${this.isServer ? '重拨' : '回拨'}]`;
-        }
-        if (this.isServer) {
-          let isRight = item.fromId !== 'SYSTEM' && item.fromId && item.fromId === this.serviceId;
-          return `[点击${isRight ? '重拨' : '回拨'}]`;
-        } else {
-          let isRight = (item.fromId !== 'SYSTEM' && item.toId === 'SYSTEM') || item.fromId === this.clientId || (item.mode === 'bot' && !item.fromId);
-          return `[点击${isRight ? '重拨' : '回拨'}]`;
-        }
-      };
-    },
-    handleRecallFlag() {
-      return function(item) {
-        return this.serviceId == item.fromId;
-      };
-    },
-    AudioStyle() {
-      return function(item) {
-        let { duration = 1 } = item.content;
-        if (!duration) {
-          duration = 1;
-        }
-        let curWidth = (+duration / 60) * 400;
-        return {
-          width: curWidth < 13 ? 13 : curWidth + 'px'
-        };
-      };
-    },
-    showTimeDuration() {
-      let { variableSetting = null } = this.assemblySetting || {};
-      if (!variableSetting) return 3;
-      let matchItem = variableSetting.find(v => v.name === 'CHAT_SEPARATION_TIME');
-      if (!matchItem) return 3;
-      if (!+matchItem.value) return 3;
-      return +matchItem.value;
-    },
-    images() {
-      return this.msgList.filter(v => !v.recallFlag && v.content.type == 1)?.map(v => v.content?.content);
-    }
-  },
-  created() {
-    this.attachEvent();
-  },
-  methods: {
-    ...mapMutations([
-      'setIsAppendMsg',
-      'setMsgList',
-      'setScrollTo',
-      'setFooterMessage',
-      'setIsScrollListChange',
-      'setListChangeItem',
-      'setSessionId',
-      'setOnChating',
-      'setServiceId',
-      'setShowAudio',
-      'setVideoMode',
-      'setVideoMembers',
-      'setIsRecorderVoice'
-    ]),
-    ...mapActions({
-      getEarlierMsg: 'setMsgList',
-      handleBotChat: 'handleBotChat',
-      sendMessage: 'sendMessage'
-    }),
-    getMessageItemClass(item) {
-      // content.source === 1, 代表为系统消息, 系统统一左侧展示
-      if (item.content?.source === 1) {
-        return {
-          left: true
-        };
-      }
-
-      // 服务端 senderFlag 1 左 2 右
-      // 客户端 senderFlag 1 右 2 左
-      if (item.content?.source === 1) {
-        return {
-          left: true
-        };
-      } else if (item.senderFlag == 1) {
-        if (this.isServer) {
-          return {
-            left: true
-          };
-        } else {
-          return {
-            right: true
-          };
-        }
-      }
-      if (item.senderFlag == 2) {
-        if (this.isServer) {
-          return {
-            right: true
-          };
-        } else {
-          return {
-            left: true
-          };
-        }
-      }
-      if (this.isServer) {
-        return {
-          right: item.fromId !== 'SYSTEM' && item.fromId && item.fromId === this.serviceId,
-          left: item.fromId === 'SYSTEM' || item.fromId === this.clientId || item.content?.source === 1 || !item.fromId
-        };
-      } else {
-        let isRight, isLeft;
-        if (this.curChatType == 'robot') {
-          isRight = item.fromId !== 'SYSTEM';
-          isLeft = item.fromId === 'SYSTEM';
-        } else {
-          isRight = (item.fromId !== 'SYSTEM' && item.toId === 'SYSTEM') || item.fromId === this.clientId || (item.mode === 'bot' && !item.fromId);
-          isLeft = item.fromId === 'SYSTEM' || item.fromId !== this.clientId || item.content?.source === 1;
-        }
-        return {
-          right: isRight,
-          left: isLeft
-        };
-      }
-    },
-    /* 向上滚动刷新 */
-    handleInfiniteOnLoad() {
-      if (this.curChatType === 'robot') return;
-      this.loading = true;
-      this.getEarlierMsg().then(msg => {
-        if (msg) {
-          this.$message.info(msg);
-        }
-        this.loading = false;
-      });
-    },
-    show(item) {
-      const src = item.content.content;
-      // this.images = vexutils.imgs2imgArr(src);
-      this.$viewer.view(this.images.findIndex(v => v === src));
-      this.$viewer.show();
-      this.readSingleMsg(item);
-    },
-    /* 滚动条定位 */
-    handleScrollTo(scrollTo) {
-      let target = this.$refs['message-wrapper'];
-      this.$nextTick().then(() => {
-        if (!target) return;
-        let top = target.scrollHeight;
-        if (scrollTo === 'current') {
-          top = target.scrollHeight - this.scrollHeight;
-        }
-        if (typeof scrollTo === 'number') {
-          top = scrollTo;
-        }
-        target.scrollTo({
-          left: 0,
-          top,
-          behavior: 'instant'
-        });
-        this.scrollHeight = 0;
-      });
-      this.setScrollTo('');
-    },
-
-    /**
-     * 是否需要显示时间
-     */
-    isNeedShowTime(item, index) {
-      const curMsgTime = item.createdTime || new Date().getTime();
-      let duration = 60 * 1000 * this.showTimeDuration;
-      let lastMsgTime;
-      if (index == 0) {
-        lastMsgTime = 0;
-      } else {
-        lastMsgTime = this.msgList[index - 1].createdTime;
-      }
-      if (Number(curMsgTime) - Number(lastMsgTime) > duration) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    formatDate(date) {
-      return vexutils.formatDate(date, true);
-    },
-    getAvatar(item) {
-      if (item.content && item.content.source === 1) {
-        return require('../img/system_message.png');
-      }
-      if (item.mode === 'bot' && !item.fromId) {
-        return require('../img/default.png');
-      }
-      if (this.isServer) {
-        if (item.fromId === this.clientId || !item.fromId) {
-          return require('../img/default.png');
-        } else {
-          return this.customerStaffIcon;
-        }
-      } else {
-        if (this.curChatType == 'robot') {
-          if (item.fromId === 'SYSTEM') {
-            return this.customerStaffIcon;
-          } else {
-            return require('../img/default.png');
-          }
-        } else {
-          if (item.fromId !== this.clientId) {
-            return this.customerStaffIcon;
-          } else {
-            return require('../img/default.png');
-          }
-        }
-      }
-    },
-    getContent(item) {
-      let content;
-      if (vexutils.isJSON(item.content.content)) {
-        content = JSON.parse(item.content.content);
-      } else {
-        content = item.content.content;
-      }
-      return content;
-    },
-    getContentHtml(item) {
-      return !~item.content.content.indexOf('emoji') ? this.$xss(item.content.content) : item.content.content;
-    },
-    getTemplateTitle(item) {
-      return this.getContent(item)?.title;
-    },
-    showArrow(item) {
-      let setting = this.getContent(item)?.customerSetting || {};
-      if (this.isServer) {
-        setting = this.getContent(item)?.serverSetting || {};
-      }
-      let { address } = setting;
-      if (!address) return false;
-      return true;
-    },
-    getTemplateTitleIcon(item) {
-      return this.getContent(item)?.icon;
-    },
-    getTemplateContent(item) {
-      let content = this.getContent(item);
-      let array = [];
-      try {
-        array = content.content.split('##');
-      } catch {
-        console.log(content, 'error');
-      }
-      array = array.map(item => `<div>${item}</div>`);
-      return array.join('');
-    },
-    getSystemMsgContent(item) {
-      let content = this.getContent(item);
-      let array = [];
-      try {
-        array = content.content.split('##');
-      } catch {
-        console.log(content, 'error');
-      }
-      return array.join('<br>');
-    },
-    getTemplateButton(item) {
-      let content = this.getContent(item);
-      const setting = this.isServer ? content.serverSetting : content.customerSetting;
-      return setting?.toolbar_button || [];
-    },
-    // 处理模板按钮,详情等跳转
-    handleTemplate(data, dispatch = true) {
-      let { targetType, address, params = [], openMode } = data;
-      dispatch &&
-        this.dispatchEvent('click_templateCard', {
-          ...data
-        });
-      if (!address) return;
-      if (targetType === 'LINK_ADDRESS') {
-        let urlParams = [];
-        params.forEach(({ p_name, p_value }) => {
-          urlParams.push(`${p_name}=${p_value}`);
-        });
-        if (address.includes('?')) {
-          address += `&${urlParams.join('&')}`;
-        } else {
-          address += `?${urlParams.join('&')}`;
-        }
-        if (openMode === 'WINDOW') {
-          window.open(address);
-          return;
-        }
-        if (openMode === 'EJECT') {
-          this.modalShow = true;
-          this.modalData = Object.assign({}, data, {
-            address
-          });
-          return;
-        }
-      }
-    },
-    handleTemplateDetail(item) {
-      let content = this.getContent(item) || {};
-      let setting = content.customerSetting || {};
-      if (this.isServer) {
-        setting = content.serverSetting || {};
-      }
-      this.readSingleMsg(item);
-      this.handleTemplate(setting);
-    },
-    handleTemplateButton(btn) {
-      this.handleTemplate(btn);
-    },
-    // 消息撤回
-    handleRecall(item) {
-      let params = {
-        assemblyId: this.assemblyId,
-        sessionId: this.sessionId,
-        messageId: item.id,
-        messageType: item.content?.type,
-        userId: this.userInfo?.sysParams?.userId || ''
-      };
-
-      fetch.post('/chat/service/recallMessage', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          this.dispatchEvent('msg_recallSuccess', {
-            message: { ...item },
-            ...params
-          });
-          this.$set(item, 'recallFlag', 1);
-          // 撤回成功提示
-          let title = this.getContent(item)?.title;
-          let text = title ? `已撤回[${title}]` : '已撤回';
-          this.$message.success(text);
-
-          if (!this.isLastMessage(item.id)) return;
-          this.setIsScrollListChange(true);
-          this.setListChangeItem({
-            opt: 1,
-            from: this.clientId,
-            sessionId: this.sessionId,
-            msgCount: 0,
-            lastContentRecallFlag: 1,
-            lastContent: vexutils.clone(item.content, true),
-            lastTime: new Date().getTime()
-          });
-        } else {
-          this.$message.error(data.resultMsg);
-        }
-      });
-    },
-    handleJumpUrl(contextMenuItem, item) {
-      const title = item.rightClickName;
-      const url = item.rightClickUrl.replace(/{(.*?)}/g, (match, p) => {
-        return eval(p);
-      });
-      this.dispatchEvent('open_jumpUrl', {
-        title: title,
-        url: url
-      });
-    },
-    // 右键菜单功能
-    handleRightClick(contextMenuItem, item) {
-      if (item.rightClickDo === 'rollBack') {
-        this.handleRecall(contextMenuItem);
-      } else if (item.rightClickDo === 'jumpUrl') {
-        this.handleJumpUrl(contextMenuItem, item);
-      } else if (item.rightClickDo === 'resend') {
-        this.resendMessage(contextMenuItem);
-      }
-    },
-    resendMessage(item) {
-      fetch({
-        method: 'POST',
-        url: '/chat/service/resendMessage',
-        data: qs.stringify({
-          assemblyId: this.assemblyId,
-          sessionId: this.sessionId,
-          messageId: item.id
-        })
-      });
-    },
-    // 重新编辑
-    reEditMessage(item) {
-      if (item.content?.type === 4) {
-        let content = this.getContent(item);
-        this.handleTemplate(content.serverSetting.reEditSetting, false);
-        return;
-      }
-      this.setFooterMessage(this.footerMessage + item.content.content.slice(5, -6));
-    },
-    observeMsg() {
-      if (this.enableReadRecord) {
-        if (!this._observer) {
-          this._observer = new ObserverScroll(this.$refs['message-wrapper'], this.readMsg);
-          this.$on('hook:beforeDestroy', () => {
-            this._observer.remove();
-            this._observer = null;
-          });
-        }
-        this._observer.disconnect();
-        if (this.msgList.length) {
-          this.$nextTick(() => {
-            const el = this.$refs['message-wrapper'];
-            const els = el?.querySelectorAll('.message-item.left');
-            els && this._observer.observe(Array.from(els).filter(item => item.getAttribute('data-rid')));
-          });
-        }
-      }
-    },
-    readMsg(ids, enableVaid = true, notify = true, post = true) {
-      const msgList = this.msgList;
-      const idKeys = msgList.reduce((obj, item, i) => {
-        const id = item?.id;
-        if (id) obj[id] = i;
-        return obj;
-      }, {});
-      const data = [];
-      const validFn = (item, type) => {
-        /**
-         * 针对文本、表情消息类型，只要在聊天区域内，视为已读，
-         * 图片、语音类型消息，需要点击查看后，才视为已读，
-         * 模板 类型消息，如果没有详情链接，只要在聊天区域内，视为已读，若有详情链接，需要点击查看后，才视为已读
-         */
-        const jumpType = `,6,1,`;
-        if (jumpType.includes(type)) return false;
-        if (type == 4 && !this.isDescribeMsg(item)) {
-          let content = this.getContent(item) || {};
-          let setting = (this.isServer ? content.serverSetting : content.customerSetting) || {};
-          return !setting?.address;
-        }
-        return true;
-      };
-      const value = ids.filter(id => {
-        const i = idKeys[id];
-        let item = msgList[i];
-        if (item) {
-          const type = item.content.type;
-          if (!enableVaid || validFn(item, type)) {
-            item.readStatus = 'Y';
-            data.push({ id, type });
-            return true;
-          }
-          return false;
-        }
-      });
-      if (!value.length) return;
-      notify &&
-        this.dispatchEvent('msg_readed', {
-          data,
-          assemblyId: this.assemblyId,
-          sessionId: this.sessionId
-        });
-      post && this.postReadMessage({ ids: value.join(',') });
-    },
-    postReadMessage(data) {
-      fetch.post(
-        `/chat/${this.isServer ? 'service' : 'access'}/readMessage`,
-        qs.stringify({
-          assemblyId: this.assemblyId,
-          orgId: this.orgId,
-          userId: this.userId,
-          sessionId: this.sessionId,
-          ...data
-        })
-      );
-    },
-    readSingleMsg(item) {
-      if (this.enableReadRecord && item.readStatus === 'N') {
-        const cls = this.getMessageItemClass(item);
-        if (!cls?.left) return;
-        this.readMsg([item.id], false);
-      }
-    },
-    closeReadRecord() {
-      this.readRecordVisible = false;
-      this.readRecordList = [];
-    },
-    openReadRecord(event, item) {
-      const readStatus = item.readStatus;
-      if (readStatus) {
-        const cls = this.getMessageItemClass(item);
-        if (!cls.right) return;
-        const rect = event.target.getBoundingClientRect();
-        const w = 440;
-        const h = 340;
-        const top = Math.max(0, Math.min(document.body.clientHeight - h, rect.top - h / 2));
-        const left = Math.max(0, Math.min(document.body.clientWidth - w, rect.left - w));
-        fetch({
-          url: `/chat/${this.isServer ? 'service' : 'access'}/getMessageMember`,
-          method: 'get',
-          params: {
-            assemblyId: this.assemblyId,
-            messageId: item.id,
-            orgId: this.isServer ? undefined : this.orgId
-          }
-        }).then(res => {
-          const list = res.data?.list || [];
-          this.readRecordStyle = `top:${top}px;left:${left}px;position:fixed;z-index:10`;
-          this.readRecordVisible = list.length > 0;
-          this.readRecordList = Object.freeze(list);
-          if (item.readStatus && list.length) {
-            const unread = list.filter(item => item.readStatus == 'N').length;
-            const single = list.length < 2;
-            const status = unread > 0 ? (single ? 'N' : `${unread}`) : single ? 'Y' : 'ALL';
-            //  检查是否更新人数
-            if (item.readStatus != status) {
-              item.readStatus = status;
-            }
-          }
-        });
-      }
-    },
-    isLastMessage(id) {
-      return this.msgList.findIndex(msg => msg.id === id) === this.msgList.length - 1;
-    },
-    isSystemMsg(item) {
-      return item.content.type == 4 && this.getContent(item).styleId == '2';
-    },
-    isDescribeMsg(item) {
-      return this.getContent(item).styleId == '3';
-    },
-    async handleOpenPortraitPanel(item) {
-      if (!this.showPanel || item.fromId === this.serviceId || !this.isServer || !this.isShowPortraitPanel) return;
-      const { portraitPanelParams, clientParams } = this;
-      const panelSetting = this.assemblySetting?.portraitPanelSetting;
-      this.dispatchEvent('open_portraitPanel', {
-        panelSetting,
-        clientParams,
-        panelParams: portraitPanelParams,
-        targetId: panelSetting?.targetId,
-        targetType: panelSetting?.targetType
-      });
-    },
-    handleContextmenu(e, item) {
-      // 系统消息,客户消息,待接入消息,历史消息不允许撤回
-      // 模板-描述消息禁用右键
-      if (item.content?.source === 1 || !this.sessionId || (this.sessionId && !this.onChating) || (item.content.type === 4 && this.isDescribeMsg(item))) return;
-      this.contextMenuItem = item;
-      if (this.rightClickSetting.length < 1) return;
-      e.preventDefault();
-      let left = e.pageX + 'px';
-      let top = e.pageY + 'px';
-      this.contextMenuStyle = Object.assign(this.contextMenuStyle, {
-        top,
-        left
-      });
-      this.contextMenuShow = true;
-    },
-    scrollEvent(e) {
-      console.log('e.target.scrollTop->', e.target.scrollTop);
-      this._scrollTop = e.target.scrollTop;
-    },
-    /* 事件绑定 */
-    attachEvent() {
-      this.scrollEvent = vexutils.debounce(this.scrollEvent, 800);
-      const handleClick = () => {
-        this.contextMenuShow = false;
-      };
-      const handleRasize = () => {
-        if (this.readRecordVisible) {
-          let style = this.readRecordStyle;
-          const top = style.match(topReg)?.[1];
-          const topReg = /top:([\d.]+)/;
-          const maxH = document.body.clientHeight - 360;
-          if (top && maxH < top) {
-            style = style.replace(topReg, `top:${maxH}`);
-          }
-          const leftReg = /left:([\d.]+)/;
-          const left = style.match(leftReg)?.[1];
-          const maxW = document.body.clientWidth - 440;
-          if (left && maxW < left) {
-            style = style.replace(leftReg, `left:${maxW}`);
-          }
-          this.readRecordStyle = style;
-        }
-      };
-      window.addEventListener('resize', handleRasize);
-      document.addEventListener('click', handleClick);
-      this.registerEvent('openPortraitPanel', this.handleOpenPortraitPanel);
-      const readMessage = data => {
-        this.readMsg(data.ids.split(','), false, false, false);
-        this.postReadMessage(data);
-      };
-      this.registerEvent('readMessage', readMessage);
-      this.$on('hook:beforeDestroy', () => {
-        window.removeEventListener('resize', handleRasize);
-        document.removeEventListener('click', handleClick);
-        this.unregisterEvent('openPortraitPanel', this.handleOpenPortraitPanel);
-        this.unregisterEvent('readMessage', readMessage);
-      });
-    },
-    goToBroadcastLink(item) {
-      if (!item.url) return;
-      window.open(item.url);
-    },
-    /**
-     * 客服切换
-     */
-    handleSessionIdChange(e) {
-      let [sessionId, serviceId] = e.target.value.split('-');
-      this.setSessionId(sessionId);
-      this.setServiceId(serviceId);
-      let isOnChating = this.sessionHistoryList.find(item => item.fromId === serviceId).onChating;
-      this.setOnChating(!!isOnChating);
-      this.setMsgList([]);
-      this.getEarlierMsg();
-    },
-    handleSendFail(item) {
-      this.sendMessage(Object.assign(item.content, { failItem: item }));
-    },
-    reCall(type) {
-      this.setShowAudio(true);
-      this.setVideoMode(type === 'voice' ? 1 : 2);
-      this.$nextTick(() => {
-        this.setVideoMembers([]);
-      });
-    },
-    playAudio(item) {
-      let { content = '' } = item?.content || {};
-      if (!content) return;
-      if (this.lastAudioItem && (item.id !== this.lastAudioItem.id || item.createdTime !== this.lastAudioItem.createdTime)) {
-        this.$set(this.lastAudioItem.content, 'isPlay', false);
-      }
-
-      this.readSingleMsg(item);
-      this.lastAudioItem = item;
-      this.$set(item.content, 'isPlay', !item.content.isPlay);
-      this.$nextTick(() => {
-        this.curAudioUrl = content;
-        let audioRef = this.$refs['audio'];
-        if (!audioRef) return;
-        audioRef.load();
-        setTimeout(() => {
-          if (item.content.isPlay) {
-            let playPromise = audioRef.play();
-            if (playPromise !== undefined) {
-              playPromise.then(() => {
-                audioRef.play();
-              });
-            }
-          } else {
-            audioRef.pause();
-            this.curAudioUrl = '';
-          }
-        });
-      });
-    },
-    audioEnd() {
-      if (!this.lastAudioItem) return;
-      this.$set(this.lastAudioItem.content, 'isPlay', false);
-    },
-    getRecallText(item, flag = false) {
-      return getRecallText(this, item, flag);
-    }
-  },
-  directives: {
-    InfiniteScroll
-  },
-  components: {
-    AModal: Modal,
-    [Layout.Content.name]: Layout.Content,
-    [Spin.name]: Spin,
-    [Icon.name]: Icon,
-    [Popconfirm.name]: Popconfirm,
-    [Radio.Button.name]: Radio.Button,
-    [Radio.Group.name]: Radio.Group,
-    [Carousel.name]: Carousel,
-    SvgIcon,
-    MsgPrescription,
-    ReadStatus,
-    ReadRecord,
-    MsgPicture,
-    MsgDescribe,
-    chatHeader
-  },
-  watch: {
-    msgList() {
-      this.observeMsg();
-    },
-    isAppendMsg: {
-      immediate: true,
-      handler(isAppendMsg) {
-        if (isAppendMsg) {
-          let newArr = [];
-          if (vexutils.isPlainObject(this.message)) {
-            newArr = [...this.msgList, this.message];
-          } else if (vexutils.isArray(this.message)) {
-            newArr = [...this.msgList, ...this.message];
-          }
-          this.setMsgList(newArr);
-          this.setIsAppendMsg(false);
-          this.setScrollTo('bottom');
-        }
-      }
-    },
-    scrollTo: {
-      immediate: true,
-      handler(scrollTo) {
-        if (scrollTo) {
-          this.handleScrollTo(scrollTo);
-        }
-      }
-    },
-    activatedTime: {
-      immediate: true,
-      handler(value) {
-        this.handleScrollTo(this._scrollTop);
-      }
-    },
-    /**
-     * 图片懒加载处理
-     */
-    appendList: {
-      handler() {
-        if (!this.scrollHeight) {
-          let target = this.$refs['message-wrapper'];
-          this.scrollHeight = target.scrollHeight;
-        }
-        if (this.appendList.length === this.msgList.length || this.appendList.length === 1) {
-          this.setScrollTo('bottom');
-        } else {
-          this.setScrollTo('current');
-        }
-      }
-    },
-    isRecorderVoice: {
-      immediate: true,
-      handler(val) {
-        if (!val) return;
-        this.curAudioUrl = '';
-        this.setIsRecorderVoice(false);
-        if (!this.lastAudioItem) return;
-        this.$set(this.lastAudioItem.content, 'isPlay', false);
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@import '../style/emoji.css';
-@import '../style/message.mixin.less';
-.message-wrapper {
-  .createMessageStyle(#ebebeb, @primary-color);
-  flex: 1;
-  height: 0;
-  // position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
-  .broadcast-wrap {
-    height: 30px;
-    text-align: center;
-    font-size: 14px;
-    background-color: #fffbe8;
-    /deep/ .carousel-item {
-      display: inline-flex !important;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 30px;
-      text-align: center;
-      &.has-link {
-        color: #ed6a0c;
-        cursor: pointer;
-      }
-      span {
-        display: inline-block;
-        max-width: calc(100% - 30px);
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .loading-icon {
-    position: absolute;
-    top: 0;
-    left: 50%;
-  }
-}
-/deep/ .ant-layout-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-.online-message {
-  flex: 1;
-  height: 100%;
-  // height: 608px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 10px 22px;
-  // margin: 10px 0;
-  text-align: center;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  .message-time {
-    display: inline-block;
-    color: #666;
-    font-size: 14px;
-    border-radius: 4px;
-    padding: 4px;
-    margin: 0 auto;
-    margin-bottom: 16px;
-  }
-  > div {
-    margin-bottom: 16px;
-  }
-  .message-item {
-    display: flex;
-    /deep/ .chat-read-status-text {
-      display: none;
-    }
-    &.right.read-status {
-      padding-bottom: 24px;
-      position: relative;
-      /deep/ .chat-read-status-text {
-        display: block;
-        position: absolute;
-        right: 50px;
-        bottom: 0;
-      }
-    }
-    .right-time {
-      display: none;
-      position: absolute;
-      top: -16px;
-      left: 10px;
-      font-size: 12px;
-      color: #b0b1b1;
-      white-space: nowrap;
-    }
-
-    .content-wrap {
-      padding: 0 10px;
-      text-align: left;
-      position: relative;
-      &:hover {
-        .right-time {
-          display: block;
-        }
-      }
-
-      .robot-item {
-        text-align: left;
-        a {
-          text-decoration: underline;
-        }
-      }
-      .intention-wrap {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 8px 0 4px 0;
-        background-color: #fff;
-        border-radius: 0 0 8px 8px;
-        > div {
-          display: inline-flex;
-          flex-direction: column;
-          align-items: center;
-          width: 60px;
-          height: 54px;
-          cursor: pointer;
-
-          &:hover {
-            color: #5585f5;
-            span {
-              color: #5585f5;
-            }
-          }
-        }
-        span {
-          margin-top: 8px;
-          max-width: 90%;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          font-size: 12px;
-          color: #6a6a6a;
-        }
-      }
-      .dictionary-ul {
-        padding-top: 8px;
-        display: flex;
-        flex-wrap: wrap;
-        li {
-          padding: 4px 16px;
-          margin-right: 16px;
-          font-size: 14px;
-          color: #5585f5;
-          background: #efefef;
-          border-radius: 16px;
-          cursor: pointer;
-        }
-      }
-      .client-btn {
-        display: inline-block;
-        padding: 4px 8px;
-        margin-top: 8px;
-        color: #fff;
-        font-size: 12px;
-        border-radius: 20px;
-        background: #5585f5;
-        cursor: pointer;
-      }
-      .re-call {
-        cursor: pointer;
-        color: #5585f5;
-      }
-      .voice-bg {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        img {
-          mix-blend-mode: difference;
-          display: inline-block;
-          width: 14px;
-        }
-        .voice-text {
-          display: inline-block;
-        }
-        span {
-          margin-left: 8px;
-        }
-      }
-    }
-    .has-dictionary {
-      padding: 0;
-      text-align: left;
-      background: unset;
-    }
-    .content {
-      padding: 10px;
-      background: #ebebeb;
-      border-radius: 0px 8px 8px 8px;
-      max-width: 500px;
-      margin: 0px;
-      line-height: 20px;
-      font-size: 14px;
-      color: #000;
-      text-align: left;
-      word-break: break-word;
-      /deep/ p {
-        margin: 0;
-      }
-    }
-    .upload-image {
-      margin-left: 8px;
-    }
-    &.right {
-      flex-direction: row-reverse;
-      .right-time {
-        left: unset;
-        right: 10px;
-      }
-      .content-wrap {
-        text-align: right;
-        .robot-item {
-          text-align: right;
-        }
-        .voice-bg {
-          flex-direction: row-reverse;
-          align-self: flex-end;
-          img {
-            transform: rotateY(180deg);
-          }
-          span {
-            margin-left: 0;
-            margin-right: 8px;
-            text-align: right;
-          }
-        }
-      }
-      .content-wrap .content {
-        background-color: #e7f0ff;
-        border-radius: 8px 0px 8px 8px;
-        border: 1px solid #e7f0ff;
-        box-sizing: border-box;
-      }
-      .upload-image {
-        margin-right: 8px;
-      }
-    }
-  }
-  .bot-message {
-    display: block;
-    text-decoration: underline;
-    color: #5585f5;
-    cursor: pointer;
-  }
-  .session-end {
-    display: flex;
-    justify-content: center;
-    margin-top: 15px;
-    margin-bottom: 25px;
-    .end {
-      display: flex;
-      justify-content: center;
-      width: 30%;
-      height: 36px;
-      line-height: 36px;
-      background-color: #e8e8e8;
-      color: #939393;
-      font-size: 14px;
-      border-radius: 18px;
-    }
-  }
-  .menu-tip {
-    font-size: 20px;
-    align-self: flex-end;
-    margin-bottom: 8px;
-    background: #f6f6f6;
-    height: 25px;
-    line-height: 25px;
-    width: 30px;
-    border-radius: 4px;
-  }
-  .menu-item {
-    :hover {
-      background: red;
-    }
-  }
-  .menu-main {
-    width: 100px;
-    background-color: #101627;
-    color: #fff;
-    text-align: left;
-    border-radius: 6px;
-    padding: 10px 0;
-    z-index: 3000;
-    cursor: pointer;
-    .menu-item {
-      padding: 0 10px;
-    }
-    .menu-item:hover {
-      background-color: #efefef;
-      color: #000;
-    }
-  }
-  .first-name {
-    width: 40px;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    background: #5585f5;
-    color: #fff;
-    border-radius: 100%;
-    font-size: 15px;
-  }
-  .msg-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-
-    object-fit: cover;
-    background: #fff;
-  }
-  /deep/ .ant-spin-spinning {
-    display: flex;
-    align-items: center;
-  }
-  .system-msg {
-    margin: 10px 0;
-    text-align: left;
-    line-height: 20px;
-    word-wrap: break-word;
-    display: flex;
-    justify-content: center;
-    .system-icon {
-      font-size: 18px;
-      color: #ffc200;
-      vertical-align: middle;
-      margin-right: 10px;
-      margin-top: 1px;
-    }
-    .system-btn {
-      color: @primary-color;
-      margin-left: 8px;
-      cursor: pointer;
-      text-decoration: underline;
-    }
-  }
-}
-/deep/ p {
-  margin-bottom: 0;
-}
-</style>
+<template>
+  <div class="message-wrapper">
+    <chat-header :hideHeader="hideHeader" @openPortraitPanel="handleOpenPortraitPanel" v-if="isServer && enable"></chat-header>
+    <a-layout-content>
+      <slot></slot>
+      <div v-if="showBroadcast" class="broadcast-wrap">
+        <div v-if="broadcastCarousel" class="carousel-item" :class="{ 'has-link': assemblySetting.broadcast.PC.list[0].url }" @click="goToBroadcastLink(assemblySetting.broadcast.PC.list[0])">
+          <a-icon type="sound" />
+          <span class="ellips">
+            {{ assemblySetting.broadcast.PC.list[0].content }}
+          </span>
+        </div>
+        <template v-else>
+          <a-carousel dotPosition="right" autoplay :dots="false">
+            <div class="carousel-item" v-for="(item, i) in assemblySetting.broadcast.PC.list" :key="i" :class="{ 'has-link': item.url }" @click="goToBroadcastLink(item)">
+              <a-icon type="sound" />
+              <span class="ellips">{{ item.content }}</span>
+            </div>
+          </a-carousel>
+        </template>
+      </div>
+      <div v-if="sessionHistoryList.length > 1 && !(!onChating && currentTab === 'end') && !sessionEnd" style="position: absolute; top: 0; left: 20px; z-index: 1">
+        <a-radio-group :value="selectedSession" @change="handleSessionIdChange" buttonStyle="solid">
+          <a-radio-button :value="item.id + '-' + item.fromId" v-for="item in sessionHistoryList" :key="item.id + item.fromId">{{ item.fromName }}</a-radio-button>
+        </a-radio-group>
+      </div>
+      <div class="online-message" ref="message-wrapper" v-infinite-scroll="handleInfiniteOnLoad" @scroll="scrollEvent">
+        <template v-for="(item, index) in msgList">
+          <div :key="index" v-if="item">
+            <p v-if="isNeedShowTime(item, index)" class="message-time">
+              {{ formatDate(item.createdTime) }}
+            </p>
+            <div v-if="item.recallFlag" style="margin: 10px 0">
+              <template v-if="handleRecallFlag(item)">
+                {{ getRecallText(item, isServer) }}
+                <a style="text-decoration: underline" @click="reEditMessage(item)" v-if="[0, 4].includes(item.content && item.content.type) && onChating && isServer">,{{ i18nText('1.9.368') }}</a>
+              </template>
+              <template v-else>
+                {{ getRecallText(item) || `${item.fromName} ${i18nText('1.9.365')}` }}
+              </template>
+            </div>
+            <!--  系统消息 -->
+            <div class="system-msg" v-else-if="isSystemMsg(item)">
+              <a-icon class="system-icon" theme="filled" type="exclamation-circle" />
+              <div>
+                <span v-html="getSystemMsgContent(item)"></span>
+                <span class="system-btn" v-for="(btn, index) in getTemplateButton(item)" @click="handleTemplateButton(btn)" :key="index">{{ btn.title }}</span>
+              </div>
+            </div>
+            <div
+              v-else-if="!item.recallFlag"
+              class="message-item"
+              :class="[getMessageItemClass(item), { 'read-status': enableReadRecord && item.readStatus }]"
+              :data-rid="item.readStatus === 'N' ? item.id : ''"
+            >
+              <img v-if="!isServer && item.fromPortrait" class="msg-avatar" :src="item.fromPortrait" />
+
+              <div v-else-if="!isServer && item.fromName" class="first-name">
+                {{ item.fromName && item.fromName.slice(0, 2) }}
+              </div>
+              <img v-else-if="!isServer" class="msg-avatar" :src="getAvatar(item)" width="40" height="40" />
+
+              <template v-else>
+                <img :src="customerStaffIcon" class="msg-avatar" width="40" height="40" v-if="item.fromId === 'SYSTEM'" />
+
+                <img src="../img/system_message.png" class="msg-avatar" width="40" height="40" v-else-if="item.content && item.content.source === 1" />
+
+                <img v-else-if="item.portrait" class="msg-avatar" :src="item.portrait" />
+
+                <div v-else class="first-name">
+                  {{ item.fromName && item.fromName.slice(0, 2) }}
+                </div>
+              </template>
+              <div @contextmenu="handleContextmenu($event, item)" style="display: flex">
+                <a-spin v-if="item.sending">
+                  <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
+                </a-spin>
+                <a-popconfirm @confirm="handleSendFail(item)" :okText="i18nText('1.1.1.1.3')" :cancelText="i18nText('2.7.1.14')">
+                  <a-icon type="exclamation-circle" slot="icon" />
+                  <div slot="title">
+                    <span>确认重新发送该消息?</span>
+                  </div>
+                  <a-icon v-if="item.fail" theme="filled" type="exclamation-circle" style="font-size: 16px; display: flex; align-items: center; color: red" />
+                </a-popconfirm>
+                <div class="content-wrap" v-if="item.content.type === 0">
+                  <span class="right-time">
+                    {{ formatDate(item.createdTime || item.sendTime, true) }}
+                  </span>
+                  <div
+                    :class="{
+                      content: true,
+                      'has-dictionary': item.dictionaryValues && item.dictionaryValues.length,
+                      'has-intention': item.intentionList && item.intentionList.length
+                    }"
+                  >
+                    <p v-html="getContentHtml(item)"></p>
+                    <template v-if="item.content.attachments && item.content.attachments.length > 0">
+                      <div v-for="(v, index) in item.content.attachments" :key="index" class="robot-item">
+                        <a v-if="v.type == 1" :href="v.url" target="_blank"> {{ v.desc }}(超链) </a>
+                        <a @click.prevent.stop="$emit('sendQuestion', v, item)" v-if="v.type == 2 || v.type == 3" href="javascript:void(0);">
+                          {{ v.desc }}
+                        </a>
+                      </div>
+                    </template>
+                    <div v-if="item.intentionList && item.intentionList.length" class="intention-wrap">
+                      <div v-for="(v, index) in item.intentionList" :key="index" @click.prevent.stop="$emit('sendIntention', v)">
+                        <svg-icon :icon-class="v.icon || 'moren'" style="font-size: 26px"></svg-icon>
+                        <span>{{ v.name }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <ul class="dictionary-ul" v-if="item.dictionaryValues && item.dictionaryValues.length">
+                    <li v-for="(v, i) in item.dictionaryValues" :key="i" @click.prevent.stop="$emit('sendDictionary', v, item)">
+                      {{ v }}
+                    </li>
+                  </ul>
+                  <div class="client-btn" v-if="item.autoAccess && item.autoAccess === 'false'">
+                    <svg-icon icon-class="kefu"></svg-icon>
+                    <span @click="$emit('goCustomServe')">转人工客服</span>
+                  </div>
+                </div>
+                <div v-else-if="item.content.type === 1" class="upload-image">
+                  <MsgPicture style="max-width: 345px" :image="item.content.content" @click="show(item)" />
+                </div>
+                <div class="content-wrap" v-else-if="item.content.type === 2">
+                  <span class="right-time">
+                    {{ formatDate(item.createdTime || item.sendTime, true) }}
+                  </span>
+                  <div class="content">
+                    <img style="width: 16px;margin-right:8px" src="../img/multi-video.png" />
+                    {{ item.content.content }}&nbsp;
+                    <span @click.prevent.stop="reCall(item, 'video')" class="re-call" v-if="item.content.isRefuse == 1">
+                      {{ handleReCall(item) }}
+                    </span>
+                  </div>
+                </div>
+                <div class="content-wrap" v-else-if="item.content.type === 5">
+                  <span class="right-time">
+                    {{ formatDate(item.createdTime || item.sendTime, true) }}
+                  </span>
+                  <div class="content">
+                    <img style="width: 16px;margin-right:8px" src="../img/multi-voice.png" />
+                    {{ item.content.content }}&nbsp;
+                    <span @click.prevent.stop="reCall(item, 'voice')" class="re-call" v-if="item.content.isRefuse == 1">
+                      {{ handleReCall(item) }}
+                    </span>
+                  </div>
+                </div>
+                <div class="content-wrap" v-else-if="item.content.type === 6">
+                  <span class="right-time">
+                    {{ formatDate(item.createdTime || item.sendTime, true) }}
+                  </span>
+                  <div class="voice-bg content" @click.prevent.stop="playAudio(item)">
+                    <img v-if="item.content.isPlay" src="../img/audio-play.gif" alt="" />
+                    <img v-else src="../img/audio-new.png" alt="" />
+                    <span class="voice-text" :style="AudioStyle(item)"> {{ item.content.duration || 1 }}" </span>
+                  </div>
+                </div>
+                <template v-else-if="item.content.type === 4">
+                  <msg-describe v-if="isDescribeMsg(item)" :item="item" />
+                  <div v-else class="content-wrap">
+                    <span class="right-time">
+                      {{ formatDate(item.createdTime || item.sendTime, true) }}
+                    </span>
+                    <MsgPrescription :data="item" :isServer="isServer" :theme="isServer ? '' : 'customer'" @handleTemplateDetail="handleTemplateDetail" @handleTemplateButton="handleTemplateButton" />
+                  </div>
+                </template>
+              </div>
+              <ReadStatus v-if="enableReadRecord" :status="item.readStatus" @click="openReadRecord($event, item)" />
+            </div>
+          </div>
+        </template>
+        <ul class="menu-main" ref="contextMenu" :style="contextMenuStyle" v-if="contextMenuShow">
+          <template v-for="(item, index) in rightClickSetting">
+            <li :key="index" class="menu-item" @click="() => handleRightClick(contextMenuItem, item)">
+              {{ item.rightClickName }}
+            </li>
+          </template>
+        </ul>
+        <div class="session-end" v-if="sessionEnd && !isServer">
+          <span class="end">{{ i18nText('1.9.370') }}</span>
+        </div>
+        <a-spin v-if="loading" class="loading-icon" />
+      </div>
+      <!-- 图片预览 -->
+      <viewer class="viewer" ref="viewer" :images="images" @inited="inited" :options="options" style="display: none">
+        <template slot-scope="scope">
+          <img v-for="src in scope.images" :src="src" :key="src" />
+        </template>
+      </viewer>
+      <!-- 卡片详情 -->
+      <a-modal
+        wrapClassName="chat-footer-modal-small"
+        :title="modalData.title || i18nText('1.1.1.10')"
+        :visible="modalShow"
+        :maskClosable="false"
+        :mask="true"
+        width="80%"
+        destroyOnClose
+        :okText="i18nText('1.2.1.11.6')"
+        :footer="null"
+        @cancel="
+          () => {
+            this.modalShow = false;
+          }
+        "
+      >
+        <iframe id="chat-footer-modal" v-if="modalData.targetType === 'LINK_ADDRESS'" width="100%" height="100%" frameborder="0" :src="modalData.address" allow="camera;midi"></iframe>
+      </a-modal>
+    </a-layout-content>
+    <audio style="display: none" controls autoplay ref="audio" preload="auto" crossOrigin="anonymous" media-player="audioPlayer" :src="curAudioUrl" @ended="audioEnd"></audio>
+    <ReadRecord v-if="readRecordVisible" :style="readRecordStyle" :list="readRecordList" @close="closeReadRecord" />
+  </div>
+</template>
+
+<script>
+import { Layout, Modal, Icon, Spin, Popconfirm, Carousel, Radio } from 'ant-design-vue';
+import SvgIcon from '@/component/svg/index.vue';
+import InfiniteScroll from '@/directive/scroll';
+import { mapGetters, mapMutations, mapActions } from '../store/helper';
+import fetch, { qs } from '@/utils/chatFetch';
+import MsgDescribe from '../components/msg-describe';
+import MsgPicture from '../components/msg-picture';
+import MsgPrescription from '../components/msg-prescription';
+import ReadStatus from '../components/read-status';
+import ReadRecord from '../components/read-record';
+import chatHeader from './chatHeader';
+import viewerOptions from './mixins/viewerOptions';
+import { getRecallText } from '../utils';
+import vexutils from '@/utils/vexutils';
+import ObserverScroll from '../utils/observer-scroll';
+
+const customerStaffIcon = require('../img/customer_staff.png');
+export default {
+  mixins: [viewerOptions],
+  inject: ['store', 'dispatchEvent', 'registerEvent', 'unregisterEvent', 'i18nText'],
+  props: {
+    hideHeader: {
+      type: Boolean,
+      default: false
+    },
+    robotAvatar: {
+      type: String,
+      default: ''
+    },
+    curChatType: {
+      type: String
+    },
+    isShowPortraitPanel: {
+      type: Boolean
+    },
+    activatedTime: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      // 卡片详情
+      modalShow: false,
+      modalData: {},
+      // 客户头像
+      // 右键操作
+      contextMenuStyle: {
+        position: 'fixed',
+        top: 0,
+        left: 0
+      },
+      contextMenuShow: false,
+      contextMenuItem: null,
+      // 查看历史消息滚动定位
+      scrollHeight: 0,
+      curAudioUrl: '',
+      lastAudioItem: null,
+      readRecordStyle: '',
+      readRecordVisible: false,
+      readRecordList: []
+    };
+  },
+  computed: {
+    ...mapGetters([
+      'userInfo',
+      'currentTab',
+      'isAppendMsg',
+      'message',
+      'msgList',
+      'sessionId',
+      'serviceId',
+      'scrollTo',
+      'isServer',
+      'clientId',
+      'sessionEnd',
+      'assemblyId',
+      'footerMessage',
+      'portraitPanelParams',
+      'assemblySetting',
+      'clientParams',
+      'onChating',
+      'classify',
+      'collapsed',
+      'barStatus',
+      'sessionHistoryList',
+      'enable',
+      'appendList',
+      'queueItem',
+      'isRecorderVoice'
+    ]),
+    orgId() {
+      const getters = this.store.getters;
+      return this.isServer ? this.userInfo?.sysParams?.orgId : getters.accessParams.orgId || getters.queryParams.orgId;
+    },
+    userId() {
+      const getters = this.store.getters;
+      return this.isServer ? this.userInfo?.sysParams?.userId : getters.accessParams.userId || getters.chatUserId || getters.queryParams.userId;
+    },
+    enableReadRecord() {
+      return this.assemblySetting?.readStatus === 'Y';
+    },
+    customerStaffIcon() {
+      return this.robotAvatar || customerStaffIcon;
+    },
+    selectedSession() {
+      let sessionMap = this.sessionHistoryList.find(item => item.fromId === this.serviceId);
+      if (sessionMap) {
+        return sessionMap.id + '-' + sessionMap.fromId;
+      }
+      return '';
+    },
+    isListClassify() {
+      return this.assemblySetting.isListClassify === 'Y';
+    },
+    showPanel() {
+      return this.assemblySetting.portraitPanelSetting?.targetIs;
+    },
+    showBroadcast() {
+      let res = (!this.isServer && this.assemblySetting?.broadcast?.PC?.isChecked == 'Y' && this.assemblySetting?.broadcast?.PC?.list?.length > 0) || false;
+      return res;
+    },
+    broadcastCarousel() {
+      return (this.assemblySetting.broadcast && this.assemblySetting.broadcast.PC.list.length == 1) || false;
+    },
+    rightClickSetting() {
+      const { isServer } = this;
+      if (!isServer) return [];
+      const isSelf = this.contextMenuItem.fromId === this.serviceId;
+      const setting = this.assemblySetting?.rightClickSetting || [];
+      const doArr = ['resend', 'rollBack'];
+      return setting.filter(item => {
+        const { rightClickDo } = item;
+        return isSelf || doArr.indexOf(rightClickDo) < 0;
+      });
+    },
+    handleReCall() {
+      return function(item) {
+        if (item.content?.source === 1) {
+          return '[点击回拨]';
+        } else if (item.senderFlag == 1) {
+          return `[点击${this.isServer ? '回拨' : '重拨'}]`;
+        }
+        if (item.senderFlag == 2) {
+          return `[点击${this.isServer ? '重拨' : '回拨'}]`;
+        }
+        if (this.isServer) {
+          let isRight = item.fromId !== 'SYSTEM' && item.fromId && item.fromId === this.serviceId;
+          return `[点击${isRight ? '重拨' : '回拨'}]`;
+        } else {
+          let isRight = (item.fromId !== 'SYSTEM' && item.toId === 'SYSTEM') || item.fromId === this.clientId || (item.mode === 'bot' && !item.fromId);
+          return `[点击${isRight ? '重拨' : '回拨'}]`;
+        }
+      };
+    },
+    handleRecallFlag() {
+      return function(item) {
+        return this.serviceId == item.fromId;
+      };
+    },
+    AudioStyle() {
+      return function(item) {
+        let { duration = 1 } = item.content;
+        if (!duration) {
+          duration = 1;
+        }
+        let curWidth = (+duration / 60) * 400;
+        return {
+          width: curWidth < 13 ? 13 : curWidth + 'px'
+        };
+      };
+    },
+    showTimeDuration() {
+      let { variableSetting = null } = this.assemblySetting || {};
+      if (!variableSetting) return 3;
+      let matchItem = variableSetting.find(v => v.name === 'CHAT_SEPARATION_TIME');
+      if (!matchItem) return 3;
+      if (!+matchItem.value) return 3;
+      return +matchItem.value;
+    },
+    images() {
+      return this.msgList.filter(v => !v.recallFlag && v.content.type == 1)?.map(v => v.content?.content);
+    }
+  },
+  created() {
+    this.attachEvent();
+  },
+  methods: {
+    ...mapMutations([
+      'setIsAppendMsg',
+      'setMsgList',
+      'setScrollTo',
+      'setFooterMessage',
+      'setIsScrollListChange',
+      'setListChangeItem',
+      'setSessionId',
+      'setOnChating',
+      'setServiceId',
+      'setShowAudio',
+      'setVideoMode',
+      'setVideoMembers',
+      'setIsRecorderVoice'
+    ]),
+    ...mapActions({
+      getEarlierMsg: 'setMsgList',
+      handleBotChat: 'handleBotChat',
+      sendMessage: 'sendMessage'
+    }),
+    getMessageItemClass(item) {
+      // content.source === 1, 代表为系统消息, 系统统一左侧展示
+      if (item.content?.source === 1) {
+        return {
+          left: true
+        };
+      }
+
+      // 服务端 senderFlag 1 左 2 右
+      // 客户端 senderFlag 1 右 2 左
+      if (item.content?.source === 1) {
+        return {
+          left: true
+        };
+      } else if (item.senderFlag == 1) {
+        if (this.isServer) {
+          return {
+            left: true
+          };
+        } else {
+          return {
+            right: true
+          };
+        }
+      }
+      if (item.senderFlag == 2) {
+        if (this.isServer) {
+          return {
+            right: true
+          };
+        } else {
+          return {
+            left: true
+          };
+        }
+      }
+      if (this.isServer) {
+        return {
+          right: item.fromId !== 'SYSTEM' && item.fromId && item.fromId === this.serviceId,
+          left: item.fromId === 'SYSTEM' || item.fromId === this.clientId || item.content?.source === 1 || !item.fromId
+        };
+      } else {
+        let isRight, isLeft;
+        if (this.curChatType == 'robot') {
+          isRight = item.fromId !== 'SYSTEM';
+          isLeft = item.fromId === 'SYSTEM';
+        } else {
+          isRight = (item.fromId !== 'SYSTEM' && item.toId === 'SYSTEM') || item.fromId === this.clientId || (item.mode === 'bot' && !item.fromId);
+          isLeft = item.fromId === 'SYSTEM' || item.fromId !== this.clientId || item.content?.source === 1;
+        }
+        return {
+          right: isRight,
+          left: isLeft
+        };
+      }
+    },
+    /* 向上滚动刷新 */
+    handleInfiniteOnLoad() {
+      if (this.curChatType === 'robot') return;
+      this.loading = true;
+      this.getEarlierMsg().then(msg => {
+        if (msg) {
+          this.$message.info(msg);
+        }
+        this.loading = false;
+      });
+    },
+    show(item) {
+      const src = item.content.content;
+      // this.images = vexutils.imgs2imgArr(src);
+      this.$viewer.view(this.images.findIndex(v => v === src));
+      this.$viewer.show();
+      this.readSingleMsg(item);
+    },
+    /* 滚动条定位 */
+    handleScrollTo(scrollTo) {
+      let target = this.$refs['message-wrapper'];
+      this.$nextTick().then(() => {
+        if (!target) return;
+        let top = target.scrollHeight;
+        if (scrollTo === 'current') {
+          top = target.scrollHeight - this.scrollHeight;
+        }
+        if (typeof scrollTo === 'number') {
+          top = scrollTo;
+        }
+        target.scrollTo({
+          left: 0,
+          top,
+          behavior: 'instant'
+        });
+        this.scrollHeight = 0;
+      });
+      this.setScrollTo('');
+    },
+
+    /**
+     * 是否需要显示时间
+     */
+    isNeedShowTime(item, index) {
+      const curMsgTime = item.createdTime || new Date().getTime();
+      let duration = 60 * 1000 * this.showTimeDuration;
+      let lastMsgTime;
+      if (index == 0) {
+        lastMsgTime = 0;
+      } else {
+        lastMsgTime = this.msgList[index - 1].createdTime;
+      }
+      if (Number(curMsgTime) - Number(lastMsgTime) > duration) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    formatDate(date) {
+      return vexutils.formatDate(date, true);
+    },
+    getAvatar(item) {
+      if (item.content && item.content.source === 1) {
+        return require('../img/system_message.png');
+      }
+      if (item.mode === 'bot' && !item.fromId) {
+        return require('../img/default.png');
+      }
+      if (this.isServer) {
+        if (item.fromId === this.clientId || !item.fromId) {
+          return require('../img/default.png');
+        } else {
+          return this.customerStaffIcon;
+        }
+      } else {
+        if (this.curChatType == 'robot') {
+          if (item.fromId === 'SYSTEM') {
+            return this.customerStaffIcon;
+          } else {
+            return require('../img/default.png');
+          }
+        } else {
+          if (item.fromId !== this.clientId) {
+            return this.customerStaffIcon;
+          } else {
+            return require('../img/default.png');
+          }
+        }
+      }
+    },
+    getContent(item) {
+      let content;
+      if (vexutils.isJSON(item.content.content)) {
+        content = JSON.parse(item.content.content);
+      } else {
+        content = item.content.content;
+      }
+      return content;
+    },
+    getContentHtml(item) {
+      return !~item.content.content.indexOf('emoji') ? this.$xss(item.content.content) : item.content.content;
+    },
+    getTemplateTitle(item) {
+      return this.getContent(item)?.title;
+    },
+    showArrow(item) {
+      let setting = this.getContent(item)?.customerSetting || {};
+      if (this.isServer) {
+        setting = this.getContent(item)?.serverSetting || {};
+      }
+      let { address } = setting;
+      if (!address) return false;
+      return true;
+    },
+    getTemplateTitleIcon(item) {
+      return this.getContent(item)?.icon;
+    },
+    getTemplateContent(item) {
+      let content = this.getContent(item);
+      let array = [];
+      try {
+        array = content.content.split('##');
+      } catch {
+        console.log(content, 'error');
+      }
+      array = array.map(item => `<div>${item}</div>`);
+      return array.join('');
+    },
+    getSystemMsgContent(item) {
+      let content = this.getContent(item);
+      let array = [];
+      try {
+        array = content.content.split('##');
+      } catch {
+        console.log(content, 'error');
+      }
+      return array.join('<br>');
+    },
+    getTemplateButton(item) {
+      let content = this.getContent(item);
+      const setting = this.isServer ? content.serverSetting : content.customerSetting;
+      return setting?.toolbar_button || [];
+    },
+    // 处理模板按钮,详情等跳转
+    handleTemplate(data, dispatch = true) {
+      let { targetType, address, params = [], openMode } = data;
+      dispatch &&
+        this.dispatchEvent('click_templateCard', {
+          ...data
+        });
+      if (!address) return;
+      if (targetType === 'LINK_ADDRESS') {
+        let urlParams = [];
+        params.forEach(({ p_name, p_value }) => {
+          urlParams.push(`${p_name}=${p_value}`);
+        });
+        if (address.includes('?')) {
+          address += `&${urlParams.join('&')}`;
+        } else {
+          address += `?${urlParams.join('&')}`;
+        }
+        if (openMode === 'WINDOW') {
+          window.open(address);
+          return;
+        }
+        if (openMode === 'EJECT') {
+          this.modalShow = true;
+          this.modalData = Object.assign({}, data, {
+            address
+          });
+          return;
+        }
+      }
+    },
+    handleTemplateDetail(item) {
+      let content = this.getContent(item) || {};
+      let setting = content.customerSetting || {};
+      if (this.isServer) {
+        setting = content.serverSetting || {};
+      }
+      this.readSingleMsg(item);
+      this.handleTemplate(setting);
+    },
+    handleTemplateButton(btn) {
+      this.handleTemplate(btn);
+    },
+    // 消息撤回
+    handleRecall(item) {
+      let params = {
+        assemblyId: this.assemblyId,
+        sessionId: this.sessionId,
+        messageId: item.id,
+        messageType: item.content?.type,
+        userId: this.userInfo?.sysParams?.userId || ''
+      };
+
+      fetch.post('/chat/service/recallMessage', qs.stringify(params)).then(({ data }) => {
+        if (data.result === 'SUCCESS') {
+          this.dispatchEvent('msg_recallSuccess', {
+            message: { ...item },
+            ...params
+          });
+          this.$set(item, 'recallFlag', 1);
+          // 撤回成功提示
+          let title = this.getContent(item)?.title;
+          let text = title ? `已撤回[${title}]` : '已撤回';
+          this.$message.success(text);
+
+          if (!this.isLastMessage(item.id)) return;
+          this.setIsScrollListChange(true);
+          this.setListChangeItem({
+            opt: 1,
+            from: this.clientId,
+            sessionId: this.sessionId,
+            msgCount: 0,
+            lastContentRecallFlag: 1,
+            lastContent: vexutils.clone(item.content, true),
+            lastTime: new Date().getTime()
+          });
+        } else {
+          this.$message.error(data.resultMsg);
+        }
+      });
+    },
+    handleJumpUrl(contextMenuItem, item) {
+      const title = item.rightClickName;
+      const url = item.rightClickUrl.replace(/{(.*?)}/g, (match, p) => {
+        return eval(p);
+      });
+      this.dispatchEvent('open_jumpUrl', {
+        title: title,
+        url: url
+      });
+    },
+    // 右键菜单功能
+    handleRightClick(contextMenuItem, item) {
+      if (item.rightClickDo === 'rollBack') {
+        this.handleRecall(contextMenuItem);
+      } else if (item.rightClickDo === 'jumpUrl') {
+        this.handleJumpUrl(contextMenuItem, item);
+      } else if (item.rightClickDo === 'resend') {
+        this.resendMessage(contextMenuItem);
+      }
+    },
+    resendMessage(item) {
+      fetch({
+        method: 'POST',
+        url: '/chat/service/resendMessage',
+        data: qs.stringify({
+          assemblyId: this.assemblyId,
+          sessionId: this.sessionId,
+          messageId: item.id
+        })
+      });
+    },
+    // 重新编辑
+    reEditMessage(item) {
+      if (item.content?.type === 4) {
+        let content = this.getContent(item);
+        this.handleTemplate(content.serverSetting.reEditSetting, false);
+        return;
+      }
+      this.setFooterMessage(this.footerMessage + item.content.content.slice(5, -6));
+    },
+    observeMsg() {
+      if (this.enableReadRecord) {
+        if (!this._observer) {
+          this._observer = new ObserverScroll(this.$refs['message-wrapper'], this.readMsg);
+          this.$on('hook:beforeDestroy', () => {
+            this._observer.remove();
+            this._observer = null;
+          });
+        }
+        this._observer.disconnect();
+        if (this.msgList.length) {
+          this.$nextTick(() => {
+            const el = this.$refs['message-wrapper'];
+            const els = el?.querySelectorAll('.message-item.left');
+            els && this._observer.observe(Array.from(els).filter(item => item.getAttribute('data-rid')));
+          });
+        }
+      }
+    },
+    readMsg(ids, enableVaid = true, notify = true, post = true) {
+      const msgList = this.msgList;
+      const idKeys = msgList.reduce((obj, item, i) => {
+        const id = item?.id;
+        if (id) obj[id] = i;
+        return obj;
+      }, {});
+      const data = [];
+      const validFn = (item, type) => {
+        /**
+         * 针对文本、表情消息类型，只要在聊天区域内，视为已读，
+         * 图片、语音类型消息，需要点击查看后，才视为已读，
+         * 模板 类型消息，如果没有详情链接，只要在聊天区域内，视为已读，若有详情链接，需要点击查看后，才视为已读
+         */
+        const jumpType = `,6,1,`;
+        if (jumpType.includes(type)) return false;
+        if (type == 4 && !this.isDescribeMsg(item)) {
+          let content = this.getContent(item) || {};
+          let setting = (this.isServer ? content.serverSetting : content.customerSetting) || {};
+          return !setting?.address;
+        }
+        return true;
+      };
+      const value = ids.filter(id => {
+        const i = idKeys[id];
+        let item = msgList[i];
+        if (item) {
+          const type = item.content.type;
+          if (!enableVaid || validFn(item, type)) {
+            item.readStatus = 'Y';
+            data.push({ id, type });
+            return true;
+          }
+          return false;
+        }
+      });
+      if (!value.length) return;
+      notify &&
+        this.dispatchEvent('msg_readed', {
+          data,
+          assemblyId: this.assemblyId,
+          sessionId: this.sessionId
+        });
+      post && this.postReadMessage({ ids: value.join(',') });
+    },
+    postReadMessage(data) {
+      fetch.post(
+        `/chat/${this.isServer ? 'service' : 'access'}/readMessage`,
+        qs.stringify({
+          assemblyId: this.assemblyId,
+          orgId: this.orgId,
+          userId: this.userId,
+          sessionId: this.sessionId,
+          ...data
+        })
+      );
+    },
+    readSingleMsg(item) {
+      if (this.enableReadRecord && item.readStatus === 'N') {
+        const cls = this.getMessageItemClass(item);
+        if (!cls?.left) return;
+        this.readMsg([item.id], false);
+      }
+    },
+    closeReadRecord() {
+      this.readRecordVisible = false;
+      this.readRecordList = [];
+    },
+    openReadRecord(event, item) {
+      const readStatus = item.readStatus;
+      if (readStatus) {
+        const cls = this.getMessageItemClass(item);
+        if (!cls.right) return;
+        const rect = event.target.getBoundingClientRect();
+        const w = 440;
+        const h = 340;
+        const top = Math.max(0, Math.min(document.body.clientHeight - h, rect.top - h / 2));
+        const left = Math.max(0, Math.min(document.body.clientWidth - w, rect.left - w));
+        fetch({
+          url: `/chat/${this.isServer ? 'service' : 'access'}/getMessageMember`,
+          method: 'get',
+          params: {
+            assemblyId: this.assemblyId,
+            messageId: item.id,
+            orgId: this.isServer ? undefined : this.orgId
+          }
+        }).then(res => {
+          const list = res.data?.list || [];
+          this.readRecordStyle = `top:${top}px;left:${left}px;position:fixed;z-index:10`;
+          this.readRecordVisible = list.length > 0;
+          this.readRecordList = Object.freeze(list);
+          if (item.readStatus && list.length) {
+            const unread = list.filter(item => item.readStatus == 'N').length;
+            const single = list.length < 2;
+            const status = unread > 0 ? (single ? 'N' : `${unread}`) : single ? 'Y' : 'ALL';
+            //  检查是否更新人数
+            if (item.readStatus != status) {
+              item.readStatus = status;
+            }
+          }
+        });
+      }
+    },
+    isLastMessage(id) {
+      return this.msgList.findIndex(msg => msg.id === id) === this.msgList.length - 1;
+    },
+    isSystemMsg(item) {
+      return item.content.type == 4 && this.getContent(item).styleId == '2';
+    },
+    isDescribeMsg(item) {
+      return this.getContent(item).styleId == '3';
+    },
+    async handleOpenPortraitPanel(item) {
+      if (!this.showPanel || item.fromId === this.serviceId || !this.isServer || !this.isShowPortraitPanel) return;
+      const { portraitPanelParams, clientParams } = this;
+      const panelSetting = this.assemblySetting?.portraitPanelSetting;
+      this.dispatchEvent('open_portraitPanel', {
+        panelSetting,
+        clientParams,
+        panelParams: portraitPanelParams,
+        targetId: panelSetting?.targetId,
+        targetType: panelSetting?.targetType
+      });
+    },
+    handleContextmenu(e, item) {
+      // 系统消息,客户消息,待接入消息,历史消息不允许撤回
+      // 模板-描述消息禁用右键
+      if (item.content?.source === 1 || !this.sessionId || (this.sessionId && !this.onChating) || (item.content.type === 4 && this.isDescribeMsg(item))) return;
+      this.contextMenuItem = item;
+      if (this.rightClickSetting.length < 1) return;
+      e.preventDefault();
+      let left = e.pageX + 'px';
+      let top = e.pageY + 'px';
+      this.contextMenuStyle = Object.assign(this.contextMenuStyle, {
+        top,
+        left
+      });
+      this.contextMenuShow = true;
+    },
+    scrollEvent(e) {
+      console.log('e.target.scrollTop->', e.target.scrollTop);
+      this._scrollTop = e.target.scrollTop;
+    },
+    /* 事件绑定 */
+    attachEvent() {
+      this.scrollEvent = vexutils.debounce(this.scrollEvent, 800);
+      const handleClick = () => {
+        this.contextMenuShow = false;
+      };
+      const handleRasize = () => {
+        if (this.readRecordVisible) {
+          let style = this.readRecordStyle;
+          const top = style.match(topReg)?.[1];
+          const topReg = /top:([\d.]+)/;
+          const maxH = document.body.clientHeight - 360;
+          if (top && maxH < top) {
+            style = style.replace(topReg, `top:${maxH}`);
+          }
+          const leftReg = /left:([\d.]+)/;
+          const left = style.match(leftReg)?.[1];
+          const maxW = document.body.clientWidth - 440;
+          if (left && maxW < left) {
+            style = style.replace(leftReg, `left:${maxW}`);
+          }
+          this.readRecordStyle = style;
+        }
+      };
+      window.addEventListener('resize', handleRasize);
+      document.addEventListener('click', handleClick);
+      this.registerEvent('openPortraitPanel', this.handleOpenPortraitPanel);
+      const readMessage = data => {
+        this.readMsg(data.ids.split(','), false, false, false);
+        this.postReadMessage(data);
+      };
+      this.registerEvent('readMessage', readMessage);
+      this.$on('hook:beforeDestroy', () => {
+        window.removeEventListener('resize', handleRasize);
+        document.removeEventListener('click', handleClick);
+        this.unregisterEvent('openPortraitPanel', this.handleOpenPortraitPanel);
+        this.unregisterEvent('readMessage', readMessage);
+      });
+    },
+    goToBroadcastLink(item) {
+      if (!item.url) return;
+      window.open(item.url);
+    },
+    /**
+     * 客服切换
+     */
+    handleSessionIdChange(e) {
+      let [sessionId, serviceId] = e.target.value.split('-');
+      this.setSessionId(sessionId);
+      this.setServiceId(serviceId);
+      let isOnChating = this.sessionHistoryList.find(item => item.fromId === serviceId).onChating;
+      this.setOnChating(!!isOnChating);
+      this.setMsgList([]);
+      this.getEarlierMsg();
+    },
+    handleSendFail(item) {
+      this.sendMessage(Object.assign(item.content, { failItem: item }));
+    },
+    reCall(type) {
+      this.setShowAudio(true);
+      this.setVideoMode(type === 'voice' ? 1 : 2);
+      this.$nextTick(() => {
+        this.setVideoMembers([]);
+      });
+    },
+    playAudio(item) {
+      let { content = '' } = item?.content || {};
+      if (!content) return;
+      if (this.lastAudioItem && (item.id !== this.lastAudioItem.id || item.createdTime !== this.lastAudioItem.createdTime)) {
+        this.$set(this.lastAudioItem.content, 'isPlay', false);
+      }
+
+      this.readSingleMsg(item);
+      this.lastAudioItem = item;
+      this.$set(item.content, 'isPlay', !item.content.isPlay);
+      this.$nextTick(() => {
+        this.curAudioUrl = content;
+        let audioRef = this.$refs['audio'];
+        if (!audioRef) return;
+        audioRef.load();
+        setTimeout(() => {
+          if (item.content.isPlay) {
+            let playPromise = audioRef.play();
+            if (playPromise !== undefined) {
+              playPromise.then(() => {
+                audioRef.play();
+              });
+            }
+          } else {
+            audioRef.pause();
+            this.curAudioUrl = '';
+          }
+        });
+      });
+    },
+    audioEnd() {
+      if (!this.lastAudioItem) return;
+      this.$set(this.lastAudioItem.content, 'isPlay', false);
+    },
+    getRecallText(item, flag = false) {
+      return getRecallText(this, item, flag);
+    }
+  },
+  directives: {
+    InfiniteScroll
+  },
+  components: {
+    AModal: Modal,
+    [Layout.Content.name]: Layout.Content,
+    [Spin.name]: Spin,
+    [Icon.name]: Icon,
+    [Popconfirm.name]: Popconfirm,
+    [Radio.Button.name]: Radio.Button,
+    [Radio.Group.name]: Radio.Group,
+    [Carousel.name]: Carousel,
+    SvgIcon,
+    MsgPrescription,
+    ReadStatus,
+    ReadRecord,
+    MsgPicture,
+    MsgDescribe,
+    chatHeader
+  },
+  watch: {
+    msgList() {
+      this.observeMsg();
+    },
+    isAppendMsg: {
+      immediate: true,
+      handler(isAppendMsg) {
+        if (isAppendMsg) {
+          let newArr = [];
+          if (vexutils.isPlainObject(this.message)) {
+            newArr = [...this.msgList, this.message];
+          } else if (vexutils.isArray(this.message)) {
+            newArr = [...this.msgList, ...this.message];
+          }
+          this.setMsgList(newArr);
+          this.setIsAppendMsg(false);
+          this.setScrollTo('bottom');
+        }
+      }
+    },
+    scrollTo: {
+      immediate: true,
+      handler(scrollTo) {
+        if (scrollTo) {
+          this.handleScrollTo(scrollTo);
+        }
+      }
+    },
+    activatedTime: {
+      immediate: true,
+      handler(value) {
+        this.handleScrollTo(this._scrollTop);
+      }
+    },
+    /**
+     * 图片懒加载处理
+     */
+    appendList: {
+      handler() {
+        if (!this.scrollHeight) {
+          let target = this.$refs['message-wrapper'];
+          this.scrollHeight = target.scrollHeight;
+        }
+        if (this.appendList.length === this.msgList.length || this.appendList.length === 1) {
+          this.setScrollTo('bottom');
+        } else {
+          this.setScrollTo('current');
+        }
+      }
+    },
+    isRecorderVoice: {
+      immediate: true,
+      handler(val) {
+        if (!val) return;
+        this.curAudioUrl = '';
+        this.setIsRecorderVoice(false);
+        if (!this.lastAudioItem) return;
+        this.$set(this.lastAudioItem.content, 'isPlay', false);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import '../style/emoji.css';
+@import '../style/message.mixin.less';
+.message-wrapper {
+  .createMessageStyle(#ebebeb, @primary-color);
+  flex: 1;
+  height: 0;
+  // position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  .broadcast-wrap {
+    height: 30px;
+    text-align: center;
+    font-size: 14px;
+    background-color: #fffbe8;
+    /deep/ .carousel-item {
+      display: inline-flex !important;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 30px;
+      text-align: center;
+      &.has-link {
+        color: #ed6a0c;
+        cursor: pointer;
+      }
+      span {
+        display: inline-block;
+        max-width: calc(100% - 30px);
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .loading-icon {
+    position: absolute;
+    top: 0;
+    left: 50%;
+  }
+}
+/deep/ .ant-layout-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.online-message {
+  flex: 1;
+  height: 100%;
+  // height: 608px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px 22px;
+  // margin: 10px 0;
+  text-align: center;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  .message-time {
+    display: inline-block;
+    color: #666;
+    font-size: 14px;
+    border-radius: 4px;
+    padding: 4px;
+    margin: 0 auto;
+    margin-bottom: 16px;
+  }
+  > div {
+    margin-bottom: 16px;
+  }
+  .message-item {
+    display: flex;
+    /deep/ .chat-read-status-text {
+      display: none;
+    }
+    &.right.read-status {
+      padding-bottom: 24px;
+      position: relative;
+      /deep/ .chat-read-status-text {
+        display: block;
+        position: absolute;
+        right: 50px;
+        bottom: 0;
+      }
+    }
+    .right-time {
+      display: none;
+      position: absolute;
+      top: -16px;
+      left: 10px;
+      font-size: 12px;
+      color: #b0b1b1;
+      white-space: nowrap;
+    }
+
+    .content-wrap {
+      padding: 0 10px;
+      text-align: left;
+      position: relative;
+      &:hover {
+        .right-time {
+          display: block;
+        }
+      }
+
+      .robot-item {
+        text-align: left;
+        a {
+          text-decoration: underline;
+        }
+      }
+      .intention-wrap {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 8px 0 4px 0;
+        background-color: #fff;
+        border-radius: 0 0 8px 8px;
+        > div {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+          width: 60px;
+          height: 54px;
+          cursor: pointer;
+
+          &:hover {
+            color: #5585f5;
+            span {
+              color: #5585f5;
+            }
+          }
+        }
+        span {
+          margin-top: 8px;
+          max-width: 90%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          font-size: 12px;
+          color: #6a6a6a;
+        }
+      }
+      .dictionary-ul {
+        padding-top: 8px;
+        display: flex;
+        flex-wrap: wrap;
+        li {
+          padding: 4px 16px;
+          margin-right: 16px;
+          font-size: 14px;
+          color: #5585f5;
+          background: #efefef;
+          border-radius: 16px;
+          cursor: pointer;
+        }
+      }
+      .client-btn {
+        display: inline-block;
+        padding: 4px 8px;
+        margin-top: 8px;
+        color: #fff;
+        font-size: 12px;
+        border-radius: 20px;
+        background: #5585f5;
+        cursor: pointer;
+      }
+      .re-call {
+        cursor: pointer;
+        color: #5585f5;
+      }
+      .voice-bg {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        img {
+          mix-blend-mode: difference;
+          display: inline-block;
+          width: 14px;
+        }
+        .voice-text {
+          display: inline-block;
+        }
+        span {
+          margin-left: 8px;
+        }
+      }
+    }
+    .has-dictionary {
+      padding: 0;
+      text-align: left;
+      background: unset;
+    }
+    .content {
+      padding: 10px;
+      background: #ebebeb;
+      border-radius: 0px 8px 8px 8px;
+      max-width: 500px;
+      margin: 0px;
+      line-height: 20px;
+      font-size: 14px;
+      color: #000;
+      text-align: left;
+      word-break: break-word;
+      /deep/ p {
+        margin: 0;
+      }
+    }
+    .upload-image {
+      margin-left: 8px;
+    }
+    &.right {
+      flex-direction: row-reverse;
+      .right-time {
+        left: unset;
+        right: 10px;
+      }
+      .content-wrap {
+        text-align: right;
+        .robot-item {
+          text-align: right;
+        }
+        .voice-bg {
+          flex-direction: row-reverse;
+          align-self: flex-end;
+          img {
+            transform: rotateY(180deg);
+          }
+          span {
+            margin-left: 0;
+            margin-right: 8px;
+            text-align: right;
+          }
+        }
+      }
+      .content-wrap .content {
+        background-color: #e7f0ff;
+        border-radius: 8px 0px 8px 8px;
+        border: 1px solid #e7f0ff;
+        box-sizing: border-box;
+      }
+      .upload-image {
+        margin-right: 8px;
+      }
+    }
+  }
+  .bot-message {
+    display: block;
+    text-decoration: underline;
+    color: #5585f5;
+    cursor: pointer;
+  }
+  .session-end {
+    display: flex;
+    justify-content: center;
+    margin-top: 15px;
+    margin-bottom: 25px;
+    .end {
+      display: flex;
+      justify-content: center;
+      width: 30%;
+      height: 36px;
+      line-height: 36px;
+      background-color: #e8e8e8;
+      color: #939393;
+      font-size: 14px;
+      border-radius: 18px;
+    }
+  }
+  .menu-tip {
+    font-size: 20px;
+    align-self: flex-end;
+    margin-bottom: 8px;
+    background: #f6f6f6;
+    height: 25px;
+    line-height: 25px;
+    width: 30px;
+    border-radius: 4px;
+  }
+  .menu-item {
+    :hover {
+      background: red;
+    }
+  }
+  .menu-main {
+    width: 100px;
+    background-color: #101627;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 10px 0;
+    z-index: 3000;
+    cursor: pointer;
+    .menu-item {
+      padding: 0 10px;
+    }
+    .menu-item:hover {
+      background-color: #efefef;
+      color: #000;
+    }
+  }
+  .first-name {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background: #5585f5;
+    color: #fff;
+    border-radius: 100%;
+    font-size: 15px;
+  }
+  .msg-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+
+    object-fit: cover;
+    background: #fff;
+  }
+  /deep/ .ant-spin-spinning {
+    display: flex;
+    align-items: center;
+  }
+  .system-msg {
+    margin: 10px 0;
+    text-align: left;
+    line-height: 20px;
+    word-wrap: break-word;
+    display: flex;
+    justify-content: center;
+    .system-icon {
+      font-size: 18px;
+      color: #ffc200;
+      vertical-align: middle;
+      margin-right: 10px;
+      margin-top: 1px;
+    }
+    .system-btn {
+      color: @primary-color;
+      margin-left: 8px;
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+}
+/deep/ p {
+  margin-bottom: 0;
+}
+</style>