|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="chat bg-white">
|
|
|
- <div class="flex items-center h-screen relative" >
|
|
|
- <div class="leftInfo relative" v-show="!showNodata" >
|
|
|
+ <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">
|
|
|
@@ -19,51 +19,46 @@
|
|
|
</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 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>
|
|
|
@@ -80,21 +75,23 @@
|
|
|
</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">Rochat No.75680</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"/>
|
|
|
+ <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 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 v-show="showDetail">
|
|
|
<div class="mt-5 text-base pb-3 border-b border-gray-200">
|
|
|
<div>
|
|
|
<i class="el-icon-document"></i>
|
|
|
@@ -139,9 +136,11 @@
|
|
|
查看场景
|
|
|
</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)">
|
|
|
+ <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>
|
|
|
@@ -167,7 +166,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="content" :class="fullScreen && 'contentFull'" v-show="!showNodata" :style="{ backgroundImage: `url(${baseApi}${sceneInfo.background})`}">
|
|
|
+ <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">
|
|
|
@@ -189,26 +189,21 @@
|
|
|
<i class="el-icon-arrow-left" v-if="!fullScreen"></i>
|
|
|
<i class="el-icon-arrow-right" v-else></i>
|
|
|
</div>
|
|
|
- <div class="chat-box" >
|
|
|
+ <div class="chat-box">
|
|
|
<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"
|
|
|
- >
|
|
|
+ <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>
|
|
|
+ <i class="el-icon-arrow-down ml-2" style="font-size: 16px;" v-else></i>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <el-dropdown-menu slot="dropdown" >
|
|
|
+ <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>
|
|
|
@@ -217,10 +212,7 @@
|
|
|
</div>
|
|
|
<div class="flex w-60 justify-end">
|
|
|
<el-tooltip effect="dark" content="设定" placement="bottom">
|
|
|
- <el-popover
|
|
|
- placement="bottom"
|
|
|
- width="400"
|
|
|
- trigger="click">
|
|
|
+ <el-popover placement="bottom" width="400" trigger="click">
|
|
|
<div class="p-2">
|
|
|
<div class="flex justify-between mb-4">
|
|
|
<span>语音自动播放</span>
|
|
|
@@ -253,28 +245,29 @@
|
|
|
<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"
|
|
|
- />
|
|
|
+ <img :src="baseApi + info.picture" class="rounded-full w-14 h-14 object-cover" />
|
|
|
</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)">
|
|
|
+ <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-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)">
|
|
|
+ <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-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>
|
|
|
@@ -283,12 +276,9 @@
|
|
|
</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"
|
|
|
+ <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">
|
|
|
@@ -301,15 +291,14 @@
|
|
|
<!-- 用户发送的信息 -->
|
|
|
<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"
|
|
|
- />
|
|
|
+ <img :src="$store.state.user.avatar" class="rounded-full w-14 h-14 object-cover" />
|
|
|
</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">
|
|
|
+ <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-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>
|
|
|
@@ -317,12 +306,9 @@
|
|
|
</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"
|
|
|
+ <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">
|
|
|
@@ -337,23 +323,18 @@
|
|
|
</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"
|
|
|
- />
|
|
|
+ <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 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">
|
|
|
@@ -366,11 +347,7 @@
|
|
|
<el-empty description="暂无聊天记录，点击按钮并探索新角色。"></el-empty>
|
|
|
<el-button type="primary" round @click="$router.push('/')">寻找一个角色</el-button>
|
|
|
</div>
|
|
|
- <el-dialog
|
|
|
- title="配置"
|
|
|
- :visible.sync="showConfig"
|
|
|
- width="500px"
|
|
|
- >
|
|
|
+ <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">
|
|
|
@@ -385,7 +362,8 @@
|
|
|
<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-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>
|
|
|
@@ -401,14 +379,15 @@
|
|
|
</div> -->
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="showConfig = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="showConfig = false">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="configConfirm">确 定</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
-</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Cookies from 'js-cookie'
|
|
|
import {
|
|
|
streamChatWithWebApi,
|
|
|
getGuidanceApi,
|
|
|
@@ -679,7 +658,7 @@ export default {
|
|
|
// 编辑
|
|
|
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'
|
|
|
@@ -728,7 +707,7 @@ export default {
|
|
|
value.edit = false
|
|
|
this.getChatRecord(this.recordId)
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
// 删除单条聊天记录
|
|
|
deleteRecord(value, index) {
|
|
|
@@ -744,7 +723,7 @@ export default {
|
|
|
this.getChatRecord(this.recordId)
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 聊天记录新增对话
|
|
|
async newStart_juese(value) {
|
|
|
console.log(value, 'value');
|
|
|
@@ -834,6 +813,7 @@ export default {
|
|
|
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
|
|
|
@@ -899,7 +879,7 @@ export default {
|
|
|
if (res.data) {
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
const element = res.data[i];
|
|
|
- if(this.info.id == element.id) {
|
|
|
+ if (this.info.id == element.id) {
|
|
|
element.open = true
|
|
|
} else {
|
|
|
element.open = false
|
|
|
@@ -934,7 +914,13 @@ export default {
|
|
|
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
|
|
|
@@ -1019,6 +1005,13 @@ export default {
|
|
|
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({
|
|
|
@@ -1155,11 +1148,11 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
const reader = res.body.getReader()
|
|
|
- const decoder=new TextDecoder()
|
|
|
- while(1){
|
|
|
- const {done, value} = await reader.read()
|
|
|
+ const decoder = new TextDecoder()
|
|
|
+ while (1) {
|
|
|
+ const { done, value } = await reader.read()
|
|
|
// console.log(done, 'done');
|
|
|
- if(done){
|
|
|
+ if (done) {
|
|
|
console.log(value, '结束value');
|
|
|
this.chatLoading = false
|
|
|
// if (typeof(value) == "undefined") {
|
|
|
@@ -1177,7 +1170,7 @@ export default {
|
|
|
// 如果开启自动播放，则查询并播放语音
|
|
|
// this.audioUrl = ""
|
|
|
// if (!this.resError) {
|
|
|
-
|
|
|
+
|
|
|
// }
|
|
|
console.log('结束');
|
|
|
break;
|
|
|
@@ -1201,16 +1194,16 @@ export default {
|
|
|
// 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) {
|
|
|
+ if (value.code == 401) {
|
|
|
this.returnMessage.splice(this.returnMessage.length - 1, 1)
|
|
|
this.noLogin(element)
|
|
|
this.chatLoading = false
|
|
|
break;
|
|
|
}
|
|
|
- if(value.code == 500) {
|
|
|
+ if (value.code == 500) {
|
|
|
console.log(value, 'JSON.parse(element)');
|
|
|
this.returnMessage.splice(this.returnMessage.length - 2, 2)
|
|
|
this.$message.error(value.content || '系统错误请联系管理员')
|
|
|
@@ -1255,24 +1248,24 @@ export default {
|
|
|
type: "warning",
|
|
|
}
|
|
|
)
|
|
|
- .then(() => {
|
|
|
- // isRelogin.show = false;
|
|
|
- this.$store.dispatch("LogOut").then(() => {
|
|
|
- // location.href = "/";
|
|
|
+ .then(() => {
|
|
|
+ // isRelogin.show = false;
|
|
|
+ this.$store.dispatch("LogOut").then(() => {
|
|
|
+ // location.href = "/";
|
|
|
|
|
|
- _this.$refs.Header.showLogin()
|
|
|
+ _this.$refs.Header.showLogin()
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // isRelogin.show = false;
|
|
|
});
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- // isRelogin.show = false;
|
|
|
- });
|
|
|
},
|
|
|
isJSON(str) {
|
|
|
if (typeof str == 'string') {
|
|
|
try {
|
|
|
JSON.parse(str);
|
|
|
return true;
|
|
|
- } catch(e) {
|
|
|
+ } catch (e) {
|
|
|
// console.log(e);
|
|
|
return false;
|
|
|
}
|
|
|
@@ -1327,7 +1320,7 @@ export default {
|
|
|
this.audioUrl = this.audioUrlArr[this.audioUrlArrIndx].voiceAddress
|
|
|
console.log(this.audioUrl, 'this.audioUrl');
|
|
|
setTimeout(() => {
|
|
|
-
|
|
|
+
|
|
|
if (this.audioUrl) {
|
|
|
this.$refs.audio.play()
|
|
|
}
|
|
|
@@ -1441,7 +1434,7 @@ export default {
|
|
|
if (value) {
|
|
|
queryUserBalanceApi().then(res => {
|
|
|
console.log(res, '用户余额');
|
|
|
- if (res.data <= 0 ) {
|
|
|
+ if (res.data <= 0) {
|
|
|
this.setting.value1 = false
|
|
|
this.$message({
|
|
|
message: '余额不足，无法开启次功能',
|
|
|
@@ -1491,9 +1484,11 @@ export default {
|
|
|
height: 1.6rem;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.chat {
|
|
|
height: 100vh;
|
|
|
}
|
|
|
+
|
|
|
.leftInfo {
|
|
|
width: 375px;
|
|
|
height: 100%;
|
|
|
@@ -1511,6 +1506,7 @@ export default {
|
|
|
border-radius: 15px;
|
|
|
border: solid 1px var(--color1);
|
|
|
margin-bottom: 10px;
|
|
|
+
|
|
|
.top {
|
|
|
>.photo {
|
|
|
>img {
|
|
|
@@ -1519,30 +1515,38 @@ export default {
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
>.info {
|
|
|
width: calc(100% - 60px - 16px);
|
|
|
+
|
|
|
>div {
|
|
|
- overflow: hidden; /* 确保超出容器的文本被裁剪 */
|
|
|
- white-space: nowrap; /* 确保文本在一行内显示 */
|
|
|
- text-overflow: ellipsis; /* 使用省略号表示文本超出 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 确保超出容器的文本被裁剪 */
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 确保文本在一行内显示 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 使用省略号表示文本超出 */
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
>.chatInfo {
|
|
|
overflow: hidden;
|
|
|
- .chatInfo_photo {
|
|
|
- >img {
|
|
|
|
|
|
- }
|
|
|
+ .chatInfo_photo {
|
|
|
+ >img {}
|
|
|
}
|
|
|
+
|
|
|
.hot {
|
|
|
color: #f03d3d;
|
|
|
background: #fff1f1;
|
|
|
}
|
|
|
+
|
|
|
.tags {
|
|
|
margin-top: 10px;
|
|
|
+
|
|
|
.tag {
|
|
|
display: inline-flex;
|
|
|
justify-content: center;
|
|
|
@@ -1570,6 +1574,7 @@ export default {
|
|
|
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%);
|
|
|
@@ -1581,6 +1586,7 @@ export default {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
padding: 55px 25px 170px 25px;
|
|
|
+
|
|
|
>.chatBoxTitle {
|
|
|
color: #fff;
|
|
|
margin-top: 15px;
|
|
|
@@ -1592,14 +1598,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.contentFull {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.historyActive {
|
|
|
background: var(--color1);
|
|
|
}
|
|
|
+
|
|
|
.dialogue:hover {
|
|
|
background: var(--color1);
|
|
|
+
|
|
|
.dialogueIconBg {
|
|
|
display: flex;
|
|
|
}
|
|
|
@@ -1609,17 +1619,21 @@ export default {
|
|
|
display: none;
|
|
|
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, var(--color1) 50%, var(--color1) 100%);
|
|
|
}
|
|
|
+
|
|
|
.messages {
|
|
|
- height: calc(100% - 68px );
|
|
|
+ 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;
|
|
|
@@ -1642,6 +1656,7 @@ export default {
|
|
|
// height: 50px;
|
|
|
// background: #fff;
|
|
|
}
|
|
|
+
|
|
|
.message {
|
|
|
// background: #ffffff0f;
|
|
|
// border: 1px solid #5b5b5e;
|
|
|
@@ -1651,6 +1666,7 @@ export default {
|
|
|
// flex: 1;
|
|
|
|
|
|
}
|
|
|
+
|
|
|
.messageUser {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
border: 1px solid var(--color1);
|
|
|
@@ -1659,12 +1675,15 @@ export default {
|
|
|
width: auto;
|
|
|
// min-width: 400px;
|
|
|
}
|
|
|
+
|
|
|
.photo {
|
|
|
width: 56px;
|
|
|
}
|
|
|
+
|
|
|
.me {
|
|
|
flex-direction: row-reverse;
|
|
|
}
|
|
|
+
|
|
|
.loadingMessage {
|
|
|
position: relative;
|
|
|
// display: flex;
|
|
|
@@ -1672,12 +1691,14 @@ export default {
|
|
|
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;
|
|
|
@@ -1689,6 +1710,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.inputBox {
|
|
|
border: solid 1px var(--color1);
|
|
|
border-radius: 10px;
|
|
|
@@ -1697,67 +1719,77 @@ export default {
|
|
|
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-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;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
chenrong