diff --git a/package.json b/package.json
index ab59e9f77ac5ff860e9c895619f6400e22cf0b4d..b9e9938374b35e95e8546046ac3b5cb285889c8f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "codemirror": "^6.0.1",
     "dayjs": "1.11.9",
     "echarts": "^5.5.1",
-    "element-plus": "2.3.12",
+    "element-plus": "2.2.34",
     "highlight.js": "11.10.0",
     "marked": "4.3",
     "pinia": "2.1.6",
diff --git a/src/App.vue b/src/App.vue
index 592032d84e77869d0bd1a7675c5b2f5078a8a299..b832b239669365ea05cd1b2828180b30308c2dfd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router';
 import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
+import DialogueView from 'src/views/dialogue/dialogueView.vue';
 </script>
 
 <template>
   <div class="eulercopilot-main" :style="{ height: qiankunWindow.__POWERED_BY_QIANKUN__ ? '100%' : '100vh' }">
-    <RouterView />
+    <DialogueView />
   </div>
 </template>
 
diff --git a/src/assets/images/routerCopilot.png b/src/assets/images/routerCopilot.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e3205580ec0c6710dcf2de0bbee510ec55950f8
Binary files /dev/null and b/src/assets/images/routerCopilot.png differ
diff --git a/src/assets/images/routerCopilotSelected.png b/src/assets/images/routerCopilotSelected.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb3dd0a7659ded22a612c5cace3fbdc7281477fd
Binary files /dev/null and b/src/assets/images/routerCopilotSelected.png differ
diff --git a/src/assets/images/witchainD.png b/src/assets/images/witchainD.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cfc3bb07403a16cf8d125ba53d0898b0ee71b04
Binary files /dev/null and b/src/assets/images/witchainD.png differ
diff --git a/src/assets/svgs/WitchainDSelected.svg b/src/assets/svgs/WitchainDSelected.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1b20a6d1711e583bb2dae13709cc26688a86f90a
--- /dev/null
+++ b/src/assets/svgs/WitchainDSelected.svg
@@ -0,0 +1,19 @@
+<svg width="40.000000" height="40.000000" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip776_9765">
+			<rect id="svg" width="40.000000" height="40.000000" fill="white" fill-opacity="0"/>
+		</clipPath>
+		<linearGradient x1="10.634377" y1="13.999999" x2="28.952187" y2="29.500000" id="paint_linear_776_9767_0" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#6D75FA"/>
+			<stop offset="1.000000" stop-color="#5AB3FF"/>
+		</linearGradient>
+	</defs>
+	<rect id="数据治理_选中" width="40.000000" height="40.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip776_9765)">
+		<path id="矢量 383" d="M29.28 12.35C29.28 13.93 25.18 15.21 20.14 15.21C15.09 15.21 11 13.93 11 12.35C11 10.77 15.09 9.5 20.14 9.5C25.18 9.5 29.28 10.77 29.28 12.35ZM20.14 16.64C15.09 16.64 11 15.36 11 13.78L11 19.5C11 21.07 15.09 22.35 20.14 22.35C25.18 22.35 29.28 21.07 29.28 19.5L29.28 13.78C29.28 15.36 25.18 16.64 20.14 16.64ZM11 20.92C11 22.5 15.09 23.78 20.14 23.78C25.18 23.78 29.28 22.5 29.28 20.92L29.28 26.64C29.28 28.22 25.18 29.5 20.14 29.5C15.09 29.5 11 28.22 11 26.64L11 20.92Z" fill="url(#paint_linear_776_9767_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
+		<path id="矢量 383" d="" fill="#7AA5FF" fill-opacity="0" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue
index 5d955b6ac188fecb4466990e3d8bd0c196f652fc..0bd437e00cb634a3e0d99953971de2666381f915 100644
--- a/src/components/dialoguePanel/DialoguePanel.vue
+++ b/src/components/dialoguePanel/DialoguePanel.vue
@@ -13,14 +13,16 @@ import ReportPopover from "src/views/dialogue/components/ReportPopover.vue";
 import { onMounted, watch, onBeforeUnmount,reactive } from "vue";
 import * as echarts from 'echarts';
 import color from 'src/assets/color';
-import { Linetooltip , Circlelegend } from './chartsCss'
 import i18n from 'src/i18n';
 import { storeToRefs } from 'pinia';
 import { useLangStore } from 'src/store'
+import JsonFormComponent from './JsonFormComponent.vue'
+import { Metadata } from "srcapis/paths/type";
+import DialogueFlow from "./DialogueFlow.vue";
+import DialogueThought from "./DialogueThought.vue";
 const { user_selected_plugins } = storeToRefs(useHistorySessionStore());
 import { Suggest } from 'src/apis/paths/type';
 const { params } = storeToRefs(useHistorySessionStore());
-
 const { language } = storeToRefs(useLangStore());
 const { changeLanguage } = useLangStore();
 const echartsDraw = ref();
