metaverse2024vue/src/views/chat/ChatPC.vue

<template>
  <div class="chat bg-white">
    <div class="flex items-center h-screen relative">
      <div class="leftInfo relative" v-show="!showNodata">
        <div class="history">
          <!-- historyActive -->
          <div class="historyBox" v-for="(item, index) in allRecords" :key="index">
            <div class="top flex w-full cursor-pointer" @click="item.open = !item.open">
              <div class="photo">
                <img class="object-cover" :src="baseApi + item.picture" @error="$AIPohotoError" alt="">
              </div>
              <div class="info flex-1 ml-2 flex flex-col justify-around">
                <div class="text-sm font-semibold">{{ item.characterName }}</div>
                <div class="text-sm text-gray-400">{{ item.prologue }}</div>
              </div>
              <div class="flex items-center text-lg" style="height: 48px;">
                <i v-if="!item.open" class="el-icon-arrow-down" style="font-size: 16px;"></i>
                <i v-else class="el-icon-arrow-up" style="font-size: 16px;"></i>
              </div>
            </div>
            <!-- <transition name="el-zoom-in-top"> -->
            <div class="dialogueList mt-4" v-show="item.open">
              <div class="flex justify-between mb-2">
                <el-button v-if="item.isDelete == 0" type="primary" class="flex-1" round
                  @click="newStart_juese(item)">新的对话</el-button>
                <div v-else class="flex-1 rounded border border-gray-200 text-sm p-2 text-gray-600">
                  {{ item.characterName }}已经被设定为私有或被创建者删除。
                </div>
                <el-dropdown class="flex justify-end items-center ml-2" trigger="click"
                  @command="handleCommand2($event, item)">
                  <div class=" w-8 h-8 bg-gray-100 rounded flex justify-center items-center cursor-pointer">
                    <i slot="reference" class="el-icon-more"></i>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="2">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div
                class="dialogue flex justify-between items-center w-full h-16 rounded-md px-2 mb-2 cursor-pointer relative"
                :class="info.id == item.id && index2 == recordsIndex && 'historyActive'"
                v-for="(item2, index2) in item.chatCharacterList" :key="index2"
                @click.self="clickDialogue(item, item2, index2)">
                <span @click.self="clickDialogue(item, item2, index2)">
                  <i v-if="item2.sceneId || item2.sceneIcon" class="el-icon-video-camera"></i>
                  {{ item2.chatTitle }}
                </span>
                <span @click.self="clickDialogue(item, item2, index2)" class=" text-sm text-gray-500">{{ item2.createTime
                }}</span>
                <el-dropdown class="dialogueIconBg absolute h-16 w-20 right-0 flex justify-end items-center pr-4"
                  trigger="click" @command="handleCommand($event, item, item2)">
                  <div>
                    <i slot="reference" class="el-icon-more"></i>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">修改标题</el-dropdown-item>
                    <el-dropdown-item command="2">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <!-- </transition> -->
          </div>
        </div>
        <!-- 角色详情 -->
        <div class="chatInfo absolute top-0 left-0 w-full h-full z-30 bg-white" v-show="showInfo == 1">
          <div class="flex flex-col p-4 h-full">
            <div class="flex justify-between items-center text-base mb-3">
              <div>角色详情</div>
              <i class="el-icon-close cursor-pointer" @click="showInfoChange(0)"></i>
            </div>
            <div class="flex">
              <span class="chatInfo_photo">
                <img class="w-16 h-16 rounded-full overflow-hidden object-cover" :src="baseApi + info.picture"
                  @error="$AIPohotoError">
              </span>
              <div class="w-0 flex-1 ml-2">
                <div class="text-xl font-medium">{{ info.characterName }}</div>
                <div class="mt-1 text-gray-500 text-sm">Xchat No.{{ info.id }}</div>
              </div>
            </div>
            <div class="flex mt-4">
              <div class="hot flex w-auto items-center px-2 py-1 text-sm mr-2 rounded-full">
                <v-icon name="fire" scale="1" />
                <span class="ml-1">{{ info.hotCount }}</span>
              </div>
            </div>
            <div class="flex justify-around mt-4">
              <div class=" rounded-full w-32 text-center py-2 text-sm cursor-pointer" style="border: solid 1px #000">分享
              </div>
              <div class=" rounded-full w-32 text-center py-2 text-sm cursor-pointer" style="border: solid 1px #000"
                @click="showDetail = !showDetail">角色详情</div>
            </div>
            <transition name="el-zoom-in-top">
              <div v-show="showDetail">
                <div class="mt-5 text-base pb-3 border-b border-gray-200">
                  <div>
                    <i class="el-icon-document"></i>
                    简介
                  </div>
                  <div class="mt-3 text-sm max-h-48">
                    {{ info.prologue }}
                  </div>
                </div>
                <div class="flex justify-between items-center  mt-5 text-base pb-3 border-b border-gray-200">
                  <div>
                    <i class="el-icon-user"></i>
                    创作人
                  </div>
                  <div class="text-sm max-h-48">
                    {{ info.author }}
                  </div>
                </div>
                <div class="flex justify-between items-center  mt-5 text-base pb-3 border-b border-gray-200">
                  <div>
                    <i class="el-icon-time"></i>
                    创建时间
                  </div>
                  <div class="text-sm max-h-48">
                    {{ info.createTime }}
                  </div>
                </div>
                <div class="mt-5 text-base">
                  <i class="el-icon-discount"></i>
                  特征
                </div>
                <div class="tags mt-4 pb-3">
                  <span class="tag" v-for="(item, index) in info.labelArr" :key="index">
                    {{ item }}
                  </span>
                </div>
              </div>
            </transition>
            <div class="mt-5 text-base pb-3 flex-1 flex flex-col">
              <div>
                <!-- <i class="el-icon-document"></i> -->
                查看场景
              </div>
              <div class="mt-3 text-sm max-h-48">
                <div v-if="info.sceneList && info.sceneList.length > 0"
                  class="grid grid-cols-2 gap-2 mb-4 cursor-pointer">
                  <template v-for="(item, index) in info.sceneList">
                    <div v-if="item.isDelete == 0" class="flex flex-col justify-center" :key="index"
                      @click="sceneChange(item)">
                      <img class=" rounded w-full h-24 object-cover" :src="baseApi + item.background" alt="">
                      <div>{{ item.sceneName }}</div>
                      <div class=" text-gray-400">{{ item.sceneDescription }}</div>
                    </div>
                  </template>
                </div>
                <el-empty v-else description="暂无场景"></el-empty>
                <div class="flex justify-center mt-10">
                  <el-button type="primary" round @click="toCreateScene">创建场景</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 场景详情 -->
        <div class="absolute top-0 left-0 w-full h-full z-30 bg-white overflow-hidden" v-show="showInfo == 2">
          <div class="flex flex-col p-4 h-full">
            <div class="flex justify-between items-center text-base mb-3">
              <div>场景详情</div>
              <i class="el-icon-close cursor-pointer" @click="showInfoChange(0)"></i>
            </div>
            <div class=" text-gray-500">{{ sceneInfo.sceneDescription }}</div>
          </div>
        </div>
      </div>
      <div class="content" :class="fullScreen && 'contentFull'" v-show="!showNodata"
        :style="{ backgroundImage: `url(${baseApi}${sceneInfo.background})` }">
        <!-- <div class="leftImg">
          <img :src="baseApi + info.picture" alt="">
          <div class="aiInfo">
            <span class="photo">
              <img :src="baseApi + info.picture">
            </span>
            <div class="info">
              <div class="name">{{ info.characterName }}</div>
              <div class="tags">
                <span class="tag" v-for="(item, index) in info.labelArr" :key="index">
                  {{ item }}
                </span>
              </div>
              <div class="infoContent">{{ info.prologue }}</div>
            </div>
          </div>
        </div> -->
        <div class="fullScreenButton rounded-full border border-gray-200" @click="clickFullScreen">
          <i class="el-icon-arrow-left" v-if="!fullScreen"></i>
          <i class="el-icon-arrow-right" v-else></i>
        </div>
        <div class="chat-box" :class="sceneId && 'mask'">
          <div class="chatBoxTitle absolute top-0">
            <div>
              {{ info.characterName }}
              <el-dropdown v-if="sceneId" class="flex justify-end items-center" trigger="click" @command="handleCommand3"
                @visible-change="dropdown3Show = !dropdown3Show">
                <div>
                  <div slot="reference" class="flex justify-center items-center cursor-pointer text-white">
                    已进入场景：{{ sceneInfo.sceneName }}
                    <i class="el-icon-arrow-up ml-2" style="font-size: 16px;" v-if="dropdown3Show"></i>
                    <i class="el-icon-arrow-down ml-2" style="font-size: 16px;" v-else></i>
                  </div>

                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">场景详情</el-dropdown-item>
                  <el-dropdown-item command="2">新场景对话</el-dropdown-item>
                  <el-dropdown-item command="3">回到常规对话</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="flex w-60 justify-end">
              <el-tooltip effect="dark" content="设定" placement="bottom">
                <el-popover placement="bottom" width="400" trigger="click">
                  <div class="p-2">
                    <div class="flex justify-between mb-4">
                      <span>语音自动播放</span>
                      <el-switch v-model="setting.value1" @change="ChangeSettingValue1">
                      </el-switch>
                    </div>
                    <div class="flex justify-between">
                      <span>全屏幕</span>
                      <el-switch v-model="fullScreen">
                      </el-switch>
                    </div>
                  </div>
                  <i slot="reference" class="fa-solid fa-sliders cursor-pointer text-xl mr-6"></i>
                </el-popover>
              </el-tooltip>
              <el-tooltip effect="dark" content="角色详情" placement="bottom">
                <i class="fa-solid fa-file-invoice cursor-pointer text-xl mr-6" @click="showInfoChange(1)"></i>
              </el-tooltip>
              <el-tooltip v-if="!sceneId" effect="dark" content="开始新的对话" placement="bottom">
                <i class="fa-solid fa-comment-medical cursor-pointer text-xl mr-6" @click="newStart"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="历史对话" placement="bottom">
                <i class="fa-solid fa-clock-rotate-left cursor-pointer text-xl" @click="showInfoChange(0)"></i>
              </el-tooltip>
            </div>
          </div>
          <audio ref="audio" muted v-show="false" :src="audioUrl" autoplay="" @ended="audioEnd" controls></audio>
          <div class="messages" ref="messages">
            <template v-for="(item, index) in returnMessage">
              <div v-if="item.role == 'assistant'" class="mb-4 flex" :key="index">
                <!-- ai返回的信息 -->
                <div class="pt-2 photo">
                  <img :src="baseApi + info.picture" class="rounded-full w-14 h-14 object-cover"
                    @error="$AIPohotoError" />
                </div>
                <div class="messageRight">
                  <div v-show="!item.edit" :ref="`message${index}`"
                    class="message mt-4 ml-4 p-4 rounded-r-md rounded-bl-md text-xs relative">
                    <div class="yyPlayBg mb-2 w-16 p-1 cursor-pointer">
                      <img v-if="audioPlayIndex == index" class="yyPlay" src="@/assets/images/播放/yyPlay1.png" alt="">
                      <img v-else class="yyPlay" src="@/assets/images/播放/yyPlay.png" alt=""
                        @click="historyGetVoice(item, index)">
                      <!-- <svg-icon class="icon" class-name="speech-icon" icon-class="speech" @click.stop="click" /> -->
                    </div>
                    <div v-show="!item.content" class="loadingMessage">
                      <div v-loading="!item.content" element-loading-background="rgba(0, 0, 0, 0.0)"></div>
                    </div>
                    <p style="white-space: pre-line;" v-show="item.content">{{ item.content }}</p>
                    <div class="messageOptions" v-show="returnMessage.length == 1">
                      <div class="option" v-for="(item, index) in messageOptions" :key="index"
                        @click="messageOptionClick(item.chatGuidance)">
                        {{ item.chatGuidance }}
                      </div>
                    </div>
                    <el-dropdown v-if="index != 0" class="messageDropdown" @command="handleCommand4($event, item, index)"
                      placement="top-end">
                      <el-button class="messageButton" icon="el-icon-more" circle></el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">编辑</el-dropdown-item>
                        <el-dropdown-item command="2">删除</el-dropdown-item>
                        <el-dropdown-item v-if="index == returnMessage.length - 1" command="3">重新生成</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <div :ref="`messageEdit${index}`" v-show="item.edit"
                    class="message messageEdit mt-4 ml-4 p-4 rounded-r-md rounded-bl-md text-xs relative">
                    <el-input class="eidtTextarea" :ref="`messageEditInput${index}`" type="textarea" resize="none"
                      v-model="item.editContent">
                    </el-input>
                    <div class="flex justify-end mt-2">
                      <el-button @click="editCancel(item, index)">取消</el-button>
                      <el-button @click="editSave(item, index)">保存</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 用户发送的信息 -->
              <div v-if="item.role == 'user'" class="mb-4 flex me" :key="index">
                <div class="pt-2 photo">
                  <img :src="$store.state.user.avatar" class="rounded-full w-14 h-14 object-cover"
                    @error="$userPohotoError" />
                </div>
                <div class="messageRight">
                  <div :ref="`message${index}`" v-show="!item.edit"
                    class="messageUser mr-4 mt-4 p-4 rounded-l-md rounded-br-md text-xs relative">
                    {{ item.content }}
                    <el-dropdown v-if="index != 0" class="messageDropdown" @command="handleCommand4($event, item, index)"
                      placement="top-end">
                      <el-button class="messageButton" icon="el-icon-more" circle></el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">编辑</el-dropdown-item>
                        <el-dropdown-item command="2">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <div :ref="`messageEdit${index}`" v-show="item.edit"
                    class="messageUser messageEdit mt-4 ml-4 p-4 rounded-r-md rounded-bl-md text-xs relative">
                    <el-input class="eidtTextarea" :ref="`messageEditInput${index}`" type="textarea" resize="none"
                      v-model="item.editContent">
                    </el-input>
                    <div class="flex justify-end mt-2">
                      <el-button @click="editCancel(item, index)">取消</el-button>
                      <el-button @click="editSave(item, index)">保存</el-button>
                    </div>
                  </div>
                </div>

              </div>
            </template>
          </div>

          <div class="inputBox absolute left-2 right-2 bottom-4 " @click="inputBoxClick">
            <input v-if="canChat" ref="input" type="text" placeholder="输入消息..."
              class="w-full flex-1 py-2 px-4 rounded-l-lg text-sm  focus:outline-none" v-model="content"
              @keydown="Enterkey" />
            <div class="flex pt-6 justify-between" v-if="canChat" style="height: 70px;">
              <div class="tools w-36 flex justify-between">
                <i class="el-icon-setting text-2xl cursor-pointer" @click="showConfig = true"></i>
                <!-- <i class="el-icon-picture-outline text-2xl cursor-pointer"></i> -->
                <!-- <i class="el-icon-s-opportunity text-2xl cursor-pointer"></i> -->
              </div>
              <el-button type="text" :disabled="!content" :loading="notChatSend" @click.prevent="getStreamChatWithWeb"
                class="px-4 rounded-r-lg text-sm text-gray-400" :class="content && 'planeColor'">
                <v-icon v-show="!notChatSend" name="paper-plane" scale="1.5" />
              </el-button>
            </div>
            <div v-if="!canChat" class=" flex w-full text-sm text-gray-400">
              当前角色或场景已被设定为私有或被创作者删除，但你任然可以查看历史对话。
            </div>
          </div>
        </div>
      </div>
      <div v-show="showNodata" class=" w-full h-full flex flex-col justify-center items-center">
        <el-empty description="暂无聊天记录，点击按钮并探索新角色。"></el-empty>
        <el-button type="primary" round @click="$router.push('/')">寻找一个角色</el-button>
      </div>
      <el-dialog title="配置" :visible.sync="showConfig" width="500px">
        <!-- <p class="text-base">身分</p>
        <p class="text-sm text-gray-400">选择你和角色聊天的身份</p>
        <div class="flex items-start py-3 border-b border-gray-200">
          <el-radio-group class="radio" v-model="configForm.radio1">
            <el-radio-button label="上海"></el-radio-button>
          </el-radio-group>
          <el-button>
            <i class="el-icon-sort" style="transform: rotate(90deg);"></i>
          </el-button>
        </div> -->
        <p class="text-base mt-3">选择模型</p>
        <p class="text-sm text-gray-400">每个模型可能有不同的效果，仅对当前对话有影响</p>
        <div class="flex items-start py-3 border-b border-gray-200">
          <el-radio-group class="radio" v-model="configForm.radio2">
            <el-radio-button v-for="(item, index) in modelList" :key="index" :label="item.id">{{ item.model
            }}</el-radio-button>
          </el-radio-group>
        </div>
        <!-- <p class="text-base mt-3">角色语言</p>
        <p class="text-sm text-gray-400">请选择角色的回复语言</p>
        <div class="flex items-start py-3">
          <el-radio-group class="radio" v-model="configForm.radio3">
            <el-radio-button label="自动"></el-radio-button>
            <el-radio-button label="简体中文"></el-radio-button>
            <el-radio-button label="繁體中文"></el-radio-button>
            <el-radio-button label="English"></el-radio-button>
            <el-radio-button label="Español"></el-radio-button>
          </el-radio-group>
        </div> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="showConfig = false">取 消</el-button>
          <el-button type="primary" @click="configConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  streamChatWithWebApi,
  getGuidanceApi,
  getModelListApi,
  addChatApi,
  getChatCharacterRecordsApi,
  getChatRecordApi,
  updateTitleApi,
  clearRecordApi,
  queryVoiceListApi,
  updateRecordApi,
  deleteRecordApi
} from "@/api/chat.js"
import { detailApi } from "@/api/detail.js"
import { queryUserBalanceApi } from "@/api/user.js"
import { Message, MessageBox, Notification, Loading } from 'element-ui'
import 'vue-awesome/icons/paper-plane'
import 'vue-awesome/icons/fire'

