From 5a6f070f9228818fcdcb5695df37ea3ecd394f34 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Fri, 7 Apr 2023 17:58:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20Plus=20=E9=BB=91=E8=89=B2?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/chat_handler.go                 |  10 +-
 web/src/assets/img/bg_01.jpeg          | Bin 0 -> 824 bytes
 web/src/assets/img/bg_02.jpeg          | Bin 0 -> 1835 bytes
 web/src/components/ChatReply.vue       |   1 +
 web/src/components/plus/ChatPrompt.vue |  85 ++++
 web/src/components/plus/ChatReply.vue  |  93 ++++
 web/src/main.js                        |   7 +-
 web/src/views/Chat.vue                 |   6 +-
 web/src/views/ChatPlus.vue             | 651 +++++++++++++++++++++++++
 9 files changed, 842 insertions(+), 11 deletions(-)
 create mode 100644 web/src/assets/img/bg_01.jpeg
 create mode 100644 web/src/assets/img/bg_02.jpeg
 create mode 100644 web/src/components/plus/ChatPrompt.vue
 create mode 100644 web/src/components/plus/ChatReply.vue
 create mode 100644 web/src/views/ChatPlus.vue

diff --git a/server/chat_handler.go b/server/chat_handler.go
index 4867322..1aca89f 100644
--- a/server/chat_handler.go
+++ b/server/chat_handler.go
@@ -57,11 +57,13 @@ func (s *Server) ChatHandle(c *gin.Context) {
 			}
 
 			logger.Info("Receive a message: ", string(message))
+			replyMessage(client, "当前 TOKEN 无效，请使用合法的 TOKEN 登录！", false)
+			replyMessage(client, "![](images/wx.png)", true)
 			// TODO: 当前只保持当前会话的上下文，部保存用户的所有的聊天历史记录，后期要考虑保存所有的历史记录
-			err = s.sendMessage(session, chatRole, string(message), client, false)
-			if err != nil {
-				logger.Error(err)
-			}
+			//err = s.sendMessage(session, chatRole, string(message), client, false)
+			//if err != nil {
+			//	logger.Error(err)
+			//}
 		}
 	}()
 }
