ai-assistant/src/views/AI/chat/index.vue

<template>
  <div class="chat-container">
    <div class="chat-list" ref="scrollContainer">
    
      <AiHint></AiHint>

      <div
        v-for="(item, index) in messageList"
        :key="index"
        :class="['chat-item', item.from == 'user' ? 'user-message' : 'ai-message']"
      >
        <!-- 头像 -->
        <img :src="item.from == 'user' ? userIcon : aiIcon" class="user-icon" alt="" />
        <!-- 内容 -->
        <div class="message-content">
          <div class="message-time">{{ item.time }}</div>
          <div class="message-text" :id="`box${index}`">
            <!-- 纯文本 -->
            <div class="text-ros">
              <span v-show="item.type == 'text'">{{ item.text }}</span>
              <AddIssue v-show="item.add"></AddIssue>
             
            </div>
            <!-- 图表 -->
            <section v-if="ehcatrsType.includes(item.type)">
              <div class="echarts-box" :id="item.type + index"></div>
              <div class="echatrs-theme">
                <div class="theme-title">风格切换：</div>
                <div class="theme-list">
                  <div
                    class="theme-item"
                    @click="handlerTheme(item, themeIndex)"
                    v-for="(themeItem, themeIndex) in echartsTheme"
                    :key="themeIndex"
                    :class="item.chartInstanceActiveIndex == themeIndex ? 'activeTheme' : ''"
                  >
                    {{ themeItem }}
                  </div>
                </div>
              </div>
            </section>
            <!-- 表格 -->
            <AiTable v-if="!item.type" :obj="item"></AiTable>
            <!-- 思考 -->
            <div v-show="item.from === 'ai' && item.loading" class="ai-loading">
              <span>思考中</span> <n-spin size="small" content-class="spin-class" />
            </div>
            <!-- 免责 -->
            <div class="ai-hint" v-show="item.from === 'ai' && !item.loading">
              <span>注：本回答由AI生成，内容仅供参考</span>
              <div class="upload-text" @click="uploadImage(index)">
                <n-icon size="14">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 16 16"
                  >
                    <g fill="none">
                      <path
                        d="M3.5 13h9a.75.75 0 0 1 .102 1.493l-.102.007h-9a.75.75 0 0 1-.102-1.493L3.5 13h9h-9zM7.898 1.007L8 1a.75.75 0 0 1 .743.648l.007.102v7.688l2.255-2.254a.75.75 0 0 1 .977-.072l.084.072a.75.75 0 0 1 .072.977l-.072.084L8.53 11.78a.75.75 0 0 1-.976.073l-.084-.073l-3.536-3.535a.75.75 0 0 1 .977-1.133l.084.072L7.25 9.44V1.75a.75.75 0 0 1 .648-.743L8 1l-.102.007z"
                        fill="currentColor"
                      ></path>
                    </g>
                  </svg>
                </n-icon>
                <span>下载图片</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <n-input
      class="chat-input"
      round
      v-model:value="keyWord"
      type="textarea"
      placeholder="请输入需要统计的数据"
      :autosize="{ minRows: 5 }"
    >
      <template #suffix>
        <div class="chat-suffix">
          <span>常用问题</span>
          <n-button :loading="loading" size="small" :class="['chat-send']" :bordered="false" @click="handleSend">
          </n-button>
        </div>
      </template>
    </n-input>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { getAiMsg } from '@/api/ai.js'
import moment from 'moment'
import { LineChart, BarChart, PieChart } from './class/index'
import { AiHint, AiTable,AddIssue } from '../components'
import userIcon from '@/assets/images/ai/user-icon.png'
import aiIcon from '@/assets/images/ai/ai-icon.png'
import { useMessage } from 'naive-ui'
import useMessageRoomStore from '@/store/modules/messageRoom'
import { canvasCut } from '@/utils'
import { historyMessageRoomById } from '@/api/path'
import { useRoute } from 'vue-router'

const route = useRoute()
const useMessageRoom = useMessageRoomStore()
const messageDialog = useMessage()
//输入框加载
let loading = ref(false)
//搜索关键字
let keyWord = ref('')
//聊天记录list
let messageList = reactive([])
//聊天室容器
const scrollContainer = ref(null)
//聊天记录最后一个索引
let lastIndex = ref(0)
//主题
const echartsTheme = ['简约风', '商务风', '科技风']
let stopWatch = null
let isWatching = ref(false)
const ehcatrsType = ['pie', 'line', 'bar']
/**
 * 页面初始完成
 */
onMounted(() => {
  startWatching()

  getMessageInfo()
})

/**
 * 获取聊天详情
 */
const getMessageInfo = async () => {
  const id = checkLastPartIsTimestamp(route.path)
  try {
    const res = await historyMessageRoomById(id)
    if (res.code == 200 && res.data) {
      res.data.content = JSON.parse(res.data.content)
      console.log(res.data)
      useMessageRoom.resetList(res.data)
      res.data.content.map((item, index) => {
        item.chartInstanceActiveIndex = 0
        messageList.push(item)
        initEcharts(item, index)
      })
    }
  } catch {
    messageDialog.error('获取聊天室记录失败！')
  }
}

const checkLastPartIsTimestamp = str => {
  // 找到最后一个 / 的位置
  const lastSlashIndex = str.lastIndexOf('/')
  if (lastSlashIndex === -1) {
    return false
  }
  // 截取最后一个 / 后面的值
  const lastPart = str.slice(lastSlashIndex + 1)
  return lastPart
}

/**
 * 问答
 */