export default {
  components: {
  },
  data() {
    return {
      // 对话请求超时参数
      timeOut: null,
      // 聊天等待
      chatLoading: false,
      // 是否全屏
      fullScreen: false,
      // 角色所有聊天列表
      allRecords: [],
      // 聊天记录id
      recordId: null,
      // 选中的角色聊天记录
      historyRes: [],
      recordsIndex: null,
      showDetail: true,
      showConfig: false,
      showInfo: 0,
      messageOptions: [],
      info: {},
      messageLoading: false,
      returnMessage: [],
      content: '',
      audioPlayIndex: null,
      configForm: {
        radio1: null,
        radio2: null,
        radio3: null,
      },
      // 对话接口是否返回错误状态
      resError: false,
      // 模型列表
      modelList: [],
      setting: {
        value1: false,
        value2: false,
      },
      //音频相关↓
      //音频地址
      audioUrl: '',
      audioUrlArr: [],
      audioUrlArrIndx: 0,
      videoLoop: null,
      videoLoopTime: 0,
      loopPlay: false,
      //场景下拉菜单
      dropdown3Show: false,
      // 场景对话相关
      sceneId: null,
      sceneInfo: {},
    }
  },
  computed: {
    canChat() {
      console.log(this.info, 'this.info');
      if (!this.sceneId) {
        if (this.info.isDelete == 1) {
          console.log(1);
          return false
        } else {
          console.log(2);
          return true
        }
      } else {
        if (this.sceneInfo.isDelete == 1) {
          return false
        } else {
          return true
        }
      }
    },
    notChatSend() {
      console.log(this.audioPlayIndex, 'this.audioPlayIndex>>>>>>>>>>>');
      return this.chatLoading != false || this.audioPlayIndex != null
    },
    showNodata() {
      return this.allRecords.length == 0 && !this.$route.query.characterId
    }
  },
  mounted() {
    this.init()
    this.$nextTick(() => {
      console.log(this.$refs.audio.paused, '>>>>>>>>>>>>>');
    })
  },
  watch: {
    '$route.query.characterId': {
      handler(newVal, lodVal) {
        console.log(newVal, 'newVal');
        if (!newVal) {
          this.$nextTick(() => {
            this.showInfoChange(0)
          })
        }
      },
      deep: true
    },
    returnMessage: {
      handler(newVal, lodVal) {
        this.$nextTick(() => {
          let messages = this.$refs.messages
          messages.scrollTop = messages.scrollHeight
        })
      },
      deep: true
    }
  },
  methods: {
    async init() {
      // 获取模型列表
      this.getModelList()
      // 获取用户所有聊天记录
      await this.getChatCharacterRecords()
      // 如果用角色id获取角色详情
      if (this.$route.query.characterId) {
        if (this.$route.query.sceneId) {
          this.sceneId = this.$route.query.sceneId
        }
        this.showInfoChange(1)
        await this.getDetail(this.$route.query.characterId)
      } else {
        this.allRecords[0].open = true
        await this.getDetail(this.allRecords[0].id)
      }
      // 查找当前角色是否有对话记录
      // this.searchHistory(this.info.id)
    },
    // 左侧面板变化
    showInfoChange(index) {
      this.fullScreen = false
      this.showInfo = index
    },
    // 全屏
    clickFullScreen() {
      this.fullScreen = !this.fullScreen
    },
    // 点击聊天记录切换聊天
    async clickDialogue(value1, value2, index) {
      console.log(value2, 'value2');
      let _this = this
      this.audioUrl = ""
      this.messageOptions = []
      this.returnMessage = []
      if (this.$route.query.characterId) {
        this.$route.query.characterId = value1.id
      }
      if (!value2) {
        return
      }
      // 如果点击的是场景聊天
      if (value2.sceneId) {
        this.sceneId = value2.sceneId
        await this.getDetail(value1.id)
        // 从角色详情中获取场景列表
        let sceneList = this.info.sceneList
        // 获取当前聊天对应的场景
        for (let i = 0; i < sceneList.length; i++) {
          const element = sceneList[i];
          if (element.sceneId == value2.sceneId) {
            _this.sceneInfo = element
          }
        }
      } else {
        this.sceneId = null
        this.sceneInfo = {}
        await this.getDetail(value1.id)
      }

      this.recordId = value2.id
      this.getChatRecord(value2.id)
      this.recordsIndex = index
    },
    // 场景下拉菜单
    handleCommand3(value) {
      if (value == 1) {
        this.showInfoChange(2)
      } else if (value == 2) {
        // 情况聊天记录
        this.returnMessage = []
        // 新建场景对话
        this.newStart()
        // 增加开场白
        this.returnMessage.push({
          role: 'assistant',
          content: this.sceneInfo.sceneWelcome
        })
      } else if (value == 3) {
        // 回到常规对话
        // 遍历当前聊天记录是否有常规对话
        let messages = null
        for (let i = 0; i < this.allRecords.length; i++) {
          const element = this.allRecords[i];
          if (element.id == this.info.id) {
            messages = element
          }
        }
        console.log(messages, 'messages');
        let flag = false
        for (let i = 0; i < messages.chatCharacterList.length; i++) {
          const element = messages.chatCharacterList[i];
          console.log(element, 'element');
          if (!element.sceneId) {
            flag = true
            this.clickDialogue(messages, element, i)
            break
          }
        }
        // 如果聊天记录里没有常规对话，则新增一个常规对话
        if (!flag) {
          this.sceneId = null
          this.sceneInfo = {}
          this.newStart()
        }
      }
    },
    // 聊天记录列表-角色下拉菜单
    handleCommand2(value, value1) {
      if (value == 2) {
        this.$confirm('此操作将永久删除该角色所有聊天记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.clearRecord(value1)
        })
      }
    },
    // 聊天记录列表-角色-聊天记录下拉菜单
    handleCommand(value, value1, value2) {
      console.log(value, 'value');
      if (value == 1) {
        this.editDialogueTitle(value1, value2)
      } else if (value == 2) {
        this.$confirm('此操作将永久删除该聊天记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.clearRecord(value1, value2)
        })
      }
    },
    // 聊天记录操作相关↓
    handleCommand4(value1, value2, value3) {
      console.log(value1, 'value1');
      console.log(value2, 'value2');
      if (value1 == 1) {
        // 编辑
        let height = this.$refs[`message${value3}`][0].offsetHeight
        let width = this.$refs[`message${value3}`][0].offsetWidth

        value2.edit = true
        this.$nextTick(() => {
          this.$refs[`messageEditInput${value3}`][0].$el.children[0].style.height = height + 'px'
          this.$refs[`messageEdit${value3}`][0].style.width = width + 'px'
        })
      } else if (value1 == 2) {
        // 删除
        this.$confirm('此操作将永久删除该聊天记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRecord(value2, value3)
        })
      } else if (value1 == 3) {
        // 重新生成最后一句对话
        this.resetChat(value2, value3)
      }
    },
    // 重新生成最后一条聊天记录
    resetChat(value, index) {
      let params = {
        recordId: value.id,
        role: value.role,
      }
      deleteRecordApi(params).then(res => {
        this.returnMessage.splice(index, 1)
        this.getStreamChatWithWeb()
      })
    },
    // 编辑单条聊天记录-取消
    editCancel(value, index) {
      value.edit = false
      value.editContent = value.content
    },
    // 编辑单条聊天记录-保存
    editSave(value, index) {
      console.log(value, 'value');
      let params = {
        content: value.editContent,
        recordId: value.id,
        role: value.role,
      }
      updateRecordApi(params).then(res => {
        console.log(res, 'ressss');
        value.edit = false
        this.getChatRecord(this.recordId)
      })

    },
    // 删除单条聊天记录
    deleteRecord(value, index) {
      let params = {
        recordId: value.id,
        role: value.role,
      }
      deleteRecordApi(params).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getChatRecord(this.recordId)
      })
    },

    // 聊天记录新增对话
    async newStart_juese(value) {
      console.log(value, 'value');
      this.audioUrl = ""
      this.sceneId = null
      this.sceneInfo = {}
      this.messageOptions = []
      this.returnMessage = []
      // 点击聊天记录切换聊天
      if (this.$route.query.characterId) {
        this.$route.query.characterId = value.id
      }
      await this.getDetail(value.id)
      this.recordId = await this.addChat()
      for (let i = 0; i < this.allRecords.length; i++) {
        const element = this.allRecords[i];
        if (element.id == this.info.id) {
          element.chatCharacterList.push({
            chatTitle: "常规聊天",
            createTime: '',
            id: this.recordId
          })
          this.recordsIndex = element.chatCharacterList.length - 1
        }
      }
    },
    // 修改聊天记录标题
    editDialogueTitle(value1, value2) {
      this.$prompt('新标题名称', '修改标题', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        let params = {
          chatTitle: value,
          id: value2.id
        }
        updateTitleApi(params).then(res => {
          console.log(res, '修改标题');
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.getChatCharacterRecords()
        })
      })
    },
    clearRecord(value1, value2) {
      let params = {
        characterId: value1.id,
      }
      if (value2) {
        params.recordId = value2.id
      }
      clearRecordApi(params).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getChatCharacterRecords()
      })
    },
    async getChatRecord(recordId) {
      let params = {
        characterId: this.info.id,
        recordId: recordId
      }
      getChatRecordApi(params).then(res => {
        console.log(res, '查询到的聊天记录');
        let array = res.data
        // this.returnMessage
        this.historyRes = res.data
        if (this.returnMessage.length > 1) {
          this.returnMessage = this.returnMessage.splice(0, 1)
        }
        for (let i = 0; i < array.length; i++) {
          const element = array[i];
          let history = JSON.parse(element.history)
          history.map(item => {
            item.id = element.id
            item.uuid = element.uuid
            item.edit = false
            item.editContent = item.content
            if (item.role == 'assistant') {
              item.voiceFilePosition = element.voiceFilePosition
            }
          })
          this.returnMessage = [...this.returnMessage, ...history]
        }
        this.configForm.radio2 = this.modelList[0].id

        this.modelList.map(item => {
          if (item.id == array[array.length - 1].modelId) {
            this.configForm.radio2 = item.id
          }
        })
      })
    },
    searchHistory(characterId) {
      // 查看对话记录是否有选中的角色
      // console.log('查看对话记录是否有选中的角色');
      let flg = false
      for (let i = 0; i < this.allRecords.length; i++) {
        const element = this.allRecords[i];
        // 如果有则选中角色的最新一条记录并获取对话聊天记录
        if (element.id == characterId) {
          console.log(element, '查看对话记录是否有选中的角色');
          flg = true
          element.open = true
          // 二级对话判断当前是普通对话还是场景对话
          // 取对应的最后一条消息记录
          let chatCharacterList = element.chatCharacterList
          let chatCharacter = null
          let index = null
          for (let i = 0; i < chatCharacterList.length; i++) {
            const element2 = chatCharacterList[i];
            if (this.$route.query.sceneId == element2.sceneId) {
              chatCharacter = element2
              index = i
            } else if (!this.$route.query.sceneId && !element2.sceneId) {
              chatCharacter = element2
              index = i
            }
          }
          // 如果有聊天记录则点击
          if (chatCharacter) {
            this.clickDialogue(element, chatCharacter, index)
          } else {
            // 如果没有场景聊天记录则新增场景聊天
            // 从角色详情中获取场景列表
            let sceneList = this.info.sceneList
            // 获取当前聊天对应的场景
            for (let i = 0; i < sceneList.length; i++) {
              const element = sceneList[i];
              if (element.sceneId == this.$route.query.sceneId) {
                this.sceneInfo = element
              }
            }
          }
          // this.recordsIndex = element.chatCharacterList.length - 1
          // let recordId = element.chatCharacterList[element.chatCharacterList.length - 1].id
          // this.recordId = recordId
          // this.getChatRecord(recordId)
        }
      }
      // 如果没有聊天记录，则增加开场聊天引导
      if (!flg) {
        this.getGuidance(this.info.id)
      }
    },
    async getChatCharacterRecords() {
      let res = await getChatCharacterRecordsApi()
      console.log(res, '聊天记录');
      if (res.data) {
        for (let i = 0; i < res.data.length; i++) {
          const element = res.data[i];
          if (this.info.id == element.id) {
            element.open = true
          } else {
            element.open = false
          }
        }
        this.allRecords = res.data
      }
    },
    // 新增对话记录
    async addChat() {
      let params = {
        characterId: this.info.id,
        chatTitle: ""
      }
      if (this.sceneId) {
        params.sceneId = this.sceneId
      }
      let res = await addChatApi(params)
      console.log(res, '新增对话记录');
      return res.data
    },
    getModelList() {
      getModelListApi().then(res => {
        console.log(res, '模型列表');
        this.modelList = res.data
      })
    },
    inputBoxClick() {
      this.$refs.input.focus()
    },
    async getDetail(id) {
      let res = await detailApi(id)
      console.log(res, '角色详情');
      this.info = res.data
      // 模型选中角色默认模型
      this.configForm.radio2 = this.info.modelId
      // 如果用户有设置过模型使用用户设置模型
      let userConfig = JSON.parse(Cookies.get(`userConfig_${this.$store.state.user.userId}_${this.info.id}`))
      if (userConfig.radio2) {
        this.configForm.radio2 = userConfig.radio2
      }
      // let HistoryMessage = JSON.parse(localStorage.getItem(`[userId:${123},aiId:${this.info.id}]`));
      // if (HistoryMessage) {
      //   this.returnMessage = HistoryMessage
      // } else {
      //   this.returnMessage.push({
      //     role: 'assistant',
      //     content: this.info.firstContent
      //   })
      //   localStorage.setItem(`[userId:${123},aiId:${this.info.id}]`, JSON.stringify(this.returnMessage));
      // }
      if (this.sceneId) {
        console.log(this.sceneId);
        let sceneList = this.info.sceneList
        for (let i = 0; i < sceneList.length; i++) {
          const element = sceneList[i];
          if (element.sceneId == this.sceneId) {
            this.sceneInfo = element
            this.configForm.radio2 = element.modelId
            this.returnMessage.push({
              role: 'assistant',
              content: element.sceneWelcome
            })
          }
        }
      } else {
        this.returnMessage.push({
          role: 'assistant',
          content: this.info.firstContent
        })
      }
    },
    getGuidance(id) {
      getGuidanceApi(id).then(res => {
        console.log(res, '聊天引导');
        this.messageOptions = res.data
      })
    },
    goBack() {
      this.$router.back()
    },
    async newStart() {
      // 新业务，创建一个新的对话记录
      this.recordId = await this.addChat()
      for (let i = 0; i < this.allRecords.length; i++) {
        const element = this.allRecords[i];
        if (element.id == this.info.id) {
          if (this.sceneId) {
            element.chatCharacterList.push({
              chatTitle: "场景聊天",
              createTime: '',
              id: this.recordId,
              sceneIcon: true
            })
          } else {
            element.chatCharacterList.push({
              chatTitle: "常规聊天",
              createTime: '',
              id: this.recordId
            })
          }
          this.recordsIndex = element.chatCharacterList.length - 1
        }
      }

      this.returnMessage = []
      this.getDetail(this.info.id)
      // 废弃》》
      // 清空历史数据
      // localStorage.removeItem(`[userId:${123},aiId:${this.info.id}]`);
      // this.returnMessage = []
      // this.getDetail(this.info.id)
    },
    Enterkey(e) {
      if (e.keyCode == 13) {
        console.log(this.notChatSend, 'this.notChatSend');
        if (this.notChatSend) {
          return
        }
        if (!this.content) {
          return
        }
        this.getStreamChatWithWeb()
      }
    },
    // 设置用户配置
    configConfirm() {
      console.log(this.info, 'this.info');
      // 在浏览器缓存用户的配置
      Cookies.set(`userConfig_${this.$store.state.user.userId}_${this.info.id}`, JSON.stringify(this.configForm))
      this.showConfig = false
    },
    // 前往创建场景
    toCreateScene() {
      this.$router.push({
        name: 'CreateScene',
        query: {
          characterId: this.info.id,
        }
      })
    },
    async getStreamChatWithWeb_old() {
      this.messageLoading = true
      if (!this.content) {
        return
      }
      this.returnMessage.push({
        role: 'user',
        content: this.content
      })
      let HistoryMessage = JSON.parse(localStorage.getItem(`[userId:${123},aiId:${this.info.id}]`));
      // 历史记录取最新的20条传给后端
      if (HistoryMessage && HistoryMessage.length > 20) {
        HistoryMessage = HistoryMessage.slice(HistoryMessage.length - 1, 20)
      }
      let params = {
        historyMessage: HistoryMessage || [],
        characterId: this.info.id,
        prompt: JSON.parse(JSON.stringify(this.content))
      }
      // 清空输入框的值
      this.content = ''
      // 新增一条ai信息
      this.returnMessage.push({
        role: 'assistant',
        content: ''
      })
      let res = await streamChatWithWebApi(params)
      console.log(res.data.message.content, 'res');
      let content = res.data.message.content
      let index = 0
      let xing = 1
      let messageInterval = setInterval(() => {
        if (index > content.length - 1) {
          console.log('结束');
          // 消息全部显示后存到历史localStorage
          let HistoryMessage = []
          // 历史只存100条，长度超出截取最新的
          if (this.returnMessage.length > 100) {
            HistoryMessage = JSON.stringify(this.returnMessage.slice(this.returnMessage.length - 100, 100))
          } else {
            HistoryMessage = JSON.stringify(this.returnMessage)
          }
          localStorage.setItem(`[userId:${123},aiId:${this.info.id}]`, HistoryMessage);

          clearInterval(messageInterval)
          return
        }
        console.log(content[index], 'content[index]');
        if (content[index] == "*") {
          if (xing == 1) {
            xing = 2
            this.returnMessage[this.returnMessage.length - 1].content += "("
          } else if (xing == 2) {
            xing = 1
            this.returnMessage[this.returnMessage.length - 1].content += ")"
          }
        } else {
          this.returnMessage[this.returnMessage.length - 1].content += content[index]
        }
        index += 1
      }, 50)
    },
    async getStreamChatWithWeb() {
      this.audioUrl = []
      this.audioUrlArrIndx = 0
      this.textCache = ''
      this.resError = false
      this.messageLoading = true
      this.chatLoading = true
      // 初始化定时器和audio的状态
      if (this.videoLoop) {
        clearInterval(this.videoLoop)
        this.videoLoop = null
        this.audioUrl = ''
        this.$refs.audio.currentTime = 0;
        this.$refs.audio.pause()
      }
      // 如果没有对话记录id，新增对话记录
      if (!this.recordId) {
        this.recordId = await this.addChat()
      }
      if (this.content) {
        this.returnMessage.push({
          role: 'user',
          content: this.content
        })
      }
      let HistoryMessage = JSON.parse(JSON.stringify(this.returnMessage))
      console.log(HistoryMessage, 'HistoryMessage1');
      HistoryMessage = HistoryMessage.splice(1, HistoryMessage.length)
      console.log(HistoryMessage, 'HistoryMessage2');
      // 历史记录取最新的20条传给后端
      if (HistoryMessage && HistoryMessage.length > 20) {
        HistoryMessage = HistoryMessage.slice(HistoryMessage.length - 1, 20)
      }
      let params = {
        historyMessage: HistoryMessage,
        characterId: this.info.id,
        prompt: this.content,
        modelId: this.configForm.radio2,
        recordId: this.recordId,
      }
      // 如果当前是场景对话则需要传sceneId
      if (this.sceneId) {
        params.sceneId = this.sceneId
      }
      // 新增一条ai信息
      this.returnMessage.push({
        role: 'assistant',
        content: '',
        voiceFilePosition: '',
      })

      // 清空输入框的值
      this.content = ''

      let res = await streamChatWithWebApi(params)
      console.log(res, 'res');
      this.messageLoading = false

      if (res.status != 200) {
        this.$message.error(res.statusText)
        this.returnMessage.splice(this.returnMessage.length - 1, 2)
        this.chatLoading = false
        return
      }
      const reader = res.body.getReader()
      const decoder = new TextDecoder()
      while (1) {
        const { done, value } = await reader.read()
        // console.log(done, 'done');
        if (done) {
          console.log(value, '结束value');
          this.chatLoading = false
          // if (typeof(value) == "undefined") {
          //   this.$message.error('错误')
          //   this.returnMessage.splice(this.returnMessage.length - 1, 1)
          // }
          // 每次对话完刷新聊天记录
          this.getChatCharacterRecords()
          let params = {
            characterId: this.info.id,
            recordId: this.recordId
          }
          let historyRes = await getChatRecordApi(params)
          this.historyRes = historyRes.data
          // 如果开启自动播放，则查询并播放语音
          // this.audioUrl = ""
          // if (!this.resError) {

          // }
          console.log('结束');
          break;
        }

        //txt就是一个一个的字 然后添加到页面上就可以了
        const txt = decoder.decode(value).split('data:')
        // 超时处理
        if (this.timeOut) {
          clearTimeout(this.timeOut)
          this.timeOut = setTimeout(() => {
            this.returnMessage[this.returnMessage.length - 1].content = 'AI智能累得打起了小盹儿，咱们让他缓一缓，再来试试！'
            this.chatLoading = false
          }, 10000)
        }
        // const txt = decoder.decode(value)
        this.addMessage(txt)
        // let data = JSON.parse(txt).message.content
        // console.log(txt, 'txt');
        // if (this.isJSON(txt) && JSON.parse(txt).code != 200) {
        //   let data = JSON.parse(txt)
        //   this.$message.error(data.msg)
        //   this.returnMessage.splice(this.returnMessage.length - 1, 1)
        //   break;
        // }
      }
    },
    addMessage(value) {
      // console.log(value, 'value');
      for (let i = 0; i < value.length; i++) {
        const element = value[i];

        if (this.isJSON(element)) {
          let value = JSON.parse(element)
          if (value.code == 401) {
            this.returnMessage.splice(this.returnMessage.length - 1, 1)
            this.noLogin(element)
            this.chatLoading = false
            break;
          }
          if (value.code == 500) {
            console.log(value, 'JSON.parse(element)');
            this.returnMessage.splice(this.returnMessage.length - 2, 2)
            this.$message.error(value.content || '系统错误请联系管理员')
            this.resError = true
            this.chatLoading = false
            break;
          }
          // 获取语音id
          if (value.code == -1) {
            this.returnMessage[this.returnMessage.length - 1].uuid = value.content
            // 如果开启了自动播放开始轮巡查询语音
            if (this.setting.value1) {
              this.audioUrlArrIndx = 0
              this.videoLoopTime = 0
              this.audioUrlArr = []
              this.loopPlay = false
              this.audioPlayIndex = this.returnMessage.length - 1
              this.loopGetVoice(value.content, this.returnMessage.length - 1)
            }
            break;
          }
          if (!value.done) {
            let txt = value.content
            this.returnMessage[this.returnMessage.length - 1].content += txt
          } else {
            // 对话流结束
            // 临时插入的ai对话记录和用户记录插入聊天id
            this.returnMessage[this.returnMessage.length - 1].id = value.content
            this.returnMessage[this.returnMessage.length - 2].id = value.content
          }
        }
      }
    },
    noLogin(value) {
      let _this = this
      MessageBox.confirm(
        value.content,
        "系统提示",
        {
          confirmButtonText: "前往登录",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // isRelogin.show = false;
          this.$store.dispatch("LogOut").then(() => {
            // location.href = "/";

            _this.$refs.Header.showLogin()
          });
        })
        .catch(() => {
          // isRelogin.show = false;
        });
    },
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          JSON.parse(str);
          return true;
        } catch (e) {
          // console.log(e);
          return false;
        }
      }
    },
    messageOptionClick(value) {
      this.content = value
      this.getStreamChatWithWeb()
    },
    // 播放聊天语音
    initAudio(index) {
      // 从聊天记录获取id
      console.log(this.returnMessage[index], 'swssssssss');
      let id = this.returnMessage[index].id
      let history = this.historyRes.map((item) => {
        if (item.id == id) {
          return item
        }
      })
      console.log(history, 'history');
      return

      this.loopGetVoice(history.id, index)
    },
    playAudio(index) {
      if (index) {
        this.audioPlayIndex = index
      }
      // this.audioUrlArrIndx = 0
      console.log(this.audioUrlArrIndx, 'this.audioUrlArrIndx');
      console.log(this.audioUrlArr, 'this.audioUrlArr');
      // console.log(audioUrlArr[this.audioUrlArrIndx].voiceAddress, 'audioUrlArr[this.audioUrlArrIndx].voiceAddress');
      // 如果当前播放的语音地址为空，则等待2秒后重新获取
      if (!this.audioUrlArr[this.audioUrlArrIndx].voiceAddress && this.videoLoopTime <= 50) {
        setTimeout(() => {
          this.playAudio(index)
        }, 2000)
        return
      }
      // 如果当前播放的语音地址为false，则跳过当前语音
      if (this.audioUrlArr[this.audioUrlArrIndx].voiceAddress == 'false' && this.audioUrlArrIndx < this.audioUrlArr.length - 1) {
        this.audioUrlArrIndx += 1
        this.playAudio(index)
        return
      } else if (this.audioUrlArrIndx > this.audioUrlArr.length - 1) {
        this.audioUrl = ''
        this.audioUrlArrIndx = 0
        this.videoLoopTime = 0
        this.audioUrlArr = []
        return
      }
      this.audioUrl = this.audioUrlArr[this.audioUrlArrIndx].voiceAddress

      setTimeout(() => {
        if (this.audioUrl && this.audioUrl != 'false') {
          this.$refs.audio.play()
        } else {
          this.audioClose()
        }
      }, 1000)
    },
    async historyGetVoice(value, index) {
      console.log(value, 'value');
      if (!value.uuid) {
        return
      }
      let params = {
        uuid: value.uuid
      }
      let fileRes = await queryVoiceListApi(params)
      console.log(fileRes.data, 'file>>>');
      this.audioUrlArr = fileRes.data.voices
      this.audioUrlArrIndx = 0
      this.videoLoopTime = 0
      this.loopPlay = false
      this.playAudio(index)
    },
    async loopGetVoice(id, index) {
      this.videoLoopTime += 1
      // 获取语音文件
      let params = {
        uuid: id
      }
      let fileRes = await queryVoiceListApi(params)
      console.log(fileRes.data, 'file>>>');
      let voices = fileRes.data.voices
      let _continue = fileRes.data.continue
      this.apiHaveVideo = _continue
      // 判断语音文件是否获取完毕
      let trueLength = 0
      for (let i = 0; i < voices.length; i++) {
        const element = voices[i];
        if (element.voiceAddress) {
          trueLength += 1
        }
      }
      if (!_continue && trueLength == voices.length) {
        if (this.videoLoop) {
          clearTimeout(this.videoLoop)
          this.videoLoop = null
        }
        // this.returnMessage[index].voiceFilePosition = fileRes.data.voiceFilePosition
        // 有语音文件则开始播放
        if (voices.length > 0) {
          this.audioUrlArr = voices
          console.log(this.audioUrlArr, '进入播放流程1');
          if (this.$refs.audio.paused || this.audioUrlArrIndx > this.audioUrlArr.length - 1) {
            if (this.loopPlay == false) {
              this.playAudio(index)
              this.loopPlay = true
            }
          }
        }
      } else {
        if (voices.length > 0) {
          this.audioUrlArr = voices
          console.log(this.audioUrlArr, '进入播放流程2');
          if (this.$refs.audio.paused || this.audioUrlArrIndx > this.audioUrlArr.length - 1) {
            if (this.loopPlay == false) {
              this.playAudio(index)
              this.loopPlay = true
            }
          }
        }
        // 没有语音文件则开启定时器每两秒查询一次
        if (this.videoLoopTime > 50) {
          // 如果调用次数超过30次则停止
          return
        }
        this.videoLoop = setTimeout(() => {
          this.loopGetVoice(id, index)
        }, 2000)
      }
    },
    audioEnd() {
      this.audioUrlArrIndx += 1
      console.log(this.audioUrlArrIndx, 'audioUrlArrIndx');
      if (this.audioUrlArrIndx < this.audioUrlArr.length && this.videoLoopTime <= 50) {
        // 如果当前播放的语音地址为空，则等待2秒后重新获取
        if (!this.audioUrlArr[this.audioUrlArrIndx].voiceAddress) {
          setTimeout(() => {
            this.playAudio()
          }, 2000)
          return
        }
        // 如果当前播放的语音地址为false，则跳过当前语音
        if (this.audioUrlArr[this.audioUrlArrIndx].voiceAddress == 'false' && this.audioUrlArrIndx < this.audioUrlArr.length - 1) {
          this.audioUrlArrIndx += 1
          this.playAudio()
          return
        }
        this.audioUrl = this.audioUrlArr[this.audioUrlArrIndx].voiceAddress
        setTimeout(() => {
          if (this.audioUrl && this.audioUrl != 'false') {
            this.$refs.audio.play()
          } else {
            this.audioClose()
          }
        }, 100)
      } else {
        this.audioClose()
      }
    },
    audioClose() {
      this.audioUrlArrIndx = 0
      this.audioPlayIndex = null
    },
    ChangeSettingValue1(value) {
      console.log(value, 'value');
      if (value) {
        queryUserBalanceApi().then(res => {
          console.log(res, '用户余额');
          if (res.data <= 0) {
            this.setting.value1 = false
            this.$message({
              message: '余额不足，无法开启次功能',
              type: 'error'
            });
          }
        })
      }
    },
    // 场景业务相关↓
    async sceneChange(item) {
      console.log(item, 'item');
      this.$message({
        message: `已进入场景${item.sceneName}`,
        type: 'success'
      });
      // 当用户选中场景
      this.sceneInfo = item
      // 切换当前场景id
      this.sceneId = item.sceneId
      // 情况聊天记录
      this.returnMessage = []
      // 新建场景对话
      this.newStart()
      // 增加开场白
      // this.returnMessage.push({
      //   role: 'assistant',
      //   content: item.sceneWelcome
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.fullScreenButton {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-50%) translateY(-50%);
  z-index: 50;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}

