INIT

src/view/chat-view/chat-view.vue

@@ -0,0 +1,551 @@
+<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>
+      <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(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(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');
+  } 
+  
+  
+}
+</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>

src/view/chat-view/index.ts

@@ -0,0 +1,3 @@
+import ChatView from './chat-view.vue';
+
+export { ChatView };

src/view/chat-view/navbar-top.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="navbar-top-container">
+    <div class="navbar-left">
+      <McHeader
+        :logoImg="GlobalConfig.logoPath || Logo"
+        :title="GlobalConfig.title || 'MateChat'"
+      ></McHeader>
+    </div>
+    <div class="navbar-right">
+      <d-popover :position="['bottom-end']" class="navbar-top-history-menu">
+        <div class="switch-lang-container">
+          <i class="icon-history" />
+        </div>
+        <template #content>
+          <HistoryList class="navbar-top-history" />
+        </template>
+      </d-popover>
+      <SwitchLang v-if="!GlobalConfig.language" />
+      <Theme v-if="!GlobalConfig.theme" />
+      <d-popover :position="['bottom-end']" trigger="hover">
+        <template #content>
+          <span class="devui-text">{{ $t("navbar.systemSetting") }}</span>
+        </template>
+        <div class="switch-lang-container">
+          <i class="icon-setting system-setting" />
+        </div>
+      </d-popover>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import GlobalConfig from "@/global-config";
+import { SwitchLang } from "@/view/navbar";
+import { Theme } from "@/view/theme";
+import { HistoryList } from "@view/history";
+import Logo from "../../../public/logo.svg";
+</script>
+
+<style scoped lang="scss">
+@import "devui-theme/styles-var/devui-var.scss";
+
+.navbar-top-container {
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  margin-top: 8px;
+
+  .navbar-left,
+  .navbar-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .navbar-right {
+    .icon-history {
+      display: none;
+      cursor: pointer;
+    }
+  }
+
+  :deep(.mc-header-logo-container) {
+    cursor: pointer;
+
+    .mc-header-title {
+      font-size: $devui-font-size !important;
+    }
+  }
+
+  :deep(.switch-lang-container) {
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    margin-left: 8px;
+    color: $devui-text;
+    border-radius: $devui-border-radius-card;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--mc-icon-hover-bg);
+    }
+
+    i {
+      font-size: 16px;
+    }
+  }
+}
+
+.navbar-top-history {
+  width: 100%;
+  border-right: none;
+}
+
+.devui-text {
+  color: $devui-text;
+}
+
+@media screen and (max-width: 940px) {
+  .navbar-top-container {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 860px) {
+  .icon-history {
+    display: inline-block !important;
+  }
+}
+
+body[ui-theme="infinity-theme"] {
+  .navbar-top-history {
+    backdrop-filter: blur(50px);
+    background-color: rgba(249, 249, 249, 0.8);
+  }
+}
+
+body[ui-theme="galaxy-theme"] {
+  .navbar-top-history {
+    background-color: $devui-global-bg;
+  }
+}
+</style>
+
+<style lang="scss">
+@import "devui-theme/styles-var/devui-var.scss";
+
+.devui-popover__content.navbar-top-history-menu {
+  padding: 0;
+  background-color: $devui-global-bg;
+  box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
+}
+</style>