Files
vue-starter/src/view/chat-view/chat-view.vue
kgdxpr 7c0d55ec20 1
2025-08-28 15:06:29 +08:00

628 lines
26 KiB
Vue

<template>
<div class="chat-view-wrapper">
<div class="chat-view-container">
<NavbarTop />
<ChatProcess v-if="chatStatusStore.startChat" />
<Welcome v-else />
<div class="new-convo-button">
<div class="agent-knowledge">
<ChatModel />
<!-- <ChatSetting />
<span class="agent-knowledge-dividing-line"></span>
<Knowledge /> -->
</div>
<d-popover
:content="$t('newChat')"
trigger="hover"
:position="['top']"
style="color: var(--devui-text)"
>
<div class="new-chat-setting" @click="onNewConvo">
<i class="icon-add"></i>
</div>
</d-popover>
</div>
<Input />
</div>
<div class="left_conent">
<div class="category-title">
<svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
<span>资源生成</span>
</div>
<div class="left_conent_row">
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(17)">
<img src="./17.png" width="68" height="68">
<div class="tooltip">教学视频AI生成智能体</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(18)">
<img src="./18.png" width="68" height="68">
<div class="tooltip">教学音乐AI生成助手</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(22)">
<img src="./22.png" width="68" height="68">
<div class="tooltip">AI图片生成</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(23)">
<img src="./23.png" width="68" height="68">
<div class="tooltip">千问生图</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(24)">
<img src="./24.png" width="68" height="68">
<div class="tooltip">千问改图</div>
</div>
</div>
</div>
<div class="category-title">
<svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
<span>文史类图谱助手</span>
</div>
<div class="left_conent_row">
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(12)">
<img src="./12.png" width="68" height="68">
<div class="tooltip">少年读史记</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(13)">
<img src="./13.png" width="68" height="68">
<div class="tooltip">人物关系图谱</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(14)">
<img src="./14.png" width="68" height="68">
<div class="tooltip">苏轼专题</div>
</div>
</div>
</div>
<div class="category-title">
<svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
<span>虚拟仿真实验室</span>
</div>
<div class="left_conent_row">
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(9)">
<img src="./9.png" width="68" height="68">
<div class="tooltip">光学AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(10)">
<img src="./10.png" width="68" height="68">
<div class="tooltip">浮力AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(26)">
<img src="./26.png" width="68" height="68">
<div class="tooltip">密度AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(27)">
<img src="./27.png" width="68" height="68">
<div class="tooltip">欧姆定律AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(28)">
<img src="./28.png" width="68" height="68">
<div class="tooltip">交流电路AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(29)">
<img src="./29.png" width="68" height="68">
<div class="tooltip">能量守恒AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(30)">
<img src="./30.png" width="68" height="68">
<div class="tooltip">动能势能AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(31)">
<img src="./31.png" width="68" height="68">
<div class="tooltip">运动AI答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(11)">
<img src="./11.png" width="68" height="68">
<div class="tooltip">化学氯化钠晶胞结构交互课件</div>
</div>
</div>
</div>
<div class="category-title">
<svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
<span>数学课件制作工具</span>
</div>
<div class="left_conent_row">
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(3)">
<img src="./3.png" width="68" height="68">
<div class="tooltip">GeoGebra助手</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(21)">
<img src="./21.png" width="68" height="68">
<div class="tooltip">GeoGebra演示</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(4)">
<img src="./4.png" width="68" height="68">
<div class="tooltip">数学动画AI制作平台</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(5)">
<img src="./5.png" width="68" height="68">
<div class="tooltip">几何题图形交互3D</div>
</div>
</div>
</div>
<div class="category-title">
<svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
<span>知识库训练</span>
</div>
<div class="left_conent_row">
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(20)">
<img src="./20.png" width="68" height="68">
<div class="tooltip">AI教育垂直领域大模型</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(6)">
<img src="./6.png" width="68" height="68">
<div class="tooltip">史校长著作小学数学</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(7)">
<img src="./7.png" width="68" height="68">
<div class="tooltip">史校长著作初中数学</div>
</div>
</div>
<!-- <div class="left_conent_row_col">
<div class="image-container" @click="openPage(8)">
<img src="./temp.png" width="68" height="68">
<div class="tooltip">专题知识学习情况梳理</div>
</div>
</div> -->
</div>
<div class="category-title">
<svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
<span>作文批阅助手</span>
</div>
<div class="left_conent_row">
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(1)">
<img src="./1.png" width="68" height="68">
<div class="tooltip">中小学作文批阅助手</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(2)">
<img src="./2.png" width="68" height="68">
<div class="tooltip">中小学英语作文批阅助手</div>
</div>
</div>
</div>
<div class="category-title">
<svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
<span>其他</span>
</div>
<div class="left_conent_row">
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(25)">
<img src="./25.png" width="68" height="68">
<div class="tooltip">长春云校答疑</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(19)">
<img src="./19.png" width="68" height="68">
<div class="tooltip">学伴小智</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(15)">
<img src="./15.png" width="68" height="68">
<div class="tooltip">长春教育资讯</div>
</div>
</div>
<div class="left_conent_row_col">
<div class="image-container" @click="openPage(16)">
<img src="./16.png" width="68" height="68">
<div class="tooltip">例题训练</div>
</div>
</div>
</div>
</div>
<!-- <div
v-if="GlobalConfig.displayShape === DisplayShape.Immersive"
:class="['toggle-wrapper', !commonStore.isExpand && 'not-expand']"
@click="onToggle"
>
<ExpandIcon />
</div> -->
</div>
</template>
<script setup lang="ts">
import {
useChatHistoryStore,
useChatMessageStore,
useChatStatusStore,
useCommonStore,
} from "@/store";
import { ChatModel } from "@view/chat-model";
import { ChatProcess } from "@view/chat-process";
import { ChatSetting } from "@view/chat-setting";
import { Input } from "@view/input";
import { Knowledge } from "@view/knowledge";
import { Welcome } from "@view/welcome";
import NavbarTop from "./navbar-top.vue";
import { ExpandIcon } from "@/components";
import GlobalConfig from "@/global-config";
import { DisplayShape } from "@/global-config-types";
const chatHistoryStore = useChatHistoryStore();
const chatMessageStore = useChatMessageStore();
const chatStatusStore = useChatStatusStore();
const commonStore = useCommonStore();
const onNewConvo = () => {
chatHistoryStore.setActiveHistoryId("");
chatStatusStore.startChat = false;
chatMessageStore.messages = [];
};
const onToggle = () => {
commonStore.isExpand = !commonStore.isExpand;
};
const openPage = (id) => {
if(id === 1) {
window.open('http://www.hzkjai.com:27002/essaycn', '_blank');
} else if(id === 2) {
window.open('http://www.hzkjai.com:27002/essayen', '_blank');
} else if(id === 3) {
window.open('http://www.hzkjai.com:27002/math', '_blank');
} else if(id === 4) {
window.open('http://www.hzkjai.com:27002/manim', '_blank');
}else if(id === 5) {
window.open('http://www.hzkjai.com:27002/ggb3d', '_blank');
} else if(id === 6) {
window.open('http://www.hzkjai.com:27002/static/Math.html', '_blank');
} else if(id === 7) {
window.open('http://www.hzkjai.com:27002/static/Math2.html', '_blank');
} else if(id === 8) {
window.open('http://www.hzkjai.com:27002/static/mind_map.html', '_blank');
} else if(id === 9) {
window.open('http://www.hzkjai.com:27002/static/optics_chat.html', '_blank');
}else if(id === 10) {
window.open('http://www.hzkjai.com:27002/static/deepseek_fulishiyanshi_iframe.html', '_blank');
} else if(id === 11) {
window.open('http://www.hzkjai.com:27002/static/deepseek_huaxue_iframe.html', '_blank');
} else if(id === 12) {
window.open('http://www.hzkjai.com:27002/static/ShiJi.html', '_blank');
} else if(id === 13) {
window.open('http://www.hzkjai.com:27002/static/temp/relation_28969a75f3de4ea8abbda9c99b77e216.html', '_blank');
} else if(id === 14) {
window.open('http://www.hzkjai.com:27002/static/SuShi.html', '_blank');
} else if(id === 15) {
window.open('http://www.hzkjai.com:27002/static/ChangChun.html', '_blank');
} else if(id === 10) {
window.open('http://www.hzkjai.com:27002/static/deepseek_fulishiyanshi_iframe.html', '_blank');
} else if(id === 11) {
window.open('http://www.hzkjai.com:27002/static/deepseek_huaxue_iframe.html', '_blank');
} else if(id === 12) {
window.open('http://www.hzkjai.com:27002/static/ShiJi.html', '_blank');
} else if(id === 13) {
window.open('http://www.hzkjai.com:27002/static/temp/relation_28969a75f3de4ea8abbda9c99b77e216.html', '_blank');
} else if(id === 14) {
window.open('http://www.hzkjai.com:27002/static/SuShi.html', '_blank');
} else if(id === 15) {
window.open('http://www.hzkjai.com:27002/static/ChangChun.html', '_blank');
} else if(id === 16) {
window.open('http://www.hzkjai.com:27002/static/training/index.html', '_blank');
} else if(id === 17) {
window.open('http://www.hzkjai.com:27002/static/JiMeng/index.html', '_blank');
} else if(id === 18) {
window.open('http://www.hzkjai.com:27002/static/Suno/index.html', '_blank');
} else if(id === 19) {
window.open('http://www.hzkjai.com:27002/static/XueBan.html', '_blank');
} else if(id === 20) {
window.open('http://www.hzkjai.com:27008/', '_blank');
} else if(id === 21) {
window.open('http://www.hzkjai.com:27002/static/ggb_draw.html', '_blank');
} else if(id === 22) {
window.open('http://www.hzkjai.com:27002/static/Midjourney/mj.html', '_blank');
} else if(id === 23) {
window.open('http://www.hzkjai.com:27002/static/QwenImage/qwen-image.html', '_blank');
} else if(id === 24) {
window.open('http://www.hzkjai.com:27002/static/QwenImage/qwen-image-edit.html', '_blank');
} else if(id === 25) {
window.open('http://www.hzkjai.com:27002/static/YunXiao/course_page.html', '_blank');
} else if(id === 26) {
window.open('http://www.hzkjai.com:27002/static/xnfzsy_density.html', '_blank');
} else if(id === 27) {
window.open('http://www.hzkjai.com:27002/static/xnfzsy_ohm.html', '_blank');
} else if(id === 28) {
window.open('http://www.hzkjai.com:27002/static/xnfzsy_jl.html', '_blank');
} else if(id === 29) {
window.open('http://www.hzkjai.com:27002/static/xnfzsy_nlsh.html', '_blank');
} else if(id === 30) {
window.open('http://www.hzkjai.com:27002/static/xnfzsy_dnsn.html', '_blank');
} else if(id === 31) {
window.open('http://www.hzkjai.com:27002/static/xnfzsy_yd.html', '_blank');
}
}
</script>
<style>
.category-title {
font-size: 12px;
font-weight: 500;
color: #2c3e50;
padding-bottom: 5px;
margin-bottom: 10px;
text-align: left;
letter-spacing: 0.5px;
border-bottom: 1px solid #e8eaed;
display: flex;
align-items: center;
}
.category-title span {
margin-left: 5px;
}
.left_conent {
width: 350px;
margin: 10px 0 10px 0;
border-left: 1px solid #d2cafe;
padding: 10px 10px 0 30px;
overflow-y: auto; /* 纵向滚动条 */
overflow-x: hidden; /* 隐藏横向滚动条 */
z-index: 9999;
position: relative;
/* 滚动条样式 - 默认隐藏 */
scrollbar-width: thin; /* Firefox */
scrollbar-color: transparent transparent; /* Firefox */
}
/* Webkit浏览器滚动条样式 */
.left_conent::-webkit-scrollbar {
width: 6px;
}
.left_conent::-webkit-scrollbar-track {
background: transparent;
}
.left_conent::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
}
/* 鼠标悬停时显示滚动条 */
.left_conent:hover::-webkit-scrollbar-thumb {
background: #c1c1c1;
}
.left_conent:hover::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Firefox滚动条显示 */
.left_conent:hover {
scrollbar-color: #c1c1c1 transparent; /* Firefox */
}
.left_conent_row {
display: flex;
/* justify-content: space-around; */
margin-bottom: 10px;
flex-wrap: wrap
}
.left_conent_row_col {
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.image-container {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 99999;
margin-bottom: 8px;
}
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(0, 0, 0, 0.8);
}
.image-container:hover .tooltip {
opacity: 1;
visibility: visible;
}
</style>
<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";
.chat-view-wrapper {
position: relative;
display: flex;
flex: 1;
width: 0;
height: 100%;
}
.chat-view-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
.new-convo-button {
padding: 0 12px;
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
max-width: 1200px;
height: 39px;
gap: 4px;
}
.agent-knowledge {
flex: 1;
display: flex;
align-items: center;
.agent-knowledge-dividing-line {
width: 1px;
height: 14px;
margin: 0 12px;
background-color: $devui-line;
}
}
.new-chat-setting {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border-radius: $devui-border-radius-full;
background-color: $devui-base-bg;
box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
cursor: pointer;
&:hover {
color: $devui-brand;
}
}
}
.toggle-wrapper {
position: absolute;
z-index: 10;
top: calc(50% - 20px);
left: -8px;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 40px;
border-radius: 6px;
box-shadow: 2px 0px 4px 0px var(--mc-float-block-shadow);
background: $devui-base-bg;
transition: all 0.3s ease-in-out;
cursor: pointer;
svg {
transition: transform 0.3s ease-in-out;
}
&.not-expand {
left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
svg {
transform: rotate(180deg);
}
}
}
body[ui-theme-type="light"] {
.chat-view-wrapper {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.95),
rgba(248, 250, 255, 0.95) 99%
);
}
}
body[ui-theme-type="dark"] {
.chat-view-wrapper {
background-color: $devui-global-bg;
}
}
@media screen and (max-width: 940px) {
.navbar-container {
display: none;
}
}
@media screen and (max-width: 860px) {
.toggle-wrapper {
display: none;
}
}
</style>