.chat {
  height: 100vh;
}

.leftInfo {
  width: 375px;
  height: 100%;
  padding: 32px 24px;
  overflow-y: auto;

  >.history {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    >.historyBox {
      padding: 8px;
      border-radius: 15px;
      border: solid 1px var(--color1);
      margin-bottom: 10px;

      .top {
        >.photo {
          >img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
          }
        }

        >.info {
          width: calc(100% - 60px - 16px);

          >div {
            overflow: hidden;
            /* 确保超出容器的文本被裁剪 */
            white-space: nowrap;
            /* 确保文本在一行内显示 */
            text-overflow: ellipsis;
            /* 使用省略号表示文本超出 */
          }
        }
      }
    }
  }

  >.chatInfo {
    overflow: hidden;

    .chatInfo_photo {
      >img {}
    }

    .hot {
      color: #f03d3d;
      background: #fff1f1;
    }

    .tags {
      margin-top: 10px;

      .tag {
        display: inline-flex;
        justify-content: center;
        padding: 5px 10px;
        border-radius: 4px;
        border: solid 1px var(--color1);
        margin-right: 5px;
      }
    }
  }
}

.content {
  z-index: 40;
  position: absolute;
  right: 0;
  background-repeat: no-repeat;
  // background-attachment: fixed;
  background-size: cover;
  background-color: #fff;
  background-position: center center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: calc(100% - 375px);
  border-left: solid 1px var(--color1);
  transition: width 0.5s ease;

  >.chat-box {
    position: relative;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 75%, rgba(0, 0, 0, 0.4) 100%);
    background-size: auto;
    // border: 1px solid #635677 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 55px 25px 170px 25px;

    >.chatBoxTitle {
      color: #fff;
      margin-top: 15px;
      width: calc(100% - 50px);
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  >.mask {
    background: rgba(0, 0, 0, 0.5);
  }
}

.contentFull {
  width: 100%;
}

.historyActive {
  background: var(--color1);
}

.dialogue:hover {
  background: var(--color1);

  .dialogueIconBg {
    display: flex;
  }
}

.dialogueIconBg {
  display: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, var(--color1) 50%, var(--color1) 100%);
}