@@ -68,11 +70,8 @@ export interface DialoguePanelProps {
   //
   modeOptions:any;
 }
-import JsonFormComponent from './JsonFormComponent.vue'
-import { Metadata } from "srcapis/paths/type";
-import DialogueFlow from "./DialogueFlow.vue";
-import { emit, title } from "process";
 
+const thoughtContent = ref('');
 var option = ref();
 var show = ref(false);
 const size = reactive({
@@ -238,18 +237,23 @@ const contentAfterMark = computed(() => {
   if (!props.content) {
     return "";
   }
+  //xxs将大于号转为html实体以防歧义；将< >替换为正常字符；
   let str = marked.parse(
     xss(props.content[props.currentSelected])
       .replace(/&gt;/g, ">")
       .replace(/&lt;/g, "<")
   )
+  //将table提取出来中加一个<div>父节点控制溢出
   let tableStart = str.indexOf('<table>');
   if(tableStart!== -1){
     str = str.slice(0, tableStart) + '<div class="overflowTable">' + str.slice(tableStart, str.indexOf('</table>') + '</table>'.length).replace('</table>', '</table></div>') + str.slice(str.indexOf('</table>') + '</table>'.length);
   }
-  //将table提取出来中加一个<div>父节点控制溢出
-  return str;
-  //xxs将大于号转为html实体以防歧义；将< >替换为正常字符；
+  //仅获取第一个遇到的 think 标签
+  if(str.match(/<think>([\s\S]*?)<\/think>/)){
+  thoughtContent.value = str.match(/<think>([\s\S]*?)<\/think>/)[1];
+  }
+  //将<think>标签替换为空
+  return str.replace(/<think>([\s\S]*?)<\/think>/g,'');
 });
 
 
@@ -380,12 +384,6 @@ const selectQuestion = (item:Suggest) => {
   
 };
 
-// const selectQuestion = (item:object) => {
-//   let question = item.question;
-//   let user_selected_flow = item.flow;
-//   emits('handleSendMessage',question,user_selected_flow);
-// };
-
 const popperSize = () => {
   if(language.value == "EN"){
     size.width = 418;
@@ -449,6 +447,7 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_plu
     <!-- AI回答 -->
     <div class="dialogue-panel__robot" v-else>
       <div class="dialogue-panel__robot-content">
+      <DialogueThought :content=thoughtContent v-if="thoughtContent" />
       <DialogueFlow v-if="flowdata"  :flowdata="props.flowdata"/> 
       <div v-if="contentAfterMark" id="markdown-preview">
         <div v-html="contentAfterMark"></div>
diff --git a/src/components/dialoguePanel/DialogueThought.vue b/src/components/dialoguePanel/DialogueThought.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1a5af0ee60b2d61ac031cc86b9a04887e00f64ec
--- /dev/null
+++ b/src/components/dialoguePanel/DialogueThought.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="dialogue-thought">
+      <div class="thought-header" @click="toggleCollapse">
+        <!-- <span class="think-label">think</span> -->
+        <div class="collapse-control">
+          <div
+            :class="{ 'is-collapsed': isCollapsed }"
+            class="collapse-icon"
+          >
+          <img src="@/assets/images/flow_arrow.png" alt="" class="o-collapse-icon">
+        </div>
+          <span class="collapse-text">思考</span>
+        </div>
+      </div>
+      <transition name="collapse">
+        <div v-show="!isCollapsed" class="thought-content">
+          {{ content }}
+        </div>
+      </transition>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue';
+  
+  const props = defineProps({
+    content: {
+      type: String,
+      required: true
+    }
+  });
+  
+  const isCollapsed = ref(true);
+  
+  const toggleCollapse = () => {
+    isCollapsed.value = !isCollapsed.value;
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .dialogue-thought {
+    position: relative;
+    margin: 1rem 0;
+    border: 2px dashed #ccc;
+    border-radius: 8px;
+    
+    .thought-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      background-color: #f8f8f8;
+      
+      .think-label {
+        font-size: 0.9rem;
+        font-weight: bold;
+        color: #666;
+        position: absolute;
+        top: -0.7rem;
+        left: 1rem;
+        padding: 0 0.5rem;
+        // background-color: white;
+      }
+      
+      .collapse-control {
+        display: flex;
+        align-items: center;
+        
+        .collapse-icon {
+          width: 1.2rem;
+          height: 1.2rem;
+          transition: transform 0.3s ease;
+          
+          &.is-collapsed {
+            transform: rotate(-90deg);
+          }
+        }
+        
+        .collapse-text {
+          margin-left: 0.5rem;
+          font-size: 0.9rem;
+          color: #666;
+        }
+      }
+    }
+    
+    .thought-content {
+      padding: 1rem;
+      background-color: #fff;
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+  
+  .collapse-enter-active,
+  .collapse-leave-active {
+    transition: max-height 0.3s ease-out;
+    overflow: hidden;
+  }
+  
+  .collapse-enter-from,
+  .collapse-leave-to {
+    max-height: 0;
+  }
+  
+  .collapse-enter-to,
+  .collapse-leave-from {
+    max-height: 1000px; // Adjust this value based on your content
+  }
+  </style>
\ No newline at end of file
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index 60af04e8b6bc4535d7c9854bcd8df7d77066d525..02c108dc1c925284f8e51ecb0ba5362362f7502a 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -9,6 +9,7 @@ export default {
       like: 'Like',
     },
     main: {
+      question:"Recommended Questions",
       describe1:"Hi! I'm",
       describe2:", and I'm happy to be of service.",
       left_describe:"Feel free to ask me, your AI assistant, about any of these topics, or anything else that's on your mind!~",
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 522e13b705297b4a770131a06f21ada62076f8a5..f77ed7984e9df0de7b718bdd0388ce69cef2ad5d 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -9,6 +9,7 @@ export default {
     like: '喜欢',
   },
   main: {
+    question:"推荐问题",
     describe1: '你好，我是',
     describe2: '，很高兴为你服务',
     left_describe: '作为你的智能助手，你可以试着问我关于以下方面的内容哦~',
diff --git a/src/router/index.ts b/src/router/index.ts
index a43c6a9b2685a030293dd24e382558430f4d4180..a22ae84da85288afc66a7561e8c2ecea6cd72d03 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,24 +7,36 @@
 // IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
 // PURPOSE.
 // See the Mulan PSL v2 for more details.
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import NotFoundComponent from 'src/views/404.vue';
 import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
 
 const router = createRouter({
-  history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/eulercopilot/' : '/'),
+  history: createWebHashHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/eulercopilot/' : '/'),
   routes: [
     {
       path: '/',
       name: 'dialogue',
-      component: (): Promise<typeof import('src/views/dialogue/dialogueView.vue')> =>
-        import('src/views/dialogue/dialogueView.vue'),
+      component: (): Promise<typeof import('src/views/dialogue/Copilot.vue')> =>
+        import('src/views/dialogue/Copilot.vue'),
     },
     {
       path: '/login',
       name: 'dialogue-login',
-      component: (): Promise<typeof import('src/views/dialogue/dialogueView.vue')> =>
-        import('src/views/dialogue/dialogueView.vue'),
+      component: (): Promise<typeof import('src/views/dialogue/Copilot.vue')> =>
+        import('src/views/dialogue/Copilot.vue'),
+    },
+    {
+      path: '/copilot',
+      name: 'copilot',
+      component: (): Promise<typeof import('src/views/dialogue/Copilot.vue')> =>
+        import('src/views/dialogue/Copilot.vue'),
+    },
+    {
+      path: '/tools',
+      name: 'tools',
+      component: (): Promise<typeof import('src/views/tools/index.vue')> =>
+        import('src/views/tools/index.vue'),
     },
     {
       path: '/404',
diff --git a/src/views/dialogue/Copilot.vue b/src/views/dialogue/Copilot.vue
index e9d50896b8b3450f129f5377c9ebe9ddeb2bad06..11c69e77f76ea5d74ba1318cde4bfc8cf13cbd97 100644
--- a/src/views/dialogue/Copilot.vue
+++ b/src/views/dialogue/Copilot.vue
@@ -51,16 +51,16 @@ const initCopilot = async (): Promise<void> => {
   }
   userinfo.value.organization = type;
   const currRoute = router.currentRoute;
-  if (currRoute.value.path === '/') {
+  if ( ['/copilot','/'].includes(currRoute.value?.path)) {
     const isLogin = await getUserInfo();
     if (isLogin) {
       await api.getRecognitionMode()
       await api.stopGeneration();
       await getHistorySession();
       setPlugins();
-    }
-    return;
   }
+    return;
+  } 
 };
 
 const dialogVisible = ref(false);
@@ -117,9 +117,7 @@ watch(
       <DialogueSession :modeOptions="modeOptions" />
     </div>
   </div>
-  <footer class="copilot-footer">
-    <CommonFooter />
-  </footer>
+
   <EulerDialog
     :visible="dialogVisible"
     :content="agreement"
@@ -128,18 +126,18 @@ watch(
     @submit="handleSubmit"
   ></EulerDialog>
   <EulerDialog
-      :visible="agreeDialogVisiable"
-      :content="tip"
-      :need-check="false"
-      height="300px"
-      agreement-name="内测声明"
-      @submit="agreeDialogVisiable = false"
-    ></EulerDialog>
+    :visible="agreeDialogVisiable"
+    :content="tip"
+    :need-check="false"
+    height="300px"
+    agreement-name="内测声明"
+    @submit="agreeDialogVisiable = false"
+  ></EulerDialog>
 </template>
 <style lang="scss" scoped>
 .copilot-container {
-  padding: 16px 24px 16px 24px;
-  height: calc(100% - 65px);
+  padding: 16px 24px 16px 8px;
+  height: 100%;
   display: flex;
   justify-content: space-between;
   &-main {
@@ -150,7 +148,24 @@ watch(
     margin-bottom: 12px;
   }
 }
+.copilot-aside {
+  width: 64px;
+  height: calc(100% - 8px);
+  background-color: #1f2937;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 0;
+}
+
 .micro-copilot-container {
   height: calc(100% - 25px);
 }
+.el-menu {
+  width: 64px;
+  margin-right: 8px;
+}
 </style>
diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue
index ca910a6b65512ca47d207d55464f3c0c00849801..2c34518f9f60c437be4725c6afdfa21d3e492adf 100644
--- a/src/views/dialogue/components/DialogueAside.vue
+++ b/src/views/dialogue/components/DialogueAside.vue
@@ -207,11 +207,6 @@ function hanleAsideVisible(): void {
 
     <transition name="transition-fade">
       <div class="copilot-aside" v-if="isCopilotAsideVisible">
-        <ElButton class="create-button" @click="createNewSession">
-          <img class="create-button__icon" src="@/assets/svgs/create.svg" />
-          <span>{{ $t('history.new_chat') }}</span>
-        </ElButton>
-
         <!-- 历史记录 -->
         <div class="history-record">
           <div class="history-record-title">
@@ -441,7 +436,6 @@ function hanleAsideVisible(): void {
   }
 
   .history-record {
-    margin-top: 15px;
     flex: 1;
     display: flex;
     height: calc(100% - 55px - 80px);
diff --git a/src/views/dialogue/components/InitalPanel.vue b/src/views/dialogue/components/InitalPanel.vue
index f665d12d22b7cda3a259ac2b6d9eecb902c298d2..bfb24cd7c6cf8b7e7b6c7b2ccbb3a7a00d7fee58 100644
--- a/src/views/dialogue/components/InitalPanel.vue
+++ b/src/views/dialogue/components/InitalPanel.vue
@@ -1,135 +1,100 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { EG_LIST } from '../constants';
 import { useChangeThemeStore } from 'src/store';
 import 'xterm/css/xterm.css';
-import { Terminal } from 'xterm';
-import {FitAddon} from 'xterm-addon-fit';
-import { AttachAddon } from 'xterm-addon-attach';
-import { successMsg } from 'src/components/Message';
+import router from 'src/router';
 const themeStore = useChangeThemeStore();
-const openShell = () => {
-  isTermShow.value = true;
-  fnChangeShellBox(true);
-  document.getElementById("shellView").style.width = "calc(100% - 48px)";
-  document.getElementById("shellView").style.height = "calc(100% - 104px)";
-  document.getElementById("shellView").style.margin = "64px 24px 40px 24px";
-  document.getElementById("shellView").style.borderRadius = "8px";
-}
-
-const closeShell = () => {
-  isTermShow.value = false;
-  fnChangeShellBox(false);
-  // document.getElementById("shellView").style.width = "0%";
-}
-
-let socket = ref(null);
-const terminal = ref(null);  //绑定dom组件
-const fitAddon = new FitAddon();
-
-let term = ref(null);
-let termLoading = ref(false);
-let isTermShow = ref(false);
-const activePane = ref('shell');
-const fnChangeShellBox = (isShow) => {
-  if (isShow) {
-    if (!socket.value){
-      termLoading.value = true;
-      createWs();
-    }
-  }else {
-    // 关闭连接
-    if (socket.value) {
-      socket.value.close();
-      socket.value = null;
-    }
-    if (term.value) {
-      term.value.dispose();
-    }
-  }
-
-}
-
-
-const createWs = () => {
-  const hostname = window.location.host;
-  socket.value = new WebSocket(`wss://${hostname}/api/shell/ws/0`);
-  socket.value.onopen = () => {
-    termLoading.value = false;
-    // socket.value.send(JSON.stringify({
-    //   ctrl: 'resize',
-    //   data: {
-    //     width: 500,
-    //   }
-    // }));
-  }
-  socket.value.onclose = () => {
-    // console.log('close');
-  }
-  socket.value.onerror = (e) => {
-    term.value.write(`\x1b[31m${e}\x1b[m\r\n`);
-    termLoading.value = false;
-  }
-  initTerm();
-}
-
-const initTerm = () => {
-  term.value = new Terminal({
-    fontSize: 14,
-    cursorBlink: true,
-  })
-  const attachAddon = new AttachAddon(socket.value);
-  term.value.open(terminal.value);
-  fitAddon.activate(term.value) // 自适应尺寸
-  attachAddon.activate(term.value);
-
-  setTimeout(() => {
-    fitAddon.fit();
-  }, 5);
-  term.value.focus();
-  window.onresize = () => {
-    fitAddon.fit();
+import { useRoute } from 'vue-router';
+import { api } from 'src/apis';
+
+const route = useRoute();
+const appName = ref()
+
+const questions = [
+  {
+    groupId: 0,
+    id: 1,
+    question: 'open_euler_community_edition_categories',
+  },
+  {
+    groupId: 0,
+    id: 2,
+    question: 'lts_release_cycle_and_support',
+  },
+  {
+    groupId: 0,
+    id: 3,
+    question: 'innovation_release_cycle_and_support',
+  },
+  {
+    groupId: 0,
+    id: 4,
+    question: 'container_cloud_platform_solution',
+  },
+  {
+    groupId: 1,
+    id: 5,
+    question: 'sec_gear_main_functions',
+  },
+  {
+    groupId: 1,
+    id: 6,
+    question: 'dde_description',
+  },
+];
+
+const routerToAppCenter = () => {
+  router.push('/app');
+};
+
+onMounted(() => {
+  if (route.query?.id) {
+    api
+      .querySingleAppData({
+        id: route.query?.id as string,
+      })
+      .then(res => {
+        if(res?.[1]?.result?.name){
+          appName.value = res?.[1]?.result?.name
+        }
+      });
   }
-}
+});
 </script>
 
 <template>
   <div class="dialogue-panel">
     <div class="inital-panel">
-      <div class="introduction">{{$t('main.describe1')}}
-        <img src="@/assets/images/logo-euler-copilot.png" alt="">
-        {{$t('main.describe2')}}
+      <div class="introduction">
+        {{ $t('main.describe1') }}
+        <img src="@/assets/images/logo-euler-copilot.png" alt="" v-if="!appName?.length"/>
+        <div class="appNameTitle">{{ appName }}</div>
+        {{ $t('main.describe2') }}
       </div>
-      <p class="inital-panel-tips">
-      </p>
-      <div class='container'>
+      <p class="inital-panel-tips"></p>
+      <div class="container">
         <div class="eg">
-          <p>{{$t('main.left_describe')}}</p>
+          <p>{{ $t('main.left_describe') }}</p>
           <ul class="eg-list">
             <li class="eg-list-item" v-for="item in EG_LIST" :key="item.key" :style="item.style">
               <img v-if="themeStore.theme === 'dark'" :src="item.iconDark" />
-              <img v-else :src="item.icon" alt="">
+              <img v-else :src="item.icon" alt="" />
               <div class="eg-list-item__text">
-                <p>{{ $t('main.'+item.key) }}</p>
-                <span class="eg-list-item__text-desc">{{
-                  $t('main.'+item.insertMessage)
-                }}</span>
+                <p>{{ $t('main.' + item.key) }}</p>
+                <span class="eg-list-item__text-desc">{{ $t('main.' + item.insertMessage) }}</span>
               </div>
             </li>
           </ul>
         </div>
-        <div class='shell'>
-          <p class='title'>{{$t('main.smart_shell')}}</p>
-          <div class='dse'>
-            {{$t('main.smart_shell_describe')}}
-          </div>
-        </div>
-        <div id='shellView' class='sidenav'>
-          <a href='' class='closebtn' @click='closeShell()'>x</a>
-          <div v-show="isTermShow" class="dialogue-shell">
-            <div style="height: 100%; width: 100%" ref="terminal" v-loading="termLoading">
-            </div>
-          </div>
+        <div class="question">
+          <p class="title">{{ $t('main.question') }}</p>
+          <ul class="question-list">
+            <li class="question-item" v-for="item in questions" :key="item.id">
+              <span class="question-number" :class="{ blue: item.id <= 3 }">{{ item.id }}</span>
+              {{ $t('question.' + item.question) }}
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -137,8 +102,7 @@ const initTerm = () => {
 </template>
 
 <style lang="scss" scoped>
-
-.dialogue-shell{
+.dialogue-shell {
   width: 100%;
   height: 100%;
 }
@@ -188,17 +152,37 @@ const initTerm = () => {
   margin-left: 50px;
 }
 
+.appNameTitle{
+  color: #6c77fa;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.question-list {
+  margin-top: 16px;
+  li {
+    margin-bottom: 16px;
+    span {
+      margin-right: 3px;
+    }
+    .blue {
+      color: #5ab3ff;
+    }
+  }
+}
 
 .container {
   display: flex;
   justify-content: center;
 
-  .shell {
+  .question {
     // display: block;
-    width: 264px;
+    width: 492px;
     height: auto;
-    // background-color: var(--o-bg-color-base);
-    background: var(--o-shell-image) no-repeat;
+    box-shadow: 0px 5.18px 20.72px 0px rgba(221, 225, 240, 0.5);
+    background: linear-gradient(270deg, rgb(227, 242, 255), rgb(195, 227, 255) 33.232%, rgb(197, 203, 249) 85.699%);
+    // opacity: 0.5;
+    border-radius: 8px;
     background-size: 100% 100%;
     margin-left: 12px;
     padding: 24px;
@@ -217,34 +201,6 @@ const initTerm = () => {
       font-size: 14px;
       color: var(--o-text-color-secondary);
     }
-
-    &-btn {
-      display: flex;
-      height: 100%;
-      position: relative;
-
-      // align-items: center;
-      p {
-        display: block;
-        align-self: center;
-        position: absolute;
-        width: 96px;
-        line-height: 32px;
-        border-radius: 100px;
-        height: 32px;
-        background-image: linear-gradient(to right, #6d75fa, #5ab3ff);
-        height: 32px;
-        align-self: center;
-        // margin: 0px 0px 12px 12px;
-        color: white;
-        bottom: 0px;
-
-        p {
-          text-align: center;
-          font-size: 14px;
-        }
-      }
-    }
   }
 }
 
@@ -285,12 +241,31 @@ const initTerm = () => {
     background-color: var(--o-bg-color-base);
     padding: 24px;
     border-radius: 8px;
-    min-width: 640px;
-
+    width: 492px;
+    height: 320px;
     p {
       font-size: 16px;
       color: var(--o-text-color-secondary);
     }
+    &-btn {
+      display: flex;
+      position: relative;
+      top: 50px;
+      p {
+        display: block;
+        align-self: center;
+        position: absolute;
+        width: 120px;
+        line-height: 32px;
+        border-radius: 100px;
+        height: 32px;
+        background-image: linear-gradient(to right, #6d75fa, #5ab3ff);
+        height: 32px;
+        color: white;
+        text-align: center;
+        font-size: 14px;
+      }
+    }
   }
 
   .eg-list {
@@ -301,7 +276,7 @@ const initTerm = () => {
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-
+    margin-top: 8px;
     li {
       cursor: text;
     }
@@ -310,11 +285,11 @@ const initTerm = () => {
       display: flex;
       align-items: center;
       width: calc(50% - 8px);
-      height: 64px;
-      background-color: transparent;
-      margin-top: 20px;
+      height: 80px;
+      // background: rgb(244, 246, 250);
+      margin-top: 8px;
       overflow: hidden;
-
+      border-radius: 8px;
       @media screen and (max-width: 1368px) {
         width: calc(50% - 4px);
         padding: 10px;
@@ -325,19 +300,27 @@ const initTerm = () => {
         padding: 10px;
       }
 
+      &:hover {
+        box-shadow: 0 5.18px 20.72px 0 rgba(221, 225, 240, 0.5);
+        background: linear-gradient(
+          270deg,
+          rgb(229, 239, 248),
+          rgb(199, 227, 250) 24.366%,
+          rgba(175, 205, 242) 57.543%,
+          rgb(152, 162, 247) 96.781%
+        );
+      }
+
       img {
         width: 37px;
         height: 37px;
-        // align-self: baseline;
-        margin-right: 6px;
+        margin: 0 6px 0 8px;
       }
 
-
       &__text {
         width: 100%;
         display: flex;
         flex-direction: column;
-        // margin-left: -12px;
         font-size: 16px;
         font-weight: 700;
         color: var(--o-text-color-primary);
diff --git a/src/views/dialogue/dialogueView.vue b/src/views/dialogue/dialogueView.vue
index d9b16f170e6f549b7c11ce467db3a966d9779e55..77a4eedd53d0275617b4a1f29d4f0e5391c88324 100644
--- a/src/views/dialogue/dialogueView.vue
+++ b/src/views/dialogue/dialogueView.vue
@@ -13,6 +13,12 @@ import { ElMessage } from 'element-plus';
 import { watch } from 'vue';
 import i18n from 'src/i18n'
 import { reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import CopilotIcon from '@/assets/images/routerCopilot.png';
+import CopilotIconSelected from '@/assets/images/routerCopilotSelected.png';
+import WitchainDIcon from '@/assets/images/witchainD.png';
+import WitchainDIconSelected from '@/assets/svgs/WitchainDSelected.svg';
+const { createNewSession } = useHistorySessionStore();
 
 // 挂载全局事件
 window.onHtmlEventDispatch = onHtmlEventDispatch as any;
@@ -30,7 +36,11 @@ const hidden = ref(false);
 const revoke = ref(true);
 const isSubmitDisabled = ref(true);
 const ruleFormRef = ref<any>();
-
+const router = useRouter();
+const routerList = [
+  { name: '对话', path: '/' , src:CopilotIcon , selectedSrc:CopilotIconSelected ,routerName: 'dialogue' },
+  { name: '知识库', path: '/tools' , src:WitchainDIcon , selectedSrc:WitchainDIconSelected ,routerName: 'witchainD' },
+];
 
 
 export interface ModelForm {
@@ -132,7 +142,6 @@ const copy = () => {
   navigator.clipboard.writeText(apikey.value);
 }
 
-
 const lang = computed(() => (language.value === 'EN' ? 'English' : '简体中文'));
 
 const handleConfirmCreateModel = async (formData: any | undefined) => {
@@ -187,6 +196,13 @@ watch(
   { deep: true }
 );
 
+const addNewSession = async(routerName: string) => {
+  console.log(router.currentRoute.value.name, routerName)
+  if(router.currentRoute.value.name === routerName){
+    await createNewSession();
+  }
+}
+
 </script>
 
 <template>
@@ -201,8 +217,9 @@ watch(
           <template #reference>
             <span class="language">{{ lang }}</span>
           </template>
-          <el-button class="exit-button" type="primary" @click="changeLanguagefun('EN')">English</el-button>
-          <el-button class="exit-button" type="primary" @click="changeLanguagefun('CN')">简体中文</el-button>
+          <div class="exit-button lang-button" :class="lang==='English'?'lang-selected':''"  @click="changeLanguagefun('EN')">English</div>
+          <div class="divider"></div>
+          <div class="exit-button lang-button" :class="lang==='简体中文'?'lang-selected':''"  @click="changeLanguagefun('CN')">简体中文</div>
         </el-popover>
         <div class="mode">
           <span v-if="theme === 'light'" @click="changeTheme">
@@ -217,106 +234,161 @@ watch(
           <template #reference>
             <img class="avatar" src="@/assets/svgs/user.svg" />
           </template>
-          <el-button class="exit-button" type="primary" @click="logoutHandler">{{ $t('Login.logout') }}</el-button>
-          <el-button class="exit-button" @click="apikeyVisible = true">API KEY</el-button>
-          <el-button class="exit-button" @click="KnowledgeVisible = true">{{ i18n.global.t('witChainD.witChainD') }}</el-button>
+          <div class="exit-button lang-button" type="primary" @click="logoutHandler">{{ $t('Login.logout') }}</div>
+          <div class="divider"></div>
+          <div class="exit-button lang-button" @click="apikeyVisible = true">API KEY</div>
+          <div class="divider"></div>
+          <div class="exit-button lang-button" @click="KnowledgeVisible = true">{{
+            i18n.global.t('witChainD.witChainD')
+          }}</div>
         </el-popover>
       </div>
     </header>
-    <Copilot />
-    <el-dialog 
-    class="apikey" 
-    v-model="apikeyVisible" 
-    title="API KEY"
-    width="50%" 
-    align-center
-    :before-close='handleDialogClose'
+    <div class="dialogue-container">
+      <div class="dialogue-menu">
+        <router-link v-for="item in routerList" :key="item.path" :to="item.path" class="menu-item">
+          <span class="menu-icon">
+            <el-icon class="menu-icon" @click="addNewSession(item.routerName)">
+              <img v-if="router.currentRoute.value.name?.toString().indexOf(item.routerName)!==-1" class="create-button__icon" :src="item.selectedSrc">
+              <img v-else class="create-button__icon" :src="item.src">
+            </el-icon>
+          </span>
+          <span class="menu-text">{{ item.name }}</span>
+        </router-link>
+      </div>
+      <div class="dialogue-content">
+        <RouterView />
+      </div>
+    </div>
+    <el-dialog
+      class="apikey"
+      v-model="apikeyVisible"
+      title="API KEY"
+      width="50%"
+      align-center
+      :before-close="handleDialogClose"
     >
-    <div class="apikey_view">
-      <el-alert v-if='apikey' class='apikey_view_alert' type="info" :show-icon='true' :closable='false'>{{ i18n.global.t('apikey.save_apikey') }}</el-alert>
-      <div class='apikey_view_main'>
-        <div class='main'>
-          <div class='main_view' v-if="!apikey&&hidden">
-            <span>******************************</span>
-          </div>
-          <div class='main_view' v-else-if='!apikey'>
-            <img v-if="themeStore.theme === 'dark'" src="src/assets/svgs/dark_null.svg" />
-            <img v-else src="src/assets/svgs/light_null.svg" alt="">
-            <span>{{ i18n.global.t('apikey.no_apikey') }}</span>
-          </div>
-          <div class='main_view' v-else>
-            <div class='main_view_span'>
-              <div>{{apikey}}</div>
+      <div class="apikey_view">
+        <el-alert v-if="apikey" class="apikey_view_alert" type="info" :show-icon="true" :closable="false">{{
+          i18n.global.t('apikey.save_apikey')
+        }}</el-alert>
+        <div class="apikey_view_main">
+          <div class="main">
+            <div class="main_view" v-if="!apikey && hidden">
+              <span>******************************</span>
+            </div>
+            <div class="main_view" v-else-if="!apikey">
+              <img v-if="themeStore.theme === 'dark'" src="src/assets/svgs/dark_null.svg" />
+              <img v-else src="src/assets/svgs/light_null.svg" alt="" />
+              <span>{{ i18n.global.t('apikey.no_apikey') }}</span>
+            </div>
+            <div class="main_view" v-else>
+              <div class="main_view_span">
+                <div>{{ apikey }}</div>
+              </div>
+            </div>
+            <div v-if="apikey">
+              <el-button type="primary" @click="copy">{{ i18n.global.t('feedback.copy') }}</el-button>
+              <el-button @click="revokeApi">{{ i18n.global.t('feedback.revoke') }}</el-button>
+            </div>
+            <div v-else-if="!apikey && !revoke">
+              <el-button type="primary" @click="updateApi">{{ i18n.global.t('feedback.refresh') }}</el-button>
+              <el-button @click="revokeApi">{{ i18n.global.t('feedback.revoke') }}</el-button>
+            </div>
+            <div v-else>
+              <el-button type="primary" @click="createApi">{{ i18n.global.t('apikey.create_apikey') }}</el-button>
             </div>
-          </div>
-          <div v-if='apikey'>
-            <el-button type='primary' @click='copy' >{{ i18n.global.t('feedback.copy') }}</el-button>
-            <el-button @click='revokeApi'>{{ i18n.global.t('feedback.revoke') }}</el-button>
-          </div>
-          <div v-else-if='!apikey&&!revoke'>
-            <el-button type='primary' @click='updateApi'>{{ i18n.global.t('feedback.refresh') }}</el-button>
-            <el-button @click='revokeApi'>{{ i18n.global.t('feedback.revoke') }}</el-button>
-          </div>
-          <div v-else>
-            <el-button type='primary' @click='createApi'>{{ i18n.global.t('apikey.create_apikey') }}</el-button>
           </div>
         </div>
       </div>
-    </div>
-  </el-dialog>
-  <el-dialog
-    align-center
-    v-model="KnowledgeVisible"
-    class="model-dialog"
-    width="560"
-    @close="handleKnowledgeDialogClose"
-    :title="$t('witChainD.witChainD')"
-  >
-    <el-form
-      ref="ruleFormRef"
-      :model="ruleForm"
-      :rules="rules"
-      label-position="left"
-      @validate="handleFormValidate"
+    </el-dialog>
+    <el-dialog
+      align-center
+      v-model="KnowledgeVisible"
+      class="model-dialog"
+      width="560"
+      @close="handleKnowledgeDialogClose"
+      title="WitChainD"
     >
-      <el-form-item
-        :label="$t('witChainD.witChainD_id')"
-        class="docName"
-      >
-        <el-input
-          v-model="ruleForm.kb_id"
-          :placeholder="$t('witChainD.describe_the_witChainD')"
-        >
-          <template #suffix>
-            <el-icon
-              class="warning-icon"
-              v-if="!formValidateStatus.kb_id"
-            >
-              <WarningFilled />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item class="model-ops-btn">
-        <el-button
-          class="resetBtn"
-          type="primary"
-          :disabled="isSubmitDisabled"
-          @click="handleConfirmCreateModel(ruleFormRef)"
-        >
-           {{ i18n.global.t('history.ok') }}
-        </el-button>
-        <el-button class="resetBtn" @click="handleKnowledgeDialogClose">
-          {{ i18n.global.t('history.cancel') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </el-dialog>
+      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="left" @validate="handleFormValidate">
+        <el-form-item :label="$t('witChainD.witChainD_id')" prop="openai_api_key" class="docName">
+          <el-input v-model="ruleForm.kb_id" :placeholder="$t('witChainD.describe_the_witChainD')">
+            <template #suffix>
+              <el-icon class="warning-icon" v-if="!formValidateStatus.kb_id">
+                <WarningFilled />
+              </el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="model-ops-btn">
+          <el-button
+            class="resetBtn"
+            type="primary"
+            :disabled="isSubmitDisabled"
+            @click="handleConfirmCreateModel(ruleFormRef)"
+          >
+            {{ i18n.global.t('history.ok') }}
+          </el-button>
+          <el-button class="resetBtn" @click="handleKnowledgeDialogClose">
+            {{ i18n.global.t('history.cancel') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <style lang="scss">
-
+.dialogue-container {
+  display: flex;
+  height: calc(100% - 48px);
+}
+//hover active selected 样式待填充
+.dialogue-menu {
+  position: relative;
+  z-index: 1;
+  width: 64px;
+  height: 100%;
+  padding-top: 8px;
+  background-color: var(--o-bg-color-base);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .menu-item {
+    display: flex;
+    font-style: none;
+    text-decoration: none;
+    width: 64px;
+    height: 64px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    .menu-icon {
+      align-items: center;
+      img{
+        //hover颜色待改进
+        width: 40px;
+          &:hover {
+            filter: invert(43%) sepia(94%) saturate(1622%) hue-rotate(190deg) brightness(101%) contrast(101%);
+          }
+          &:active {
+            filter: invert(43%) sepia(94%) saturate(1622%) hue-rotate(190deg) brightness(101%) contrast(101%);
+          }
+      }
+    }
+    .menu-text {
+      font-style: none;
+      display: block;
+      font-size: 12px;
+      color: var(--o-text-color-primary);
+    }
+  }
+}
+.dialogue-content {
+  height: 100%;
+  flex: 1;
+}
 .model-dialog {
   padding: 0 !important;
   .el-dialog__title {
diff --git a/src/views/tools/index.vue b/src/views/tools/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7aa484a91177360e0cecdf29d8cc3c6b1dfae67d
--- /dev/null
+++ b/src/views/tools/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="container">
+    <p>tools</p>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  width: 100%;
+  max-width: 430px;
+}
+</style>