customAgent/src/components/history-content.vue

<script setup>
import { ref, inject, onMounted } from 'vue'
import faceJSON from '@/mock/face.json'
import DynamicImage from '@/components/common/DynamicImage.vue'
import TextContent from '@/components/text-content.vue'
import TextFolding from '@/components/text-folding.vue'
import TransferAccounts from '@/components/transfer-accounts.vue'
import GmNetworkAddress from '@/components/gmNetwork-address.vue'
import NetworkAddress from '@/components/network-address.vue'
import IntelligentComputing from '@/components/intelligent-computing.vue'
import InsuranceReservation from '@/components/insurance-reservation.vue'
import FormConfig from '@/components/formConfig.vue'
import BusinessHandle from '@/components/business-handle.vue'
import EditAddress from '@/components/edit-address.vue'
import PolicyList from '@/components/policyList.vue'
import XuqiPolicyList from '@/components/xuqiPolicyList.vue'

const props = defineProps({
  historylist: { type: Array, default: () => [] },
  isWX: { type: Boolean, default: false },
  tokenExist: { type: Boolean, default: true },
  lostChatInfoNum: { type: Number, default: null }
})

const store = inject('appStore', null)
const userId = inject('userId', ref(''))
const source = inject('source', ref(''))
const userInfo = inject('userInfo', ref({}))
const headerAvatar = inject('headerAvatar', ref({}))
const elder = inject('elder', false)

const publicPath = import.meta.env.BASE_URL
const expressionProcessing = ref({})
const bigExpressionProcessing = ref({})

function processedEmoji() {
  const tempExp = {}, tempBigExp = {}
  faceJSON.forEach((item) => {
    item.faceList.forEach((items) => { tempExp[`[${items.title}]`] = items.src })
    item.bigExpression.forEach((items) => { tempBigExp[`[${items.title}]`] = items.src })
  })
  expressionProcessing.value = tempExp; bigExpressionProcessing.value = tempBigExp
}

function emojiToImage(str) {
  let regex = /$$[^$$]+\]/g
  return str.replace(regex, (item) => {
    if (expressionProcessing.value[item]) { return `<img src="${publicPath + expressionProcessing.value[item]}" alt="small-image" title="${item}" />` }
    else if (bigExpressionProcessing.value[item]) { return `<img src="${publicPath + bigExpressionProcessing.value[item]}" alt="big-image" title="${item}"/>` }
    return item
  })
}

function getHeaderUrl(key, defaultImg) {
  return key || require(`@/assets/images/${defaultImg}.png`)
}

function showTimeLabel(item) {
  const list = props.historylist
  const index = list.indexOf(item)
  if (index === 0) return true
  const prev = list[index - 1]
  if (!prev || !prev.timestamp) return true
  return (item.timestamp - prev.timestamp) > 5 * 60 * 1000
}

function replaceBrEmoticon(str, item) {
  str = str || ''
  let res = str.replace(/\\n/gm, '<br/>')
  return emojiToImage(res)
}

function replacementRagEmoticonWithLink(str, qaId) {
  if (!str) return ''
  str = emojiToImage(str.replace(/\\n/gm, '<br/>'))
  if (str.indexOf('data-qaid') > 0) return str
  if (str.indexOf('onclick="connectionArtificial') > 0) {
    return str.slice(0, str.indexOf('onclick="connectionArtificial')) + ` data-qaid=${qaId || ''} ` + str.slice(str.indexOf('onclick="connectionArtificial'))
  }
  return str
}

function replaceALabel(str) {
  if (!str) return ''
  return str.replace(/<a /g, '<a class="content-link" ')
}

onMounted(() => { processedEmoji() })
</script>

<template>
  <div class="history-content-box" :class="elder ? 'elder-wrapper' : ''" v-if="historylist && historylist.length > 0">
    <div class="chat-content-box-item" v-for="(item, index) in historylist" :key="index"
      v-show="item.msgText && item.msgText != 'null' || item.cmd === 'ServiceSessionOpenedEvent'">
      <div class="time-show" v-if="showTimeLabel(item)">
        <span class="session-tips">{{ item.timestamp | FormatDate('MM月dd日 hh:mm') }}</span>
      </div>
      <div class="margin-bottom-10" v-else></div>

      <!-- 右边用户消息 -->
      <div class="chat-content-list" v-if="item.fromFlag == '1'">
        <div class="chat-content-txt">
          <div class="chat-txt-content" v-if="item.msgText.indexOf('xss') > -1 || item.msgText.indexOf('i0.a') > -1"
            v-text="replaceBrEmoticon(item.msgText, item)"></div>
          <div class="chat-txt-content" v-else v-html="replaceBrEmoticon(item.msgText, item)"></div>
        </div>
      </div>

      <!-- 左边机器人/坐席消息 -->
      <div class="chat-room-cont" v-if="item.fromFlag == '2'">
        <div class="chat-content-left">
          <div class="content-left-icon">
            <DynamicImage :image-key="headerAvatar.robotUrl" class="avatarUrl-img" />
            <div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">{{ item.seatNum }}</div>
          </div>
          <div class="chat-items">
            <div class="content-left-main">
              <div v-if="item.msgText" v-html="replacementRagEmoticonWithLink(item.msgText, item.qaId)"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.history-content-box {
  padding: 0;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

.time-show {
  text-align: center;
  padding: 5px 0;
}

.session-tips {
  font-size: 12px;
  color: #999;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
}

.chat-content-list {
  margin-bottom: 12px;
}

.chat-content-txt {
  display: flex;
  justify-content: flex-end;
}

.chat-txt-content {
  background: #025CEA;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 75%;
}

.chat-room-cont {
  display: flex;
  margin-bottom: 12px;
}

.chat-content-left {
  display: flex;
  align-items: flex-start;
}

.content-left-icon {
  width: 36px;
  margin-right: 10px;
  flex-shrink: 0;
}

.avatarUrl-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
}

.chat-name {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: 2px;
}

.chat-items {
  flex: 1;
}

.content-left-main {
  background: #fff;
  border-radius: 4px 16px 16px 16px;
  padding: 14px;
}
</style>