opt: optimize the styles of chat page; caculate all tokens of context as chat history's token

web/src/assets/css/chat-plus.css

@@ -14,7 +14,6 @@
   font-size: 20px;
 }
 #app .common-layout .el-aside .title-box .logo {
-  background-color: #fff;
   border-radius: 8px;
   width: 35px;
   height: 35px;

web/src/components/ChatMidJourney.vue

@@ -140,8 +140,8 @@ const send = (url, index) => {
       margin-right 20px;
 
       img {
-        width: 30px;
-        height: 30px;
+        width: 36px;
+        height: 36px;
         border-radius: 10px;
         padding: 1px;
       }

web/src/components/ChatPrompt.vue

@@ -19,9 +19,8 @@
 
 <script>
 import {defineComponent} from "vue"
-import {dateFormat} from "@/utils/libs";
 import {Clock} from "@element-plus/icons-vue";
-import {httpGet} from "@/utils/http";
+import {httpPost} from "@/utils/http";
 
 export default defineComponent({
   name: 'ChatPrompt',
@@ -56,7 +55,7 @@ export default defineComponent({
   },
   mounted() {
     if (!this.finalTokens) {
-      httpGet(`/api/chat/tokens?text=${this.content}&model=${this.model}`).then(res => {
+      httpPost("/api/chat/tokens", {text: this.content, model: this.model}).then(res => {
         this.finalTokens = res.data;
       })
     }
@@ -83,8 +82,8 @@ export default defineComponent({
       margin-right 20px;
 
       img {
-        width: 30px;
-        height: 30px;
+        width: 36px;
+        height: 36px;
         border-radius: 10px;
         padding: 1px;
       }

web/src/components/ChatReply.vue

@@ -86,8 +86,8 @@ export default defineComponent({
         margin-right 20px;
 
         img {
-          width: 30px;
-          height: 30px;
+          width: 36px;
+          height: 36px;
           border-radius: 10px;
           padding: 1px;
         }

web/src/views/ChatPlus.vue

@@ -158,7 +158,7 @@
                       :icon="item.icon"
                       :created-at="dateFormat(item['created_at'])"
                       :tokens="item['tokens']"
-                      :model="modelID"
+                      :model="getModelValue(modelID.value)"
                       :content="item.content"/>
                   <chat-reply v-else-if="item.type==='reply'"
                               :icon="item.icon"
@@ -601,7 +601,7 @@ const connect = function (chat_id, role_id) {
 
           // 获取 token
           const reply = chatData.value[chatData.value.length - 1]
-          httpGet(`/api/chat/tokens?text=${reply.orgContent}&model=${modelID.value}`).then(res => {
+          httpPost("/api/chat/tokens", {text: "", model: getModelValue(modelID.value)}).then(res => {
             reply['created_at'] = new Date().getTime();
             reply['tokens'] = res.data;
             // 将聊天框的滚动条滑动到最底部
@@ -813,7 +813,7 @@ const reGenerate = function () {
   chatData.value.push({
     type: "prompt",
     id: randString(32),
-    icon: 'images/avatar/user.png',
+    icon: loginUser.value.avatar,
     content: renderInputText(text)
   });
   socket.value.send(text);
@@ -859,6 +859,15 @@ const getChatById = (chatId) => {
   }
   return null
 }
+
+const getModelValue = (model_id) => {
+  for (let i = 0; i < models.value.length; i++) {
+    if (models.value[i].id === model_id) {
+      return models.value[i].value
+    }
+  }
+  return ""
+}
 </script>
 
 <style scoped lang="stylus">