cnhis-design-vue 2.1.18 → 2.1.19

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

@@ -1,1598 +1,1598 @@
-<template>
-  <a-layout-footer style="position: relative;cursor:pointer" v-show="!queueItem || !hideQueueBtns">
-    <div class="message-operate">
-      <a-upload
-        v-if="isShow('PICTURE')"
-        class="operate-icon"
-        v-decorator="[
-          'upload',
-          {
-            valuePropName: 'fileList'
-          }
-        ]"
-        :beforeUpload="beforeUpload"
-      >
-        <a-tooltip placement="top">
-          <template slot="title">{{ i18nText('1.9.181') }}</template>
-          <svg-icon icon-class="liaotiantupian1" class="toolbar"></svg-icon>
-        </a-tooltip>
-      </a-upload>
-      <a-popover :title="i18nText('1.9.354')" trigger="click" v-model="visible">
-        <a slot="content">
-          <div class="emoji-wrapper">
-            <p v-for="(item, index) in emojiList" :key="index" @click="() => handleEmojiClick(item)" :class="['twa', 'emoji', item]"></p>
-          </div>
-        </a>
-
-        <a-tooltip placement="top">
-          <template slot="title">{{ i18nText('1.9.354') }}</template>
-          <svg-icon icon-class="liaotianbiaoqing1" @click="showEmoji" class="toolbar" v-if="isShow('SMILINEFACE')"></svg-icon>
-        </a-tooltip>
-      </a-popover>
-      <template v-for="(item, index) in toolbar">
-        <a-tooltip placement="top" :key="index">
-          <template slot="title">{{ item.name }}</template>
-          <svg-icon :icon-class="item.icon" class="toolbar" :class="{ 'closed-toolbar': closedSession }" @click="handleToolBarClick(item)"></svg-icon>
-        </a-tooltip>
-      </template>
-      <!-- 快捷回复 -->
-      <a-tooltip placement="top" :title="'快捷回复'">
-        <a-popover trigger="click" overlayClassName="quick-reply" placement="topLeft" v-model="quickShow">
-          <template slot="content">
-            <quick-reply :quickShow.sync="quickShow" :quickData="quickData"></quick-reply>
-          </template>
-          <svg-icon icon-class="liaotiankuaijiehuifu1" class="toolbar" @click="openQuickData" v-if="isShow('FASTREPLY') && isServer"></svg-icon>
-        </a-popover>
-      </a-tooltip>
-      <a-tooltip :title="'语音通话'">
-        <svg-icon icon-class="liaotianyuyindianhua" @click="handleVideoClick('voice')" class="toolbar" v-if="isShow('VOICE_CALL')"></svg-icon>
-        <!-- <img
-          width="20"
-          src="../img/multi-voice.png"
-          @click="handleVideoClick('voice')"
-          v-if="isShow('VOICE_CALL') && isServer"
-        /> -->
-      </a-tooltip>
-      <a-tooltip :title="'发送语音'">
-        <svg-icon icon-class="liaotianyuyin1" @click="handleVoice(true)" class="toolbar" :class="{ 'click-voice': showVoice }" v-if="isShow('VOICE')"></svg-icon>
-        <!-- <img
-          width="20"
-          src="../img/multi-video.png"
-          @click="handleVideoClick('video')"
-          v-if="isShow('VIDEO') && isServer"
-        /> -->
-      </a-tooltip>
-      <a-tooltip :title="'视频通话'">
-        <svg-icon icon-class="liaotianshipin1" @click="handleVideoClick('video')" class="toolbar" v-if="isShow('VIDEO')"></svg-icon>
-        <!-- <img
-          width="20"
-          src="../img/multi-video.png"
-          @click="handleVideoClick('video')"
-          v-if="isShow('VIDEO') && isServer"
-        /> -->
-      </a-tooltip>
-    </div>
-    <div class="message" style="text-align: left">
-      <div class="content-edit">
-        <div
-          ref="contentEdit"
-          @click="saveRange"
-          @keyup.exact="saveRange"
-          @change="changeData"
-          @input="handleInput"
-          @compositionstart="() => (this.ping = true)"
-          @compositionend="() => (this.ping = false)"
-          @keydown="handleKeyDown"
-          @paste="handlePaste"
-          contenteditable="true"
-        ></div>
-      </div>
-      <span class="prompt">Enter {{ i18nText('1.2.1.11.6') }}, Ctrl + Enter {{ i18nText('1.9.356') }}</span>
-      <a-button :disabled="sendDisabled" class="message-send" @click="handleMsgSend">{{ i18nText('1.2.1.11.6') }}</a-button>
-    </div>
-    <div id="canvas-wrapper" style="display: none">
-      <canvas id="canvas"></canvas>
-    </div>
-    <template v-if="showOverlay">
-      <div class="overlay" v-if="(!onChating || sessionEnd) && !queueItem"></div>
-    </template>
-    <div class="queue-page" v-if="queueItem">
-      <div v-if="accessDesc" class="queue-tips">{{ accessDesc }}</div>
-      <div class="queue-btns">
-        <div v-if="enableTransfer" class="toSession" @click="handleOpenTransfer">
-          {{ i18nText('1.10.201') }}
-        </div>
-        <div class="toSession primary" @click="handleAccess">
-          {{ accessText || i18nText('1.9.352') }}
-        </div>
-        <div v-if="enableRefuse" class="toSession danger" @click="openRefuseReason">
-          {{ i18nText('1.9.353') }}
-        </div>
-      </div>
-    </div>
-    <!-- 操作栏弹窗 -->
-    <a-modal
-      :wrapClassName="isFullScreen ? 'chat-footer-modal-big' : 'chat-footer-modal-small'"
-      :title="modalData.name"
-      :visible="modalShow"
-      :maskClosable="false"
-      :mask="true"
-      :width="isFullScreen ? '100%' : '80%'"
-      destroyOnClose
-      :okText="i18nText('1.2.1.11.6')"
-      :footer="null"
-      @cancel="
-        () => {
-          this.modalShow = false;
-        }
-      "
-      @ok="handleOk"
-    >
-      <iframe id="toolbarIframe" v-if="modalData.targetType === 'LINK_ADDRESS'" width="100%" height="100%" frameborder="0" :src="modalData.address" allow="camera;midi"></iframe>
-    </a-modal>
-    <!-- 接入拦截 -->
-    <a-modal
-      :title="accessInterceptTitle"
-      :visible="accessIntercept"
-      :maskClosable="false"
-      :mask="true"
-      :footer="null"
-      destroyOnClose
-      :width="600"
-      :bodyStyle="{ height: '280px' }"
-      @cancel="
-        () => {
-          this.accessIntercept = false;
-        }
-      "
-    >
-      <iframe width="100%" height="100%" frameborder="0" :src="accessInterceptUrl"></iframe>
-    </a-modal>
-    <!-- 语音消息 -->
-    <voice v-if="showVoice" :showVoice="showVoice" @closeVoice="handleVoice"></voice>
-    <ModalUserTransfer v-if="enableTransfer" :title="i18nText('1.10.201')" :visible.sync="transferVisible" :assemblyId="assemblyId" @ok="handleTransfer" />
-    <ModalRefuseReason v-if="refuseVisible" :visible.sync="refuseVisible" :reasonList="refuseReasonList" @ok="handleRefuse" />
-  </a-layout-footer>
-</template>
-
-<script>
-import { Layout, Tooltip, Upload, Modal, Popover, Button } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import ImageCompress from '../utils/compressImage';
-import { parseParams } from '../utils/panelsetting';
-
-import { mapState, mapGetters, mapMutations, mapActions } from '../store/helper';
-import fetch, { qs } from '@/utils/chatFetch';
-import QuickReply from './quickReply';
-import voice from './voice';
-import ModalUserTransfer from '../components/modal-user-transfer';
-import ModalRefuseReason from '../components/modal-refuse-reason';
-import vexutils from '@/utils/vexutils';
-export default {
-  inject: ['store', 'i18nText', 'dispatchEvent', 'registerEvent', 'unregisterEvent'],
-  components: {
-    AModal: Modal,
-    [Layout.Footer.name]: Layout.Footer,
-    [Tooltip.name]: Tooltip,
-    [Upload.name]: Upload,
-    [Button.name]: Button,
-    [Popover.name]: Popover,
-    SvgIcon,
-    ModalRefuseReason,
-    ModalUserTransfer,
-    QuickReply,
-    voice
-  },
-  props: {
-    // 隐藏排队状态底部信息
-    hideQueueBtns: {
-      type: Boolean,
-      default: false
-    },
-    validTalkingEnv: {
-      type: Function
-    },
-    curChatType: {
-      type: String
-    },
-    clientFinish: {
-      type: Boolean,
-      default: true
-    },
-    addvisible: {
-      type: Boolean,
-      default: false
-    },
-    isShowVoice: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      // message: "",
-      visible: false,
-      modalShow: false,
-      modalData: {},
-      ping: false,
-      templateId: null, // 卡片模板
-      isFullScreen: false,
-      emojiList: require('../utils/emoji.json'),
-      quickData: [],
-      quickShow: false,
-      screenshot: false,
-      screenshotFile: null,
-      timer: null,
-      accessIntercept: false,
-      curToolbarItem: {},
-      showVoice: false,
-      transferVisible: false,
-      refuseVisible: false,
-
-      apiResult: {}, // 前置条件的返回值
-    };
-  },
-  computed: {
-    ...mapGetters([
-      'userInfo',
-      'assemblyId',
-      'sessionId',
-      'serviceId',
-      'onChating',
-      'roomId',
-      'isServer',
-      'assemblySetting',
-      'chatType',
-      'sessionEnd',
-      'closedSession',
-      'clientParams',
-      'footerMessage',
-      'queueItem',
-      'sessionType',
-      'groupMembers',
-      'curScrollItem'
-    ]),
-    ...mapState({
-      classify: state => state.lastClassify || state.classify
-    }),
-    message() {
-      return this.footerMessage;
-    },
-    sendDisabled() {
-      return this.message.length === 0;
-    },
-    orgId() {
-      return this.userInfo?.sysParams?.orgId;
-    },
-    userId() {
-      return this.userInfo?.sysParams?.userId;
-    },
-    toolbar() {
-      if (!this.isServer) return [];
-      let toolbar = this.assemblySetting.toolbar || [];
-      toolbar = toolbar.filter(item => {
-        const { source, isChecked, isCloseChecked, isClosedAble } = item;
-        if (source === 'PC' && (
-            (!this.closedSession && isChecked === 'Y') ||
-            (this.closedSession && isCloseChecked === 'Y' && isChecked === 'Y' && isClosedAble === 'Y')
-          )
-        ){
-          const showCondition = item.showCondition || [];
-          const i = showCondition.findIndex(({ p_name, p_value }) => {
-            const params = this.clientParams;
-            const value = params[p_name];
-            if (p_value.startsWith('form.')) {
-              return value !== p_name[p_value.slice(5)];
-            }
-            return value !== p_value;
-          });
-          return i < 0;
-        }
-        return false;
-      });
-      return toolbar;
-    },
-    isListClassify() {
-      return this.assemblySetting.isListClassify === 'Y';
-    },
-    showOverlay() {
-      return this.curChatType != 'robot' || this.clientFinish;
-    },
-    accessText() {
-      let obj = this.assemblySetting.serverSetting.serverInfo.filter(item => item.key === 'ongoingButton')[0];
-      return obj?.value;
-    },
-    accessDesc() {
-      let obj = this.assemblySetting.serverSetting.serverInfo.filter(item => item.key === 'ongoingDescription')[0];
-      return obj?.value;
-    },
-    accessInterceptObj() {
-      let obj = this.assemblySetting.accessInterceptSetting?.filter(item => item.source === 'PC');
-      if (obj && obj[0]) {
-        return obj[0];
-      }
-      return undefined;
-    },
-    // 拦截url
-    accessInterceptUrl() {
-      const { accessInterceptObj: obj, apiResult } = this;
-      if (obj) {
-        return this.getLinkAddress(obj,{result:apiResult});
-      }
-      return '';
-    },
-    // 拦截title
-    accessInterceptTitle() {
-      const { accessInterceptObj: obj } = this;
-      if (obj) {
-        let res = obj.titleI18n ? this.i18nText(obj.titleI18n) : obj.title;
-        return res || '接入拦截';
-      }
-      return '接入拦截';
-    },
-    // 是否开启 排队转接
-    enableTransfer() {
-      if (this.assemblySetting.type === 'single') {
-        let setting = null;
-        if (this.isListClassify) {
-          const classify = this.classify;
-          const { listClassify = [] } = this.assemblySetting;
-          const target = listClassify.find(item => item.classify === classify);
-          setting = target ? target.serverFunctionSetting : null;
-        } else {
-          setting = this.assemblySetting?.serverSetting?.functionSetting;
-        }
-        if (setting) {
-          const v = setting.find(item => item.function === 'TRANSFER_BEFORE');
-          return v ? v.isChecked == 'Y' : false;
-        }
-      }
-      return false;
-    },
-    enableRefuse() {
-      let setting = null;
-      if (this.isListClassify) {
-        const classify = this.classify;
-        const { listClassify = [] } = this.assemblySetting;
-        const target = listClassify.find(item => item.classify === classify);
-        setting = target ? target.serverFunctionSetting : null;
-      } else {
-        setting = this.assemblySetting?.serverSetting?.functionSetting;
-      }
-      if (setting) {
-        const v = setting.find(item => item.function === 'ACCESS_REFUSE');
-        return v ? v.isChecked == 'Y' : false;
-      }
-      return false;
-    },
-    refuseReasonList() {
-      const list = this.assemblySetting?.refuseReasonSetting?.list || [];
-      return list.filter(v => !!v.text);
-    }
-  },
-
-  mounted() {
-    this.bindEvents();
-  },
-  methods: {
-    ...mapMutations([
-      'setLastClassify',
-      'setSessionTimer',
-      'setScrollQueueId',
-      'setCurScrollItem',
-      'setIsAppendMsg',
-      'setMessage',
-      'setShowVideo',
-      'setCaller',
-      'setMedicalOrPrescription',
-      'setModalVisible',
-      'setFooterMessage',
-      'setQueueItem',
-      'setSessionId',
-      'setCurrentTab',
-      'setClientId',
-      'setOnChating',
-      'setClientParams',
-      'setSessionHistoryList',
-      'setSessionEnd',
-      'setQuestionId',
-      'setDictionaryKey',
-      'setMultiVideoShow',
-      'setVideoStatus',
-      'setVideoMode',
-      'setAddMemberType',
-      'setShowAudio',
-      'setVideoMembers',
-      'setLastCurrentTab',
-      'setIsRecorderVoice',
-      'setVideoData',
-      'setSessionType'
-    ]),
-    ...mapMutations({
-      clearMsgList: 'setMsgList'
-    }),
-    ...mapActions(['sendMessage', 'sendRobotMessage', 'handleBotChat', 'setMsgList', 'setChatTimer']),
-    deleteStyle(value) {
-      // 去掉样式
-      value = value.replace(/style\s*?=\s*?(['"])[\s\S]*?\1/g, '');
-      value = value.replace(/data\s*?=\s*?(['"])[\s\S]*?\1/g, '');
-      value = value.replace(/class\s*?=\s*?(['"])[\s\S]*?\1/g, match => {
-        if (match.includes('twa')) {
-          return match;
-        } else {
-          return '';
-        }
-      });
-      value = value.replace(/face\s*?=\s*?(['"])[\s\S]*?\1/g, '');
-      value = value.replace(/<a/g, '<span');
-      value = value.replace(/a>/g, 'span>');
-      value = value.replace(/<i/g, '<span');
-      value = value.replace(/i>/g, 'span>');
-      value = value.replace(/<u/g, '<span');
-      value = value.replace(/u>/g, 'span>');
-      value = value.replace(/<strong/g, '<span');
-      value = value.replace(/strong>/g, 'span>');
-      value = value.replace(/<h\d/g, '<span');
-      value = value.replace(/h\d>/g, 'span>');
-      value = value.replace(/<b>/g, '<span>');
-      value = value.replace(/b>/g, 'span>');
-      value = value.replace(/<font/g, '<span');
-      value = value.replace(/font>/g, 'span>');
-      return value;
-    },
-    // 更新 message值 (未用v-html，修改后需要手动设置聊天框html内容)
-    updateMessage(value) {
-      this._editValue = value;
-      this.setFooterMessage(`${value}`);
-      const editRef = this.$refs.contentEdit;
-      if (!editRef) return;
-      editRef.innerHTML = value;
-    },
-    // 根据 聊天框 html节点内容 设置 message值 （未用v-html，html内容更改需主动设置message值）
-    setMessageByHTML() {
-      const editRef = this.$refs.contentEdit;
-      if (!editRef) return;
-      const message = editRef.innerHTML;
-      this._editValue = message;
-      this.setFooterMessage(`${message}`);
-    },
-
-    showEmoji() {
-      // this.visible = true;
-    },
-
-    isShow(type) {
-      if (type === 'SMILINEFACE' && this.curChatType === 'robot') return true;
-      if (this.isListClassify) {
-        let label;
-        if (this.isServer) {
-          label = 'serverFunctionSetting';
-        } else {
-          label = 'clientFunctionSetting';
-        }
-        let classifyItem = this.assemblySetting.listClassify.filter(item => item.classify === this.classify);
-        if (!classifyItem || !classifyItem.length) return;
-        let funs = classifyItem[0][label] || [];
-        return funs.find(item => item.function === type)?.isChecked === 'Y';
-      }
-      let label;
-      if (this.isServer) {
-        label = 'serverSetting';
-      } else {
-        label = 'clientSetting';
-      }
-      let funs = this.assemblySetting[label]?.functionSetting || [];
-      return funs.find(item => item.function === type)?.isChecked === 'Y';
-    },
-
-    handleEmojiClick(item) {
-      let emojiHtml = `<p contenteditable="false" class="twa emoji ${item}"></p>&nbsp`;
-      this.insertToEdit(emojiHtml);
-    },
-    /* edit-content光标定位 */
-    resetSelection() {
-      let edit = this.$refs.contentEdit;
-      let sel, range;
-      if (window.getSelection && document.createRange) {
-        range = document.createRange();
-        range.selectNodeContents(edit);
-        range.collapse(true);
-        range.setEnd(edit, edit.childNodes.length);
-        range.setStart(edit, edit.childNodes.length);
-        sel = window.getSelection();
-        sel.removeAllRanges();
-        sel.addRange(range);
-      }
-    },
-
-    insertToEdit(value, isEditing) {
-      const { _editSel, _editRange } = this;
-      let sel, range;
-      if (window.getSelection) {
-        if (!isEditing) {
-          if (_editRange) {
-            sel = _editSel;
-            range = _editRange;
-          } else {
-            // 初始状态没有focus聊天框，需要手动focus 获取光标位置
-            const editRef = this.$refs.contentEdit;
-            if (!editRef) return;
-            editRef.focus();
-            this.saveRange();
-            sel = this._editSel;
-            range = this._editRange;
-          }
-        } else {
-          sel = window.getSelection();
-          range = sel.getRangeAt(0);
-        }
-        range.deleteContents();
-        let frag;
-        if (range.createContextualFragment) {
-          frag = range.createContextualFragment(value);
-        } else {
-          const el = document.createElement('div');
-          el.innerHTML = value;
-          frag = document.createDocumentFragment();
-          let node, lastNode;
-          while ((node = el.firstChild)) {
-            lastNode = frag.appendChild(node); // 之所以能终止循环，是因为el的child一旦添加到dom后，作为fragment里的的child就没了。那么el.firstChild就会返回null
-          }
-        }
-        const lastNode = frag.lastChild;
-        range.insertNode(frag);
-        // 把光标挪到插入的元素后面
-        range.setStartAfter(lastNode);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      } else {
-        range = isEditing || !_editRange ? document.selection.createRange() : _editRange;
-        range.pasteHTML(value);
-        range.select();
-      }
-      this.setMessageByHTML();
-    },
-    saveRange() {
-      if (window.getSelection) {
-        this._editSel = window.getSelection();
-        this._editRange = this._editSel.getRangeAt(0);
-      } else {
-        this._editRange = document.selection.createRange();
-      }
-    },
-    handleInput(e) {
-      if (e.inputType === 'deleteContentBackward') {
-        this.screenshot = false;
-        this.screenshotFile = null;
-      }
-      setTimeout(() => {
-        if (this.ping || this.pasteTimer) return;
-        this.setMessageByHTML();
-      }, 0);
-    },
-    changeData(e) {
-      let message = e.srcElement.innerHTML;
-      if (e.inputType === 'deleteContentBackward') {
-        let div = document.createElement('div');
-        div.innerHTML = e.srcElement.innerHTML;
-        if (div.lastChild?.className?.startsWith('twa emoji')) {
-          div.removeChild(div.lastChild);
-          message = div.innerHTML;
-        }
-        this.screenshot = false;
-        this.screenshotFile = null;
-      }
-
-      setTimeout(() => {
-        if (this.ping) return;
-        this.setFooterMessage(`${message}`);
-        this.$nextTick().then(() => {
-          this.resetSelection();
-          this.ping = false;
-        });
-      }, 0);
-    },
-
-    beforeUpload(data) {
-      let { type } = data;
-      if (!type.startsWith('image/')) {
-        this.$message.warning(`${this.i18nText('1.9.357')}!`);
-        return;
-      }
-      let that = this;
-      this.$confirm({
-        title: this.i18nText('1.9.331'),
-        content: `${this.i18nText('1.9.358')}?`,
-        okText: '确定',
-        cancelText: '取消',
-        onOk() {
-          return that.uploadImg(data);
-        },
-        onCancel() {
-          return false;
-        }
-      });
-    },
-
-    /* 压缩上传 */
-    uploadImg(file) {
-      const hide = this.$message.loading(`${this.i18nText('1.9.199')}...`, 0);
-      new ImageCompress(file, 'canvas', fetch, {
-        url: '/hospitalUpload/picture'
-      })
-        .execute()
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.doMsgSend(1, data.map.url);
-            hide();
-          } else {
-            hide();
-            this.$message.info(data.msg || `${this.i18nText('1.9.174')}!`);
-          }
-        })
-        .catch(() => {
-          hide();
-          this.$message.info(`${this.i18nText('1.9.174')}!`);
-        })
-        .finally(() => {
-          this.screenshotFile = null;
-          this.screenshot = false;
-          this.updateMessage('');
-        });
-    },
-
-    /* 发送消息 */
-    doMsgSend(type, content) {
-      let body = {
-        content: type === 0 ? `<div>${content}</div>` : content,
-        type: type
-      };
-      if (this.curChatType === 'robot') {
-        // this.setQuestionId("");
-        // this.setDictionaryKey("");
-        this.sendRobotMessage(content);
-      } else {
-        this.sendMessage(body);
-      }
-    },
-    handleMsgSend() {
-      // 截图上传
-      if (this.screenshot) {
-        this.uploadImg(this.screenshotFile);
-        return;
-      }
-      if (this.chatType === 'bot') {
-        this.handleBotChat(this.message).then(isHuman => {
-          if (isHuman) {
-            this.$parent.$parent.$parent.initWebSocket();
-          }
-          this.updateMessage('');
-        });
-        return;
-      }
-
-      const editRef = this.$refs.contentEdit;
-      if (editRef) {
-        const message = editRef.innerText;
-        if (message.length > 2000) {
-          this.$message.warning('请控制在2000字以内!');
-          return;
-        }
-      }
-      // let reg = /(.*?)(<div><br><\/div>)*?$/;
-      let reg = /(.*?)(<div>(<span>)?<br>(<\/span>)?<\/div>)*?$/;
-      let message = this.message.match(reg);
-      if (message[2]) {
-        this.updateMessage(message[1]);
-      }
-      this.updateMessage(this.message.replace(/style/g, 'data'));
-      if (this.message.trim()) {
-        this.doMsgSend(0, this.message);
-      } else {
-        return this.$message.warning(this.i18nText('1.9.359'));
-      }
-      this.updateMessage('');
-    },
-    handleKeyDown(e) {
-      // 判断enter 发送还是换行
-      if (e.keyCode === 13) {
-        e.preventDefault();
-        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
-          this.handleWrap();
-        } else {
-          this.handleMsgSend();
-        }
-      }
-    },
-    handleWrap() {
-      let ctn = `<br>`;
-      // 非ie环境 元素后面没有node的时候换行需要两个<br>
-      if (!/msie/.test(navigator.userAgent) && window.getSelection) {
-        const focusNode = window.getSelection().focusNode;
-        let nextSibling = focusNode.nextSibling;
-        if (focusNode === this.$refs.contentEdit) {
-          nextSibling = focusNode.childNodes[0];
-        }
-        do {
-          if (!nextSibling || nextSibling.nodeValue || nextSibling.tagName == 'BR') break;
-        } while ((nextSibling = nextSibling.nextSibling));
-        if (!nextSibling) {
-          ctn += ctn;
-        }
-      }
-      this.insertToEdit(ctn);
-      this.$nextTick().then(() => {
-        this.ping = false;
-      });
-    },
-    handleVideoClick(type) {
-      // this.curScrollItem.type 2多人 1单人
-      if (this.sessionType === 2) {
-        this.$emit('update:addvisible', true);
-        this.setAddMemberType(2);
-        this.setVideoMode(type === 'voice' ? 1 : 2);
-      } else {
-        const openTalking = sip => {
-          this.setShowAudio(true);
-          this.setVideoMode(type === 'voice' ? 1 : 2);
-          this.$nextTick(() => {
-            this.setVideoMembers([]);
-          });
-          this.setVideoData({
-            callerSipKey: sip?.username,
-            callerSipName: sip?.name
-          });
-        };
-        if (this.validTalkingEnv) {
-          this.validTalkingEnv().then(res => {
-            if (res.status) {
-              openTalking(res.sip);
-            }
-          });
-        } else {
-          openTalking();
-        }
-      }
-      // this.groupMembers.length > 2
-      return;
-    },
-    handleVoice(val) {
-      val && this.setIsRecorderVoice(true);
-      this.showVoice = val;
-    },
-    showPrescription() {
-      this.setModalVisible(true);
-      this.setMedicalOrPrescription('prescription');
-    },
-    showMedicalRecord() {
-      this.setModalVisible(true);
-      this.setMedicalOrPrescription('medical');
-    },
-    beofreToolBarClick(item) {
-      // 操作栏前置条件
-      return new Promise((resolve, reject) => {
-        const { precondition } = item;
-        if (precondition) {
-          this.requestPreCondition(precondition)
-            .then(res => {
-              const result = res.data.result === 'SUCCESS';
-              !result && this.$message.error(res.data.resultMsg || this.i18nText('1.9.22'));
-              resolve(result);
-            })
-            .catch(error => {
-              this.$message.error(error.resultMsg || this.i18nText('1.9.22'));
-              resolve(false);
-            });
-        } else {
-          resolve(true);
-        }
-      });
-    },
-    async handleToolBarClick(item) {
-      const validate = await this.beofreToolBarClick(item);
-      if (!validate) return;
-      let { openMode, name, templateId, isFullScreen } = item;
-      this.dispatchEvent('click_toolbar', { ...item });
-      if (!item.address) return;
-      this.curToolbarItem = item;
-      this.templateId = templateId;
-      this.isFullScreen = isFullScreen === 'Y';
-      let address = this.getLinkAddress(item);
-      if (openMode === 'WINDOW') {
-        window.open(address, name);
-        return;
-      }
-      if (openMode === 'EJECT') {
-        this.modalShow = true;
-        this.modalData = Object.assign({}, item, { address });
-        this.$nextTick().then(() => {
-          window.addEventListener('message', this.iframeEvent);
-        });
-        return;
-      }
-    },
-    iframeEvent(event) {
-      const method = event?.data?.method;
-      this[method]?.(event);
-    },
-    // 发送
-    handleParentMessageSend({ data, source, origin }) {
-      let params = {
-        assemblyId: this.assemblyId,
-        sessionId: this.sessionId,
-        orgId: this.orgId
-      };
-      params = Object.assign(params, data.data);
-      let { actionType } = this.curToolbarItem;
-      actionType && Object.assign(params, { actionType });
-      return fetch.post('/chat/access/sendToolBarData', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          source.postMessage({ status: 0, resultMsg: data.resultMsg }, origin);
-        } else {
-          source.postMessage({ status: 1, resultMsg: data.resultMsg }, origin);
-        }
-      });
-    },
-    // 关闭
-    handleClose() {
-      this.modalShow = false;
-      window.removeEventListener('message', this.iframeEvent);
-    },
-    getLinkAddress(item,paramsData= {}) {
-      let t = {talbe:{},form:{},sys:{}};
-      Object.assign(t,paramsData ||{})
-      let { address = '', params = [] } = item;
-      let urlParams = [];
-      params.forEach(({ p_name, p_value }) => {
-        let value;
-        if (p_value.startsWith('form.')) {
-          value = this.clientParams[p_value.slice(5)];
-        } else if( /\${result.(.*?)\}/g.test(p_value)) {
-          value = vexutils.handleSysParams(p_value,t)
-        } else {
-          value = p_value;
-        }
-        urlParams.push(`${p_name}=${value}`);
-      });
-      if(/\${result.(.*?)\}/g.test(address)){
-        address = vexutils.handleSysParams(address,t)
-      }
-      let { actionType } = this.curToolbarItem;
-      actionType && urlParams.push(`actionType=${actionType}`);
-      if (address.includes('?')) {
-        address += `&${urlParams.join('&')}`;
-      } else {
-        address += `?${urlParams.join('&')}`;
-      }
-      return address;
-    },
-    handleOk() {
-      window.handleParentMessageSend();
-    },
-    // 剪切板粘贴
-    handlePaste(e) {
-      const cbd = e.clipboardData;
-      const ua = window.navigator.userAgent;
-      // 如果是 Safari 直接 return
-      if (!(e.clipboardData && e.clipboardData.items)) {
-        this.handlePasteText(e);
-        return;
-      }
-      if (
-        cbd.items &&
-        cbd.items.length === 2 &&
-        cbd.items[0].kind === 'string' &&
-        cbd.items[1].kind === 'file' &&
-        cbd.types &&
-        cbd.types.length === 2 &&
-        cbd.types[0] === 'text/plain' &&
-        cbd.types[1] === 'Files' &&
-        ua.match(/Macintosh/i) &&
-        Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49
-      ) {
-        this.handlePasteText(e);
-        return;
-      }
-      const hasFile = this.handleImgPaste(cbd.items);
-      if (hasFile) {
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
-      this.handlePasteText(e);
-    },
-    handleImgPaste(files) {
-      let hasFile = false;
-      for (let i = 0; i < files.length; i++) {
-        let item = files[i];
-        if (item.kind == 'file') {
-          hasFile = true;
-          // blob 就是从剪切板获得的文件，可以进行上传或其他操作
-          const blob = item.getAsFile();
-          if (blob.size === 0) {
-            return;
-          }
-          const reader = new FileReader();
-          const imgs = new Image();
-          imgs.file = blob;
-          reader.onload = e => {
-            imgs.src = e.target.result;
-            imgs.width = '150';
-            this.updateMessage(this.htmlToString(imgs));
-            this.$nextTick().then(() => {
-              this.resetSelection();
-              this.screenshot = true;
-              this.screenshotFile = blob;
-            });
-          };
-          reader.readAsDataURL(blob);
-        }
-      }
-      return hasFile;
-    },
-    // 处理文本粘贴
-    handlePasteText() {
-      if (this.pasteTimer) clearTimeout(this.pasteTimer);
-      const ele = this.$refs.contentEdit;
-      if (!ele) return;
-      let before = ele.innerHTML;
-      this.pasteTimer = setTimeout(() => {
-        function getPasteHtml(before, after) {
-          // 计算粘贴后html不同的位置起点和终点（插入"abc"，则得出sPos为0，ePos为2）
-          var sPos = -1,
-            ePos = -1;
-          for (var i = 0, len = after.length; i < len; ++i) {
-            if (sPos == -1 && before.substr(i, 1) != after.substr(i, 1)) sPos = i;
-            if (ePos == -1 && before.substr(before.length - i - 1, 1) != after.substr(after.length - i - 1, 1)) ePos = i;
-
-            if ((sPos != -1 && ePos != -1) || len - 1 - ePos <= sPos) break;
-          }
-          if (sPos == -1 || ePos == -1) return;
-          ePos = len - 1 - ePos;
-
-          if (ePos <= sPos) {
-            // 遇到像ab，粘贴ab后变成abab这种了，这是需要从sPos开始往后找，找到和before一样的为止
-            i = sPos;
-            var beforeSPosNext = before.substr(i + 1, 10); // 取后10个来对比，如果没有10个，则取最多
-            while (++i < len) {
-              if (beforeSPosNext == after.substr(i, beforeSPosNext.length)) {
-                ePos = i;
-                break;
-              }
-            }
-            i == len && (ePos = len - 1);
-          }
-          // 如果有<和>，则需要计算在内
-          if (after.substr(sPos - 1, 1) == '<') --sPos;
-          if (after.substr(ePos + 1, 1) == '>') ++ePos;
-
-          // 分段获得文本，前半段 插入段 后半段
-          var pastedText = after.substring(sPos, ePos + 1),
-            formerText = after.substr(0, sPos),
-            latterText = after.substr(sPos + pastedText.length);
-
-          // 判断formerText和pastedText是否闭合了
-          var lastLT = formerText.lastIndexOf('<'),
-            lastGT = formerText.lastIndexOf('>');
-          if (lastGT < lastLT) {
-            // 标签断了xxxxx<
-            pastedText = formerText.slice(lastLT) + pastedText;
-            formerText = formerText.slice(0, lastLT);
-          }
-
-          lastLT = pastedText.lastIndexOf('<');
-          lastGT = pastedText.lastIndexOf('>');
-          if (lastGT < lastLT) {
-            // 标签断了<xxxxxx
-            var _insertGT = latterText.indexOf('>') + 1;
-            pastedText += latterText.slice(0, _insertGT);
-            latterText = latterText.slice(_insertGT);
-          }
-          return [formerText, pastedText, latterText];
-        }
-        var after = ele.innerHTML;
-        const data = getPasteHtml(before, after);
-        if (data) {
-          let [formerText, insertText, latterText] = data;
-          insertText = this.deleteStyle(insertText);
-          ele.innerHTML = formerText + insertText + "<span class='pasteCaretPosHelper'></span>" + latterText; // 插入pasteCaretPosHelper以帮助定位光标位置
-          var pasteCaretPosHelper = ele.querySelector('.pasteCaretPosHelper'),
-            range,
-            selection;
-          if (pasteCaretPosHelper) {
-            if (document.createRange) {
-              // Chrome, IE 9+
-              range = document.createRange();
-              range.setStartAfter(pasteCaretPosHelper);
-              range.collapse(false);
-              selection = window.getSelection();
-              selection.removeAllRanges();
-              selection.addRange(range);
-            } else if (document.selection) {
-              // IE 8 and lower
-              range = document.body.createTextRange();
-              range.moveToElementText(pasteCaretPosHelper);
-              range.collapse(false);
-              range.select();
-            }
-            pasteCaretPosHelper.parentNode.removeChild(pasteCaretPosHelper);
-          }
-        }
-        this.setMessageByHTML();
-        this.saveRange();
-        this.pasteTimer = null;
-      }, 50);
-    },
-    // 拖拽上传图片
-    handleFiles(files) {
-      this.handleImgPaste(files);
-    },
-    htmlToString(dom) {
-      let div = document.createElement('div');
-      div.appendChild(dom);
-      return div.innerHTML;
-    },
-    /**
-     * 接入拦截
-     */
-    handleAccessIntercept(result) {
-      let { data } = result;
-      let { status, data: param } = data;
-      if (status === 1) {
-        this.accessChat(param).finally(() => {
-          this.accessIntercept = false;
-        });
-      } else {
-        this.accessIntercept = false;
-      }
-    },
-    /* 客服点击接入按钮进入会话 */
-    async handleAccess() {
-      this.apiResult = {};
-      let accessInterceptValidate = this.handleAccessInterceptValue();
-      let data = null; // 接口参数
-      if (accessInterceptValidate && this.accessInterceptUrl) {
-        const r = await this.beforeAccessIntercept();
-        if (!r) return;
-        if (r.value == 'Y') {
-          this.accessIntercept = true;
-          this.$nextTick().then(() => {
-            window.addEventListener('message', this.handleAccessIntercept);
-          });
-          return;
-        } else {
-          data = r.data; // 获取接入拦截返回参数
-        }
-      }
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        this.accessChat(data);
-      }, 300);
-    },
-    // 条件转换请求
-    requestPreCondition(precondition) {
-      const { targetType, targetName, targetId, params } = precondition;
-      const data = parseParams(params, this.clientParams);
-      let url = '';
-      if (targetType === 'API') {
-        data.url = targetName;
-        url = `/api/executeApi`;
-      } else {
-        data.sqlEnterId = targetId;
-        url = `/form/saveSqlEnter`;
-      }
-      return fetch.post(url, qs.stringify(data));
-    },
-    async beforeAccessIntercept() {
-      function parseResult(r) {
-        let value = 'Y';
-        const data = r.split('&').reduce((obj, str) => {
-          const [k, v] = str.split('=');
-          if (k) {
-            if (k == 'value') {
-              value = v || value;
-            } else {
-              obj = obj || {};
-              obj[k] = v || '';
-            }
-          }
-          return obj;
-        }, null);
-        return {
-          value,
-          data
-        };
-      }
-      this.apiResult = {};
-      const accessInterceptSetting = this.assemblySetting.accessInterceptSetting || [];
-      const setting = accessInterceptSetting.find(item => item.source == 'PC' && item.isChecked == 'Y' && item.precondition);
-      if (setting) {
-        const precondition = setting.precondition;
-        try {
-          let res = await this.requestPreCondition(precondition);
-          this.apiResult = res?.data?.map || {};
-          if (res.data.result === 'SUCCESS') {
-            let value = res.data.map?.result;
-            value = value ? JSON.parse(value) : {};
-            return value.value ? parseResult(value.value) : false;
-          } else {
-            this.$message.error(res.data.resultMsg || this.i18nText('1.9.22'));
-            return false;
-          }
-        } catch (error) {
-          this.$message.error(error.resultMsg || this.i18nText('1.9.22'));
-          return false;
-        }
-      }
-      return {
-        value: 'Y',
-        data: null
-      };
-    },
-    handleAccessInterceptValue() {
-      let { listClassify = [], isListClassify, serverSetting = {} } = this.assemblySetting;
-      let list = [];
-      if (isListClassify != 'Y') {
-        let { functionSetting = [] } = serverSetting;
-        list = functionSetting;
-      } else {
-        let curList = listClassify.find(item => item.classify == this.classify);
-        if (!curList) return false;
-        list = curList.serverFunctionSetting || [];
-      }
-      if (!list.length) return true;
-      let curItem = list.find(item => item.function == 'ACCESS_INTERCEPT');
-      if (!curItem) return true;
-      return curItem.isChecked == 'Y';
-    },
-    accessChat(data) {
-      let { bid: userId, username, userType } = this.queueItem;
-      let params = {
-        assemblyId: this.assemblyId,
-        userId,
-        userType,
-        lastSessionId: this.sessionId,
-        relateId: this.clientParams.relateId
-      };
-      if (data) {
-        params.addParams = JSON.stringify(data);
-      }
-      return fetch.post('/chat/service/accessChat', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          let { countdown, clientParams, sessionType, countdownDesc } = data.map;
-          this.setSessionId(data.map.sessionId);
-          this.clearMsgList();
-          this.setMsgList();
-          this.setCurrentTab('session');
-          this.setLastCurrentTab('session');
-          this.setClientId(username);
-          this.setOnChating(true);
-          this.setSessionEnd(false);
-          this.setQueueItem(null);
-          sessionType && this.setSessionType(sessionType);
-          if (countdown >= 0) {
-            this.setChatTimer({ countdown, countdownDesc });
-          }
-          this.setClientParams(clientParams);
-          this.getSessionHistoryList();
-          this.dispatchEvent('user_accessSuccess', {
-            map: data.map,
-            user: { ...this.curScrollItem }
-          });
-        } else {
-          this.$message.warning(data.resultMsg);
-        }
-      });
-    },
-    handleOpenTransfer() {
-      if (this.enableTransfer) {
-        this.transferVisible = true;
-      }
-    },
-    handleTransfer(data) {
-      const receiveId = data.converUserId;
-      if (receiveId) {
-        if (this.userId == receiveId) {
-          this.$message.warning(this.i18nText('1.2.7.14.1'));
-          return;
-        }
-        this.transferVisible = false;
-        fetch({
-          url: '/chat/service/transferQueue',
-          method: 'POST',
-          data: qs.stringify({
-            relateId: this.clientParams.relateId,
-            orgId: this.orgId,
-            assemblyId: this.assemblyId,
-            userId: this.curScrollItem?.bid,
-            userType: this.curScrollItem?.userType || '',
-            receiveId: receiveId,
-            deptId: data.deptId,
-            remark: data.converMark
-          })
-        })
-          .then(({ data }) => {
-            if (data.result === 'SUCCESS') {
-              this.dispatchEvent('user_transferQueueSuccess', {
-                user: { ...this.curScrollItem }
-              });
-              this.$message.success(this.i18nText('1.9.336'));
-              this.clearCurrentSession(true);
-            } else {
-              this.$message.warning(data.resultMsg || this.i18nText('1.10.201') + this.i18nText('1.9.22'));
-            }
-          })
-          .catch(err => {
-            this.$message.warning(err.resultMsg || this.i18nText('1.10.201') + this.i18nText('1.9.22'));
-          });
-      } else {
-        this.$message.warning(this.i18nText('1.9.335'));
-      }
-    },
-    getSessionHistoryList() {
-      this.setSessionHistoryList([]);
-      if (this.assemblySetting.recordScopeSetting === 'CURRENT') return;
-      fetch
-        .get('/chat/service/getPastSessionList', {
-          params: { sessionId: this.sessionId }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let list = data.list.map(item => {
-              if (item.id === this.sessionId || this.type === 'session') {
-                item.onChating = true;
-              }
-              return item;
-            });
-            this.setSessionHistoryList(list);
-          }
-        });
-    },
-    openQuickData() {
-      // this.quickShow = true;
-      if (this.quickData.length < 1) {
-        fetch
-          .get('/fastReply/getChatList', {
-            params: {
-              category: this.assemblySetting.chatPublicCategory
-            }
-          })
-          .then(({ data }) => {
-            if (data.result === 'SUCCESS') {
-              this.quickData = data.list;
-            }
-          });
-      }
-    },
-    // 清除当前会话
-    clearCurrentSession(update = false) {
-      this.clearMsgList([]);
-      this.setSessionHistoryList([]);
-      this.setSessionTimer('');
-      this.setClientId('');
-      this.setSessionId('');
-      this.setScrollQueueId('');
-      this.setLastClassify('');
-      this.setCurScrollItem(null);
-      this.setQueueItem(null);
-      this.setClientParams(null);
-      if (update) {
-        // 重新设置 currentTab 触发  scrollList 组件 更新排队列表
-        const currentTab = this.store.state?.currentTab;
-        if (currentTab === 'queue') {
-          this.setCurrentTab('');
-          this.$nextTick(() => {
-            this.setCurrentTab(this.store.state?.currentTab || currentTab);
-          });
-        }
-      }
-    },
-    openRefuseReason() {
-      if (this.enableRefuse) {
-        this.refuseVisible = true;
-      }
-    },
-    handleRefuse(remark) {
-      if (!this.enableRefuse) return;
-      fetch({
-        url: '/chat/service/accessRefuse',
-        method: 'POST',
-        data: qs.stringify({
-          relateId: this.clientParams.relateId,
-          orgId: this.orgId,
-          assemblyId: this.assemblyId,
-          userId: this.curScrollItem?.bid,
-          userType: this.curScrollItem?.userType || '',
-          remark: remark || '其他'
-        })
-      })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.dispatchEvent('user_refuseSuccess', {
-              user: { ...this.curScrollItem }
-            });
-            this.$message.success(this.i18nText('1.10.184'));
-            this.clearCurrentSession(true);
-          } else {
-            this.$message.warning(data.resultMsg || this.i18nText('1.9.353') + this.i18nText('1.9.22'));
-          }
-        })
-        .catch(err => {
-          this.$message.warning(err.resultMsg || this.i18nText('1.9.353') + this.i18nText('1.9.22'));
-        });
-      this.refuseVisible = false;
-    },
-    bindEvents() {
-      const handleDrop = e => {
-        e.stopPropagation();
-        e.preventDefault();
-        this.handleFiles(e.dataTransfer.items);
-      };
-      document.addEventListener('drop', handleDrop, false);
-      this.registerEvent('accessCurrentSession', this.handleAccess);
-      this.registerEvent('refuseCurrentSession', this.openRefuseReason);
-      this.registerEvent('transferCurrentQueueSession', this.handleOpenTransfer);
-      this.$on('hook:beforeDestroy', () => {
-        document.removeEventListener('drop', handleDrop, false);
-        window.removeEventListener('message', this.iframeEvent);
-        window.removeEventListener('message', this.handleAccessIntercept);
-        this.unregisterEvent('accessCurrentSession', this.handleAccess);
-        this.unregisterEvent('refuseCurrentSession', this.openRefuseReason);
-        this.unregisterEvent('transferCurrentQueueSession', this.handleOpenTransfer);
-      });
-    }
-  },
-  watch: {
-    accessIntercept: {
-      handler(val) {
-        if (!val) {
-          window.removeEventListener('message', this.handleAccessIntercept);
-        }
-      }
-    },
-    message: {
-      handler(v) {
-        // 使用 _editValue 判断是否组件外修改 message，并更新聊天框
-        if (this._editValue !== v) {
-          this.updateMessage(v);
-        }
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.chat-footer-modal-big {
-  padding: 10px;
-  &.ant-modal-wrap {
-    overflow: none;
-  }
-  .ant-modal {
-    width: 100%;
-    height: 100%;
-    top: 0;
-    padding-bottom: 0;
-  }
-  .ant-modal-content {
-    height: 100%;
-  }
-  .ant-modal-body {
-    height: calc(100% - 55px);
-  }
-}
-.chat-footer-modal-small {
-  &.ant-modal-wrap {
-    overflow: none;
-  }
-  .ant-modal {
-    width: 80%;
-    height: 80%;
-    padding-bottom: 0;
-    top: 60px;
-  }
-  .ant-modal-content {
-    height: 100%;
-  }
-  .ant-modal-body {
-    height: 100%;
-    padding: 0;
-  }
-}
-
-</style>
-<style lang="less" scoped>
-.message-operate {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  line-height: 18px;
-  background: #fff;
-  overflow-x: auto;
-  overflow-y: hidden;
-  border-top: 1px solid #e6e6e6;
-  &::-webkit-scrollbar {
-    height: 5px;
-  }
-  > img {
-  // > .operate-icon {
-    margin-left: 10px;
-  }
-  /deep/ .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane {
-    height: 300px !important;
-    overflow: auto !important;
-  }
-  /deep/ .ant-upload-list {
-    display: none;
-  }
-  /deep/ .ant-upload {
-    height: 32px;
-    vertical-align: middle;
-    display: inline-block;
-  }
-  .no-click {
-    pointer-events: none;
-    opacity: 0.4;
-  }
-  .svg-icon {
-    color: rgba(0, 0, 0, 0.6);
-  }
-}
-.emoji-wrapper {
-  width: 500px;
-  height: 300px;
-  overflow: auto;
-  display: grid;
-  grid-template-columns: repeat(10, 1fr);
-  .emoji {
-    display: inline-block;
-    font-size: 20px;
-    margin: 10px;
-    text-align: center;
-  }
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-}
-.message {
-  position: relative;
-  height: 150px;
-  .message-send {
-    position: absolute;
-    bottom: 8px;
-    right: 14px;
-    height: 40px;
-    border-radius: 20px;
-    width: 86px;
-    font-weight: 600;
-    font-size: 18px;
-    color: #fff;
-    background-color: @primary-color;
-    border-color: @primary-color;
-    &:hover {
-      background-color: rgba(@primary-color, 0.7);
-      border-color: rgba(@primary-color, 0.7);
-    }
-    &[disabled]:hover,
-    &[disabled] {
-      background-color: #f5f5f5;
-      border-color: #d9d9d9;
-      color: #bebebe;
-    }
-  }
-  .prompt {
-    position: absolute;
-    bottom: 16px;
-    right: 120px;
-    color: #a6a6a6;
-  }
-}
-.infinite-container {
-  overflow-y: auto;
-}
-.message-wrapper {
-  position: relative;
-  .loading-icon {
-    position: absolute;
-    top: 0;
-    left: 50%;
-  }
-}
-.content-edit {
-  width: 100%;
-  height: 100%;
-  padding: 0 16px 56px;
-  word-break: break-word;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  cursor: text;
-  > div {
-    height: 100%;
-    outline: none;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
-.overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  cursor: not-allowed;
-}
-.queue-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  background: #fff;
-  z-index: 500;
-  border-top: 1px solid #e6e6e6;
-  .queue-tips {
-    font-size: 16px;
-    color: #272727;
-    line-height: 22px;
-    margin-bottom: 16px;
-  }
-  .queue-btns {
-    display: flex;
-    justify-content: center;
-  }
-  .toSession {
-    width: 80px;
-    height: 80px;
-    line-height: 80px;
-    text-align: center;
-    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
-    box-shadow: 0px 4px 9px 0px rgba(186, 186, 186, 0.79);
-    border-radius: 50%;
-    color: #4b4b4b;
-    font-size: 20px;
-    font-weight: 500;
-    font-family: PingFangSC-Medium, PingFang SC;
-    transition: transform 0.3s ease;
-    &.primary {
-      background: linear-gradient(180deg, #2d7aff 0%, #2c5df4 100%);
-      box-shadow: 0px 5px 8px 0px rgba(44, 101, 247, 0.39);
-      color: #fff;
-    }
-    &.danger {
-      background: linear-gradient(180deg, #ff4b4b 0%, #c80606 100%);
-      box-shadow: 0px 5px 8px 0px rgba(217, 26, 26, 0.35);
-      color: #fff;
-    }
-    &:hover {
-      transform: scale(1.2);
-    }
-    & + .toSession {
-      margin-left: 36px;
-    }
-  }
-}
-.toolbar {
-  // margin-left: 10px;
-  margin: 0 5px;
-  font-size: 20px;
-  outline: none;
-  padding: 6px;
-  box-sizing: content-box;
-  &:hover {
-    background-color: #ebebeb;
-    border-radius: 6px;
-  }
-}
-.closed-toolbar {
-  z-index: 100;
-}
-/deep/ p {
-  margin-bottom: 0;
-}
-.click-voice {
-  color: #2d7aff;
-}
-</style>
+<template>
+  <a-layout-footer style="position: relative;cursor:pointer" v-show="!queueItem || !hideQueueBtns">
+    <div class="message-operate">
+      <a-upload
+        v-if="isShow('PICTURE')"
+        class="operate-icon"
+        v-decorator="[
+          'upload',
+          {
+            valuePropName: 'fileList'
+          }
+        ]"
+        :beforeUpload="beforeUpload"
+      >
+        <a-tooltip placement="top">
+          <template slot="title">{{ i18nText('1.9.181') }}</template>
+          <svg-icon icon-class="liaotiantupian1" class="toolbar"></svg-icon>
+        </a-tooltip>
+      </a-upload>
+      <a-popover :title="i18nText('1.9.354')" trigger="click" v-model="visible">
+        <a slot="content">
+          <div class="emoji-wrapper">
+            <p v-for="(item, index) in emojiList" :key="index" @click="() => handleEmojiClick(item)" :class="['twa', 'emoji', item]"></p>
+          </div>
+        </a>
+
+        <a-tooltip placement="top">
+          <template slot="title">{{ i18nText('1.9.354') }}</template>
+          <svg-icon icon-class="liaotianbiaoqing1" @click="showEmoji" class="toolbar" v-if="isShow('SMILINEFACE')"></svg-icon>
+        </a-tooltip>
+      </a-popover>
+      <template v-for="(item, index) in toolbar">
+        <a-tooltip placement="top" :key="index">
+          <template slot="title">{{ item.name }}</template>
+          <svg-icon :icon-class="item.icon" class="toolbar" :class="{ 'closed-toolbar': closedSession }" @click="handleToolBarClick(item)"></svg-icon>
+        </a-tooltip>
+      </template>
+      <!-- 快捷回复 -->
+      <a-tooltip placement="top" :title="'快捷回复'">
+        <a-popover trigger="click" overlayClassName="quick-reply" placement="topLeft" v-model="quickShow">
+          <template slot="content">
+            <quick-reply :quickShow.sync="quickShow" :quickData="quickData"></quick-reply>
+          </template>
+          <svg-icon icon-class="liaotiankuaijiehuifu1" class="toolbar" @click="openQuickData" v-if="isShow('FASTREPLY') && isServer"></svg-icon>
+        </a-popover>
+      </a-tooltip>
+      <a-tooltip :title="'语音通话'">
+        <svg-icon icon-class="liaotianyuyindianhua" @click="handleVideoClick('voice')" class="toolbar" v-if="isShow('VOICE_CALL')"></svg-icon>
+        <!-- <img
+          width="20"
+          src="../img/multi-voice.png"
+          @click="handleVideoClick('voice')"
+          v-if="isShow('VOICE_CALL') && isServer"
+        /> -->
+      </a-tooltip>
+      <a-tooltip :title="'发送语音'">
+        <svg-icon icon-class="liaotianyuyin1" @click="handleVoice(true)" class="toolbar" :class="{ 'click-voice': showVoice }" v-if="isShow('VOICE')"></svg-icon>
+        <!-- <img
+          width="20"
+          src="../img/multi-video.png"
+          @click="handleVideoClick('video')"
+          v-if="isShow('VIDEO') && isServer"
+        /> -->
+      </a-tooltip>
+      <a-tooltip :title="'视频通话'">
+        <svg-icon icon-class="liaotianshipin1" @click="handleVideoClick('video')" class="toolbar" v-if="isShow('VIDEO')"></svg-icon>
+        <!-- <img
+          width="20"
+          src="../img/multi-video.png"
+          @click="handleVideoClick('video')"
+          v-if="isShow('VIDEO') && isServer"
+        /> -->
+      </a-tooltip>
+    </div>
+    <div class="message" style="text-align: left">
+      <div class="content-edit">
+        <div
+          ref="contentEdit"
+          @click="saveRange"
+          @keyup.exact="saveRange"
+          @change="changeData"
+          @input="handleInput"
+          @compositionstart="() => (this.ping = true)"
+          @compositionend="() => (this.ping = false)"
+          @keydown="handleKeyDown"
+          @paste="handlePaste"
+          contenteditable="true"
+        ></div>
+      </div>
+      <span class="prompt">Enter {{ i18nText('1.2.1.11.6') }}, Ctrl + Enter {{ i18nText('1.9.356') }}</span>
+      <a-button :disabled="sendDisabled" class="message-send" @click="handleMsgSend">{{ i18nText('1.2.1.11.6') }}</a-button>
+    </div>
+    <div id="canvas-wrapper" style="display: none">
+      <canvas id="canvas"></canvas>
+    </div>
+    <template v-if="showOverlay">
+      <div class="overlay" v-if="(!onChating || sessionEnd) && !queueItem"></div>
+    </template>
+    <div class="queue-page" v-if="queueItem">
+      <div v-if="accessDesc" class="queue-tips">{{ accessDesc }}</div>
+      <div class="queue-btns">
+        <div v-if="enableTransfer" class="toSession" @click="handleOpenTransfer">
+          {{ i18nText('1.10.201') }}
+        </div>
+        <div class="toSession primary" @click="handleAccess">
+          {{ accessText || i18nText('1.9.352') }}
+        </div>
+        <div v-if="enableRefuse" class="toSession danger" @click="openRefuseReason">
+          {{ i18nText('1.9.353') }}
+        </div>
+      </div>
+    </div>
+    <!-- 操作栏弹窗 -->
+    <a-modal
+      :wrapClassName="isFullScreen ? 'chat-footer-modal-big' : 'chat-footer-modal-small'"
+      :title="modalData.name"
+      :visible="modalShow"
+      :maskClosable="false"
+      :mask="true"
+      :width="isFullScreen ? '100%' : '80%'"
+      destroyOnClose
+      :okText="i18nText('1.2.1.11.6')"
+      :footer="null"
+      @cancel="
+        () => {
+          this.modalShow = false;
+        }
+      "
+      @ok="handleOk"
+    >
+      <iframe id="toolbarIframe" v-if="modalData.targetType === 'LINK_ADDRESS'" width="100%" height="100%" frameborder="0" :src="modalData.address" allow="camera;midi"></iframe>
+    </a-modal>
+    <!-- 接入拦截 -->
+    <a-modal
+      :title="accessInterceptTitle"
+      :visible="accessIntercept"
+      :maskClosable="false"
+      :mask="true"
+      :footer="null"
+      destroyOnClose
+      :width="600"
+      :bodyStyle="{ height: '280px' }"
+      @cancel="
+        () => {
+          this.accessIntercept = false;
+        }
+      "
+    >
+      <iframe width="100%" height="100%" frameborder="0" :src="accessInterceptUrl"></iframe>
+    </a-modal>
+    <!-- 语音消息 -->
+    <voice v-if="showVoice" :showVoice="showVoice" @closeVoice="handleVoice"></voice>
+    <ModalUserTransfer v-if="enableTransfer" :title="i18nText('1.10.201')" :visible.sync="transferVisible" :assemblyId="assemblyId" @ok="handleTransfer" />
+    <ModalRefuseReason v-if="refuseVisible" :visible.sync="refuseVisible" :reasonList="refuseReasonList" @ok="handleRefuse" />
+  </a-layout-footer>
+</template>
+
+<script>
+import { Layout, Tooltip, Upload, Modal, Popover, Button } from 'ant-design-vue';
+import SvgIcon from '@/component/svg/index.vue';
+import ImageCompress from '../utils/compressImage';
+import { parseParams } from '../utils/panelsetting';
+
+import { mapState, mapGetters, mapMutations, mapActions } from '../store/helper';
+import fetch, { qs } from '@/utils/chatFetch';
+import QuickReply from './quickReply';
+import voice from './voice';
+import ModalUserTransfer from '../components/modal-user-transfer';
+import ModalRefuseReason from '../components/modal-refuse-reason';
+import vexutils from '@/utils/vexutils';
+export default {
+  inject: ['store', 'i18nText', 'dispatchEvent', 'registerEvent', 'unregisterEvent'],
+  components: {
+    AModal: Modal,
+    [Layout.Footer.name]: Layout.Footer,
+    [Tooltip.name]: Tooltip,
+    [Upload.name]: Upload,
+    [Button.name]: Button,
+    [Popover.name]: Popover,
+    SvgIcon,
+    ModalRefuseReason,
+    ModalUserTransfer,
+    QuickReply,
+    voice
+  },
+  props: {
+    // 隐藏排队状态底部信息
+    hideQueueBtns: {
+      type: Boolean,
+      default: false
+    },
+    validTalkingEnv: {
+      type: Function
+    },
+    curChatType: {
+      type: String
+    },
+    clientFinish: {
+      type: Boolean,
+      default: true
+    },
+    addvisible: {
+      type: Boolean,
+      default: false
+    },
+    isShowVoice: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // message: "",
+      visible: false,
+      modalShow: false,
+      modalData: {},
+      ping: false,
+      templateId: null, // 卡片模板
+      isFullScreen: false,
+      emojiList: require('../utils/emoji.json'),
+      quickData: [],
+      quickShow: false,
+      screenshot: false,
+      screenshotFile: null,
+      timer: null,
+      accessIntercept: false,
+      curToolbarItem: {},
+      showVoice: false,
+      transferVisible: false,
+      refuseVisible: false,
+
+      apiResult: {}, // 前置条件的返回值
+    };
+  },
+  computed: {
+    ...mapGetters([
+      'userInfo',
+      'assemblyId',
+      'sessionId',
+      'serviceId',
+      'onChating',
+      'roomId',
+      'isServer',
+      'assemblySetting',
+      'chatType',
+      'sessionEnd',
+      'closedSession',
+      'clientParams',
+      'footerMessage',
+      'queueItem',
+      'sessionType',
+      'groupMembers',
+      'curScrollItem'
+    ]),
+    ...mapState({
+      classify: state => state.lastClassify || state.classify
+    }),
+    message() {
+      return this.footerMessage;
+    },
+    sendDisabled() {
+      return this.message.length === 0;
+    },
+    orgId() {
+      return this.userInfo?.sysParams?.orgId;
+    },
+    userId() {
+      return this.userInfo?.sysParams?.userId;
+    },
+    toolbar() {
+      if (!this.isServer) return [];
+      let toolbar = this.assemblySetting.toolbar || [];
+      toolbar = toolbar.filter(item => {
+        const { source, isChecked, isCloseChecked, isClosedAble } = item;
+        if (source === 'PC' && (
+            (!this.closedSession && isChecked === 'Y') ||
+            (this.closedSession && isCloseChecked === 'Y' && isChecked === 'Y' && isClosedAble === 'Y')
+          )
+        ){
+          const showCondition = item.showCondition || [];
+          const i = showCondition.findIndex(({ p_name, p_value }) => {
+            const params = this.clientParams;
+            const value = params[p_name];
+            if (p_value.startsWith('form.')) {
+              return value !== p_name[p_value.slice(5)];
+            }
+            return value !== p_value;
+          });
+          return i < 0;
+        }
+        return false;
+      });
+      return toolbar;
+    },
+    isListClassify() {
+      return this.assemblySetting.isListClassify === 'Y';
+    },
+    showOverlay() {
+      return this.curChatType != 'robot' || this.clientFinish;
+    },
+    accessText() {
+      let obj = this.assemblySetting.serverSetting.serverInfo.filter(item => item.key === 'ongoingButton')[0];
+      return obj?.value;
+    },
+    accessDesc() {
+      let obj = this.assemblySetting.serverSetting.serverInfo.filter(item => item.key === 'ongoingDescription')[0];
+      return obj?.value;
+    },
+    accessInterceptObj() {
+      let obj = this.assemblySetting.accessInterceptSetting?.filter(item => item.source === 'PC');
+      if (obj && obj[0]) {
+        return obj[0];
+      }
+      return undefined;
+    },
+    // 拦截url
+    accessInterceptUrl() {
+      const { accessInterceptObj: obj, apiResult } = this;
+      if (obj) {
+        return this.getLinkAddress(obj,{result:apiResult});
+      }
+      return '';
+    },
+    // 拦截title
+    accessInterceptTitle() {
+      const { accessInterceptObj: obj } = this;
+      if (obj) {
+        let res = obj.titleI18n ? this.i18nText(obj.titleI18n) : obj.title;
+        return res || '接入拦截';
+      }
+      return '接入拦截';
+    },
+    // 是否开启 排队转接
+    enableTransfer() {
+      if (this.assemblySetting.type === 'single') {
+        let setting = null;
+        if (this.isListClassify) {
+          const classify = this.classify;
+          const { listClassify = [] } = this.assemblySetting;
+          const target = listClassify.find(item => item.classify === classify);
+          setting = target ? target.serverFunctionSetting : null;
+        } else {
+          setting = this.assemblySetting?.serverSetting?.functionSetting;
+        }
+        if (setting) {
+          const v = setting.find(item => item.function === 'TRANSFER_BEFORE');
+          return v ? v.isChecked == 'Y' : false;
+        }
+      }
+      return false;
+    },
+    enableRefuse() {
+      let setting = null;
+      if (this.isListClassify) {
+        const classify = this.classify;
+        const { listClassify = [] } = this.assemblySetting;
+        const target = listClassify.find(item => item.classify === classify);
+        setting = target ? target.serverFunctionSetting : null;
+      } else {
+        setting = this.assemblySetting?.serverSetting?.functionSetting;
+      }
+      if (setting) {
+        const v = setting.find(item => item.function === 'ACCESS_REFUSE');
+        return v ? v.isChecked == 'Y' : false;
+      }
+      return false;
+    },
+    refuseReasonList() {
+      const list = this.assemblySetting?.refuseReasonSetting?.list || [];
+      return list.filter(v => !!v.text);
+    }
+  },
+
+  mounted() {
+    this.bindEvents();
+  },
+  methods: {
+    ...mapMutations([
+      'setLastClassify',
+      'setSessionTimer',
+      'setScrollQueueId',
+      'setCurScrollItem',
+      'setIsAppendMsg',
+      'setMessage',
+      'setShowVideo',
+      'setCaller',
+      'setMedicalOrPrescription',
+      'setModalVisible',
+      'setFooterMessage',
+      'setQueueItem',
+      'setSessionId',
+      'setCurrentTab',
+      'setClientId',
+      'setOnChating',
+      'setClientParams',
+      'setSessionHistoryList',
+      'setSessionEnd',
+      'setQuestionId',
+      'setDictionaryKey',
+      'setMultiVideoShow',
+      'setVideoStatus',
+      'setVideoMode',
+      'setAddMemberType',
+      'setShowAudio',
+      'setVideoMembers',
+      'setLastCurrentTab',
+      'setIsRecorderVoice',
+      'setVideoData',
+      'setSessionType'
+    ]),
+    ...mapMutations({
+      clearMsgList: 'setMsgList'
+    }),
+    ...mapActions(['sendMessage', 'sendRobotMessage', 'handleBotChat', 'setMsgList', 'setChatTimer']),
+    deleteStyle(value) {
+      // 去掉样式
+      value = value.replace(/style\s*?=\s*?(['"])[\s\S]*?\1/g, '');
+      value = value.replace(/data\s*?=\s*?(['"])[\s\S]*?\1/g, '');
+      value = value.replace(/class\s*?=\s*?(['"])[\s\S]*?\1/g, match => {
+        if (match.includes('twa')) {
+          return match;
+        } else {
+          return '';
+        }
+      });
+      value = value.replace(/face\s*?=\s*?(['"])[\s\S]*?\1/g, '');
+      value = value.replace(/<a/g, '<span');
+      value = value.replace(/a>/g, 'span>');
+      value = value.replace(/<i/g, '<span');
+      value = value.replace(/i>/g, 'span>');
+      value = value.replace(/<u/g, '<span');
+      value = value.replace(/u>/g, 'span>');
+      value = value.replace(/<strong/g, '<span');
+      value = value.replace(/strong>/g, 'span>');
+      value = value.replace(/<h\d/g, '<span');
+      value = value.replace(/h\d>/g, 'span>');
+      value = value.replace(/<b>/g, '<span>');
+      value = value.replace(/b>/g, 'span>');
+      value = value.replace(/<font/g, '<span');
+      value = value.replace(/font>/g, 'span>');
+      return value;
+    },
+    // 更新 message值 (未用v-html，修改后需要手动设置聊天框html内容)
+    updateMessage(value) {
+      this._editValue = value;
+      this.setFooterMessage(`${value}`);
+      const editRef = this.$refs.contentEdit;
+      if (!editRef) return;
+      editRef.innerHTML = value;
+    },
+    // 根据 聊天框 html节点内容 设置 message值 （未用v-html，html内容更改需主动设置message值）
+    setMessageByHTML() {
+      const editRef = this.$refs.contentEdit;
+      if (!editRef) return;
+      const message = editRef.innerHTML;
+      this._editValue = message;
+      this.setFooterMessage(`${message}`);
+    },
+
+    showEmoji() {
+      // this.visible = true;
+    },
+
+    isShow(type) {
+      if (type === 'SMILINEFACE' && this.curChatType === 'robot') return true;
+      if (this.isListClassify) {
+        let label;
+        if (this.isServer) {
+          label = 'serverFunctionSetting';
+        } else {
+          label = 'clientFunctionSetting';
+        }
+        let classifyItem = this.assemblySetting.listClassify.filter(item => item.classify === this.classify);
+        if (!classifyItem || !classifyItem.length) return;
+        let funs = classifyItem[0][label] || [];
+        return funs.find(item => item.function === type)?.isChecked === 'Y';
+      }
+      let label;
+      if (this.isServer) {
+        label = 'serverSetting';
+      } else {
+        label = 'clientSetting';
+      }
+      let funs = this.assemblySetting[label]?.functionSetting || [];
+      return funs.find(item => item.function === type)?.isChecked === 'Y';
+    },
+
+    handleEmojiClick(item) {
+      let emojiHtml = `<p contenteditable="false" class="twa emoji ${item}"></p>&nbsp`;
+      this.insertToEdit(emojiHtml);
+    },
+    /* edit-content光标定位 */
+    resetSelection() {
+      let edit = this.$refs.contentEdit;
+      let sel, range;
+      if (window.getSelection && document.createRange) {
+        range = document.createRange();
+        range.selectNodeContents(edit);
+        range.collapse(true);
+        range.setEnd(edit, edit.childNodes.length);
+        range.setStart(edit, edit.childNodes.length);
+        sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    },
+
+    insertToEdit(value, isEditing) {
+      const { _editSel, _editRange } = this;
+      let sel, range;
+      if (window.getSelection) {
+        if (!isEditing) {
+          if (_editRange) {
+            sel = _editSel;
+            range = _editRange;
+          } else {
+            // 初始状态没有focus聊天框，需要手动focus 获取光标位置
+            const editRef = this.$refs.contentEdit;
+            if (!editRef) return;
+            editRef.focus();
+            this.saveRange();
+            sel = this._editSel;
+            range = this._editRange;
+          }
+        } else {
+          sel = window.getSelection();
+          range = sel.getRangeAt(0);
+        }
+        range.deleteContents();
+        let frag;
+        if (range.createContextualFragment) {
+          frag = range.createContextualFragment(value);
+        } else {
+          const el = document.createElement('div');
+          el.innerHTML = value;
+          frag = document.createDocumentFragment();
+          let node, lastNode;
+          while ((node = el.firstChild)) {
+            lastNode = frag.appendChild(node); // 之所以能终止循环，是因为el的child一旦添加到dom后，作为fragment里的的child就没了。那么el.firstChild就会返回null
+          }
+        }
+        const lastNode = frag.lastChild;
+        range.insertNode(frag);
+        // 把光标挪到插入的元素后面
+        range.setStartAfter(lastNode);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      } else {
+        range = isEditing || !_editRange ? document.selection.createRange() : _editRange;
+        range.pasteHTML(value);
+        range.select();
+      }
+      this.setMessageByHTML();
+    },
+    saveRange() {
+      if (window.getSelection) {
+        this._editSel = window.getSelection();
+        this._editRange = this._editSel.getRangeAt(0);
+      } else {
+        this._editRange = document.selection.createRange();
+      }
+    },
+    handleInput(e) {
+      if (e.inputType === 'deleteContentBackward') {
+        this.screenshot = false;
+        this.screenshotFile = null;
+      }
+      setTimeout(() => {
+        if (this.ping || this.pasteTimer) return;
+        this.setMessageByHTML();
+      }, 0);
+    },
+    changeData(e) {
+      let message = e.srcElement.innerHTML;
+      if (e.inputType === 'deleteContentBackward') {
+        let div = document.createElement('div');
+        div.innerHTML = e.srcElement.innerHTML;
+        if (div.lastChild?.className?.startsWith('twa emoji')) {
+          div.removeChild(div.lastChild);
+          message = div.innerHTML;
+        }
+        this.screenshot = false;
+        this.screenshotFile = null;
+      }
+
+      setTimeout(() => {
+        if (this.ping) return;
+        this.setFooterMessage(`${message}`);
+        this.$nextTick().then(() => {
+          this.resetSelection();
+          this.ping = false;
+        });
+      }, 0);
+    },
+
+    beforeUpload(data) {
+      let { type } = data;
+      if (!type.startsWith('image/')) {
+        this.$message.warning(`${this.i18nText('1.9.357')}!`);
+        return;
+      }
+      let that = this;
+      this.$confirm({
+        title: this.i18nText('1.9.331'),
+        content: `${this.i18nText('1.9.358')}?`,
+        okText: '确定',
+        cancelText: '取消',
+        onOk() {
+          return that.uploadImg(data);
+        },
+        onCancel() {
+          return false;
+        }
+      });
+    },
+
+    /* 压缩上传 */
+    uploadImg(file) {
+      const hide = this.$message.loading(`${this.i18nText('1.9.199')}...`, 0);
+      new ImageCompress(file, 'canvas', fetch, {
+        url: '/hospitalUpload/picture'
+      })
+        .execute()
+        .then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            this.doMsgSend(1, data.map.url);
+            hide();
+          } else {
+            hide();
+            this.$message.info(data.msg || `${this.i18nText('1.9.174')}!`);
+          }
+        })
+        .catch(() => {
+          hide();
+          this.$message.info(`${this.i18nText('1.9.174')}!`);
+        })
+        .finally(() => {
+          this.screenshotFile = null;
+          this.screenshot = false;
+          this.updateMessage('');
+        });
+    },
+
+    /* 发送消息 */
+    doMsgSend(type, content) {
+      let body = {
+        content: type === 0 ? `<div>${content}</div>` : content,
+        type: type
+      };
+      if (this.curChatType === 'robot') {
+        // this.setQuestionId("");
+        // this.setDictionaryKey("");
+        this.sendRobotMessage(content);
+      } else {
+        this.sendMessage(body);
+      }
+    },
+    handleMsgSend() {
+      // 截图上传
+      if (this.screenshot) {
+        this.uploadImg(this.screenshotFile);
+        return;
+      }
+      if (this.chatType === 'bot') {
+        this.handleBotChat(this.message).then(isHuman => {
+          if (isHuman) {
+            this.$parent.$parent.$parent.initWebSocket();
+          }
+          this.updateMessage('');
+        });
+        return;
+      }
+
+      const editRef = this.$refs.contentEdit;
+      if (editRef) {
+        const message = editRef.innerText;
+        if (message.length > 2000) {
+          this.$message.warning('请控制在2000字以内!');
+          return;
+        }
+      }
+      // let reg = /(.*?)(<div><br><\/div>)*?$/;
+      let reg = /(.*?)(<div>(<span>)?<br>(<\/span>)?<\/div>)*?$/;
+      let message = this.message.match(reg);
+      if (message[2]) {
+        this.updateMessage(message[1]);
+      }
+      this.updateMessage(this.message.replace(/style/g, 'data'));
+      if (this.message.trim()) {
+        this.doMsgSend(0, this.message);
+      } else {
+        return this.$message.warning(this.i18nText('1.9.359'));
+      }
+      this.updateMessage('');
+    },
+    handleKeyDown(e) {
+      // 判断enter 发送还是换行
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+          this.handleWrap();
+        } else {
+          this.handleMsgSend();
+        }
+      }
+    },
+    handleWrap() {
+      let ctn = `<br>`;
+      // 非ie环境 元素后面没有node的时候换行需要两个<br>
+      if (!/msie/.test(navigator.userAgent) && window.getSelection) {
+        const focusNode = window.getSelection().focusNode;
+        let nextSibling = focusNode.nextSibling;
+        if (focusNode === this.$refs.contentEdit) {
+          nextSibling = focusNode.childNodes[0];
+        }
+        do {
+          if (!nextSibling || nextSibling.nodeValue || nextSibling.tagName == 'BR') break;
+        } while ((nextSibling = nextSibling.nextSibling));
+        if (!nextSibling) {
+          ctn += ctn;
+        }
+      }
+      this.insertToEdit(ctn);
+      this.$nextTick().then(() => {
+        this.ping = false;
+      });
+    },
+    handleVideoClick(type) {
+      // this.curScrollItem.type 2多人 1单人
+      if (this.sessionType === 2) {
+        this.$emit('update:addvisible', true);
+        this.setAddMemberType(2);
+        this.setVideoMode(type === 'voice' ? 1 : 2);
+      } else {
+        const openTalking = sip => {
+          this.setShowAudio(true);
+          this.setVideoMode(type === 'voice' ? 1 : 2);
+          this.$nextTick(() => {
+            this.setVideoMembers([]);
+          });
+          this.setVideoData({
+            callerSipKey: sip?.username,
+            callerSipName: sip?.name
+          });
+        };
+        if (this.validTalkingEnv) {
+          this.validTalkingEnv().then(res => {
+            if (res.status) {
+              openTalking(res.sip);
+            }
+          });
+        } else {
+          openTalking();
+        }
+      }
+      // this.groupMembers.length > 2
+      return;
+    },
+    handleVoice(val) {
+      val && this.setIsRecorderVoice(true);
+      this.showVoice = val;
+    },
+    showPrescription() {
+      this.setModalVisible(true);
+      this.setMedicalOrPrescription('prescription');
+    },
+    showMedicalRecord() {
+      this.setModalVisible(true);
+      this.setMedicalOrPrescription('medical');
+    },
+    beofreToolBarClick(item) {
+      // 操作栏前置条件
+      return new Promise((resolve, reject) => {
+        const { precondition } = item;
+        if (precondition) {
+          this.requestPreCondition(precondition)
+            .then(res => {
+              const result = res.data.result === 'SUCCESS';
+              !result && this.$message.error(res.data.resultMsg || this.i18nText('1.9.22'));
+              resolve(result);
+            })
+            .catch(error => {
+              this.$message.error(error.resultMsg || this.i18nText('1.9.22'));
+              resolve(false);
+            });
+        } else {
+          resolve(true);
+        }
+      });
+    },
+    async handleToolBarClick(item) {
+      const validate = await this.beofreToolBarClick(item);
+      if (!validate) return;
+      let { openMode, name, templateId, isFullScreen } = item;
+      this.dispatchEvent('click_toolbar', { ...item });
+      if (!item.address) return;
+      this.curToolbarItem = item;
+      this.templateId = templateId;
+      this.isFullScreen = isFullScreen === 'Y';
+      let address = this.getLinkAddress(item);
+      if (openMode === 'WINDOW') {
+        window.open(address, name);
+        return;
+      }
+      if (openMode === 'EJECT') {
+        this.modalShow = true;
+        this.modalData = Object.assign({}, item, { address });
+        this.$nextTick().then(() => {
+          window.addEventListener('message', this.iframeEvent);
+        });
+        return;
+      }
+    },
+    iframeEvent(event) {
+      const method = event?.data?.method;
+      this[method]?.(event);
+    },
+    // 发送
+    handleParentMessageSend({ data, source, origin }) {
+      let params = {
+        assemblyId: this.assemblyId,
+        sessionId: this.sessionId,
+        orgId: this.orgId
+      };
+      params = Object.assign(params, data.data);
+      let { actionType } = this.curToolbarItem;
+      actionType && Object.assign(params, { actionType });
+      return fetch.post('/chat/access/sendToolBarData', qs.stringify(params)).then(({ data }) => {
+        if (data.result === 'SUCCESS') {
+          source.postMessage({ status: 0, resultMsg: data.resultMsg }, origin);
+        } else {
+          source.postMessage({ status: 1, resultMsg: data.resultMsg }, origin);
+        }
+      });
+    },
+    // 关闭
+    handleClose() {
+      this.modalShow = false;
+      window.removeEventListener('message', this.iframeEvent);
+    },
+    getLinkAddress(item,paramsData= {}) {
+      let t = {talbe:{},form:{},sys:{}};
+      Object.assign(t,paramsData ||{})
+      let { address = '', params = [] } = item;
+      let urlParams = [];
+      params.forEach(({ p_name, p_value }) => {
+        let value;
+        if (p_value.startsWith('form.')) {
+          value = this.clientParams[p_value.slice(5)];
+        } else if( /\${result.(.*?)\}/g.test(p_value)) {
+          value = vexutils.handleSysParams(p_value,t)
+        } else {
+          value = p_value;
+        }
+        urlParams.push(`${p_name}=${value}`);
+      });
+      if(/\${result.(.*?)\}/g.test(address)){
+        address = vexutils.handleSysParams(address,t)
+      }
+      let { actionType } = this.curToolbarItem;
+      actionType && urlParams.push(`actionType=${actionType}`);
+      if (address.includes('?')) {
+        address += `&${urlParams.join('&')}`;
+      } else {
+        address += `?${urlParams.join('&')}`;
+      }
+      return address;
+    },
+    handleOk() {
+      window.handleParentMessageSend();
+    },
+    // 剪切板粘贴
+    handlePaste(e) {
+      const cbd = e.clipboardData;
+      const ua = window.navigator.userAgent;
+      // 如果是 Safari 直接 return
+      if (!(e.clipboardData && e.clipboardData.items)) {
+        this.handlePasteText(e);
+        return;
+      }
+      if (
+        cbd.items &&
+        cbd.items.length === 2 &&
+        cbd.items[0].kind === 'string' &&
+        cbd.items[1].kind === 'file' &&
+        cbd.types &&
+        cbd.types.length === 2 &&
+        cbd.types[0] === 'text/plain' &&
+        cbd.types[1] === 'Files' &&
+        ua.match(/Macintosh/i) &&
+        Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49
+      ) {
+        this.handlePasteText(e);
+        return;
+      }
+      const hasFile = this.handleImgPaste(cbd.items);
+      if (hasFile) {
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+      this.handlePasteText(e);
+    },
+    handleImgPaste(files) {
+      let hasFile = false;
+      for (let i = 0; i < files.length; i++) {
+        let item = files[i];
+        if (item.kind == 'file') {
+          hasFile = true;
+          // blob 就是从剪切板获得的文件，可以进行上传或其他操作
+          const blob = item.getAsFile();
+          if (blob.size === 0) {
+            return;
+          }
+          const reader = new FileReader();
+          const imgs = new Image();
+          imgs.file = blob;
+          reader.onload = e => {
+            imgs.src = e.target.result;
+            imgs.width = '150';
+            this.updateMessage(this.htmlToString(imgs));
+            this.$nextTick().then(() => {
+              this.resetSelection();
+              this.screenshot = true;
+              this.screenshotFile = blob;
+            });
+          };
+          reader.readAsDataURL(blob);
+        }
+      }
+      return hasFile;
+    },
+    // 处理文本粘贴
+    handlePasteText() {
+      if (this.pasteTimer) clearTimeout(this.pasteTimer);
+      const ele = this.$refs.contentEdit;
+      if (!ele) return;
+      let before = ele.innerHTML;
+      this.pasteTimer = setTimeout(() => {
+        function getPasteHtml(before, after) {
+          // 计算粘贴后html不同的位置起点和终点（插入"abc"，则得出sPos为0，ePos为2）
+          var sPos = -1,
+            ePos = -1;
+          for (var i = 0, len = after.length; i < len; ++i) {
+            if (sPos == -1 && before.substr(i, 1) != after.substr(i, 1)) sPos = i;
+            if (ePos == -1 && before.substr(before.length - i - 1, 1) != after.substr(after.length - i - 1, 1)) ePos = i;
+
+            if ((sPos != -1 && ePos != -1) || len - 1 - ePos <= sPos) break;
+          }
+          if (sPos == -1 || ePos == -1) return;
+          ePos = len - 1 - ePos;
+
+          if (ePos <= sPos) {
+            // 遇到像ab，粘贴ab后变成abab这种了，这是需要从sPos开始往后找，找到和before一样的为止
+            i = sPos;
+            var beforeSPosNext = before.substr(i + 1, 10); // 取后10个来对比，如果没有10个，则取最多
+            while (++i < len) {
+              if (beforeSPosNext == after.substr(i, beforeSPosNext.length)) {
+                ePos = i;
+                break;
+              }
+            }
+            i == len && (ePos = len - 1);
+          }
+          // 如果有<和>，则需要计算在内
+          if (after.substr(sPos - 1, 1) == '<') --sPos;
+          if (after.substr(ePos + 1, 1) == '>') ++ePos;
+
+          // 分段获得文本，前半段 插入段 后半段
+          var pastedText = after.substring(sPos, ePos + 1),
+            formerText = after.substr(0, sPos),
+            latterText = after.substr(sPos + pastedText.length);
+
+          // 判断formerText和pastedText是否闭合了
+          var lastLT = formerText.lastIndexOf('<'),
+            lastGT = formerText.lastIndexOf('>');
+          if (lastGT < lastLT) {
+            // 标签断了xxxxx<
+            pastedText = formerText.slice(lastLT) + pastedText;
+            formerText = formerText.slice(0, lastLT);
+          }
+
+          lastLT = pastedText.lastIndexOf('<');
+          lastGT = pastedText.lastIndexOf('>');
+          if (lastGT < lastLT) {
+            // 标签断了<xxxxxx
+            var _insertGT = latterText.indexOf('>') + 1;
+            pastedText += latterText.slice(0, _insertGT);
+            latterText = latterText.slice(_insertGT);
+          }
+          return [formerText, pastedText, latterText];
+        }
+        var after = ele.innerHTML;
+        const data = getPasteHtml(before, after);
+        if (data) {
+          let [formerText, insertText, latterText] = data;
+          insertText = this.deleteStyle(insertText);
+          ele.innerHTML = formerText + insertText + "<span class='pasteCaretPosHelper'></span>" + latterText; // 插入pasteCaretPosHelper以帮助定位光标位置
+          var pasteCaretPosHelper = ele.querySelector('.pasteCaretPosHelper'),
+            range,
+            selection;
+          if (pasteCaretPosHelper) {
+            if (document.createRange) {
+              // Chrome, IE 9+
+              range = document.createRange();
+              range.setStartAfter(pasteCaretPosHelper);
+              range.collapse(false);
+              selection = window.getSelection();
+              selection.removeAllRanges();
+              selection.addRange(range);
+            } else if (document.selection) {
+              // IE 8 and lower
+              range = document.body.createTextRange();
+              range.moveToElementText(pasteCaretPosHelper);
+              range.collapse(false);
+              range.select();
+            }
+            pasteCaretPosHelper.parentNode.removeChild(pasteCaretPosHelper);
+          }
+        }
+        this.setMessageByHTML();
+        this.saveRange();
+        this.pasteTimer = null;
+      }, 50);
+    },
+    // 拖拽上传图片
+    handleFiles(files) {
+      this.handleImgPaste(files);
+    },
+    htmlToString(dom) {
+      let div = document.createElement('div');
+      div.appendChild(dom);
+      return div.innerHTML;
+    },
+    /**
+     * 接入拦截
+     */
+    handleAccessIntercept(result) {
+      let { data } = result;
+      let { status, data: param } = data;
+      if (status === 1) {
+        this.accessChat(param).finally(() => {
+          this.accessIntercept = false;
+        });
+      } else {
+        this.accessIntercept = false;
+      }
+    },
+    /* 客服点击接入按钮进入会话 */
+    async handleAccess() {
+      this.apiResult = {};
+      let accessInterceptValidate = this.handleAccessInterceptValue();
+      let data = null; // 接口参数
+      if (accessInterceptValidate && this.accessInterceptUrl) {
+        const r = await this.beforeAccessIntercept();
+        if (!r) return;
+        if (r.value == 'Y') {
+          this.accessIntercept = true;
+          this.$nextTick().then(() => {
+            window.addEventListener('message', this.handleAccessIntercept);
+          });
+          return;
+        } else {
+          data = r.data; // 获取接入拦截返回参数
+        }
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.accessChat(data);
+      }, 300);
+    },
+    // 条件转换请求
+    requestPreCondition(precondition) {
+      const { targetType, targetName, targetId, params } = precondition;
+      const data = parseParams(params, this.clientParams);
+      let url = '';
+      if (targetType === 'API') {
+        data.url = targetName;
+        url = `/api/executeApi`;
+      } else {
+        data.sqlEnterId = targetId;
+        url = `/form/saveSqlEnter`;
+      }
+      return fetch.post(url, qs.stringify(data));
+    },
+    async beforeAccessIntercept() {
+      function parseResult(r) {
+        let value = 'Y';
+        const data = r.split('&').reduce((obj, str) => {
+          const [k, v] = str.split('=');
+          if (k) {
+            if (k == 'value') {
+              value = v || value;
+            } else {
+              obj = obj || {};
+              obj[k] = v || '';
+            }
+          }
+          return obj;
+        }, null);
+        return {
+          value,
+          data
+        };
+      }
+      this.apiResult = {};
+      const accessInterceptSetting = this.assemblySetting.accessInterceptSetting || [];
+      const setting = accessInterceptSetting.find(item => item.source == 'PC' && item.isChecked == 'Y' && item.precondition);
+      if (setting) {
+        const precondition = setting.precondition;
+        try {
+          let res = await this.requestPreCondition(precondition);
+          this.apiResult = res?.data?.map || {};
+          if (res.data.result === 'SUCCESS') {
+            let value = res.data.map?.result;
+            value = value ? JSON.parse(value) : {};
+            return value.value ? parseResult(value.value) : false;
+          } else {
+            this.$message.error(res.data.resultMsg || this.i18nText('1.9.22'));
+            return false;
+          }
+        } catch (error) {
+          this.$message.error(error.resultMsg || this.i18nText('1.9.22'));
+          return false;
+        }
+      }
+      return {
+        value: 'Y',
+        data: null
+      };
+    },
+    handleAccessInterceptValue() {
+      let { listClassify = [], isListClassify, serverSetting = {} } = this.assemblySetting;
+      let list = [];
+      if (isListClassify != 'Y') {
+        let { functionSetting = [] } = serverSetting;
+        list = functionSetting;
+      } else {
+        let curList = listClassify.find(item => item.classify == this.classify);
+        if (!curList) return false;
+        list = curList.serverFunctionSetting || [];
+      }
+      if (!list.length) return true;
+      let curItem = list.find(item => item.function == 'ACCESS_INTERCEPT');
+      if (!curItem) return true;
+      return curItem.isChecked == 'Y';
+    },
+    accessChat(data) {
+      let { bid: userId, username, userType } = this.queueItem;
+      let params = {
+        assemblyId: this.assemblyId,
+        userId,
+        userType,
+        lastSessionId: this.sessionId,
+        relateId: this.clientParams.relateId
+      };
+      if (data) {
+        params.addParams = JSON.stringify(data);
+      }
+      return fetch.post('/chat/service/accessChat', qs.stringify(params)).then(({ data }) => {
+        if (data.result === 'SUCCESS') {
+          let { countdown, clientParams, sessionType, countdownDesc } = data.map;
+          this.setSessionId(data.map.sessionId);
+          this.clearMsgList();
+          this.setMsgList();
+          this.setCurrentTab('session');
+          this.setLastCurrentTab('session');
+          this.setClientId(username);
+          this.setOnChating(true);
+          this.setSessionEnd(false);
+          this.setQueueItem(null);
+          sessionType && this.setSessionType(sessionType);
+          if (countdown >= 0) {
+            this.setChatTimer({ countdown, countdownDesc });
+          }
+          this.setClientParams(clientParams);
+          this.getSessionHistoryList();
+          this.dispatchEvent('user_accessSuccess', {
+            map: data.map,
+            user: { ...this.curScrollItem }
+          });
+        } else {
+          this.$message.warning(data.resultMsg);
+        }
+      });
+    },
+    handleOpenTransfer() {
+      if (this.enableTransfer) {
+        this.transferVisible = true;
+      }
+    },
+    handleTransfer(data) {
+      const receiveId = data.converUserId;
+      if (receiveId) {
+        if (this.userId == receiveId) {
+          this.$message.warning(this.i18nText('1.2.7.14.1'));
+          return;
+        }
+        this.transferVisible = false;
+        fetch({
+          url: '/chat/service/transferQueue',
+          method: 'POST',
+          data: qs.stringify({
+            relateId: this.clientParams.relateId,
+            orgId: this.orgId,
+            assemblyId: this.assemblyId,
+            userId: this.curScrollItem?.bid,
+            userType: this.curScrollItem?.userType || '',
+            receiveId: receiveId,
+            deptId: data.deptId,
+            remark: data.converMark
+          })
+        })
+          .then(({ data }) => {
+            if (data.result === 'SUCCESS') {
+              this.dispatchEvent('user_transferQueueSuccess', {
+                user: { ...this.curScrollItem }
+              });
+              this.$message.success(this.i18nText('1.9.336'));
+              this.clearCurrentSession(true);
+            } else {
+              this.$message.warning(data.resultMsg || this.i18nText('1.10.201') + this.i18nText('1.9.22'));
+            }
+          })
+          .catch(err => {
+            this.$message.warning(err.resultMsg || this.i18nText('1.10.201') + this.i18nText('1.9.22'));
+          });
+      } else {
+        this.$message.warning(this.i18nText('1.9.335'));
+      }
+    },
+    getSessionHistoryList() {
+      this.setSessionHistoryList([]);
+      if (this.assemblySetting.recordScopeSetting === 'CURRENT') return;
+      fetch
+        .get('/chat/service/getPastSessionList', {
+          params: { sessionId: this.sessionId }
+        })
+        .then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            let list = data.list.map(item => {
+              if (item.id === this.sessionId || this.type === 'session') {
+                item.onChating = true;
+              }
+              return item;
+            });
+            this.setSessionHistoryList(list);
+          }
+        });
+    },
+    openQuickData() {
+      // this.quickShow = true;
+      if (this.quickData.length < 1) {
+        fetch
+          .get('/fastReply/getChatList', {
+            params: {
+              category: this.assemblySetting.chatPublicCategory
+            }
+          })
+          .then(({ data }) => {
+            if (data.result === 'SUCCESS') {
+              this.quickData = data.list;
+            }
+          });
+      }
+    },
+    // 清除当前会话
+    clearCurrentSession(update = false) {
+      this.clearMsgList([]);
+      this.setSessionHistoryList([]);
+      this.setSessionTimer('');
+      this.setClientId('');
+      this.setSessionId('');
+      this.setScrollQueueId('');
+      this.setLastClassify('');
+      this.setCurScrollItem(null);
+      this.setQueueItem(null);
+      this.setClientParams(null);
+      if (update) {
+        // 重新设置 currentTab 触发  scrollList 组件 更新排队列表
+        const currentTab = this.store.state?.currentTab;
+        if (currentTab === 'queue') {
+          this.setCurrentTab('');
+          this.$nextTick(() => {
+            this.setCurrentTab(this.store.state?.currentTab || currentTab);
+          });
+        }
+      }
+    },
+    openRefuseReason() {
+      if (this.enableRefuse) {
+        this.refuseVisible = true;
+      }
+    },
+    handleRefuse(remark) {
+      if (!this.enableRefuse) return;
+      fetch({
+        url: '/chat/service/accessRefuse',
+        method: 'POST',
+        data: qs.stringify({
+          relateId: this.clientParams.relateId,
+          orgId: this.orgId,
+          assemblyId: this.assemblyId,
+          userId: this.curScrollItem?.bid,
+          userType: this.curScrollItem?.userType || '',
+          remark: remark || '其他'
+        })
+      })
+        .then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            this.dispatchEvent('user_refuseSuccess', {
+              user: { ...this.curScrollItem }
+            });
+            this.$message.success(this.i18nText('1.10.184'));
+            this.clearCurrentSession(true);
+          } else {
+            this.$message.warning(data.resultMsg || this.i18nText('1.9.353') + this.i18nText('1.9.22'));
+          }
+        })
+        .catch(err => {
+          this.$message.warning(err.resultMsg || this.i18nText('1.9.353') + this.i18nText('1.9.22'));
+        });
+      this.refuseVisible = false;
+    },
+    bindEvents() {
+      const handleDrop = e => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.handleFiles(e.dataTransfer.items);
+      };
+      document.addEventListener('drop', handleDrop, false);
+      this.registerEvent('accessCurrentSession', this.handleAccess);
+      this.registerEvent('refuseCurrentSession', this.openRefuseReason);
+      this.registerEvent('transferCurrentQueueSession', this.handleOpenTransfer);
+      this.$on('hook:beforeDestroy', () => {
+        document.removeEventListener('drop', handleDrop, false);
+        window.removeEventListener('message', this.iframeEvent);
+        window.removeEventListener('message', this.handleAccessIntercept);
+        this.unregisterEvent('accessCurrentSession', this.handleAccess);
+        this.unregisterEvent('refuseCurrentSession', this.openRefuseReason);
+        this.unregisterEvent('transferCurrentQueueSession', this.handleOpenTransfer);
+      });
+    }
+  },
+  watch: {
+    accessIntercept: {
+      handler(val) {
+        if (!val) {
+          window.removeEventListener('message', this.handleAccessIntercept);
+        }
+      }
+    },
+    message: {
+      handler(v) {
+        // 使用 _editValue 判断是否组件外修改 message，并更新聊天框
+        if (this._editValue !== v) {
+          this.updateMessage(v);
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.chat-footer-modal-big {
+  padding: 10px;
+  &.ant-modal-wrap {
+    overflow: none;
+  }
+  .ant-modal {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    padding-bottom: 0;
+  }
+  .ant-modal-content {
+    height: 100%;
+  }
+  .ant-modal-body {
+    height: calc(100% - 55px);
+  }
+}
+.chat-footer-modal-small {
+  &.ant-modal-wrap {
+    overflow: none;
+  }
+  .ant-modal {
+    width: 80%;
+    height: 80%;
+    padding-bottom: 0;
+    top: 60px;
+  }
+  .ant-modal-content {
+    height: 100%;
+  }
+  .ant-modal-body {
+    height: 100%;
+    padding: 0;
+  }
+}
+
+</style>
+<style lang="less" scoped>
+.message-operate {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  line-height: 18px;
+  background: #fff;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-top: 1px solid #e6e6e6;
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+  > img {
+  // > .operate-icon {
+    margin-left: 10px;
+  }
+  /deep/ .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane {
+    height: 300px !important;
+    overflow: auto !important;
+  }
+  /deep/ .ant-upload-list {
+    display: none;
+  }
+  /deep/ .ant-upload {
+    height: 32px;
+    vertical-align: middle;
+    display: inline-block;
+  }
+  .no-click {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+  .svg-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+}
+.emoji-wrapper {
+  width: 500px;
+  height: 300px;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  .emoji {
+    display: inline-block;
+    font-size: 20px;
+    margin: 10px;
+    text-align: center;
+  }
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+}
+.message {
+  position: relative;
+  height: 150px;
+  .message-send {
+    position: absolute;
+    bottom: 8px;
+    right: 14px;
+    height: 40px;
+    border-radius: 20px;
+    width: 86px;
+    font-weight: 600;
+    font-size: 18px;
+    color: #fff;
+    background-color: @primary-color;
+    border-color: @primary-color;
+    &:hover {
+      background-color: rgba(@primary-color, 0.7);
+      border-color: rgba(@primary-color, 0.7);
+    }
+    &[disabled]:hover,
+    &[disabled] {
+      background-color: #f5f5f5;
+      border-color: #d9d9d9;
+      color: #bebebe;
+    }
+  }
+  .prompt {
+    position: absolute;
+    bottom: 16px;
+    right: 120px;
+    color: #a6a6a6;
+  }
+}
+.infinite-container {
+  overflow-y: auto;
+}
+.message-wrapper {
+  position: relative;
+  .loading-icon {
+    position: absolute;
+    top: 0;
+    left: 50%;
+  }
+}
+.content-edit {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px 56px;
+  word-break: break-word;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  cursor: text;
+  > div {
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  cursor: not-allowed;
+}
+.queue-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  background: #fff;
+  z-index: 500;
+  border-top: 1px solid #e6e6e6;
+  .queue-tips {
+    font-size: 16px;
+    color: #272727;
+    line-height: 22px;
+    margin-bottom: 16px;
+  }
+  .queue-btns {
+    display: flex;
+    justify-content: center;
+  }
+  .toSession {
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+    box-shadow: 0px 4px 9px 0px rgba(186, 186, 186, 0.79);
+    border-radius: 50%;
+    color: #4b4b4b;
+    font-size: 20px;
+    font-weight: 500;
+    font-family: PingFangSC-Medium, PingFang SC;
+    transition: transform 0.3s ease;
+    &.primary {
+      background: linear-gradient(180deg, #2d7aff 0%, #2c5df4 100%);
+      box-shadow: 0px 5px 8px 0px rgba(44, 101, 247, 0.39);
+      color: #fff;
+    }
+    &.danger {
+      background: linear-gradient(180deg, #ff4b4b 0%, #c80606 100%);
+      box-shadow: 0px 5px 8px 0px rgba(217, 26, 26, 0.35);
+      color: #fff;
+    }
+    &:hover {
+      transform: scale(1.2);
+    }
+    & + .toSession {
+      margin-left: 36px;
+    }
+  }
+}
+.toolbar {
+  // margin-left: 10px;
+  margin: 0 5px;
+  font-size: 20px;
+  outline: none;
+  padding: 6px;
+  box-sizing: content-box;
+  &:hover {
+    background-color: #ebebeb;
+    border-radius: 6px;
+  }
+}
+.closed-toolbar {
+  z-index: 100;
+}
+/deep/ p {
+  margin-bottom: 0;
+}
+.click-voice {
+  color: #2d7aff;
+}
+</style>