.messages {
  height: calc(100% - 68px);
  overflow-y: auto;
}

.messages::-webkit-scrollbar {
  width: 0px;
}

.messageRight {
  max-width: calc(100% - 72px);
  // min-width: 400px;
}

.yyPlayBg {
  // background: rgba(103, 103, 168, 1);
  // border-radius: 999px;
  // position: absolute;

  .icon {
    height: 24px;
    width: 96px;
  }
}

.yyPlay {
  width: 15px;
  height: 15px;
  // background: url('../../assets/images/播放/yyPlay.gif') no-repeat;
  // background-size: 170% 170%;
  // background-position: 50% 50%;
  // animation: heart-burst steps(28) 0.9s infinite both;
  // animation-play-state: paused;
  // height: 50px;
  // background: #fff;
}

.message {
  // background: #ffffff0f;
  // border: 1px solid #5b5b5e;
  background: var(--bg-color3);
  color: #fff;
  font-size: 14px;
  // flex: 1;

}

.messageUser {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color1);
  // max-width: calc(100% - 72px);
  font-size: 14px;
  width: auto;
  // min-width: 400px;
}

.photo {
  width: 56px;
}

.me {
  flex-direction: row-reverse;
}

.loadingMessage {
  position: relative;
  // display: flex;
  // justify-content: center;
  width: 120px;
  height: 64px;
}

