diff --git a/.env b/.env
index c5d6c9f2..f49eee36 100755
--- a/.env
+++ b/.env
@@ -2,6 +2,6 @@ ENV = 'development'
 
 VITE_BASE=/
 VUE_APP_PREVIEW=false
-VITE_BASE_API=https://xxx.xxx.com
-VITE_SOCKET_API=wss://xxx.xxx.com
+VITE_BASE_API=http://127.0.0.1:9503
+VITE_SOCKET_API=ws://127.0.0.1:9504
 VUE_APP_WEBSITE_NAME="Lumen IM"
\ No newline at end of file
diff --git a/src/api/embedding.js b/src/api/embedding.js
new file mode 100644
index 00000000..41e0a4ad
--- /dev/null
+++ b/src/api/embedding.js
@@ -0,0 +1,85 @@
+import { post, get, upload } from '@/utils/request'
+
+export function queryModelList(data={}) {
+  return post('/api/v1/echo/embedding/modelList', data)
+  // return new Promise((resolve, reject) => {
+  //   chrome.runtime.sendMessage(
+  //     {
+  //       type: "post-data",
+  //       url: "/echo/embedding/modelList",
+  //     },
+  //     (response) => {
+  //       if (!response.status) {
+  //         resolve(response.data);
+  //       } else {
+  //         reject(response);
+  //       }
+  //     }
+  //   );
+  // });
+}
+
+export function queryChatList(params) {
+  return post('/api/v1/echo/embedding/chatList', params)
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/embedding/chatList",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+}
+
+export function queryChatContentList(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/embedding/chatContentList",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/embedding/chatContentList', params)
+}
+
+export function queryCollectModelList() {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/embedding/collectModelList",
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/embedding/collectModelList')
+}
+
+// /echo/embedding/chatCompletion
+export function queryChatCompletion(params) {
+  return get('/api/v1/echo/embedding/chatCompletion', params)
+}
+
diff --git a/src/api/openAI.js b/src/api/openAI.js
new file mode 100644
index 00000000..85a0c04e
--- /dev/null
+++ b/src/api/openAI.js
@@ -0,0 +1,103 @@
+import { post, get, upload } from '@/utils/request'
+
+export function queryChatList(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/openai/chatList",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/openai/chatList', params)
+}
+
+export function createChat() {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/openai/createChat",
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/openai/createChat')
+}
+
+export function queryChatContentList(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/openai/chatContentListByPage",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/openai/chatContentListByPage', params)
+}
+
+export function queryPlugins() {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/openai/plugins",
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/openai/plugins')
+}
+
+export function updateChatAiPlugin(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/openai/updateChatAiPlugin",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/openai/updateChatAiPlugin', params)
+}
+
+export function callChat(params) {
+  return post('/api/v1/copilot/chat', params)
+}
diff --git a/src/api/shortCut.js b/src/api/shortCut.js
new file mode 100644
index 00000000..7eb69acc
--- /dev/null
+++ b/src/api/shortCut.js
@@ -0,0 +1,81 @@
+import { post, get, upload } from '@/utils/request'
+
+export function fetchAddShortCut(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/shortcut/add",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/shortcut/add', params)
+}
+
+export function fetchShortCutList() {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/shortcut/list",
+    //     params: {},
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/shortcut/list')
+}
+
+export function fetchShortCutDetail(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/shortcut/detail",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/shortcut/detail', params)
+}
+
+export function fetchUpdateShortCut(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/shortcut/update",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/shortcut/update', params)
+}
diff --git a/src/api/user.js b/src/api/user.js
index 76c55b7c..a9ed9976 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -29,3 +29,136 @@ export const ServeGetUserDetail = () => {
 export const ServeGetUserSetting = () => {
   return get('/api/v1/users/setting')
 }
+
+// 获取用户相关系统配置信息
+export const ServeGetUserConfig = () => {
+  return get('/api/v1/users/config')
+}
+
+// 获取用户相关系统配置信息分组
+export const ServeGetUserConfigGroup = () => {
+  return get('/api/v1/users/config/group')
+}
+
+// 修改配置服务接口
+export const ServeUpdateConfig = (data) => {
+  return post('/api/v1/users/config', data)
+}
+
+export function fetchUserInfo() {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "get-user-data",
+    //   },
+    //   (response) => {
+    //     if (response && !response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return get('/api/v1/users/detail')
+}
+
+export function fetchLogin(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "user-login",
+    // url: "/users/login",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/users/login', params)
+}
+
+export function fetchRegister(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/user/register",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (response && !response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/users/register', params)
+}
+
+export function fetchUpdateUser(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/user/update",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (response && !response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/users/update', params)
+}
+
+export function fetchSendSms(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/user/sendSms",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (response && !response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/users/sendSms', params)
+}
+
+export function queryAppVersion(params) {
+  // return new Promise((resolve, reject) => {
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "post-data",
+    //     url: "/echo/checkVersion",
+    //     params,
+    //   },
+    //   (response) => {
+    //     if (!response.status) {
+    //       resolve(response.data);
+    //     } else {
+    //       reject(response);
+    //     }
+    //   }
+    // );
+  // });
+  return post('/api/v1/echo/checkVersion', params)
+}
diff --git a/src/assets/echo.png b/src/assets/echo.png
new file mode 100644
index 00000000..13f50909
Binary files /dev/null and b/src/assets/echo.png differ
diff --git a/src/components/Chat/ChatCard.vue b/src/components/Chat/ChatCard.vue
new file mode 100644
index 00000000..2fa403cd
--- /dev/null
+++ b/src/components/Chat/ChatCard.vue
@@ -0,0 +1,274 @@
+<script setup>
+import { ref, defineProps, h, defineEmits } from "vue";
+import { message, Spin } from "ant-design-vue";
+import { ICopy, ICheckOutlined, IOct, ICloseCircle } from "../icons";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+  },
+  showLoading: {
+    type: Boolean,
+    required: true,
+  },
+  showSuggestions: {
+    type: Boolean,
+    default: true,
+  },
+  selectText: {
+    type: String,
+  },
+});
+
+// const emit = defineEmits();
+const emit = defineEmits(['update:textareaContent']);
+
+const suggestions = ref([
+  "写一首七言古诗",
+  "如何在 Javascript 中发出 HTTP 请求？",
+]);
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: "14px",
+    color: "#3872e0",
+  },
+  spin: true,
+});
+
+const showCopySuccess = ref(false);
+const handleCopySuccess = () => {
+  showCopySuccess.value = true;
+  message.success("复制成功");
+  setTimeout(() => {
+    showCopySuccess.value = false;
+  }, 3000);
+};
+
+const handleClickSuggestion = (item) => {
+  emit("suggest", item);
+};
+const handleCloseSelectionText = () => {
+  emit("clearSection");
+};
+</script>
+<template>
+  <div class="chat-container" style="padding-bottom: 60px">
+    <slot name="more"></slot>
+    <template v-for="item in list" :key="item._id">
+      <div class="chat-item chat-question" v-if="item.item_type === 'intent'">
+        <div class="feedback message-content-wrap">
+          <div class="chat-content markdown-body">
+            <p class="highlight" v-html="item.content"></p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="chat-item chat-reply"
+        v-if="item.item_type === 'reply' && item.content"
+      >
+        <div class="feedback message-content-wrap">
+          <div class="chat-content markdown-body gpt-markdown">
+            <div class="markdown __markdown light markdown-body">
+              <p class="highlight" v-html="item.content"></p>
+              <div class="operate-bar">
+                <span
+                  title="复制内容"
+                  v-if="item.content && !showCopySuccess"
+                  v-clipboard:copy="item.content"
+                  v-clipboard:success="handleCopySuccess"
+                >
+                  <ICopy :width="16" :height="16"></ICopy>
+                </span>
+                <span title="已复制！" v-if="showCopySuccess">
+                  <ICheckOutlined :width="16" :height="16"></ICheckOutlined>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="chat-item chat-reply selection-text" v-if="selectText">
+      <div class="feedback message-content-wrap">
+        <div class="chat-content markdown-body gpt-markdown">
+          <div class="tips">
+            <IOct width="12" heigth="12" />
+            选择内容
+          </div>
+          <div class="markdown __markdown light">{{ selectText }}</div>
+          <span class="selection-text-close" @click="handleCloseSelectionText"
+            ><ICloseCircle
+          /></span>
+        </div>
+      </div>
+    </div>
+    <div class="chat-item chat-reply" v-if="showLoading">
+      <div class="feedback message-content-wrap">
+        <div class="chat-content markdown-body gpt-markdown">
+          <div class="markdown __markdown light">
+            <Spin :indicator="indicator" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="chat-suggestion"
+      v-if="(!curChat || !curChat.short_cut_id) && showSuggestions"
+    >
+      <div class="suggestion-bar">
+        <div
+          class="suggestion-item"
+          v-for="(item, key) in suggestions"
+          :key="key"
+          @click="handleClickSuggestion(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.chat-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: visible auto;
+  box-sizing: border-box;
+  max-height: 100%;
+  width: 100%;
+  height: calc(100vh - 245px);
+  padding: 16px 13px 20px 16px;
+  scrollbar-gutter: stable;
+  font-size: 14px;
+}
+.chat-item {
+  margin-bottom: 16px;
+  position: relative;
+}
+.chat-question {
+  text-align: right;
+}
+.feedback {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+.chat-item .chat-content {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 22px;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  max-width: 100%;
+}
+.chat-content {
+  transition: box-shadow 0.1s ease;
+}
+.chat-question .chat-content {
+  border-radius: 8px 8px 0;
+  background: #6e819c;
+  color: #fff;
+  text-align: left;
+}
+.chat-item .chat-content p {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.chat-question .chat-content p {
+  white-space: pre-wrap;
+}
+:deep(.chat-item .chat-content p a) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: none;
+  text-decoration: none;
+}
+.chat-reply {
+  text-align: left;
+}
+.chat-reply .operate-bar {
+  display: none;
+}
+.chat-reply:hover .operate-bar {
+  display: block;
+}
+.operate-bar span {
+  cursor: pointer;
+}
+.operate-bar {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  background: #f6f8fa;
+  padding: 5px;
+  border-radius: 5px;
+  line-height: 1;
+}
+.chat-reply .chat-content {
+  border-radius: 8px 8px 8px 0;
+  background: #f6f8fa;
+  color: #000;
+}
+.chat-reply .chat-content.markdown-body.gpt-markdown {
+  font-size: 14px;
+  line-height: 1.6;
+}
+.chat-suggestion {
+  margin-top: 120px;
+  margin-bottom: -30px;
+}
+.suggestion-bar {
+  visibility: visible;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+  box-sizing: border-box;
+  padding-left: 75px;
+}
+.suggestion-item {
+  display: inline-flex;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  max-width: 100%;
+  border: 1px solid rgba(56, 114, 224, 0.48);
+  border-radius: 8px 8px 0;
+  background: #ffffff;
+  transition: border 0.2s ease, background 0.2s ease;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 16px;
+  color: #225ebe;
+}
+.tips {
+  user-select: none;
+  margin-bottom: 4px;
+  color: #8b949d;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  line-height: 24px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.selection-text {
+  position: relative;
+}
+.selection-text-close {
+  position: absolute;
+  top: -2px;
+  right: 0px;
+  color: #8b949d;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/Chat/ChatInput.vue b/src/components/Chat/ChatInput.vue
new file mode 100644
index 00000000..1b0a016d
--- /dev/null
+++ b/src/components/Chat/ChatInput.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { ref, defineProps, watch, defineEmits, onUnmounted } from "vue";
+import { ISend } from "../icons";
+const props = defineProps({
+  textareaContent: {
+    type: String,
+  },
+});
+const emit = defineEmits(['update:textareaContent']);
+
+const content = ref(props.textareaContent);
+
+const stop = watch(
+  () => props.textareaContent,
+  () => {
+    content.value = props.textareaContent || "";
+  },
+  { deep: true }
+);
+
+const stopContent = watch(
+  () => content.value,
+  () => {
+    emit("update:textareaContent", content.value);
+  }
+);
+
+const handleEnter = (event) => {
+  emit("enter");
+  if (event) event.preventDefault();
+};
+
+onUnmounted(() => {
+  stop();
+  stopContent();
+});
+</script>
+<template>
+  <div class="input-box">
+    <div class="input">
+      <div class="input-container">
+        <div class="input-msg-content">
+          <div class="textarea">
+            <div
+              class="mirror-node"
+              style="max-height: 100px; min-height: 32px"
+            >
+              <span></span>
+            </div>
+            <textarea
+              placeholder="问我任何问题..."
+              @keypress.enter.stop="handleEnter"
+              v-model="content"
+            ></textarea>
+          </div>
+        </div>
+      </div>
+      <div class="input-toolbar">
+        <div class="input-msg-btn send" @click="handleEnter">
+          <ISend width="16" height="16"></ISend>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.input-box {
+  width: 100%;
+  position: relative;
+  padding-bottom: 16px;
+}
+.input-box .input {
+  width: 100%;
+  min-height: 146px;
+  background: white;
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border: 1px solid #6e819c;
+}
+.input-box .input-container {
+  flex: 1;
+  display: flex;
+  margin-bottom: 5px;
+  padding-top: 7px;
+}
+.input-msg-content {
+  flex: 1;
+  position: relative;
+}
+.textarea {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  font-family: Courier New, Courier, monospace;
+}
+.textarea .mirror-node {
+  width: 100%;
+  min-height: 32px;
+  pointer-events: none;
+  box-sizing: border-box;
+  padding: 2px;
+  visibility: hidden;
+}
+.textarea textarea {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  font-size: 14px;
+  overflow: hidden auto;
+  box-shadow: none;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  color: #212b36;
+  outline: none;
+}
+.input-toolbar {
+  height: 24px;
+  display: flex;
+  user-select: none;
+  justify-content: flex-end;
+}
+
+.input-toolbar .input-word-limit {
+  flex: 1;
+  line-height: 24px;
+  font-size: 12px;
+  color: #737373;
+  visibility: hidden;
+}
+.input-toolbar .input-msg-btn {
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  color: #737373;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 15px;
+  position: relative;
+  right: -6px;
+  top: -2px;
+}
+.input-msg-btn.send {
+  opacity: 0.8;
+}
+.input-msg-btn:hover {
+  background: #ededef;
+}
+</style>
diff --git a/src/components/Chat/Knowledge.vue b/src/components/Chat/Knowledge.vue
new file mode 100644
index 00000000..27f69855
--- /dev/null
+++ b/src/components/Chat/Knowledge.vue
@@ -0,0 +1,480 @@
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import ChatCard from './ChatCard.vue'
+import ChatInput from './ChatInput.vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+dayjs.extend(relativeTime)
+import { message } from 'ant-design-vue'
+import showdown from 'showdown'
+import { IArrowDown } from '../icons'
+import {
+  queryChatList,
+  queryChatContentList,
+  queryModelList,
+  queryCollectModelList,
+  queryChatCompletion
+} from '../../api/embedding'
+
+const curChat = ref(null)
+const chatContentList = ref([])
+const textarea = ref('')
+const showLoading = ref(false)
+const generating = ref(false)
+
+const modelList = ref([])
+const model = ref(null)
+const showSelectModel = ref(false)
+
+const converter = new showdown.Converter()
+
+const getHtml = (content) => {
+  return converter.makeHtml(content)
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    document
+      .querySelector('#echo-content-root')
+      .shadowRoot.querySelector('.chat-container').scrollTop = 999999
+  })
+}
+const fetchChatList = async () => {
+  if (!model.value) {
+    console.log('model.value', model.value)
+    return
+  }
+  try {
+    const response = await queryChatList({
+      model_id: model.value?._id
+    })
+    if (response && response.length) {
+      curChat.value = response[0]
+    }
+  } catch (e) {
+    message.error(e.message)
+  }
+}
+const fetchChatContentList = async () => {
+  if (!curChat.value) return
+  try {
+    const response = await queryChatContentList({
+      chat_id: curChat.value._id
+    })
+    chatContentList.value = (response || []).map((item) => {
+      return {
+        ...item,
+        content: getHtml(item.content)
+      }
+    })
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: '👋 你好，有什么可以帮助你？',
+      item_type: 'reply',
+      gmt_create: Date.now()
+    })
+    chatContentList.value.reverse()
+  } catch (e) {
+    message.error(e.message)
+  }
+}
+
+const handleChangeTextarea = (content) => {
+  textarea.value = content
+}
+
+const handleEnter = async () => {
+  if (!model.value) {
+    return message.error('请选择模型')
+  }
+  if (!textarea.value) {
+    return message.error('请输入内容')
+  }
+  if (generating.value) {
+    return message.error('会话中,请稍后再试!')
+  }
+
+  const content = textarea.value
+
+  chatContentList.value.push({
+    chat_id: curChat.value._id,
+    content,
+    item_type: 'intent',
+    gmt_create: Date.now()
+  })
+
+  textarea.value = ''
+
+  scrollToBottom()
+  showLoading.value = true
+
+  try {
+    generating.value = true
+
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "get-sse",
+    //     url: "/echo/embedding/chatCompletion",
+    //     params: {
+    //       text: content,
+    //       chat_id: curChat.value._id,
+    //       model_id: model.value?._id,
+    //     },
+    //     from: "knowledge",
+    //   },
+    //   () => {}
+    // );
+
+    // 发送消息
+    const params = {
+      text: content,
+      chat_id: curChat.value._id,
+      model_id: model.value?._id
+    }
+    await queryChatCompletion(params)
+
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: '',
+      item_type: 'reply',
+      gmt_create: Date.now()
+    })
+  } catch (e) {
+    message.error(e.message)
+    showLoading.value = false
+  }
+}
+const fetchCollectModelList = async () => {
+  try {
+    const response = await queryCollectModelList()
+    if (response && response.length) {
+      modelList.value = modelList.value.concat(
+        (response || []).map((item) => ({
+          label: item.name,
+          value: item._id,
+          _id: item._id
+        }))
+      )
+      if (!model.value) {
+        model.value = modelList.value[0]
+      }
+    }
+  } catch (e) {
+    modelList.value = []
+  }
+}
+const fetchModelList = async () => {
+  try {
+    const response = await queryModelList()
+    if (response && response.length) {
+      modelList.value = (response || []).map((item) => ({
+        label: item.name,
+        value: item._id,
+        _id: item._id
+      }))
+      model.value = modelList.value[0]
+    }
+  } catch (e) {
+    modelList.value = []
+  }
+  fetchCollectModelList()
+}
+const initData = async () => {
+  await fetchModelList()
+  await fetchChatList()
+  await fetchChatContentList()
+}
+
+const handleChangeModel = async (item) => {
+  model.value = { ...item }
+  showSelectModel.value = false
+  await fetchChatList()
+  await fetchChatContentList()
+  scrollToBottom()
+}
+
+const handleAddModel = () => {
+  window.open('https://echo-ai.yunzhu.info/')
+  showSelectModel.value = false
+}
+
+onMounted(async () => {
+  await initData()
+  scrollToBottom()
+
+  // 监听实时消息
+  // chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  //   const { from, text, finish_reason } = request || {};
+  //   if (from !== "knowledge") return;
+  //   if (text) {
+  //     chatContentList.value[chatContentList.value.length - 1].content += text;
+  //     scrollToBottom();
+  //   }
+  //   showLoading.value = false;
+  //   if (finish_reason === "stop") {
+  //     generating.value = false;
+  //   }
+  //   sendResponse(true);
+  //   return true;
+  // });
+})
+</script>
+<template>
+  <div style="height: calc(100vh - 90px)">
+    <div class="chat-wrapper" style="display: flex">
+      <div class="chat chat_light">
+        <div class="chat-box">
+          <div class="wrapper">
+            <ChatCard
+              :list="chatContentList"
+              :showLoading="showLoading"
+              :showSuggestions="false"
+            ></ChatCard>
+          </div>
+          <div class="input-panel">
+            <div class="toolbar">
+              <div class="lt">
+                <div
+                  class="btn echo-btn toolbar-btn outline primary-outline-button small-button model-container"
+                  style="font-weight: normal"
+                  @click="showSelectModel = !showSelectModel"
+                >
+                  <div class="flex">
+                    <span class="model-name" v-if="model">{{ model ? model.label : '' }}</span>
+                    <span class="model-name model-name-placeholder" v-else>请选择</span>
+                    <IArrowDown :width="8" />
+                  </div>
+                  <div class="model-list" v-if="showSelectModel">
+                    <div class="model-item" @click.stop="handleAddModel" style="color: #3872e0">
+                      +新增模型
+                    </div>
+                    <div
+                      class="model-item"
+                      v-for="item in modelList"
+                      :key="item.value"
+                      @click.stop="handleChangeModel(item)"
+                    >
+                      {{ item.label }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <ChatInput
+              :textarea-content="textarea"
+              @enter="handleEnter"
+              @update:textareaContent="handleChangeTextarea"
+            ></ChatInput>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.chat-wrapper {
+  visibility: visible;
+  position: relative;
+  height: 100%;
+}
+.chat {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+.chat .chat-box {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.chat .chat-box .wrapper {
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.chat .chat-box .input-panel {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  z-index: 501;
+  /* background: #f4f6f8; */
+  border-top: 1px solid rgba(145, 158, 171, 0.05);
+}
+.chat .chat-box .input-panel .toolbar {
+  height: 37px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.chat .chat-box .input-panel .toolbar .lt {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+}
+.echo-btn {
+  box-sizing: border-box;
+  padding: 0 15px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  white-space: nowrap;
+}
+.primary-button.btn {
+  background: #3872e0;
+  border: 1px solid #3872e0;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  font-weight: 700;
+  font-size: 14px;
+  justify-content: center;
+  color: #fff;
+  line-height: 24px;
+}
+.echo-btn.small-button {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-size: 12px;
+  padding: 0 8px;
+  font-weight: 400;
+}
+.chat .chat-box .input-panel .toolbar .lt .toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  height: 26px;
+  padding: 0 6px;
+  border-radius: 4px;
+}
+
+.chat .input-panel .toolbar .lt .toolbar-btn.outline {
+  border: 1px solid rgba(56, 114, 224, 0.48);
+}
+.primary-outline-button.btn {
+  background: #ffffff;
+  border: 1px solid rgba(56, 114, 224, 0.48);
+  border-radius: 6px;
+  align-items: center;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: #3872e0;
+  line-height: 24px;
+}
+
+.chat .input-container .input-msg-content {
+  flex: 1;
+  position: relative;
+}
+.textarea {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  font-family:
+    Courier New,
+    Courier,
+    monospace;
+}
+.textarea .mirror-node {
+  width: 100%;
+  min-height: 32px;
+  pointer-events: none;
+  box-sizing: border-box;
+  padding: 2px;
+  visibility: hidden;
+}
+.textarea textarea {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  font-size: 14px;
+  overflow: hidden auto;
+  box-shadow: none;
+  background-color: #fff;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
+  color: #212b36;
+  outline: none;
+}
+
+.model-container {
+  position: relative;
+}
+.model-list {
+  position: absolute;
+  min-width: 200px;
+  max-width: 300px;
+  max-height: 250px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  background: #fff;
+  box-shadow: 0 8px 16px #919eab29;
+  border-radius: 5px;
+  z-index: 900;
+  border: 1px solid #e5e8eb;
+  bottom: 30px;
+  left: 0;
+}
+.model-item {
+  cursor: pointer;
+  font-size: 13px;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+  padding: 0 8px;
+  background: #fff;
+  color: #333;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.model-item:hover {
+  background-color: #3366ff14;
+}
+.model-name {
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 80px;
+}
+.model-name-placeholder {
+  color: #919eab;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/components/Chat/More.vue b/src/components/Chat/More.vue
new file mode 100644
index 00000000..73e7837e
--- /dev/null
+++ b/src/components/Chat/More.vue
@@ -0,0 +1,41 @@
+<script setup></script>
+<template>
+  <div class="more">
+    <span class="icon">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        data-v-ea893728=""
+      >
+        <path
+          fill="currentColor"
+          d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"
+        ></path>
+      </svg>
+    </span>
+    <span class="text">点击加载更多</span>
+  </div>
+</template>
+<style scoped>
+.more {
+  height: 30px;
+  width: 100%;
+  position: relative;
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
+  top: -10px;
+}
+.icon {
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.text {
+  display: block;
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/Chat/Translate.vue b/src/components/Chat/Translate.vue
new file mode 100644
index 00000000..d7393d74
--- /dev/null
+++ b/src/components/Chat/Translate.vue
@@ -0,0 +1,861 @@
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import ChatCard from './ChatCard.vue'
+import ChatInput from './ChatInput.vue'
+import More from './More.vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+dayjs.extend(relativeTime)
+import { message } from 'ant-design-vue'
+import showdown from 'showdown'
+import { IClose, IPlus, IHistory, IEdit, IArrowDown } from '../icons'
+import {
+  queryChatList,
+  queryChatContentList,
+  createChat,
+  queryPlugins,
+  updateChatAiPlugin,
+  callChat
+} from '../../api/openAI'
+import { fetchShortCutDetail } from '../../api/shortCut'
+import { queryChatCompletion } from '../../api/embedding'
+
+const historyVisible = ref(false)
+const historys = ref([])
+const onlineChatList = ref([])
+const curChat = ref(null)
+const curOnlineChat = ref(null)
+const chatContentList = ref([])
+const chatContentTotal = ref(0)
+const chatContentParam = ref({
+  page: 0,
+  size: 20
+})
+const chatContentLoading = ref(false)
+const textareaContent = ref('')
+const showLoading = ref(false)
+const generating = ref(false)
+const plugins = ref([])
+const usePlugin = ref([])
+const selectionText = ref('')
+
+const converter = new showdown.Converter()
+
+const getHtml = (content) => {
+  return converter.makeHtml(content)
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    document
+      .querySelector('#echo-content-root')
+      .shadowRoot.querySelector('.chat-container').scrollTop = 999999
+  })
+}
+const fetchPluginList = async () => {
+  try {
+    // const response = await queryPlugins();
+    const response = []
+
+    plugins.value = response
+  } catch (e) {
+    plugins.value = []
+  }
+}
+const fetchChatList = async () => {
+  try {
+    // const response = await queryChatList();
+    const response = [
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      }
+    ]
+    historys.value = response.filter((item) => !item.short_cut_id)
+    if (response && response.length) {
+      curChat.value = response[0]
+      usePlugin.value = curChat.value.plugins || []
+      chatContentParam.value.page = 0
+      chatContentList.value = []
+    }
+  } catch (e) {
+    message.error(e.message)
+  }
+}
+const fetchOnlineChatList = async () => {
+  try {
+    // const response = await queryChatList();
+    const response = [
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你是谁？',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      }
+    ]
+    onlineChatList.value = response
+    if (response && response.length) {
+      curOnlineChat.value = response[0]
+    }
+  } catch (e) {
+    message.error(e.message)
+  }
+}
+const fetchChatContentList = async () => {
+  if (!curChat.value) return
+  if (chatContentLoading.value) return
+  try {
+    chatContentLoading.value = true
+    // const response = await queryChatContentList({
+    //   chat_id: curChat.value._id,
+    //   page: chatContentParam.value.page,
+    //   size: chatContentParam.value.size,
+    // });
+    const response = {
+      items: [
+        {
+          chat_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+          content: '你好',
+          gmt_create: 1627020003,
+          gmt_update: 1627020003,
+          item_type: 'intent',
+          userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+          _id: '60f9b1b3e4b0c9b6e0f3e3b5'
+        },
+        {
+          chat_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+          content: '你是谁？',
+          gmt_create: 1627020003,
+          gmt_update: 1627020003,
+          item_type: 'reply',
+          userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+          _id: '60f9b1b3e4b0c9b6e0f3e3b5'
+        },
+        {
+          chat_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+          content: '你好',
+          gmt_create: 1627020003,
+          gmt_update: 1627020003,
+          item_type: 'intent',
+          userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+          _id: '60f9b1b3e4b0c9b6e0f3e3b5'
+        }
+      ]
+    }
+    chatContentList.value = chatContentList.value.reverse().concat(
+      (response.items || []).map((item) => {
+        return {
+          ...item,
+          content: getHtml(item.content)
+        }
+      })
+    )
+    chatContentTotal.value = response.total || 0
+    chatContentList.value = chatContentList.value.reverse()
+    chatContentLoading.value = false
+  } catch (e) {
+    message.error(e.message)
+    chatContentLoading.value = false
+  }
+}
+
+const handleMore = async () => {
+  if (chatContentLoading.value) return
+  chatContentParam.value.page += 1
+  await fetchChatContentList()
+}
+
+const showHistoryDrawer = () => {
+  historyVisible.value = true
+}
+const handleChangeChat = async (item) => {
+  curChat.value = item
+  historyVisible.value = false
+  chatContentParam.value.page = 0
+  chatContentList.value = []
+  await fetchChatContentList()
+  scrollToBottom()
+}
+
+const handleChangeTextarea = (content) => {
+  textareaContent.value = content
+}
+
+const handleEnter = async () => {
+  if (!textareaContent.value) {
+    return message.error('请输入内容')
+  }
+  if (generating.value) {
+    return message.error('会话中,请稍后再试!')
+  }
+  const content = textareaContent.value
+  if (selectionText.value) {
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: selectionText.value,
+      gmt_create: Date.now(),
+      gmt_update: Date.now(),
+      item_type: 'intent',
+      userid: curChat.value.userid,
+      _id: Date.now()
+    })
+  }
+  chatContentList.value.push({
+    chat_id: curChat.value._id,
+    content,
+    gmt_create: Date.now(),
+    gmt_update: Date.now(),
+    item_type: 'intent',
+    userid: curChat.value.userid,
+    _id: Date.now()
+  })
+  textareaContent.value = ''
+  scrollToBottom()
+  showLoading.value = true
+
+  try {
+    let prompt = ''
+    if (curChat.value.short_cut_id) {
+      // const shortCut = await fetchShortCutDetail({
+      //   id: curChat.value.short_cut_id,
+      // });
+      const shortCut = {
+        prompt: '你好'
+      }
+      prompt = shortCut.prompt || ''
+    }
+    generating.value = true
+
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "get-sse",
+    //     url: "/echo/openai/chatCompletion",
+    //     params: {
+    //       prompt,
+    //       content,
+    //       shortCutId: curChat.value.short_cut_id,
+    //       chat_id: curChat.value._id,
+    //       chat_title: curChat.value.title,
+    //       selection_text: selectionText.value,
+    //       stream: true,
+    //     },
+    //     from: "chat",
+    //   },
+    //   () => {}
+    // );
+    const params = {
+      prompt,
+      content,
+      shortCutId: curChat.value.short_cut_id,
+      chat_id: curChat.value._id,
+      chat_title: curChat.value.title,
+      selection_text: selectionText.value,
+      stream: true
+    }
+    const params2 = {
+      id: 'xxx',
+      type: 'room',
+      content: content
+    }
+    const replyText2 = await callChat(params2)
+    console.log('replyText2', replyText2)
+
+    const replyText = replyText2.data.content
+
+    // await fetchChatContentList();
+
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: replyText,
+      gmt_create: Date.now(),
+      gmt_update: Date.now(),
+      item_type: 'reply',
+      userid: curChat.value.userid,
+      _id: Date.now()
+    })
+    selectionText.value = ''
+    showLoading.value = false
+    generating.value = false
+  } catch (e) {
+    message.error(e.message)
+    showLoading.value = false
+  }
+}
+
+const handleNewChat = async () => {
+  await createChat()
+  await fetchChatList()
+  await fetchChatContentList()
+}
+const initData = async () => {
+  await fetchChatList()
+  await fetchChatContentList()
+  await fetchOnlineChatList()
+  await fetchPluginList()
+}
+const handleClickSuggestion = (item) => {
+  textareaContent.value = item
+}
+const handleClearSection = () => {
+  selectionText.value = ''
+}
+// const getPopupContainer = () => {
+//   return document
+//     .querySelector("#echo-content-root")
+//     .shadowRoot.querySelector(".plugin-container");
+// };
+
+// const handleSelectPlugin = async (value, option) => {
+//   const result = await updateChatAiPlugin({
+//     id: curChat.value._id,
+//     plugins: value,
+//   });
+//   return result;
+// };
+
+onMounted(async () => {
+  await initData()
+  scrollToBottom()
+
+  // 监听实时消息
+  // chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  //   const { from, text, finish_reason } = request || {};
+  //   if (from !== "chat") return;
+  //   if (text) {
+  //     chatContentList.value[chatContentList.value.length - 1].content += text;
+  //   }
+  //   showLoading.value = false;
+  //   if (finish_reason === "stop") {
+  //     if (!curChat.value?._id) {
+  //       setTimeout(async () => {
+  //         await fetchChatList();
+  //         await fetchChatContentList();
+  //         generating.value = false;
+  //       }, 1000);
+  //     } else {
+  //       generating.value = false;
+  //     }
+  //   }
+  //   sendResponse(true);
+  //   return true;
+  // });
+  document.addEventListener('selectionchange', (event) => {
+    try {
+      const selection = document.getSelection()
+      const text = selection.toString()
+      // const oRange = selection.getRangeAt(0); //get the text range
+      // const oRect = oRange.getBoundingClientRect();
+      if (text) {
+        selectionText.value = text
+      }
+      // console.log(oRect, text);
+    } catch (e) {
+      /* empty */
+    }
+  })
+})
+</script>
+<template>
+  <div style="height: calc(100vh - 90px)">
+    <div class="chat-wrapper" style="display: flex">
+      <div class="chat chat_light">
+        <div class="chat-box">
+          <div class="wrapper">
+            <ChatCard
+              :list="chatContentList"
+              :showLoading="showLoading"
+              :select-text="selectionText"
+              @suggest="handleClickSuggestion"
+              @clearSection="handleClearSection"
+            >
+              <template v-slot:more>
+                <More
+                  v-if="chatContentTotal > (chatContentParam.page + 1) * chatContentParam.size"
+                  @click="handleMore"
+                ></More>
+              </template>
+            </ChatCard>
+          </div>
+          <div class="input-panel">
+            <div class="toolbar">
+              <div class="lt">
+                <div
+                  class="btn echo-btn toolbar-btn primary-button small-button"
+                  style="font-weight: normal"
+                  @click="handleNewChat"
+                >
+                  <IPlus :width="14" :height="14"></IPlus><span>新会话</span>
+                </div>
+                <div
+                  class="btn echo-btn toolbar-btn outline primary-outline-button small-button"
+                  style="font-weight: normal"
+                  @click="showHistoryDrawer"
+                >
+                  <IHistory width="15" height="15"></IHistory>
+                  <span>会话记录</span>
+                </div>
+              </div>
+            </div>
+            <ChatInput
+              :textareaContent="textareaContent"
+              @update:textareaContent="handleChangeTextarea"
+              @enter="handleEnter"
+            ></ChatInput>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="drawer" :class="{ show: historyVisible }" style="height: 80%; max-height: 680px">
+      <div class="drawer-header">
+        <div class="drawer-title">会话历史记录</div>
+        <IClose
+          class="drawer-close"
+          width="24"
+          height="24"
+          @click="historyVisible = false"
+        ></IClose>
+      </div>
+      <div class="drawer-body">
+        <div class="conv-history-drawer">
+          <div class="conv-list">
+            <div>
+              <div class="conv-item-wrapper">
+                <div
+                  class="conv-item"
+                  v-for="item in historys"
+                  :key="item._id"
+                  @click="handleChangeChat(item)"
+                >
+                  <div class="conv-item-header">
+                    <span class="title">
+                      <span class="title-text">
+                        <span class="">{{ item.title || '新会话' }}</span>
+                      </span>
+                      <span class="edit">
+                        <IEdit width="16" height="16"></IEdit>
+                      </span>
+                    </span>
+                    <span class="date">{{ dayjs(item.gmt_update).toNow() }}</span>
+                  </div>
+                  <div class="conv-item-content">
+                    <span class="conv-item-content-text">{{ item.last_message }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="drawer-mask" v-show="historyVisible">
+      <div class="drawer-close-area" @click="historyVisible = false"></div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.chat-wrapper {
+  visibility: visible;
+  position: relative;
+  height: 100%;
+}
+.chat {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+.chat .chat-box {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.chat .chat-box .wrapper {
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.chat .chat-box .input-panel {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  z-index: 501;
+  /* background: #f4f6f8; */
+  border-top: 1px solid rgba(145, 158, 171, 0.05);
+}
+.chat .chat-box .input-panel .toolbar {
+  height: 37px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.chat .chat-box .input-panel .toolbar .lt {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+}
+.echo-btn {
+  box-sizing: border-box;
+  padding: 0 15px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  white-space: nowrap;
+}
+.primary-button.btn {
+  background: #3872e0;
+  border: 1px solid #3872e0;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  font-weight: 700;
+  font-size: 14px;
+  justify-content: center;
+  color: #fff;
+  line-height: 24px;
+}
+.echo-btn.small-button {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-size: 12px;
+  padding: 0 8px;
+  font-weight: 400;
+}
+.chat .chat-box .input-panel .toolbar .lt .toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  height: 26px;
+  padding: 0 6px;
+  border-radius: 4px;
+}
+
+.chat .input-panel .toolbar .lt .toolbar-btn.outline {
+  border: 1px solid rgba(56, 114, 224, 0.48);
+}
+.primary-outline-button.btn {
+  background: #ffffff;
+  border: 1px solid rgba(56, 114, 224, 0.48);
+  border-radius: 6px;
+  align-items: center;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: #3872e0;
+  line-height: 24px;
+}
+
+.chat .input-container .input-msg-content {
+  flex: 1;
+  position: relative;
+}
+.textarea {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  font-family:
+    Courier New,
+    Courier,
+    monospace;
+}
+.textarea .mirror-node {
+  width: 100%;
+  min-height: 32px;
+  pointer-events: none;
+  box-sizing: border-box;
+  padding: 2px;
+  visibility: hidden;
+}
+.textarea textarea {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  font-size: 14px;
+  overflow: hidden auto;
+  box-shadow: none;
+  background-color: #fff;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
+  color: #212b36;
+  outline: none;
+}
+
+.drawer-container {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.drawer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 -6px 20px -4px #919eab26;
+  filter: drop-shadow(0px 0px 2px rgba(145, 158, 171, 0.2));
+  z-index: 802;
+  transition: transform 0.2s ease-in-out;
+  transform: translateY(150%);
+}
+.drawer.show {
+  transform: translateY(0);
+}
+.drawer .drawer-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  justify-content: center;
+}
+.drawer .drawer-header .drawer-title {
+  font-size: 16px;
+  color: #0d1117;
+  font-weight: 600;
+}
+.drawer .drawer-header .drawer-close {
+  opacity: 0.45;
+  position: absolute;
+  right: 12px;
+  top: 16px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.drawer .drawer-body {
+  flex: 1;
+  min-height: 0px;
+  position: relative;
+  overflow-y: overlay !important;
+}
+.conv-history-drawer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.conv-history-drawer .conv-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0px;
+  overflow-y: overlay !important;
+}
+.conv-history-drawer .conv-list .conv-item-wrapper {
+  padding: 0 16px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.conv-history-drawer .conv-list .conv-item {
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.conv-history-drawer .conv-item .conv-item-header {
+  display: flex;
+  align-items: center;
+  height: 18px;
+  min-height: 18px;
+  justify-content: space-between;
+  gap: 8px;
+}
+.conv-history-drawer .conv-item .conv-item-header .title {
+  color: #0d1117;
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+}
+.conv-history-drawer .conv-item .conv-item-header .title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.conv-history-drawer .conv-item-header .title .edit {
+  opacity: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  width: 16px;
+  height: 16px;
+  margin-left: 5px;
+  color: #a6a6a6;
+}
+.conv-history-drawer .conv-item-header .date {
+  font-weight: 400;
+  font-size: 13px;
+  color: #00000040;
+}
+.conv-history-drawer .conv-item-content {
+  display: flex;
+  align-items: center;
+  line-height: 16px;
+  justify-content: space-between;
+  gap: 8px;
+  color: #595959;
+}
+.conv-history-drawer .conv-item-content-text {
+  font-weight: 500;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.drawer-mask {
+  z-index: 801;
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+.drawer-close-area {
+  z-index: 800;
+  position: absolute;
+  inset: 10px;
+  background-color: transparent;
+}
+
+.model-container {
+  position: relative;
+}
+.model-list {
+  position: absolute;
+  min-width: 165px;
+  max-width: 220px;
+  max-height: 250px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  background: #fff;
+  box-shadow: 0 8px 16px #919eab29;
+  border-radius: 5px;
+  z-index: 900;
+  border: 1px solid #e5e8eb;
+  bottom: 30px;
+  left: 0;
+}
+.model-item {
+  cursor: pointer;
+  font-size: 13px;
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  box-sizing: border-box;
+  padding: 0 5px;
+  background: #fff;
+  color: #333;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.model-item:hover {
+  background-color: #3366ff14;
+}
+.model-name {
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 80px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+:deep(.ant-select-selection-overflow) {
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/Chat/chat.vue b/src/components/Chat/chat.vue
new file mode 100644
index 00000000..d7393d74
--- /dev/null
+++ b/src/components/Chat/chat.vue
@@ -0,0 +1,861 @@
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import ChatCard from './ChatCard.vue'
+import ChatInput from './ChatInput.vue'
+import More from './More.vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+dayjs.extend(relativeTime)
+import { message } from 'ant-design-vue'
+import showdown from 'showdown'
+import { IClose, IPlus, IHistory, IEdit, IArrowDown } from '../icons'
+import {
+  queryChatList,
+  queryChatContentList,
+  createChat,
+  queryPlugins,
+  updateChatAiPlugin,
+  callChat
+} from '../../api/openAI'
+import { fetchShortCutDetail } from '../../api/shortCut'
+import { queryChatCompletion } from '../../api/embedding'
+
+const historyVisible = ref(false)
+const historys = ref([])
+const onlineChatList = ref([])
+const curChat = ref(null)
+const curOnlineChat = ref(null)
+const chatContentList = ref([])
+const chatContentTotal = ref(0)
+const chatContentParam = ref({
+  page: 0,
+  size: 20
+})
+const chatContentLoading = ref(false)
+const textareaContent = ref('')
+const showLoading = ref(false)
+const generating = ref(false)
+const plugins = ref([])
+const usePlugin = ref([])
+const selectionText = ref('')
+
+const converter = new showdown.Converter()
+
+const getHtml = (content) => {
+  return converter.makeHtml(content)
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    document
+      .querySelector('#echo-content-root')
+      .shadowRoot.querySelector('.chat-container').scrollTop = 999999
+  })
+}
+const fetchPluginList = async () => {
+  try {
+    // const response = await queryPlugins();
+    const response = []
+
+    plugins.value = response
+  } catch (e) {
+    plugins.value = []
+  }
+}
+const fetchChatList = async () => {
+  try {
+    // const response = await queryChatList();
+    const response = [
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      }
+    ]
+    historys.value = response.filter((item) => !item.short_cut_id)
+    if (response && response.length) {
+      curChat.value = response[0]
+      usePlugin.value = curChat.value.plugins || []
+      chatContentParam.value.page = 0
+      chatContentList.value = []
+    }
+  } catch (e) {
+    message.error(e.message)
+  }
+}
+const fetchOnlineChatList = async () => {
+  try {
+    // const response = await queryChatList();
+    const response = [
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你是谁？',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      },
+      {
+        _id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        title: '测试会话',
+        userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+        gmt_create: 1627020003,
+        gmt_update: 1627020003,
+        last_message: '你好',
+        short_cut_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+        plugins: ['60f9b1b3e4b0c9b6e0f3e3b5']
+      }
+    ]
+    onlineChatList.value = response
+    if (response && response.length) {
+      curOnlineChat.value = response[0]
+    }
+  } catch (e) {
+    message.error(e.message)
+  }
+}
+const fetchChatContentList = async () => {
+  if (!curChat.value) return
+  if (chatContentLoading.value) return
+  try {
+    chatContentLoading.value = true
+    // const response = await queryChatContentList({
+    //   chat_id: curChat.value._id,
+    //   page: chatContentParam.value.page,
+    //   size: chatContentParam.value.size,
+    // });
+    const response = {
+      items: [
+        {
+          chat_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+          content: '你好',
+          gmt_create: 1627020003,
+          gmt_update: 1627020003,
+          item_type: 'intent',
+          userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+          _id: '60f9b1b3e4b0c9b6e0f3e3b5'
+        },
+        {
+          chat_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+          content: '你是谁？',
+          gmt_create: 1627020003,
+          gmt_update: 1627020003,
+          item_type: 'reply',
+          userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+          _id: '60f9b1b3e4b0c9b6e0f3e3b5'
+        },
+        {
+          chat_id: '60f9b1b3e4b0c9b6e0f3e3b5',
+          content: '你好',
+          gmt_create: 1627020003,
+          gmt_update: 1627020003,
+          item_type: 'intent',
+          userid: '60f9b1b3e4b0c9b6e0f3e3b5',
+          _id: '60f9b1b3e4b0c9b6e0f3e3b5'
+        }
+      ]
+    }
+    chatContentList.value = chatContentList.value.reverse().concat(
+      (response.items || []).map((item) => {
+        return {
+          ...item,
+          content: getHtml(item.content)
+        }
+      })
+    )
+    chatContentTotal.value = response.total || 0
+    chatContentList.value = chatContentList.value.reverse()
+    chatContentLoading.value = false
+  } catch (e) {
+    message.error(e.message)
+    chatContentLoading.value = false
+  }
+}
+
+const handleMore = async () => {
+  if (chatContentLoading.value) return
+  chatContentParam.value.page += 1
+  await fetchChatContentList()
+}
+
+const showHistoryDrawer = () => {
+  historyVisible.value = true
+}
+const handleChangeChat = async (item) => {
+  curChat.value = item
+  historyVisible.value = false
+  chatContentParam.value.page = 0
+  chatContentList.value = []
+  await fetchChatContentList()
+  scrollToBottom()
+}
+
+const handleChangeTextarea = (content) => {
+  textareaContent.value = content
+}
+
+const handleEnter = async () => {
+  if (!textareaContent.value) {
+    return message.error('请输入内容')
+  }
+  if (generating.value) {
+    return message.error('会话中,请稍后再试!')
+  }
+  const content = textareaContent.value
+  if (selectionText.value) {
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: selectionText.value,
+      gmt_create: Date.now(),
+      gmt_update: Date.now(),
+      item_type: 'intent',
+      userid: curChat.value.userid,
+      _id: Date.now()
+    })
+  }
+  chatContentList.value.push({
+    chat_id: curChat.value._id,
+    content,
+    gmt_create: Date.now(),
+    gmt_update: Date.now(),
+    item_type: 'intent',
+    userid: curChat.value.userid,
+    _id: Date.now()
+  })
+  textareaContent.value = ''
+  scrollToBottom()
+  showLoading.value = true
+
+  try {
+    let prompt = ''
+    if (curChat.value.short_cut_id) {
+      // const shortCut = await fetchShortCutDetail({
+      //   id: curChat.value.short_cut_id,
+      // });
+      const shortCut = {
+        prompt: '你好'
+      }
+      prompt = shortCut.prompt || ''
+    }
+    generating.value = true
+
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "get-sse",
+    //     url: "/echo/openai/chatCompletion",
+    //     params: {
+    //       prompt,
+    //       content,
+    //       shortCutId: curChat.value.short_cut_id,
+    //       chat_id: curChat.value._id,
+    //       chat_title: curChat.value.title,
+    //       selection_text: selectionText.value,
+    //       stream: true,
+    //     },
+    //     from: "chat",
+    //   },
+    //   () => {}
+    // );
+    const params = {
+      prompt,
+      content,
+      shortCutId: curChat.value.short_cut_id,
+      chat_id: curChat.value._id,
+      chat_title: curChat.value.title,
+      selection_text: selectionText.value,
+      stream: true
+    }
+    const params2 = {
+      id: 'xxx',
+      type: 'room',
+      content: content
+    }
+    const replyText2 = await callChat(params2)
+    console.log('replyText2', replyText2)
+
+    const replyText = replyText2.data.content
+
+    // await fetchChatContentList();
+
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: replyText,
+      gmt_create: Date.now(),
+      gmt_update: Date.now(),
+      item_type: 'reply',
+      userid: curChat.value.userid,
+      _id: Date.now()
+    })
+    selectionText.value = ''
+    showLoading.value = false
+    generating.value = false
+  } catch (e) {
+    message.error(e.message)
+    showLoading.value = false
+  }
+}
+
+const handleNewChat = async () => {
+  await createChat()
+  await fetchChatList()
+  await fetchChatContentList()
+}
+const initData = async () => {
+  await fetchChatList()
+  await fetchChatContentList()
+  await fetchOnlineChatList()
+  await fetchPluginList()
+}
+const handleClickSuggestion = (item) => {
+  textareaContent.value = item
+}
+const handleClearSection = () => {
+  selectionText.value = ''
+}
+// const getPopupContainer = () => {
+//   return document
+//     .querySelector("#echo-content-root")
+//     .shadowRoot.querySelector(".plugin-container");
+// };
+
+// const handleSelectPlugin = async (value, option) => {
+//   const result = await updateChatAiPlugin({
+//     id: curChat.value._id,
+//     plugins: value,
+//   });
+//   return result;
+// };
+
+onMounted(async () => {
+  await initData()
+  scrollToBottom()
+
+  // 监听实时消息
+  // chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  //   const { from, text, finish_reason } = request || {};
+  //   if (from !== "chat") return;
+  //   if (text) {
+  //     chatContentList.value[chatContentList.value.length - 1].content += text;
+  //   }
+  //   showLoading.value = false;
+  //   if (finish_reason === "stop") {
+  //     if (!curChat.value?._id) {
+  //       setTimeout(async () => {
+  //         await fetchChatList();
+  //         await fetchChatContentList();
+  //         generating.value = false;
+  //       }, 1000);
+  //     } else {
+  //       generating.value = false;
+  //     }
+  //   }
+  //   sendResponse(true);
+  //   return true;
+  // });
+  document.addEventListener('selectionchange', (event) => {
+    try {
+      const selection = document.getSelection()
+      const text = selection.toString()
+      // const oRange = selection.getRangeAt(0); //get the text range
+      // const oRect = oRange.getBoundingClientRect();
+      if (text) {
+        selectionText.value = text
+      }
+      // console.log(oRect, text);
+    } catch (e) {
+      /* empty */
+    }
+  })
+})
+</script>
+<template>
+  <div style="height: calc(100vh - 90px)">
+    <div class="chat-wrapper" style="display: flex">
+      <div class="chat chat_light">
+        <div class="chat-box">
+          <div class="wrapper">
+            <ChatCard
+              :list="chatContentList"
+              :showLoading="showLoading"
+              :select-text="selectionText"
+              @suggest="handleClickSuggestion"
+              @clearSection="handleClearSection"
+            >
+              <template v-slot:more>
+                <More
+                  v-if="chatContentTotal > (chatContentParam.page + 1) * chatContentParam.size"
+                  @click="handleMore"
+                ></More>
+              </template>
+            </ChatCard>
+          </div>
+          <div class="input-panel">
+            <div class="toolbar">
+              <div class="lt">
+                <div
+                  class="btn echo-btn toolbar-btn primary-button small-button"
+                  style="font-weight: normal"
+                  @click="handleNewChat"
+                >
+                  <IPlus :width="14" :height="14"></IPlus><span>新会话</span>
+                </div>
+                <div
+                  class="btn echo-btn toolbar-btn outline primary-outline-button small-button"
+                  style="font-weight: normal"
+                  @click="showHistoryDrawer"
+                >
+                  <IHistory width="15" height="15"></IHistory>
+                  <span>会话记录</span>
+                </div>
+              </div>
+            </div>
+            <ChatInput
+              :textareaContent="textareaContent"
+              @update:textareaContent="handleChangeTextarea"
+              @enter="handleEnter"
+            ></ChatInput>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="drawer" :class="{ show: historyVisible }" style="height: 80%; max-height: 680px">
+      <div class="drawer-header">
+        <div class="drawer-title">会话历史记录</div>
+        <IClose
+          class="drawer-close"
+          width="24"
+          height="24"
+          @click="historyVisible = false"
+        ></IClose>
+      </div>
+      <div class="drawer-body">
+        <div class="conv-history-drawer">
+          <div class="conv-list">
+            <div>
+              <div class="conv-item-wrapper">
+                <div
+                  class="conv-item"
+                  v-for="item in historys"
+                  :key="item._id"
+                  @click="handleChangeChat(item)"
+                >
+                  <div class="conv-item-header">
+                    <span class="title">
+                      <span class="title-text">
+                        <span class="">{{ item.title || '新会话' }}</span>
+                      </span>
+                      <span class="edit">
+                        <IEdit width="16" height="16"></IEdit>
+                      </span>
+                    </span>
+                    <span class="date">{{ dayjs(item.gmt_update).toNow() }}</span>
+                  </div>
+                  <div class="conv-item-content">
+                    <span class="conv-item-content-text">{{ item.last_message }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="drawer-mask" v-show="historyVisible">
+      <div class="drawer-close-area" @click="historyVisible = false"></div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.chat-wrapper {
+  visibility: visible;
+  position: relative;
+  height: 100%;
+}
+.chat {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+.chat .chat-box {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.chat .chat-box .wrapper {
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.chat .chat-box .input-panel {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  z-index: 501;
+  /* background: #f4f6f8; */
+  border-top: 1px solid rgba(145, 158, 171, 0.05);
+}
+.chat .chat-box .input-panel .toolbar {
+  height: 37px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.chat .chat-box .input-panel .toolbar .lt {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+}
+.echo-btn {
+  box-sizing: border-box;
+  padding: 0 15px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  white-space: nowrap;
+}
+.primary-button.btn {
+  background: #3872e0;
+  border: 1px solid #3872e0;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  font-weight: 700;
+  font-size: 14px;
+  justify-content: center;
+  color: #fff;
+  line-height: 24px;
+}
+.echo-btn.small-button {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-size: 12px;
+  padding: 0 8px;
+  font-weight: 400;
+}
+.chat .chat-box .input-panel .toolbar .lt .toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  height: 26px;
+  padding: 0 6px;
+  border-radius: 4px;
+}
+
+.chat .input-panel .toolbar .lt .toolbar-btn.outline {
+  border: 1px solid rgba(56, 114, 224, 0.48);
+}
+.primary-outline-button.btn {
+  background: #ffffff;
+  border: 1px solid rgba(56, 114, 224, 0.48);
+  border-radius: 6px;
+  align-items: center;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: #3872e0;
+  line-height: 24px;
+}
+
+.chat .input-container .input-msg-content {
+  flex: 1;
+  position: relative;
+}
+.textarea {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  font-family:
+    Courier New,
+    Courier,
+    monospace;
+}
+.textarea .mirror-node {
+  width: 100%;
+  min-height: 32px;
+  pointer-events: none;
+  box-sizing: border-box;
+  padding: 2px;
+  visibility: hidden;
+}
+.textarea textarea {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  font-size: 14px;
+  overflow: hidden auto;
+  box-shadow: none;
+  background-color: #fff;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
+  color: #212b36;
+  outline: none;
+}
+
+.drawer-container {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.drawer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 -6px 20px -4px #919eab26;
+  filter: drop-shadow(0px 0px 2px rgba(145, 158, 171, 0.2));
+  z-index: 802;
+  transition: transform 0.2s ease-in-out;
+  transform: translateY(150%);
+}
+.drawer.show {
+  transform: translateY(0);
+}
+.drawer .drawer-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  justify-content: center;
+}
+.drawer .drawer-header .drawer-title {
+  font-size: 16px;
+  color: #0d1117;
+  font-weight: 600;
+}
+.drawer .drawer-header .drawer-close {
+  opacity: 0.45;
+  position: absolute;
+  right: 12px;
+  top: 16px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.drawer .drawer-body {
+  flex: 1;
+  min-height: 0px;
+  position: relative;
+  overflow-y: overlay !important;
+}
+.conv-history-drawer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.conv-history-drawer .conv-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0px;
+  overflow-y: overlay !important;
+}
+.conv-history-drawer .conv-list .conv-item-wrapper {
+  padding: 0 16px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.conv-history-drawer .conv-list .conv-item {
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.conv-history-drawer .conv-item .conv-item-header {
+  display: flex;
+  align-items: center;
+  height: 18px;
+  min-height: 18px;
+  justify-content: space-between;
+  gap: 8px;
+}
+.conv-history-drawer .conv-item .conv-item-header .title {
+  color: #0d1117;
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+}
+.conv-history-drawer .conv-item .conv-item-header .title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.conv-history-drawer .conv-item-header .title .edit {
+  opacity: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  width: 16px;
+  height: 16px;
+  margin-left: 5px;
+  color: #a6a6a6;
+}
+.conv-history-drawer .conv-item-header .date {
+  font-weight: 400;
+  font-size: 13px;
+  color: #00000040;
+}
+.conv-history-drawer .conv-item-content {
+  display: flex;
+  align-items: center;
+  line-height: 16px;
+  justify-content: space-between;
+  gap: 8px;
+  color: #595959;
+}
+.conv-history-drawer .conv-item-content-text {
+  font-weight: 500;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.drawer-mask {
+  z-index: 801;
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+.drawer-close-area {
+  z-index: 800;
+  position: absolute;
+  inset: 10px;
+  background-color: transparent;
+}
+
+.model-container {
+  position: relative;
+}
+.model-list {
+  position: absolute;
+  min-width: 165px;
+  max-width: 220px;
+  max-height: 250px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  background: #fff;
+  box-shadow: 0 8px 16px #919eab29;
+  border-radius: 5px;
+  z-index: 900;
+  border: 1px solid #e5e8eb;
+  bottom: 30px;
+  left: 0;
+}
+.model-item {
+  cursor: pointer;
+  font-size: 13px;
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  box-sizing: border-box;
+  padding: 0 5px;
+  background: #fff;
+  color: #333;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.model-item:hover {
+  background-color: #3366ff14;
+}
+.model-name {
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 80px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+:deep(.ant-select-selection-overflow) {
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/Chat/index.vue b/src/components/Chat/index.vue
new file mode 100644
index 00000000..b8f5d447
--- /dev/null
+++ b/src/components/Chat/index.vue
@@ -0,0 +1,312 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+dayjs.extend(relativeTime)
+import { Modal } from 'ant-design-vue'
+import { IClose, ISet, IExit } from '../icons'
+import { queryAppVersion } from '@/api/user'
+import Chat from './chat.vue'
+import Summary from './summary.vue'
+import Knowledge from './Knowledge.vue'
+import Translate from './Translate.vue'
+
+
+// 定义组件可以发出的事件
+const emit = defineEmits(['close', 'logout', 'update-api-key'])
+
+const icon = '/src/assets/echo.png'
+const curTab = ref('chat')
+const shouldUpdateVersion = ref(false)
+
+const handleClose = () => {
+  emit('close')
+}
+
+const handleUpdateApiKey = () => {
+  // TODO: Implement update API key logic here
+  emit('update-api-key')
+}
+
+const handleLogout = () => {
+  Modal.confirm({
+    title: '确认退出登录？',
+    content: '退出登录后，将无法使用Echo',
+    okText: '确认',
+    cancelText: '取消',
+    zIndex: 2147483650,
+    onOk() {
+      emit('logout')
+    }
+  })
+}
+
+const fetchVersion = async () => {
+  shouldUpdateVersion.value = false
+
+  // try {
+  //   const response = await queryAppVersion({
+  //     version: '1.0.3'
+  //   })
+  //   shouldUpdateVersion.value = response.data.shouldUpdate
+  // } catch (e) {
+  //   shouldUpdateVersion.value = false
+  // }
+}
+
+const handleChangeTab = (type) => {
+  curTab.value = type
+}
+
+onMounted(async () => {
+  await fetchVersion()
+})
+</script>
+
+<template>
+  <div
+    id="echo-main-window-root"
+    class="main-window mode-sidebar"
+    style="min-width: 350px;max-width: 350px; height: 100vh"
+  >
+    <header class="header">
+      <div class="header-left">
+        <a class="logo-wrapper" target="_blank" rel="noreferrer"
+          ><img
+            :src="icon"
+            class="logo logo-img"
+            style="width: 22px; height: 22px; border-radius: 4px"
+          /><span class="title">Chat Copilot </span></a
+        >
+        <!-- <div style="font-size: 12px; color: #999; margin-left: 10px" v-if="shouldUpdateVersion">
+          有版本更新，<a
+            target="_blank"
+            :href="`https://help-doc.oss-cn-beijing.aliyuncs.com/echo-pro.zip?t=${Date.now()}`"
+            >点击下载</a
+          >
+        </div> -->
+      </div>
+      <div class="header-center"></div>
+      <div class="header-right">
+        <div class="operation-item" @click="handleUpdateApiKey">
+          <ISet></ISet>
+        </div>
+        <!-- <div class="operation-item" @click="handleLogout">
+          <IExit></IExit>
+        </div> -->
+        <!-- <div class="operation-item" @click="handleClose">
+          <IClose :width="16" :height="16"></IClose>
+        </div> -->
+      </div>
+    </header>
+    <div class="tabs-wrapper">
+      <div class="main-window-tabs">
+        <div
+          class="tab-item"
+          :class="{ 'tab-item-active': curTab === 'chat' }"
+          @click="handleChangeTab('chat')"
+        >
+          <div>聊天</div>
+        </div>
+        <div
+          class="tab-item"
+          :class="{ 'tab-item-active': curTab === 'knowledge' }"
+          @click="handleChangeTab('knowledge')"
+        >
+          <div>知识库</div>
+        </div>
+        <div
+          class="tab-item"
+          :class="{ 'tab-item-active': curTab === 'summary' }"
+          @click="handleChangeTab('summary')"
+        >
+          <div>摘要</div>
+        </div>
+        <div
+          class="tab-item"
+          :class="{ 'tab-item-active': curTab === 'translate' }"
+          @click="handleChangeTab('translate')"
+        >
+          <div>翻译</div>
+        </div>
+        <div
+          class="tab-active-bar"
+          :class="{
+            'tab-bar-knowledge': curTab === 'knowledge',
+            'tab-bar-summary': curTab === 'summary',
+            'tab-bar-chat': curTab === 'chat',
+            'tab-bar-translate': curTab === 'translate'
+          }"
+        ></div>
+      </div>
+    </div>
+    <Chat v-if="curTab === 'chat'"></Chat>
+    <Knowledge v-if="curTab === 'knowledge'"></Knowledge>
+    <Summary v-if="curTab === 'summary'"></Summary>
+    <Translate v-if="curTab === 'translate'"></Translate>
+  </div>
+</template>
+<style scoped>
+.main-window {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
+  color: #212b36;
+  user-select: text;
+  text-align: left;
+  font-weight: 400;
+  position: fixed;
+  background: #ffffff;
+  border: 1px solid #e5e8eb;
+  box-shadow: 0 8px 16px #919eab29;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  z-index: 5;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: normal;
+}
+.main-window.mode-sidebar {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+}
+.main-window .header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  min-height: 60px;
+  max-height: 60px;
+  /* border-top: 1px solid #f2f2f2;
+  border-bottom: 1px solid #f2f2f2; */
+  padding: 0 15px;
+  user-select: none;
+}
+.main-window .header .header-left {
+  display: flex;
+  align-items: center;
+  height: 22px;
+}
+.main-window .header .header-left .logo-wrapper {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  text-decoration: none;
+  color: #3872e0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.logo-img {
+  -webkit-user-drag: none;
+}
+.main-window .header .header-left .logo-wrapper .logo {
+  margin-right: 8px;
+  margin-top: -2px;
+  margin-left: -2px;
+}
+.main-window .header .header-left .logo-wrapper .title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #000;
+}
+.main-window .header .header-center {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.header-right {
+  user-select: text;
+  display: flex;
+  align-items: center;
+  height: 22px;
+  gap: 12px;
+}
+.header-right .operation-item {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  color: #838ba7;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.main-window .tabs-wrapper {
+  display: flex;
+  flex-direction: row;
+  background: #ffffff;
+  box-shadow: 0 4px 4px -2px #0000000d;
+  height: 39px;
+  min-height: 39px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 0 16px;
+  position: relative;
+}
+.main-window-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+.main-window-tabs .tab-item {
+  font-weight: 500;
+  font-size: 15px;
+  color: #637381;
+  display: flex;
+  align-items: center;
+  height: 39px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.main-window-tabs .tab-item-active {
+  color: #212b36;
+}
+.main-window-tabs .tab-active-bar {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: #3872e0;
+  transition: left 0.32s;
+}
+.tab-bar-chat {
+  left: -1px;
+  width: 32px;
+}
+.tab-bar-knowledge {
+  left: 64px;
+  width: 32px;
+}
+.tab-bar-summary {
+  left: 130px;
+  width: 32px;
+}
+.tab-bar-translate {
+  left: 188px;
+  width: 32px;
+}
+</style>
diff --git a/src/components/Chat/summary.vue b/src/components/Chat/summary.vue
new file mode 100644
index 00000000..008f5baf
--- /dev/null
+++ b/src/components/Chat/summary.vue
@@ -0,0 +1,751 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import ChatCard from "./summaryCard.vue";
+import ChatInput from "./ChatInput.vue";
+import More from "./More.vue";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+dayjs.extend(relativeTime);
+import { message } from "ant-design-vue";
+import showdown from "showdown";
+import { IClose, IPlus, IHistory, IEdit, IArrowDown } from "../icons";
+import {
+  queryChatList,
+  queryChatContentList,
+  createChat,
+  queryPlugins,
+  updateChatAiPlugin,
+} from "../../api/openAI";
+import { fetchShortCutDetail } from "../../api/shortCut";
+import {
+  queryChatCompletion
+} from '../../api/embedding'
+
+const historyVisible = ref(false);
+const historys = ref([]);
+const onlineChatList = ref([]);
+const curChat = ref(null);
+const curOnlineChat = ref(null);
+const chatContentList = ref([]);
+const chatContentTotal = ref(0);
+const chatContentParam = ref({
+  page: 0,
+  size: 20,
+});
+const chatContentLoading = ref(false);
+const textareaContent = ref("");
+const showLoading = ref(false);
+const generating = ref(false);
+const plugins = ref([]);
+const usePlugin = ref([]);
+const selectionText = ref("");
+
+const converter = new showdown.Converter();
+
+const getHtml = (content) => {
+  return converter.makeHtml(content);
+};
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    document
+      .querySelector("#echo-content-root")
+      .shadowRoot.querySelector(".chat-container").scrollTop = 999999;
+  });
+};
+const fetchPluginList = async () => {
+  try {
+    const response = await queryPlugins();
+    plugins.value = response;
+  } catch (e) {
+    plugins.value = [];
+  }
+};
+const fetchChatList = async () => {
+  try {
+    const response = await queryChatList();
+    historys.value = response.filter((item) => !item.short_cut_id);
+    if (response && response.length) {
+      curChat.value = response[0];
+      usePlugin.value = curChat.value.plugins || [];
+      chatContentParam.value.page = 0;
+      chatContentList.value = [];
+    }
+  } catch (e) {
+    message.error(e.message);
+  }
+};
+const fetchOnlineChatList = async () => {
+  try {
+    const response = await queryChatList();
+    onlineChatList.value = response;
+    if (response && response.length) {
+      curOnlineChat.value = response[0];
+    }
+  } catch (e) {
+    message.error(e.message);
+  }
+};
+const fetchChatContentList = async () => {
+  if (!curChat.value) return;
+  if (chatContentLoading.value) return;
+  try {
+    chatContentLoading.value = true;
+    const response = await queryChatContentList({
+      chat_id: curChat.value._id,
+      page: chatContentParam.value.page,
+      size: chatContentParam.value.size,
+    });
+    chatContentList.value = chatContentList.value.reverse().concat(
+      (response.items || []).map((item) => {
+        return {
+          ...item,
+          content: getHtml(item.content),
+        };
+      })
+    );
+    chatContentTotal.value = response.total || 0;
+    chatContentList.value = chatContentList.value.reverse();
+    chatContentLoading.value = false;
+  } catch (e) {
+    message.error(e.message);
+    chatContentLoading.value = false;
+  }
+};
+
+const handleMore = async () => {
+  if (chatContentLoading.value) return;
+  chatContentParam.value.page += 1;
+  await fetchChatContentList();
+};
+
+const showHistoryDrawer = () => {
+  historyVisible.value = true;
+};
+const handleChangeChat = async (item) => {
+  curChat.value = item;
+  historyVisible.value = false;
+  chatContentParam.value.page = 0;
+  chatContentList.value = [];
+  await fetchChatContentList();
+  scrollToBottom();
+};
+
+const handleChangeTextarea = (content) => {
+  textareaContent.value = content;
+};
+
+const handleEnter = async () => {
+  if (!textareaContent.value) {
+    return message.error("请输入内容");
+  }
+  if (generating.value) {
+    return message.error("会话中,请稍后再试!");
+  }
+  const content = textareaContent.value;
+  if (selectionText.value) {
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: selectionText.value,
+      gmt_create: Date.now(),
+      gmt_update: Date.now(),
+      item_type: "intent",
+      userid: curChat.value.userid,
+      _id: Date.now(),
+    });
+  }
+  chatContentList.value.push({
+    chat_id: curChat.value._id,
+    content,
+    gmt_create: Date.now(),
+    gmt_update: Date.now(),
+    item_type: "intent",
+    userid: curChat.value.userid,
+    _id: Date.now(),
+  });
+  textareaContent.value = "";
+  scrollToBottom();
+  showLoading.value = true;
+
+  try {
+    let prompt = "";
+    if (curChat.value.short_cut_id) {
+      const shortCut = await fetchShortCutDetail({
+        id: curChat.value.short_cut_id,
+      });
+      prompt = shortCut.prompt || "";
+    }
+    generating.value = true;
+
+    // chrome.runtime.sendMessage(
+    //   {
+    //     type: "get-sse",
+    //     url: "/echo/openai/chatCompletion",
+    //     params: {
+    //       prompt,
+    //       content,
+    //       shortCutId: curChat.value.short_cut_id,
+    //       chat_id: curChat.value._id,
+    //       chat_title: curChat.value.title,
+    //       selection_text: selectionText.value,
+    //       stream: true,
+    //     },
+    //     from: "chat",
+    //   },
+    //   () => {}
+    // );
+    const params = {
+          prompt,
+          content,
+          shortCutId: curChat.value.short_cut_id,
+          chat_id: curChat.value._id,
+          chat_title: curChat.value.title,
+          selection_text: selectionText.value,
+          stream: true,
+        }
+    await queryChatCompletion(params)
+    
+    await fetchChatContentList();
+
+    chatContentList.value.push({
+      chat_id: curChat.value._id,
+      content: "",
+      gmt_create: Date.now(),
+      gmt_update: Date.now(),
+      item_type: "reply",
+      userid: curChat.value.userid,
+      _id: Date.now(),
+    });
+    selectionText.value = "";
+  } catch (e) {
+    message.error(e.message);
+    showLoading.value = false;
+  }
+};
+
+const handleNewChat = async () => {
+  await createChat();
+  await fetchChatList();
+  await fetchChatContentList();
+};
+const initData = async () => {
+  await fetchChatList();
+  await fetchChatContentList();
+  await fetchOnlineChatList();
+  await fetchPluginList();
+};
+const handleClickSuggestion = (item) => {
+  textareaContent.value = item;
+};
+const handleClearSection = () => {
+  selectionText.value = "";
+};
+// const getPopupContainer = () => {
+//   return document
+//     .querySelector("#echo-content-root")
+//     .shadowRoot.querySelector(".plugin-container");
+// };
+
+// const handleSelectPlugin = async (value, option) => {
+//   const result = await updateChatAiPlugin({
+//     id: curChat.value._id,
+//     plugins: value,
+//   });
+//   return result;
+// };
+
+onMounted(async () => {
+  await initData();
+  scrollToBottom();
+  
+  // 监听实时消息
+  // chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  //   const { from, text, finish_reason } = request || {};
+  //   if (from !== "chat") return;
+  //   if (text) {
+  //     chatContentList.value[chatContentList.value.length - 1].content += text;
+  //   }
+  //   showLoading.value = false;
+  //   if (finish_reason === "stop") {
+  //     if (!curChat.value?._id) {
+  //       setTimeout(async () => {
+  //         await fetchChatList();
+  //         await fetchChatContentList();
+  //         generating.value = false;
+  //       }, 1000);
+  //     } else {
+  //       generating.value = false;
+  //     }
+  //   }
+  //   sendResponse(true);
+  //   return true;
+  // });
+  document.addEventListener("selectionchange", (event) => {
+    try {
+      const selection = document.getSelection();
+      const text = selection.toString();
+      // const oRange = selection.getRangeAt(0); //get the text range
+      // const oRect = oRange.getBoundingClientRect();
+      if (text) {
+        selectionText.value = text;
+      }
+      // console.log(oRect, text);
+    } catch (e) { /* empty */ }
+  });
+});
+</script>
+<template>
+  <div style="height: calc(100vh - 90px)">
+    <div class="chat-wrapper" style="display: flex">
+      <div class="chat chat_light">
+        <div class="chat-box">
+          <div class="wrapper">
+            <ChatCard
+              :list="chatContentList"
+              :showLoading="showLoading"
+              :select-text="selectionText"
+              @suggest="handleClickSuggestion"
+              @clearSection="handleClearSection"
+            >
+              <template v-slot:more>
+                <More
+                  v-if="
+                    chatContentTotal >
+                    (chatContentParam.page + 1) * chatContentParam.size
+                  "
+                  @click="handleMore"
+                ></More>
+              </template>
+            </ChatCard>
+          </div>
+          <div class="input-panel">
+            <div class="toolbar">
+              <div class="lt">
+                <div
+                  class="btn echo-btn toolbar-btn primary-button small-button"
+                  style="font-weight: normal"
+                  @click="handleNewChat"
+                >
+                  <IPlus :width="14" :height="14"></IPlus><span>新会话</span>
+                </div>
+                <div
+                  class="btn echo-btn toolbar-btn outline primary-outline-button small-button"
+                  style="font-weight: normal"
+                  @click="showHistoryDrawer"
+                >
+                  <IHistory width="15" height="15"></IHistory>
+                  <span>会话记录</span>
+                </div>
+              </div>
+            </div>
+            <ChatInput
+              :textareaContent="textareaContent"
+              @update:textareaContent="handleChangeTextarea"
+              @enter="handleEnter"
+            ></ChatInput>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="drawer"
+      :class="{ show: historyVisible }"
+      style="height: 80%; max-height: 680px"
+    >
+      <div class="drawer-header">
+        <div class="drawer-title">会话历史记录</div>
+        <IClose
+          class="drawer-close"
+          width="24"
+          height="24"
+          @click="historyVisible = false"
+        ></IClose>
+      </div>
+      <div class="drawer-body">
+        <div class="conv-history-drawer">
+          <div class="conv-list">
+            <div>
+              <div class="conv-item-wrapper">
+                <div
+                  class="conv-item"
+                  v-for="item in historys"
+                  :key="item._id"
+                  @click="handleChangeChat(item)"
+                >
+                  <div class="conv-item-header">
+                    <span class="title">
+                      <span class="title-text">
+                        <span class="">{{ item.title || "新会话" }}</span>
+                      </span>
+                      <span class="edit">
+                        <IEdit width="16" height="16"></IEdit>
+                      </span>
+                    </span>
+                    <span class="date">{{
+                      dayjs(item.gmt_update).toNow()
+                    }}</span>
+                  </div>
+                  <div class="conv-item-content">
+                    <span class="conv-item-content-text">{{
+                      item.last_message
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="drawer-mask" v-show="historyVisible">
+      <div class="drawer-close-area" @click="historyVisible = false"></div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.chat-wrapper {
+  visibility: visible;
+  position: relative;
+  height: 100%;
+}
+.chat {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+.chat .chat-box {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.chat .chat-box .wrapper {
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.chat .chat-box .input-panel {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  z-index: 501;
+  /* background: #f4f6f8; */
+  border-top: 1px solid rgba(145, 158, 171, 0.05);
+}
+.chat .chat-box .input-panel .toolbar {
+  height: 37px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.chat .chat-box .input-panel .toolbar .lt {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+}
+.echo-btn {
+  box-sizing: border-box;
+  padding: 0 15px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  white-space: nowrap;
+}
+.primary-button.btn {
+  background: #3872e0;
+  border: 1px solid #3872e0;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  font-weight: 700;
+  font-size: 14px;
+  justify-content: center;
+  color: #fff;
+  line-height: 24px;
+}
+.echo-btn.small-button {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-size: 12px;
+  padding: 0 8px;
+  font-weight: 400;
+}
+.chat .chat-box .input-panel .toolbar .lt .toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  height: 26px;
+  padding: 0 6px;
+  border-radius: 4px;
+}
+
+.chat .input-panel .toolbar .lt .toolbar-btn.outline {
+  border: 1px solid rgba(56, 114, 224, 0.48);
+}
+.primary-outline-button.btn {
+  background: #ffffff;
+  border: 1px solid rgba(56, 114, 224, 0.48);
+  border-radius: 6px;
+  align-items: center;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: #3872e0;
+  line-height: 24px;
+}
+
+.chat .input-container .input-msg-content {
+  flex: 1;
+  position: relative;
+}
+.textarea {
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  font-family: Courier New, Courier, monospace;
+}
+.textarea .mirror-node {
+  width: 100%;
+  min-height: 32px;
+  pointer-events: none;
+  box-sizing: border-box;
+  padding: 2px;
+  visibility: hidden;
+}
+.textarea textarea {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  font-size: 14px;
+  overflow: hidden auto;
+  box-shadow: none;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  color: #212b36;
+  outline: none;
+}
+
+.drawer-container {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.drawer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 -6px 20px -4px #919eab26;
+  filter: drop-shadow(0px 0px 2px rgba(145, 158, 171, 0.2));
+  z-index: 802;
+  transition: transform 0.2s ease-in-out;
+  transform: translateY(150%);
+}
+.drawer.show {
+  transform: translateY(0);
+}
+.drawer .drawer-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 56px;
+  justify-content: center;
+}
+.drawer .drawer-header .drawer-title {
+  font-size: 16px;
+  color: #0d1117;
+  font-weight: 600;
+}
+.drawer .drawer-header .drawer-close {
+  opacity: 0.45;
+  position: absolute;
+  right: 12px;
+  top: 16px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.drawer .drawer-body {
+  flex: 1;
+  min-height: 0px;
+  position: relative;
+  overflow-y: overlay !important;
+}
+.conv-history-drawer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.conv-history-drawer .conv-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0px;
+  overflow-y: overlay !important;
+}
+.conv-history-drawer .conv-list .conv-item-wrapper {
+  padding: 0 16px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.conv-history-drawer .conv-list .conv-item {
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.conv-history-drawer .conv-item .conv-item-header {
+  display: flex;
+  align-items: center;
+  height: 18px;
+  min-height: 18px;
+  justify-content: space-between;
+  gap: 8px;
+}
+.conv-history-drawer .conv-item .conv-item-header .title {
+  color: #0d1117;
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+}
+.conv-history-drawer .conv-item .conv-item-header .title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.conv-history-drawer .conv-item-header .title .edit {
+  opacity: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  width: 16px;
+  height: 16px;
+  margin-left: 5px;
+  color: #a6a6a6;
+}
+.conv-history-drawer .conv-item-header .date {
+  font-weight: 400;
+  font-size: 13px;
+  color: #00000040;
+}
+.conv-history-drawer .conv-item-content {
+  display: flex;
+  align-items: center;
+  line-height: 16px;
+  justify-content: space-between;
+  gap: 8px;
+  color: #595959;
+}
+.conv-history-drawer .conv-item-content-text {
+  font-weight: 500;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.drawer-mask {
+  z-index: 801;
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+.drawer-close-area {
+  z-index: 800;
+  position: absolute;
+  inset: 10px;
+  background-color: transparent;
+}
+
+.model-container {
+  position: relative;
+}
+.model-list {
+  position: absolute;
+  min-width: 165px;
+  max-width: 220px;
+  max-height: 250px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  background: #fff;
+  box-shadow: 0 8px 16px #919eab29;
+  border-radius: 5px;
+  z-index: 900;
+  border: 1px solid #e5e8eb;
+  bottom: 30px;
+  left: 0;
+}
+.model-item {
+  cursor: pointer;
+  font-size: 13px;
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  box-sizing: border-box;
+  padding: 0 5px;
+  background: #fff;
+  color: #333;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.model-item:hover {
+  background-color: #3366ff14;
+}
+.model-name {
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 80px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+:deep(.ant-select-selection-overflow) {
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/Chat/summaryCard.vue b/src/components/Chat/summaryCard.vue
new file mode 100644
index 00000000..eebc8d7a
--- /dev/null
+++ b/src/components/Chat/summaryCard.vue
@@ -0,0 +1,284 @@
+<script setup>
+import { ref, defineProps, h, defineEmits } from "vue";
+import { message, Spin } from "ant-design-vue";
+import { ICopy, ICheckOutlined, IOct, ICloseCircle } from "../icons";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+  },
+  showLoading: {
+    type: Boolean,
+    required: true,
+  },
+  showSuggestions: {
+    type: Boolean,
+    default: true,
+  },
+  selectText: {
+    type: String,
+  },
+});
+
+// const emit = defineEmits();
+const emit = defineEmits(['update:textareaContent']);
+
+const suggestions = ref([
+  `多人讨论购买、销售和团购各种商品\n\n
+讨论了购买草莓、空气炸锅等商品的问题。
+有人提出销售丹东草莓、第六季会员卡等商品。
+有人参与团购活动，并分享相关链接。
+讨论了空气炸锅、洗漱包、露营车等商品的出售和价格问题。`,
+`服务限流、API网关鉴权失败、卡片创建相关问题
+杨晓冬指导如何查询gz 接口的qps。
+郭智宸询问产品配额开通权限的方法。
+郭巧彪询问订单执行器是否符合预期。
+王剑飞反馈API网关鉴权失败，请求ip不在允许范围内。
+苏林刚询问API限流信息是否来自console hub，并请求了requestId。
+曾科反馈tag服务请求报TagExceptions.LimitExceeded。`
+]);
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: "14px",
+    color: "#3872e0",
+  },
+  spin: true,
+});
+
+const showCopySuccess = ref(false);
+const handleCopySuccess = () => {
+  showCopySuccess.value = true;
+  message.success("复制成功");
+  setTimeout(() => {
+    showCopySuccess.value = false;
+  }, 3000);
+};
+
+const handleClickSuggestion = (item) => {
+  emit("suggest", item);
+};
+const handleCloseSelectionText = () => {
+  emit("clearSection");
+};
+</script>
+<template>
+  <div class="chat-container" style="padding-bottom: 60px">
+    <slot name="more"></slot>
+    <template v-for="item in list" :key="item._id">
+      <div class="chat-item chat-question" v-if="item.item_type === 'intent'">
+        <div class="feedback message-content-wrap">
+          <div class="chat-content markdown-body">
+            <p class="highlight" v-html="item.content"></p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="chat-item chat-reply"
+        v-if="item.item_type === 'reply' && item.content"
+      >
+        <div class="feedback message-content-wrap">
+          <div class="chat-content markdown-body gpt-markdown">
+            <div class="markdown __markdown light markdown-body">
+              <p class="highlight" v-html="item.content"></p>
+              <div class="operate-bar">
+                <span
+                  title="复制内容"
+                  v-if="item.content && !showCopySuccess"
+                  v-clipboard:copy="item.content"
+                  v-clipboard:success="handleCopySuccess"
+                >
+                  <ICopy :width="16" :height="16"></ICopy>
+                </span>
+                <span title="已复制！" v-if="showCopySuccess">
+                  <ICheckOutlined :width="16" :height="16"></ICheckOutlined>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="chat-item chat-reply selection-text" v-if="selectText">
+      <div class="feedback message-content-wrap">
+        <div class="chat-content markdown-body gpt-markdown">
+          <div class="tips">
+            <IOct width="12" heigth="12" />
+            选择内容
+          </div>
+          <div class="markdown __markdown light">{{ selectText }}</div>
+          <span class="selection-text-close" @click="handleCloseSelectionText"
+            ><ICloseCircle
+          /></span>
+        </div>
+      </div>
+    </div>
+    <div class="chat-item chat-reply" v-if="showLoading">
+      <div class="feedback message-content-wrap">
+        <div class="chat-content markdown-body gpt-markdown">
+          <div class="markdown __markdown light">
+            <Spin :indicator="indicator" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="chat-suggestion"
+      v-if="(!curChat || !curChat.short_cut_id) && showSuggestions"
+    >
+      <div class="suggestion-bar">
+        <div
+          class="suggestion-item"
+          v-for="(item, key) in suggestions"
+          :key="key"
+          @click="handleClickSuggestion(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.chat-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: visible auto;
+  box-sizing: border-box;
+  max-height: 100%;
+  width: 100%;
+  height: calc(100vh - 245px);
+  padding: 16px 13px 20px 16px;
+  scrollbar-gutter: stable;
+  font-size: 14px;
+}
+.chat-item {
+  margin-bottom: 16px;
+  position: relative;
+}
+.chat-question {
+  text-align: right;
+}
+.feedback {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+.chat-item .chat-content {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 22px;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  max-width: 100%;
+}
+.chat-content {
+  transition: box-shadow 0.1s ease;
+}
+.chat-question .chat-content {
+  border-radius: 8px 8px 0;
+  background: #6e819c;
+  color: #fff;
+  text-align: left;
+}
+.chat-item .chat-content p {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.chat-question .chat-content p {
+  white-space: pre-wrap;
+}
+:deep(.chat-item .chat-content p a) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: none;
+  text-decoration: none;
+}
+.chat-reply {
+  text-align: left;
+}
+.chat-reply .operate-bar {
+  display: none;
+}
+.chat-reply:hover .operate-bar {
+  display: block;
+}
+.operate-bar span {
+  cursor: pointer;
+}
+.operate-bar {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  background: #f6f8fa;
+  padding: 5px;
+  border-radius: 5px;
+  line-height: 1;
+}
+.chat-reply .chat-content {
+  border-radius: 8px 8px 8px 0;
+  background: #f6f8fa;
+  color: #000;
+}
+.chat-reply .chat-content.markdown-body.gpt-markdown {
+  font-size: 14px;
+  line-height: 1.6;
+}
+.chat-suggestion {
+  margin-top: 120px;
+  margin-bottom: -30px;
+}
+.suggestion-bar {
+  visibility: visible;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+  box-sizing: border-box;
+  padding-left: 75px;
+}
+.suggestion-item {
+  display: inline-flex;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  max-width: 100%;
+  border: 1px solid rgba(56, 114, 224, 0.48);
+  border-radius: 8px 8px 0;
+  background: #ffffff;
+  transition: border 0.2s ease, background 0.2s ease;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 16px;
+  color: #225ebe;
+}
+.tips {
+  user-select: none;
+  margin-bottom: 4px;
+  color: #8b949d;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  line-height: 24px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.selection-text {
+  position: relative;
+}
+.selection-text-close {
+  position: absolute;
+  top: -2px;
+  right: 0px;
+  color: #8b949d;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/icons/arrowDown.vue b/src/components/icons/arrowDown.vue
new file mode 100644
index 00000000..f24f85fe
--- /dev/null
+++ b/src/components/icons/arrowDown.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 32 32" style="min-width: 16px; min-height: 16px">
+    <g data-v-8372967d="">
+      <path
+        data-v-8372967d=""
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="3"
+        stroke="#595959"
+        d="M26.666 10.667 16 21.333 5.333 10.667"
+        data-follow-stroke="#595959"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/arrowUp.vue b/src/components/icons/arrowUp.vue
new file mode 100644
index 00000000..6fa32ffd
--- /dev/null
+++ b/src/components/icons/arrowUp.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 32 32"
+    style="min-width: 16px; min-height: 16px; transform: rotate(180deg)">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="3"
+        stroke="#595959"
+        d="M26.666 10.667 16 21.333 5.333 10.667"
+        data-follow-stroke="#595959"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/article.vue b/src/components/icons/article.vue
new file mode 100644
index 00000000..1e29af69
--- /dev/null
+++ b/src/components/icons/article.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 24 24" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M10.5 10.5h6M10.5 13.5h6M19.5 3.75h-15a.75.75 0 0 0-.75.75v15c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75v-15a.75.75 0 0 0-.75-.75ZM7.5 3.75v16.5"
+        data-follow-stroke="#000"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/book.vue b/src/components/icons/book.vue
new file mode 100644
index 00000000..cfbaabc3
--- /dev/null
+++ b/src/components/icons/book.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 24 24" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M16.5 3v9l-3-2.25-3 2.25V3M4.5 20.25V21H18"
+        data-follow-stroke="#000"></path>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M4.5 20.25A2.25 2.25 0 0 1 6.75 18H19.5V3H6.75A2.25 2.25 0 0 0 4.5 5.25v15Z"
+        data-follow-stroke="#000"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/checkOutlined.vue b/src/components/icons/checkOutlined.vue
new file mode 100644
index 00000000..072ca424
--- /dev/null
+++ b/src/components/icons/checkOutlined.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    focusable="false"
+    class=""
+    data-icon="check"
+    :width="width"
+    :height="height"
+    fill="currentColor"
+    aria-hidden="true"
+    viewBox="64 64 896 896"
+  >
+    <path
+      d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/icons/close.vue b/src/components/icons/close.vue
new file mode 100644
index 00000000..a5c9d4c7
--- /dev/null
+++ b/src/components/icons/close.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 18 18" style="min-width: 20px; min-height: 20px">
+    <g data-v-c1c2358d="">
+      <path
+        data-v-c1c2358d=""
+        data-follow-fill="currentColor"
+        d="m10.052 8.996 3.221-3.214a.752.752 0 0 0-1.063-1.064L8.996 7.94 5.783 4.72a.752.752 0 1 0-1.064 1.063L7.94 8.996l-3.22 3.213a.75.75 0 0 0 0 1.064.75.75 0 0 0 1.063 0l3.213-3.221 3.214 3.22a.749.749 0 0 0 1.063 0 .75.75 0 0 0 0-1.063l-3.22-3.213Z"
+        fill="currentColor"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/closeCircle.vue b/src/components/icons/closeCircle.vue
new file mode 100644
index 00000000..0216ee92
--- /dev/null
+++ b/src/components/icons/closeCircle.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    class="icon-zzgNjO"
+    width="14"
+    height="14"
+    fill="none"
+    viewBox="0 0 18 18"
+    style="min-width: 14px; min-height: 14px"
+  >
+    <g>
+      <path
+        data-follow-fill="currentColor"
+        d="m10.052 8.996 3.221-3.214a.752.752 0 0 0-1.063-1.064L8.996 7.94 5.783 4.72a.752.752 0 1 0-1.064 1.063L7.94 8.996l-3.22 3.213a.75.75 0 0 0 0 1.064.75.75 0 0 0 1.063 0l3.213-3.221 3.214 3.22a.749.749 0 0 0 1.063 0 .75.75 0 0 0 0-1.063l-3.22-3.213Z"
+        fill="currentColor"
+      ></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/code.vue b/src/components/icons/code.vue
new file mode 100644
index 00000000..746d0b8e
--- /dev/null
+++ b/src/components/icons/code.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 24 24" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        fill="currentColor"
+        d="M7.8 19.2H7A1.2 1.2 0 0 1 5.8 18v-4.1a1.8 1.8 0 0 0-1.236-1.71L3.987 12l.577-.19A1.8 1.8 0 0 0 5.8 10.1V6A1.2 1.2 0 0 1 7 4.8h.8V3.2H7A2.8 2.8 0 0 0 4.2 6v3.7a1.7 1.7 0 0 1-1.7 1.7h-.3v1.2h.3a1.7 1.7 0 0 1 1.7 1.7V18A2.8 2.8 0 0 0 7 20.8h.8v-1.6ZM16.2 19.2h.8a1.2 1.2 0 0 0 1.2-1.2v-4.1a1.8 1.8 0 0 1 1.236-1.71l.577-.19-.577-.19A1.8 1.8 0 0 1 18.2 10.1V6A1.2 1.2 0 0 0 17 4.8h-.8V3.2h.8A2.8 2.8 0 0 1 19.8 6v3.7a1.701 1.701 0 0 0 1.7 1.7h.3v1.2h-.3a1.7 1.7 0 0 0-1.7 1.7V18a2.8 2.8 0 0 1-2.8 2.8h-.8v-1.6Z"
+        clip-rule="evenodd"
+        fill-rule="evenodd"
+        data-follow-fill="#09121F"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/copy.vue b/src/components/icons/copy.vue
new file mode 100644
index 00000000..5268423b
--- /dev/null
+++ b/src/components/icons/copy.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 16 16" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        data-follow-fill="currentColor"
+        d="M4.667 4.667V2a.667.667 0 0 1 .666-.667H14a.667.667 0 0 1 .667.667v8.667a.667.667 0 0 1-.667.666h-2.667v2.662a.67.67 0 0 1-.671.672H2.005a.67.67 0 0 1-.672-.672l.002-8.657c0-.37.3-.671.672-.671h2.66Zm1.333 0h4.662a.67.67 0 0 1 .671.671V10h2V2.667H6v2ZM2.669 6l-.002 7.333H10V6H2.669Z"
+        fill="currentColor"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/edit.vue b/src/components/icons/edit.vue
new file mode 100644
index 00000000..e8b5b3c5
--- /dev/null
+++ b/src/components/icons/edit.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 24 24" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M12.75 6 18 11.25M20.25 20.25H9l-5.202-5.202"
+        data-follow-stroke="#000"></path>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M9 20.25H4.5a.75.75 0 0 1-.75-.75v-4.19a.75.75 0 0 1 .22-.53L15.22 3.53a.75.75 0 0 1 1.06 0l4.19 4.19a.75.75 0 0 1 0 1.06L9 20.25Z"
+        data-follow-stroke="#000"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/exit.vue b/src/components/icons/exit.vue
new file mode 100644
index 00000000..5475cee2
--- /dev/null
+++ b/src/components/icons/exit.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 16 17"
+    style="min-width: 18px; min-height: 18px"
+  >
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="rgba(89, 89, 89, 1)"
+        d="M10.876 5.875 13.5 8.5l-2.624 2.625M6.5 8.5h6.998M6.5 14H3a.5.5 0 0 1-.5-.5v-10A.5.5 0 0 1 3 3h3.5"
+        data-follow-stroke="#595959"
+      ></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/expand.vue b/src/components/icons/expand.vue
new file mode 100644
index 00000000..4d7e2dbb
--- /dev/null
+++ b/src/components/icons/expand.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    data-v-eb6f0115=""
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 16 16"
+    style="min-width: 16px; min-height: 16px">
+    <g data-v-eb6f0115="">
+      <path
+        data-v-eb6f0115=""
+        data-follow-stroke="#637381"
+        d="M10 3h3v3m-3.5.5L13 3"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+      <path
+        data-v-eb6f0115=""
+        data-follow-stroke="#37404A"
+        d="M6 13H3v-3m3.5-.5L3 13"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/github.vue b/src/components/icons/github.vue
new file mode 100644
index 00000000..1fba4e11
--- /dev/null
+++ b/src/components/icons/github.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 46 46"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <!-- Generator: sketchtool 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_GitHub</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="状态" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="注册" transform="translate(-758.000000, -600.000000)">
+        <g id="Group-4" transform="translate(758.000000, 600.000000)">
+          <rect
+            id="Rectangle-314"
+            fill-opacity="0"
+            fill="#D8D8D8"
+            x="0"
+            y="0"
+            width="46"
+            height="46"
+          ></rect>
+          <path
+            d="M5,23.4307576 C5,31.1317497 10.1024923,37.6642712 17.179508,39.9691117 C18.0705582,40.1296159 18.3952722,39.5913918 18.3952722,39.1291397 C18.3952722,38.7161088 18.3799658,37.61933 18.3712193,36.1651618 C13.4174176,37.2180695 12.3722103,33.8282205 12.3722103,33.8282205 C11.5620653,31.8144276 10.3944069,31.2783436 10.3944069,31.2783436 C8.77739677,30.1976152 10.5168579,30.2190158 10.5168579,30.2190158 C12.3044248,30.342069 13.2446741,32.0155929 13.2446741,32.0155929 C14.8332581,34.6788928 17.413477,33.9095426 18.4280715,33.4633409 C18.5898819,32.3376714 19.0501667,31.5693912 19.5585573,31.1338898 C15.6040438,30.6941082 11.4461741,29.198209 11.4461741,22.5190936 C11.4461741,20.6165837 12.1404279,19.0596928 13.2796601,17.8420009 C13.0959835,17.4011493 12.4848215,15.6281127 13.4545902,13.2291098 C13.4545902,13.2291098 14.9491492,12.7604375 18.3515396,15.0160567 C19.7717533,14.6287065 21.2958318,14.4361015 22.8100705,14.4286113 C24.3232158,14.4361015 25.846201,14.6287065 27.2686013,15.0160567 C30.6688051,12.7604375 32.1611774,13.2291098 32.1611774,13.2291098 C33.1331328,15.6281127 32.5219708,17.4011493 32.3393875,17.8420009 C33.4808064,19.0596928 34.1695936,20.6165837 34.1695936,22.5190936 C34.1695936,29.2153294 30.005164,30.6887581 26.0386241,31.1199794 C26.6771189,31.6582035 27.246735,32.7218115 27.246735,34.3482542 C27.246735,36.6777053 27.2248688,38.5577447 27.2248688,39.1291397 C27.2248688,39.5956719 27.5463028,40.1381761 28.4493795,39.9680417 C35.5209286,37.657851 40.6190476,31.1296097 40.6190476,23.4307576 C40.6190476,13.8037149 32.6444218,6 22.8078838,6 C12.9746258,6 5,13.8037149 5,23.4307576 Z"
+            id="Fill-3"
+            fill="#161614"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/history.vue b/src/components/icons/history.vue
new file mode 100644
index 00000000..472c18a3
--- /dev/null
+++ b/src/components/icons/history.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 12 12"
+    style="min-width: 15px; min-height: 15px"
+  >
+    <g>
+      <path
+        data-follow-stroke="currentColor"
+        d="M6 3.75V6m1.949 1.125L6 6m2.633-1.326h1.875V2.8"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+      <path
+        data-follow-stroke="currentColor"
+        d="M8.917 8.917a4.125 4.125 0 1 1 0-5.834l1.59 1.591"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
new file mode 100644
index 00000000..f45bb945
--- /dev/null
+++ b/src/components/icons/index.js
@@ -0,0 +1,59 @@
+import IArticle from "./article.vue";
+import IBook from "./book.vue";
+import ICode from "./code.vue";
+import IEdit from "./edit.vue";
+import IQuestion from "./question.vue";
+import ISyntax from "./syntax.vue";
+import ITransform from "./transform.vue";
+import IUserFilled from "./userFilled.vue";
+import IMenu from "./menu.vue";
+import ITag from "./tag.vue";
+import IExpand from "./expand.vue";
+import IClose from "./close.vue";
+import IArrowDown from "./arrowDown.vue";
+import IArrowUp from "./arrowUp.vue";
+import ICopy from "./copy.vue";
+import IRefreshRight from "./refreshRight.vue";
+import IUpdate from "./update.vue";
+import IGithub from "./github.vue";
+import IPlus from "./plus.vue";
+import IHistory from "./history.vue";
+import ISend from "./send.vue";
+import ITagFilled from "./tagFilled.vue";
+import ISet from "./set.vue";
+import IExit from "./exit.vue";
+import ICheckOutlined from "./checkOutlined.vue";
+import IMoreOutlined from "./moreOutlined.vue";
+import IOct from "./oct.vue";
+import ICloseCircle from "./closeCircle.vue";
+
+export {
+  IArticle,
+  IBook,
+  ICode,
+  IEdit,
+  IQuestion,
+  ISyntax,
+  ITransform,
+  IUserFilled,
+  IMenu,
+  ITag,
+  IExpand,
+  IClose,
+  IArrowDown,
+  IArrowUp,
+  ICopy,
+  IRefreshRight,
+  IUpdate,
+  IGithub,
+  IPlus,
+  IHistory,
+  ISend,
+  ITagFilled,
+  ISet,
+  IExit,
+  ICheckOutlined,
+  IMoreOutlined,
+  IOct,
+  ICloseCircle,
+};
diff --git a/src/components/icons/map.js b/src/components/icons/map.js
new file mode 100644
index 00000000..f54d943f
--- /dev/null
+++ b/src/components/icons/map.js
@@ -0,0 +1,60 @@
+import {
+  IArticle,
+  IBook,
+  ICode,
+  IEdit,
+  IQuestion,
+  ISyntax,
+  ITransform,
+  IUserFilled,
+  IMenu,
+  ITag,
+  IExpand,
+  IClose,
+  IArrowDown,
+  IArrowUp,
+  ICopy,
+  IRefreshRight,
+  IUpdate,
+  IGithub,
+  IPlus,
+  IHistory,
+  ISend,
+  ITagFilled,
+  ISet,
+  IExit,
+  ICheckOutlined,
+  IOct,
+  ICloseCircle,
+} from "./index";
+
+export default {
+  article: IArticle,
+  book: IBook,
+  code: ICode,
+  edit: IEdit,
+  question: IQuestion,
+  syntax: ISyntax,
+  transform: ITransform,
+  userfilled: IUserFilled,
+  menu: IMenu,
+  tag: ITag,
+  expand: IExpand,
+  close: IClose,
+  arrowdown: IArrowDown,
+  arrowup: IArrowUp,
+  copy: ICopy,
+  refreshRight: IRefreshRight,
+  update: IUpdate,
+  github: IGithub,
+  plus: IPlus,
+  history: IHistory,
+  send: ISend,
+  tagFilled: ITagFilled,
+  set: ISet,
+  exit: IExit,
+  checkOutlined: ICheckOutlined,
+  IMoreOutlined: ICheckOutlined,
+  IOct: IOct,
+  ICloseCircle: ICloseCircle,
+};
diff --git a/src/components/icons/menu.vue b/src/components/icons/menu.vue
new file mode 100644
index 00000000..49c226c4
--- /dev/null
+++ b/src/components/icons/menu.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    data-v-01a48685=""
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 12 12"
+    style="min-width: 16px; min-height: 16px">
+    <g data-v-01a48685="">
+      <path
+        data-v-01a48685=""
+        data-follow-fill="currentColor"
+        d="M5.143 2.571c0-.428-.429-.857-.857-.857-.429 0-.857.429-.857.857 0 .43.428.858.857.858.428 0 .857-.429.857-.857ZM6.857 9.43c0 .428.429.857.857.857.429 0 .858-.429.858-.857 0-.429-.429-.857-.858-.857-.428 0-.857.428-.857.857Zm1.715-6.857c0-.43-.429-.858-.858-.858-.428 0-.857.429-.857.857 0 .43.429.858.857.858.429 0 .858-.429.858-.857ZM5.143 9.428c0-.429-.429-.857-.857-.857-.429 0-.857.428-.857.857 0 .428.428.857.857.857.428 0 .857-.429.857-.857ZM8.572 6c0-.428-.429-.857-.858-.857-.428 0-.857.429-.857.857 0 .429.429.857.857.857.429 0 .858-.428.858-.857ZM5.143 6c0-.428-.429-.857-.857-.857-.429 0-.857.429-.857.857 0 .429.428.857.857.857.428 0 .857-.428.857-.857Z"
+        fill="currentColor"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/moreOutlined.vue b/src/components/icons/moreOutlined.vue
new file mode 100644
index 00000000..57015d36
--- /dev/null
+++ b/src/components/icons/moreOutlined.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    focusable="false"
+    class=""
+    data-icon="more"
+    :width="width"
+    :height="height"
+    fill="currentColor"
+    aria-hidden="true"
+    viewBox="64 64 896 896"
+  >
+    <path
+      d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/icons/oct.vue b/src/components/icons/oct.vue
new file mode 100644
index 00000000..34d3862d
--- /dev/null
+++ b/src/components/icons/oct.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    class="octicon octicon-light-bulb"
+    viewBox="0 0 16 16"
+    width="12"
+    height="12"
+    fill="currentColor"
+    style="
+      display: inline-block;
+      user-select: none;
+      vertical-align: text-bottom;
+      overflow: visible;
+    "
+  >
+    <path
+      d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/icons/plus.vue b/src/components/icons/plus.vue
new file mode 100644
index 00000000..f1df43e2
--- /dev/null
+++ b/src/components/icons/plus.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 10 11"
+    style="min-width: 14px; min-height: 14px"
+  >
+    <g>
+      <path
+        data-follow-stroke="currentColor"
+        d="m4.992 2.062.035 3.285-.035 3.575"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+      <path
+        data-follow-fill="currentColor"
+        d="m1.563 5.492 3.284.035 3.575-.035"
+        fill="currentColor"
+      ></path>
+      <path
+        data-follow-stroke="currentColor"
+        d="m1.563 5.492 3.284.035 3.575-.035"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/question.vue b/src/components/icons/question.vue
new file mode 100644
index 00000000..47721234
--- /dev/null
+++ b/src/components/icons/question.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 24 24" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M20.95 11.625a8.625 8.625 0 0 1-8.625 8.625H3.7v-8.625a8.625 8.625 0 0 1 17.25 0Z"
+        data-follow-stroke="#000"></path>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M12.325 13.62v-1.725a2.587 2.587 0 1 0-2.588-2.588"
+        data-follow-stroke="#000"></path>
+      <path
+        fill="currentColor"
+        d="M12.325 17.501a1.078 1.078 0 1 0 0-2.156 1.078 1.078 0 0 0 0 2.156Z"
+        clip-rule="evenodd"
+        fill-rule="evenodd"
+        data-follow-fill="#000"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/refreshRight.vue b/src/components/icons/refreshRight.vue
new file mode 100644
index 00000000..2b8eb6fe
--- /dev/null
+++ b/src/components/icons/refreshRight.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    viewBox="0 0 16 16"
+    :width="width"
+    :height="height"
+    fill="currentColor"
+    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible">
+    <path
+      d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"></path>
+  </svg>
+</template>
diff --git a/src/components/icons/send.vue b/src/components/icons/send.vue
new file mode 100644
index 00000000..b91851e9
--- /dev/null
+++ b/src/components/icons/send.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    class="octicon octicon-paper-airplane"
+    viewBox="0 0 16 16"
+    :width="width"
+    :height="height"
+    fill="currentColor"
+    style="
+      display: inline-block;
+      user-select: none;
+      vertical-align: text-bottom;
+      overflow: visible;
+    "
+  >
+    <path
+      d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/icons/set.vue b/src/components/icons/set.vue
new file mode 100644
index 00000000..eb787140
--- /dev/null
+++ b/src/components/icons/set.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 16 16"
+    style="min-width: 18px; min-height: 18px"
+  >
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-miterlimit="10"
+        stroke-width="1.5"
+        stroke="#838BA7"
+        d="M8 10.666a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333Z"
+        data-follow-stroke="#838BA7"
+      ></path>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-miterlimit="10"
+        stroke-width="1.5"
+        stroke="#838BA7"
+        d="M3.269 5.725a4.94 4.94 0 0 1 .393-.681l-.025-1.625a.51.51 0 0 1 .182-.394A6.484 6.484 0 0 1 5.794 1.88c.143-.05.3-.037.425.044l1.393.837a5.52 5.52 0 0 1 .788 0l1.394-.837a.522.522 0 0 1 .43-.044A6.451 6.451 0 0 1 12.2 3.02a.496.496 0 0 1 .175.393l-.025 1.625c.15.22.281.444.394.682l1.418.787c.132.075.225.2.25.35a6.468 6.468 0 0 1 0 2.275.498.498 0 0 1-.25.35l-1.418.788a4.936 4.936 0 0 1-.394.68l.025 1.626a.51.51 0 0 1-.181.394 6.485 6.485 0 0 1-1.975 1.143.484.484 0 0 1-.425-.043L8.4 13.23a5.534 5.534 0 0 1-.788 0l-1.393.838a.522.522 0 0 1-.432.043 6.45 6.45 0 0 1-1.975-1.137.496.496 0 0 1-.175-.394l.025-1.625a4.943 4.943 0 0 1-.393-.681l-1.42-.788a.499.499 0 0 1-.25-.35 6.47 6.47 0 0 1 0-2.275.499.499 0 0 1 .25-.35l1.42-.787Z"
+        data-follow-stroke="#838BA7"
+      ></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/syntax.vue b/src/components/icons/syntax.vue
new file mode 100644
index 00000000..1d611d7d
--- /dev/null
+++ b/src/components/icons/syntax.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 32 32" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="m27 26-5-10-5 10M18.428 23.143h7.143M5 18h9M5 23h9M5.006 8h21M5.006 13h21"
+        data-follow-stroke="#000"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/tag.vue b/src/components/icons/tag.vue
new file mode 100644
index 00000000..c4440f4e
--- /dev/null
+++ b/src/components/icons/tag.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    fill="currentColor"
+    viewBox="0 0 1024 1024"
+    style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        d="M878.3 392.1 631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.7 35.4-2.7 49.4l181.7 181.7-215.4 215.2c-2.6 2.6-4.3 6.1-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4c3.7 33.7 1 67.2-8.2 99.7-5.4 19-12.8 37.1-22.2 54.2L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/tagFilled.vue b/src/components/icons/tagFilled.vue
new file mode 100644
index 00000000..d83e725b
--- /dev/null
+++ b/src/components/icons/tagFilled.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    fill="none"
+    viewBox="0 0 12 12"
+    style="min-width: 16px; min-height: 16px"
+  >
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke="currentColor"
+        d="M4.125 7.875 2.25 9.75"
+        data-follow-stroke="#3872E0"
+      ></path>
+      <path
+        fill="#3872E0"
+        d="M1.61 5.341a.375.375 0 0 1 .03-.557 2.95 2.95 0 0 1 1.105-.575 2.519 2.519 0 0 1 1.355.018c.147.044.23.085.23.085L7.254 1.39a.375.375 0 0 1 .53 0l2.845 2.845a.375.375 0 0 1 0 .53L7.706 7.687c.03.06.055.119.078.178.188.487.154.968.026 1.391l-.001.004a3.647 3.647 0 0 1-.577 1.1.374.374 0 0 1-.565.04L1.61 5.34Z"
+        clip-rule="evenodd"
+        fill-rule="evenodd"
+        data-follow-fill="#3872E0"
+      ></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/transform.vue b/src/components/icons/transform.vue
new file mode 100644
index 00000000..0d9bb583
--- /dev/null
+++ b/src/components/icons/transform.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 24 24" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M21.75 20.25 16.5 9.75l-5.25 10.5M12.75 17.25h7.5M8.25 3v2.25M2.25 5.25h12M11.25 5.25a9 9 0 0 1-9 9"
+        data-follow-stroke="#000"></path>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M5.763 8.25a9.004 9.004 0 0 0 8.486 5.997"
+        data-follow-stroke="#000"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/update.vue b/src/components/icons/update.vue
new file mode 100644
index 00000000..60cecff5
--- /dev/null
+++ b/src/components/icons/update.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 16 16" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        data-follow-fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.333 2.667c0-.737.597-1.334 1.334-1.334h4.666a.667.667 0 0 1 0 1.334H2.667v10.666h10.666V8.667a.667.667 0 0 1 1.334 0v4.666c0 .737-.597 1.334-1.334 1.334H2.667a1.333 1.333 0 0 1-1.334-1.334V2.667Zm10.232-1.334c.177 0 .347.07.472.196l2.434 2.436c.26.26.26.682 0 .942l-6.894 6.898a.667.667 0 0 1-.471.195h-2.44A.667.667 0 0 1 4 11.333V8.907c0-.177.07-.347.195-.472l6.898-6.906a.667.667 0 0 1 .472-.196Zm0 1.61-6.232 6.24v1.484H6.83l6.227-6.231-1.492-1.493Z"
+        fill="currentColor"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/userFilled.vue b/src/components/icons/userFilled.vue
new file mode 100644
index 00000000..13d61d98
--- /dev/null
+++ b/src/components/icons/userFilled.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 18,
+  },
+  height: {
+    type: [Number, String],
+    default: 18,
+  },
+});
+</script>
+<template>
+  <svg :width="width" :height="height" fill="none" viewBox="0 0 24 24" style="min-width: 16px; min-height: 16px">
+    <g>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M12 15a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
+        data-follow-stroke="#000"></path>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M5.98 18.691a6.753 6.753 0 0 1 12.038 0M18.75 6.75a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18.75 3.75V2.625M17.45 4.5l-.973-.563M17.45 6l-.973.563M18.75 6.75v1.125M20.049 6l.974.563M20.049 4.5l.974-.563"
+        data-follow-stroke="#000"></path>
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="1.5"
+        stroke="currentColor"
+        d="M20.936 10.922a9 9 0 1 1-8.1-7.884"
+        data-follow-stroke="#000"></path>
+    </g>
+  </svg>
+</template>
diff --git a/src/utils/talk.js b/src/utils/talk.js
index 941c1a54..72315a74 100644
--- a/src/utils/talk.js
+++ b/src/utils/talk.js
@@ -5,7 +5,7 @@ export const KEY_INDEX_NAME = 'send_message_index_name'
 export function formatTalkRecord(uid, data) {
   data.float = 'center'
 
-  if (data.user_id > 0) {
+  if (data.user_id) {
     data.float = data.user_id == uid ? 'right' : 'left'
   }
 
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index 759d6178..a4923683 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -4,6 +4,7 @@ import { useDialogueStore } from '@/store'
 import IndexContent from './inner/IndexContent.vue'
 import IndexSider from './inner/IndexSider.vue'
 import IndexAmicable from './inner/IndexAmicable.vue'
+import Chat from '../../components/Chat/index.vue'
 
 const dialogueStore = useDialogueStore()
 const indexName = computed(() => dialogueStore.index_name)
@@ -31,6 +32,9 @@ onUnmounted(() => {
     <main class="el-main">
       <component :is="indexName ? IndexContent : IndexAmicable" />
     </main>
+    <div style="width: 350px; min-width: 350px; background-color: aliceblue; text-align: center">
+      <Chat @close="true" @updateApiKey="true" @logout="onUnmounted"></Chat>
+    </div>
   </section>
 </template>
 
diff --git a/src/views/message/inner/panel/PanelContent.vue b/src/views/message/inner/panel/PanelContent.vue
index 720f5a1b..c2e07647 100644
--- a/src/views/message/inner/panel/PanelContent.vue
+++ b/src/views/message/inner/panel/PanelContent.vue
@@ -381,7 +381,8 @@ onMounted(() => {
                 <n-icon
                   class="more-tools pointer"
                   :component="MoreThree"
-                  @click="onContextMenu($event, item)"
+                  @click="closeDropdownMenu"  
+                  @mouseenter="onContextMenu($event, item)"
                 />
               </div>
             </div>