const handleSend = async () => {
  if (!keyWord.value.trim()) {
    messageDialog.warning('请先输入需要统计的数据！')
    return
  }
  if (useMessageRoom.messageRoom.content.length >= 35) {
    messageDialog.warning('每个聊天室上限问题为15条！')
    return
  }
  loading.value = true
  //存储用户回答
  setMessageItem({
    from: 'user',
    text: keyWord.value,
    type:'text',
    time: moment().format('YYYY/MM/DD HH:mm:ss'),
    add: true
  })
return
  //先存储AI回答，作为交互提示，接口响应后再做更新
  setMessageItem(
    {
      from: 'ai',
      text: '',
      time: moment().format('YYYY/MM/DD HH:mm:ss'),
      loading: true, //ai思考中
      chartInstanceItem: null,
      chartInstanceActiveIndex: 0,
      type:'text',
      xData: [],
      yData: []
    },
    false
  )
  try {
    const res = await getAiMsg({ prompt: keyWord.value })

    // 更新
    updataMessageItem({
      from: 'ai',
      text: '',
      time: moment().format('YYYY/MM/DD HH:mm:ss'),
      loading: false, //ai思考中
      chartInstanceItem: null,
      chartInstanceActiveIndex: 0,
      type: res.type,
      xData: [],
      data: [],
      title: res.title,
      unit: res.unit
    })

    nextTick(() => {
      const itemData = messageList[lastIndex.value]
      //饼图
      if (res.type === 'pie') {
        itemData.chartInstanceItem = new PieChart(`${res.type}${lastIndex.value}`, {
          title: res.title,
          unit: res.unit,
          data: res.data
        })
      } else if (res.type === 'bar') {
        itemData.chartInstanceItem = new BarChart(`${res.type}${lastIndex.value}`, {
          title: res.title,
          unit: res.unit,
          xData: res.xData,
          data: res.data
        })
      } else if (res.type === 'line') {
        itemData.chartInstanceItem = new LineChart(`${res.type}${lastIndex.value}`, {
          title: res.title,
          unit: res.unit,
          xData: res.xData,
          data: res.data
        })
      } else {
        //纯文本
        updataMessageItem({
          from: 'ai',
          title: res.title,
          type: res.type,
          text: res.data,
          time: moment().format('YYYY/MM/DD HH:mm:ss'),
          loading: false
        })
      }
    })
  } catch {
    updataMessageItem({
      from: 'ai',
      type: 'text',
      text: '服务器繁忙，请稍后再试。',
      time: moment().format('YYYY/MM/DD HH:mm:ss'),
      loading: false
    })
  }
}

/**
 * 同意渲染图表
 */
const initEcharts = (item, index) => {
  nextTick(() => {
    //饼图
    if (item.type === 'pie') {
      item.chartInstanceItem = new PieChart(`${item.type}${index}`, {
        title: item.title,
          unit: item.unit,
          data: item.data
      })
    } else if (item.type === 'bar') {
      item.chartInstanceItem = new BarChart(`${item.type}${index}`, {
        title: item.title,
        unit: item.unit,
        xData: item.xData,
        data: item.yData
      })
    } else if (item.type === 'line') {
      item.chartInstanceItem = new LineChart(`${item.type}${index}`, {
        title: item.title,
        unit: item.unit,
        xData: item.xData,
        data: item.yData
      })
    }
  })
}
/**
 * 存储聊天室数据
 * @param obj
 */

const setMessageItem = (obj, set = true) => {
  messageList.push(obj)
  lastIndex.value = messageList.length - 1
  if (set) {
    useMessageRoom.setMessage(obj)
  }
}

/**
 * ai回答后更新对应数据
 * @param data
 */
const updataMessageItem = data => {
  messageList[lastIndex.value] = data
  keyWord.value = ''
  loading.value = false
  useMessageRoom.setMessage(data)
  // useMessageRoom.setMessage({
  //   from: data.from,
  //   text: data.text,
  //   type: data.type,
  //   loading: false, //ai思考中
  //   time: data.time,
  //   chartInstanceItem: data.chartInstanceItem,
  //   chartInstanceActiveIndex: 0,
  //   xData: data.xData,
  //   yData: data.yData,
  //   title: data.title,
  //   unit: data.unit
  // })
}

/**
 * 图表切换主题
 * @param index
 */
const handlerTheme = (item, index) => {
  if (isWatching.value) {
    pauseWatching()
    isWatching.value = false
    console.log('暂停')
  }
  item.chartInstanceActiveIndex = index
  item.chartInstanceItem.changeColorStyle(index)

  setTimeout(() => {
    startWatching()
    console.log('监听')
  }, 5000)
}

/**
 * 下载AI回答为图片
 */
const uploadImage = index => {
  // 导出图片
  const range = document.getElementById(`box${index}`)

  // 隐藏边距线
  if (!range) {
    window['$message'].error('下载失败！')
    return
  }

  canvasCut(range)
}

// 聊天室自动滚动条下拉

const startWatching = () => {
  stopWatch = watch(messageList, newVal => {
    nextTick(() => {
      if (scrollContainer.value) {
        scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
      }
    })
  },{deep:true})
  isWatching.value = true
}

const pauseWatching = () => {
  if (stopWatch) {
    stopWatch() // 调用停止函数
    stopWatch = null
  }
}
onUnmounted(() => {
  //清除
  messageList.forEach(instance => {
    if (ehcatrsType.includes( instance.type) && instance.type) {
      instance.chartInstanceItem.dispose()
    }
  })
})
</script>

<style lang="scss" scoped>
/* 设置滚动条整体样式 */
::-webkit-scrollbar {
  width: 0px;
}
</style>