.messageOptions {
  // margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  min-width: 400px;

  .option {
    background: #ade4ff32;
    // border: 1px solid #5b5b5e;
    border-radius: 10px;
    padding: 10px;
    width: 40%;
    height: 50px;
    margin-top: 10px;
    cursor: pointer;
  }
}

.inputBox {
  border: solid 1px var(--color1);
  border-radius: 10px;
  padding: 24px;
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
}

.planeColor {
  color: var(--bg-color1);
}
</style>
<style scoped>
.loadingMessage>>>.el-loading-parent--relative {
  width: 100%;
  height: 100%;

}

.loadingMessage>>>.el-loading-spinner {
  display: flex;
  justify-content: center;
}

.mButton {
  border: solid 0px;
}

.radio>>>.el-radio-button {
  margin-bottom: 5px;
  margin-right: 10px;
  /* border-left: solid 1px #DCDFE6; */
}

.radio>>>.el-radio-button__inner {
  border-left: solid 1px #DCDFE6;
  border-radius: 4px;
}

.radio>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  border-left: solid 1px var(--bg-color1);
  background-color: var(--bg-color1);
  border-color: var(--bg-color1);
  -webkit-box-shadow: -1px 0 0 0 var(--bg-color1);
  box-shadow: -1px 0 0 0 var(--bg-color1);
}

.message:hover>>>.messageButton,
.messageUser:hover>>>.messageButton {
  display: block;
}

.messageButton {
  display: none;

  width: 25px;
  height: 25px;
  padding: 0;
}

.messageDropdown {
  position: absolute;
  bottom: -12px;
  right: 10px;
}

.eidtTextarea>>>.el-textarea__inner {
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
}

.messageUser>>>.el-textarea__inner {
  color: #000;
}

.messageEdit {
  min-width: 400px;
}
</style>