diff --git a/web/src/assets/img/bg_01.jpeg b/web/src/assets/img/bg_01.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..de1bea0cc988b700cde3ce4bf0dbbd4b7ed5e08c
GIT binary patch
literal 824
zcmb7=!D|yy5XNWT?#m`GA)9U1O^j(%8=_llF$zKvV^@WuJw=eXh)7OS=tZHIrlPNZ
zK|F}`BJ8n;AUSw!aRqN))`P{`%Stb?Dg;zKSctQ!2leJWb`LY(``-7P!Mi~SnfbY^
zbAX6&g$@jM;4;Ki9^+~(#$%cmi;Ij9iG(oIdMcAM^ZA@<S%uL`sc@uRw5;)y<K<(=
zCr?ZsE=^ab?P|rIv?CMLG)=@sR*0-!unP8n*T4rO4icUyXaF-%F>vq-a#2)-KMPr$
z1``=j5SRkdIVik%+PHS~(keT1Z{p<}(wP6;Bw5ro{`QNy?;#br8Hxe3@Ufmo*YI_x
z20ud08<XA?I?oeM-Q>;Mn($!}mY7#zfqtXU@d4UamnNjCACjGfoAc5DYKyJjmYywq
zx`j@I$qsMM`<rkVK(CL;maLI}dN}dsne?pg*}(8q9KwuHy_>iosA-F#Pq)&fNVgcQ
zD{uF)KC-%y&0A3_SHFWjW07sCon(;nN{`tR?!mW66{TfCIiN^NkaSk6x(idXI1~`o
zI>#@4B`}jtjWt-;WLwI%>_A#R!y*#+00JUEutAq7#{40A^Bnlsv8TO&x*qZVCM0?{
zEjO_Uq2Mi*rsmMRJ=D-@YR!DkD@&+3wvhE)NIz15&3^(dW{P!3qjzVpm+W)ey5OE|
z^aNk&CtQJ_Fv>n_tMDCKxJPUyTD&v66AFK&I_A^k+J|l`8EEhnXtVJB;V>T2wVeim
z(W*ZC4IU~kc3=w&_r2n>Q~3Ib`^5{+#xnZp^I>d5?!NA;^eOEbT<r7R{k3fSlrz}=
E1td?>B>(^b

literal 0
HcmV?d00001

diff --git a/web/src/assets/img/bg_02.jpeg b/web/src/assets/img/bg_02.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..7c1925fb84788783874ed1cab4f943645bf8d821
GIT binary patch
literal 1835
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
XSAAzsSKh$eBx`d|ENyDKvNrZ_)ok+O

literal 0
HcmV?d00001

diff --git a/web/src/components/ChatReply.vue b/web/src/components/ChatReply.vue
index b6923ba..aa3d99a 100644
--- a/web/src/components/ChatReply.vue
+++ b/web/src/components/ChatReply.vue
@@ -62,6 +62,7 @@ export default defineComponent({
     }
 
     .content {
+      min-height 20px;
       word-break break-word;
       padding: 8px 10px;
       color var(--content-color)
diff --git a/web/src/components/plus/ChatPrompt.vue b/web/src/components/plus/ChatPrompt.vue
new file mode 100644
index 0000000..33c70e7
--- /dev/null
+++ b/web/src/components/plus/ChatPrompt.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="chat-line chat-line-right">
+    <div class="chat-item">
+      <div class="content">{{ content }}</div>
+      <div class="triangle"></div>
+    </div>
+
+    <div class="chat-icon">
+      <img :src="icon" alt="User"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+
+export default defineComponent({
+  name: 'ChatPrompt',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'images/user-icon.png',
+    }
+  },
+  data() {
+    return {}
+  },
+})
+</script>
+
+<style lang="stylus">
+.chat-line-right {
+  justify-content: flex-end;
+
+  .chat-icon {
+    margin-left 5px;
+
+    img {
+      border-radius 5px;
+    }
+  }
+
+  .chat-item {
+    position: relative;
+    padding: 0 5px 0 0;
+    overflow: hidden;
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid #223A34;
+      position: absolute;
+      right: 0;
+      top: 10px;
+    }
+
+    .content {
+      word-break break-word;
+      padding: 12px 15px;
+      background-color: #223A34;
+      color var(--content-color);
+      font-size: var(--content-font-size);
+      border-radius: 5px;
+
+      p {
+        line-height 1.5
+      }
+
+      p:last-child {
+        margin-bottom: 0
+      }
+
+      p:first-child {
+        margin-top 0
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/plus/ChatReply.vue b/web/src/components/plus/ChatReply.vue
new file mode 100644
index 0000000..5e3860e
--- /dev/null
+++ b/web/src/components/plus/ChatReply.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="chat-line chat-line-left">
+    <div class="chat-icon">
+      <img :src="icon" alt="ChatGPT">
+    </div>
+
+    <div class="chat-item">
+      <div class="triangle"></div>
+      <div class="content" v-html="content"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+
+export default defineComponent({
+  name: 'ChatReply',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'images/gpt-icon.png',
+    }
+  },
+  data() {
+    return {}
+  },
+})
+</script>
+
+<style lang="stylus">
+.chat-line-left {
+  justify-content: flex-start;
+
+  .chat-icon {
+    margin-right 5px;
+
+    img {
+      border-radius 5px;
+    }
+  }
+
+  .chat-item {
+    display: inline-block;
+    position: relative;
+    padding: 0 0 0 5px;
+    overflow: hidden;
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-right: 5px solid #404042;
+      position: absolute;
+      left: 0;
+      top: 13px;
+    }
+
+    .content {
+      min-height 20px;
+      word-break break-word;
+      padding: 12px 15px;
+      color var(--content-color)
+      background-color: #404042;
+      font-size: var(--content-font-size);
+      border-radius: 5px;
+
+      p {
+        line-height 1.5
+      }
+
+      p:last-child {
+        margin-bottom: 0
+      }
+
+      p:first-child {
+        margin-top 0
+      }
+
+      p > code {
+        color #cc0000
+        background-color #f1f1f1
+      }
+    }
+  }
+}
+
+</style>
diff --git a/web/src/main.js b/web/src/main.js
index 8c2d187..9bb8c20 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -3,17 +3,14 @@ import {createApp} from 'vue'
 import ElementPlus from "element-plus"
 import "element-plus/dist/index.css"
 import App from './App.vue'
-import Chat from './views/Chat.vue'
+import ChatPlus from "@/views/ChatPlus.vue";
 import NotFound from './views/404.vue'
 import TestPage from './views/Test.vue'
 import './utils/prototype'
-import {Global} from "@/utils/storage";
-
-Global['Chat'] = Chat
 
 const routes = [
     {
-        name: 'home', path: '/', component: Chat, meta: {
+        name: 'chat-plus', path: '/', component: ChatPlus, meta: {
             title: 'ChatGPT-Plus'
         }
     },
diff --git a/web/src/views/Chat.vue b/web/src/views/Chat.vue
index 784bfd1..b84be6e 100644
--- a/web/src/views/Chat.vue
+++ b/web/src/views/Chat.vue
@@ -132,7 +132,7 @@ export default defineComponent({
       connectingMessageBox: null, // 保存重连的消息框对象
       errorMessage: null, // 错误信息提示框
       socket: null,
-      toolBoxHeight: 61 + 42, // 工具框的高度
+      toolBoxHeight: 61 + 52, // 工具框的高度
       inputBoxWidth: window.innerWidth - 20,
       sending: true,
       loading: true
@@ -486,6 +486,8 @@ export default defineComponent({
 
   .body {
     background-color: rgba(247, 247, 248, 1);
+
+    background-image url("~@/assets/img/bg_01.jpeg")
     display flex;
     //justify-content center;
     align-items flex-start;
@@ -544,7 +546,7 @@ export default defineComponent({
 
       .input-box {
         padding 10px;
-        width 100%;
+        background #ffffff;
 
         position: absolute;
         bottom: 0
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
new file mode 100644
index 0000000..2a6d859
--- /dev/null
+++ b/web/src/views/ChatPlus.vue
@@ -0,0 +1,651 @@
+<template>
+  <div class="body">
+    <el-row>
+      <div class="chat-head">
+        <el-row class="row-center">
+          <el-col :span="12">
+            <div class="title-box">
+              <el-image :src="logo" class="logo"/>
+              <span>ChatGPT-Plus</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="tool-box">
+
+              <el-button type="danger" class="clear-history" size="small" circle @click="clearChatHistory">
+                <el-icon>
+                  <Delete/>
+                </el-icon>
+              </el-button>
+
+              <el-button type="info" size="small" class="config" ref="send-btn" circle
+                         @click="showConnectDialog = true">
+                <el-icon>
+                  <Tools/>
+                </el-icon>
+              </el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-row>
+    <el-row>
+      <div class="left-box">
+        <div class="grid-content">
+
+        </div>
+      </div>
+      <div class="right-box" :style="{height: mainWinHeight+'px'}">
+        <div v-loading="loading">
+          <div id="container">
+            <div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
+              <div v-for="chat in chatData" :key="chat.id">
+                <chat-prompt
+                    v-if="chat.type==='prompt'"
+                    :icon="chat.icon"
+                    :content="chat.content"/>
+                <chat-reply v-else-if="chat.type==='reply'"
+                            :icon="chat.icon"
+                            :content="chat.content"/>
+              </div>
+
+            </div><!-- end chat box -->
+
+            <el-row class="chat-tool-box">
+              <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  content="进入AI绘画模式"
+                  placement="top"
+              >
+                <el-icon @click="drawImage">
+                  <Picture/>
+                </el-icon>
+              </el-tooltip>
+
+            </el-row>
+
+            <div class="input-box">
+              <div class="input-container">
+                <el-input
+                    ref="text-input"
+                    v-model="inputValue"
+                    :autosize="{ minRows: 5, maxRows: 10 }"
+                    v-on:keydown="inputKeyDown"
+                    v-on:focus="focus"
+                    autofocus
+                    type="textarea"
+                    placeholder="先聊五毛钱吧..."
+                />
+              </div>
+            </div><!-- end input box -->
+
+          </div><!-- end container -->
+        </div><!-- end loading -->
+      </div>
+    </el-row>
+
+    <config-dialog v-model:show="showConnectDialog"></config-dialog>
+
+    <div class="token-dialog">
+      <el-dialog
+          v-model="showLoginDialog"
+          :show-close="false"
+          :close-on-click-modal="false"
+          title="请输入口令继续访问"
+      >
+        <el-row>
+          <el-input v-model="token" placeholder="在此输入口令" @keyup="loginInputKeyup">
+            <template #prefix>
+              <el-icon class="el-input__icon">
+                <Lock/>
+              </el-icon>
+            </template>
+          </el-input>
+          <el-button type="primary" @click="submitToken">提交</el-button>
+        </el-row>
+
+        <el-row class="row-center">
+          <p>打开微信扫下面二维码免费领取口令</p>
+        </el-row>
+
+        <el-row class="row-center">
+          <el-image src="images/wx.png" fit="cover"/>
+        </el-row>
+
+      </el-dialog>
+    </div> <!--end token dialog-->
+  </div>
+
+
+</template>
+
+<script>
+import {defineComponent, nextTick} from 'vue'
+import ChatPrompt from "@/components/plus/ChatPrompt.vue";
+import ChatReply from "@/components/plus/ChatReply.vue";
+import {randString} from "@/utils/libs";
+import {ElMessage, ElMessageBox} from 'element-plus'
+import {Tools, Lock, Delete, Picture} from '@element-plus/icons-vue'
+import ConfigDialog from '@/components/ConfigDialog.vue'
+import {httpPost, httpGet} from "@/utils/http";
+import {getSessionId, setSessionId} from "@/utils/storage";
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+
+export default defineComponent({
+  name: "ChatPlus",
+  components: {ChatPrompt, ChatReply, Tools, Lock, Delete, Picture, ConfigDialog},
+  data() {
+    return {
+      title: 'ChatGPT 控制台',
+      logo: 'images/logo.png',
+      chatData: [],
+      chatRoles: [],
+      role: 'gpt',
+      inputValue: '', // 聊天内容
+      showConnectDialog: false,
+      showLoginDialog: false,
+      token: '', // 会话 token
+      replyIcon: 'images/avatar/gpt.png', // 回复信息的头像
+
+      lineBuffer: '', // 输出缓冲行
+      connectingMessageBox: null, // 保存重连的消息框对象
+      errorMessage: null, // 错误信息提示框
+      socket: null,
+      mainWinHeight: 0, // 主窗口高度
+      chatBoxHeight: 0, // 聊天内容框高度
+      sending: true,
+      loading: true
+    }
+  },
+
+  mounted: function () {
+    nextTick(() => {
+      this.resizeElement();
+    })
+    window.addEventListener("resize", () => {
+      this.resizeElement();
+    });
+
+    this.connect();
+  },
+
+  methods: {
+    resizeElement: function () {
+      this.chatBoxHeight = window.innerHeight - 61 - 115 - 38;
+      this.mainWinHeight = window.innerHeight - 61;
+    },
+    // 创建 socket 会话连接
+    connect: function () {
+      // 初始化 WebSocket 对象
+      const sessionId = getSessionId();
+      const socket = new WebSocket(process.env.VUE_APP_WS_HOST + `/api/chat?sessionId=${sessionId}&role=${this.role}`);
+      socket.addEventListener('open', () => {
+        // 获取聊天角色
+        if (this.chatRoles.length === 0) {
+          httpGet("/api/config/chat-roles/get").then((res) => {
+            // ElMessage.success('创建会话成功！');
+            this.chatRoles = res.data;
+            this.loading = false
+          }).catch(() => {
+            ElMessage.error("获取聊天角色失败");
+          })
+        } else {
+          this.loading = false
+        }
+
+        this.sending = false; // 允许用户发送消息
+        if (this.errorMessage !== null) {
+          this.errorMessage.close(); // 关闭错误提示信息
+        }
+        // 加载聊天记录
+        this.fetchChatHistory();
+      });
+
+      socket.addEventListener('message', event => {
+        if (event.data instanceof Blob) {
+          const reader = new FileReader();
+          reader.readAsText(event.data, "UTF-8");
+          reader.onload = () => {
+            const data = JSON.parse(String(reader.result));
+            if (data.type === 'start') {
+              this.chatData.push({
+                type: "reply",
+                id: randString(32),
+                icon: this.replyIcon,
+                content: "",
+                cursor: true
+              });
+            } else if (data.type === 'end') {
+              this.sending = false;
+              this.lineBuffer = ''; // 清空缓冲
+            } else {
+              this.lineBuffer += data.content;
+              let md = require('markdown-it')();
+              this.chatData[this.chatData.length - 1]["content"] = md.render(this.lineBuffer);
+
+              nextTick(() => {
+                hl.configure({ignoreUnescapedHTML: true})
+                const lines = document.querySelectorAll('.chat-line');
+                const blocks = lines[lines.length - 1].querySelectorAll('pre code');
+                blocks.forEach((block) => {
+                  hl.highlightElement(block)
+                })
+              })
+            }
+            // 将聊天框的滚动条滑动到最底部
+            nextTick(() => {
+              document.getElementById('container').scrollTo(0, document.getElementById('container').scrollHeight)
+            })
+          };
+        }
+
+      });
+
+      socket.addEventListener('close', () => {
+        // 停止送消息
+        this.sending = true;
+        this.checkSession();
+      });
+
+      this.socket = socket;
+    },
+
+    checkSession: function () {
+      // 检查会话
+      httpGet("/api/session/get").then(() => {
+        // 自动重新连接
+        this.connect();
+      }).catch((res) => {
+        if (res.code === 400) {
+          this.showLoginDialog = true;
+          if (this.errorMessage !== null) {
+            this.errorMessage.close();
+          }
+        } else {
+          if (this.errorMessage === null) {
+            this.errorMessage = ElMessage({
+              message: '当前无法连接服务器，可检查网络设置是否正常',
+              type: 'error',
+              duration: 0,
+              showClose: false
+            });
+          }
+          // 3 秒后继续重连
+          setTimeout(() => this.checkSession(), 3000)
+        }
+      })
+    },
+
+    drawImage: function () {
+      ElMessage({
+        message: '客观别急，AI 绘画服服务正在紧锣密鼓搭建中...',
+        type: 'info',
+      })
+    },
+
+    // 更换角色
+    changeRole: function () {
+      this.loading = true
+      // 清空对话列表
+      this.chatData = [];
+      this.connect();
+      for (const key in this.chatRoles) {
+        if (this.chatRoles[key].key === this.role) {
+          this.replyIcon = this.chatRoles[key].icon;
+          break;
+        }
+      }
+    },
+
+    // 从后端获取聊天历史记录
+    fetchChatHistory: function () {
+      httpPost("/api/chat/history", {role: this.role}).then((res) => {
+        if (this.chatData.length > 0) { // 如果已经有聊天记录了，就不追加了
+          return
+        }
+
+        const data = res.data
+        const md = require('markdown-it')();
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].type === "prompt") {
+            this.chatData.push(data[i]);
+            continue;
+          }
+
+          data[i].content = md.render(data[i].content);
+          this.chatData.push(data[i]);
+        }
+
+        nextTick(() => {
+          hl.configure({ignoreUnescapedHTML: true})
+          const blocks = document.querySelector("#chat-box").querySelectorAll('pre code');
+          blocks.forEach((block) => {
+            hl.highlightElement(block)
+          })
+        })
+      }).catch(() => {
+        // console.error(e.message)
+      })
+    },
+
+    inputKeyDown: function (e) {
+      if (e.keyCode === 13) {
+        if (this.sending) {
+          e.preventDefault();
+        } else {
+          this.sendMessage();
+        }
+      }
+    },
+
+    // 发送消息
+    sendMessage: function (e) {
+      // 强制按钮失去焦点
+      if (e) {
+        let target = e.target;
+        if (target.nodeName === "SPAN") {
+          target = e.target.parentNode;
+        }
+        target.blur();
+      }
+
+      if (this.sending || this.inputValue.trim().length === 0) {
+        return false;
+      }
+
+      // 追加消息
+      this.chatData.push({
+        type: "prompt",
+        id: randString(32),
+        icon: 'images/avatar/user.png',
+        content: this.inputValue
+      });
+
+      this.sending = true;
+      this.socket.send(this.inputValue);
+      this.$refs["text-input"].blur();
+      this.inputValue = '';
+      // 等待 textarea 重新调整尺寸之后再自动获取焦点
+      setTimeout(() => this.$refs["text-input"].focus(), 100);
+      return true;
+    },
+
+    // 获取焦点
+    focus: function () {
+      setTimeout(function () {
+        document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
+      }, 200)
+    },
+
+    // 提交 Token
+    submitToken: function () {
+      this.showLoginDialog = false;
+      this.loading = true
+
+      // 获取会话
+      httpPost("/api/login", {
+        token: this.token
+      }).then((res) => {
+        setSessionId(res.data)
+        this.connect();
+        this.loading = false;
+      }).catch(() => {
+        ElMessage.error("口令错误");
+        this.token = '';
+        this.showLoginDialog = true;
+        this.loading = false;
+      })
+    },
+
+    // 登录输入框输入事件处理
+    loginInputKeyup: function (e) {
+      if (e.keyCode === 13) {
+        this.submitToken();
+      }
+    },
+
+    // 清空聊天记录
+    clearChatHistory: function () {
+      ElMessageBox.confirm(
+          '确认要清空当前角色聊天历史记录吗?<br/>此操作不可以撤销！',
+          '操作提示：',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+            dangerouslyUseHTMLString: true,
+            showClose: true,
+            closeOnClickModal: false,
+            center: true,
+          }
+      ).then(() => {
+        httpPost("/api/chat/history/clear", {role: this.role}).then(() => {
+          ElMessage.success("当前角色会话已清空");
+          this.chatData = [];
+        }).catch(() => {
+          ElMessage.error("删除失败")
+        })
+      }).catch(() => {
+      })
+    }
+  },
+
+})
+</script>
+
+<style lang="stylus">
+#app {
+  height: 100%;
+
+  .body {
+    height 100%;
+
+    .chat-head {
+      width 100%;
+      height 60px;
+      background-color: #28292A
+      border-bottom 1px solid #4f4f4f;
+
+      .title-box {
+        padding-top 6px;
+        display flex
+        color #ffffff;
+        font-size 20px;
+
+        .logo {
+          background-color #ffffff
+          border-radius 50%;
+          width 45px;
+          height 45px;
+        }
+
+        span {
+          padding-top: 12px;
+          padding-left: 10px;
+        }
+      }
+
+      .tool-box {
+        padding-top 16px;
+        padding-right 20px;
+        display flex;
+        justify-content flex-end;
+        align-items center;
+
+        .el-image {
+          margin-right 5px;
+        }
+
+        .clear-history, .config {
+          margin-left 5px;
+        }
+      }
+
+    }
+
+    .el-row {
+      overflow hidden;
+      display: flex;
+
+      .left-box {
+        display flex
+        min-width 220px;
+        max-width 250px;
+        background-color: #28292A
+        border-top: 1px solid #2F3032
+        border-right: 1px solid #2F3032
+      }
+
+      .right-box {
+        min-width: 0;
+        flex: 1;
+        background-color #232425
+        border-left 1px solid #4f4f4f
+      }
+    }
+
+    #container {
+      overflow hidden;
+      width 100%;
+
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        background-color: transparent;
+      }
+
+      .chat-box {
+        overflow-y: scroll;
+        border-bottom 1px solid #4f4f4f
+
+        // 变量定义
+        --content-font-size: 16px;
+        --content-color: #c1c1c1;
+
+        font-family 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+        padding: 10px;
+
+        .chat-line {
+          padding 10px 5px;
+          font-size 14px;
+          display: flex;
+          align-items: flex-start;
+
+          .chat-icon {
+            img {
+              width 45px;
+              height 45px;
+              border 1px solid #666;
+              border-radius 50%;
+              padding 1px;
+            }
+          }
+        }
+      }
+
+      .chat-tool-box {
+        padding 10px;
+        border-top: 1px solid #2F3032
+
+        .el-icon svg {
+          color #cccccc
+          width 1em;
+          background-color #232425
+          cursor pointer
+        }
+      }
+
+      .input-box {
+        background-color #232425
+        display: flex;
+        justify-content: start;
+        align-items: center;
+
+        .input-container {
+          width: 100%
+          margin: 0;
+          border: none;
+          border-radius: 6px;
+          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+          background-color #232425
+          padding: 5px 10px;
+
+          .el-textarea__inner {
+            box-shadow: none
+            padding 5px 0
+            background-color #232425
+            color #B5B7B8
+          }
+
+          .el-textarea__inner::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+          }
+        }
+
+        .btn-container {
+          margin-left 10px;
+
+          .el-row {
+            flex-wrap nowrap
+            //width 106px;
+            align-items center
+          }
+
+          .send {
+            width 60px;
+            height 40px;
+            background-color: var(--el-color-success)
+          }
+
+          .is-disabled {
+            background-color: var(--el-button-disabled-bg-color);
+            border-color: var(--el-button-disabled-border-color);
+          }
+        }
+      }
+    }
+
+    #container::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    .row-center {
+      justify-content center
+    }
+  }
+}
+
+.el-message-box {
+  width 90%;
+  max-width 420px;
+}
+
+.el-message {
+  min-width: 100px;
+  max-width 600px;
+}
+
+.token-dialog {
+  .el-dialog {
+    --el-dialog-width 90%;
+    max-width 400px;
+
+    .el-dialog__body {
+      padding 10px 10px 20px 10px;
+    }
+
+    .el-row {
+      flex-wrap nowrap
+
+      button {
+        margin-left 5px;
+      }
+    }
+  }
+}
+
+</style>