From 9b7a360ea11b7bced02ee1df7f5e135e65a5633a Mon Sep 17 00:00:00 2001
From: fit2bot <68588906+fit2bot@users.noreply.github.com>
Date: Thu, 14 Dec 2023 16:37:48 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20chat=E5=A2=9E=E5=8A=A0=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E8=AF=8D=20(#3603)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “huailei000” <2280131253@qq.com>
Co-authored-by: huailei <31801270+huailei000@users.noreply.github.com>
---
 .../ChatAi/components/ChitChat/ChatInput.vue  | 56 +++++++++++++++----
 .../components/ChitChat/ChatMessage.vue       |  7 ++-
 .../components/ChitChat/MessageText.vue       | 13 ++++-
 .../Apps/ChatAi/components/ChitChat/index.vue | 16 ++++--
 .../Apps/ChatAi/components/Sidebar/index.vue  | 17 ++++--
 src/components/Apps/DrawerPanel/index.vue     | 11 +++-
 src/i18n/langs/en.json                        |  2 +
 src/i18n/langs/ja.json                        |  2 +
 src/i18n/langs/zh.json                        |  2 +
 9 files changed, 95 insertions(+), 31 deletions(-)

diff --git a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
index f80ad5c86..cb1376a47 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
@@ -1,18 +1,27 @@
 <template>
   <div class="container">
+    <div class="chat-action">
+      <Select2
+        v-model="select.value"
+        :disabled="isLoading"
+        v-bind="select"
+        @change="onSelectChange"
+      />
+    </div>
     <div class="chat-input">
       <el-input
-        v-model="value"
-        :disabled="isLoading"
-        :placeholder="$t('common.EnterMessage')"
+        v-model="inputValue"
         type="textarea"
+        :disabled="isLoading"
+        :placeholder="$tc('common.InputMessage')"
+        @compositionstart="isIM = true"
         @compositionend="isIM = false"
         @compositionstart="isIM = true"
         @keypress.native="onKeyEnter"
       />
       <div class="input-action">
         <span class="right">
-          <i :class="{'active': value }" class="fa fa-send" @click="onSendHandle" />
+          <i class="fa fa-send" :class="{'active': inputValue }" @click="onSendHandle" />
         </span>
       </div>
     </div>
@@ -21,17 +30,30 @@
 
 <script>
 import { mapState } from 'vuex'
+import Select2 from '../../../../Form/FormFields/Select2.vue'
 import { useChat } from '../../useChat.js'
 
 const { setLoading } = useChat()
 
 export default {
+  components: { Select2 },
   props: {
   },
   data() {
     return {
       isIM: false,
-      value: ''
+      inputValue: '',
+      select: {
+        url: '/api/v1/settings/chatai-prompts/',
+        value: '',
+        multiple: false,
+        placeholder: this.$t('common.Prompt'),
+        ajax: {
+          transformOption: (item) => {
+            return { label: item.name, value: item.content }
+          }
+        }
+      }
     }
   },
   computed: {
@@ -54,11 +76,15 @@ export default {
       }
     },
     onSendHandle() {
-      if (!this.value) return
+      if (!this.inputValue) return
 
       setLoading(true)
-      this.$emit('send', this.value)
-      this.value = ''
+      this.$emit('send', this.inputValue)
+      this.inputValue = ''
+    },
+    onSelectChange(value) {
+      this.inputValue = value
+      this.$emit('select-prompt', value)
     }
   }
 }
@@ -69,18 +95,25 @@ export default {
   display: flex;
   height: 100%;
   flex-direction: column;
-  .action {
-    height: 44px;
-    line-height: 44px;
+  .chat-action {
     width: 100%;
+    margin: 6px 0;
     &>>> .el-select {
+      width: 50%;
       .el-input__inner {
         height: 28px;
         line-height: 28px;
         border-radius: 16px;
+        border-color: transparent;
         background-color: #f7f7f8;
         font-size: 13px;
         color: rgba(0, 0, 0, 0.45);
+        &:hover {
+          background-color: #ededed;
+        }
+      }
+      .el-input__icon {
+        line-height: 0px;
       }
     }
   }
@@ -88,7 +121,6 @@ export default {
     flex: 1;
     display: flex;
     flex-direction: column;
-    margin-top: 16px;
     border: 1px solid #DCDFE6;
     border-radius: 12px;
     &:has(.el-textarea__inner:focus) {
diff --git a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
index 8b1fc8969..a73b6f023 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@@ -135,7 +135,7 @@ export default {
       display: -webkit-box;
       .message-content {
         flex: 1;
-        padding: 8px 12px;
+        padding: 6px 10px;
         border-radius: 2px 12px 12px;
         background-color: #f0f1f5;
       }
@@ -148,12 +148,15 @@ export default {
         .el-dropdown {
           height: 32px;
           line-height: 37px;
-          margin-left: 4px;
           font-size: 13px;
           .el-dropdown-link {
             i {
+              padding: 4px 5px;
               font-size: 15px;
               color: #8d9091;
+              &:hover {
+                color: #7b8085
+              }
             }
           }
         }
diff --git a/src/components/Apps/ChatAi/components/ChitChat/MessageText.vue b/src/components/Apps/ChatAi/components/ChitChat/MessageText.vue
index 01cacc41e..9d1d001fd 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/MessageText.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/MessageText.vue
@@ -19,6 +19,7 @@ import hljs from 'highlight.js'
 import 'highlight.js/styles/atom-one-dark.css'
 import { copy } from '@/utils/common'
 
+/* eslint-disable vue/no-v-html */
 export default {
   props: {
     message: {
@@ -37,7 +38,7 @@ export default {
       if (value && this.markdown) {
         return this.markdown?.render(value)
       }
-      return value
+      return this.$xss.process(value)
     }
   },
   mounted() {
@@ -96,8 +97,14 @@ export default {
 <style lang="scss" scoped>
 .markdown-body {
   font-size: 13px;
+  &>>> p {
+    margin-bottom: 0 !important;
+  }
   &>>> pre {
-    padding: 10px;
+    padding: 6px 0;
+    .hljs.code-block-body {
+      border-radius: 4px;
+    }
   }
   background-color: transparent;
   &>>> .code-block-wrapper {
@@ -135,7 +142,7 @@ export default {
   margin-right: 5px;
   border-radius: 50%;
   vertical-align: middle;
-  background: rgb(182, 189, 198);
+  background: #676A6c;
   animation: load 1.2s ease infinite;
 }
 .loading-box span:last-child{
diff --git a/src/components/Apps/ChatAi/components/ChitChat/index.vue b/src/components/Apps/ChatAi/components/ChitChat/index.vue
index c00ae7358..d93f03c01 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
@@ -23,7 +23,7 @@
         size="small"
         @click="onStopHandle"
       >{{ $tc('common.Stop') }}</el-button>
-      <ChatInput @send="onSendHandle" />
+      <ChatInput @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
     </div>
   </div>
 </template>
@@ -56,6 +56,7 @@ export default {
   data() {
     return {
       socket: {},
+      prompt: [],
       currentConversationId: '',
       showIntroduction: false,
       introduction: [
@@ -152,6 +153,7 @@ export default {
         }
         const message = {
           content: value,
+          prompt: this.prompt,
           conversation_id: this.currentConversationId || ''
         }
         addChatMessageById(chat)
@@ -171,9 +173,13 @@ export default {
         setLoading(true)
       }
     },
+    onSelectPromptHandle(value) {
+      this.prompt = value
+      this.currentConversationId = ''
+    },
     onStopHandle() {
       this.$axios.post(
-        '/kael/chat/interrupt_current_ask/',
+        '/kael/interrupt_current_ask/',
         { id: this.currentConversationId || '' }
       ).finally(() => {
         removeLoadingMessageInChat()
@@ -229,20 +235,20 @@ export default {
   .chat-list {
     flex: 1;
     position: relative;
-    padding: 0 15px 15px;
+    padding: 0 15px 25px;
     overflow-y: auto;
     user-select: text;
   }
   .input-box {
     position: relative;
-    height: 154px;
+    height: 160px;
     padding: 0 15px;
     margin-bottom: 15px;
     border-top: 1px solid #ececec;
   }
   .stop {
     position: absolute;
-    top: -36px;
+    top: -37px;
     left: 50%;
     z-index: 11;
     transform: translateX(-50%);
diff --git a/src/components/Apps/ChatAi/components/Sidebar/index.vue b/src/components/Apps/ChatAi/components/Sidebar/index.vue
index f087eba7b..5cbb2321b 100644
--- a/src/components/Apps/ChatAi/components/Sidebar/index.vue
+++ b/src/components/Apps/ChatAi/components/Sidebar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <div class="top">
-      <svg-icon icon-class="collapse" @click="onClose" />
+    <div class="close-sidebar">
+      <i class="el-icon-close" @click="onClose" />
     </div>
     <el-tabs v-model="active" :tab-position="'right'" @tab-click="handleClick">
       <el-tab-pane v-for="(item) in submenu" :key="item.name" :name="item.name">
@@ -47,14 +47,19 @@ export default {
   width: 100%;
   height: 100%;
   background-color: #f0f1f5;
-  .top {
+  .close-sidebar {
     text-align: center;
     font-size: 14px;
-    padding: 14px 0;
+    padding: 12px 0;
     cursor: pointer;
-    >>> .svg-icon {
+    i {
+      font-size: 16px;
+      font-weight: 600;
+      padding: 4px;
+      border-radius: 2px;
       &:hover {
-        color: #7b8085;
+        color: var(--color-primary);
+        background: var(--menu-hover);
       }
     }
   }
diff --git a/src/components/Apps/DrawerPanel/index.vue b/src/components/Apps/DrawerPanel/index.vue
index 9b766ac21..c8ff4dce7 100644
--- a/src/components/Apps/DrawerPanel/index.vue
+++ b/src/components/Apps/DrawerPanel/index.vue
@@ -141,6 +141,7 @@ export default {
   min-width: 260px;
   height: 100vh;
   user-select: none;
+  border-radius: 20px 0 0 20px;
   transition: transform .25s cubic-bezier(.7, .3, .1, 1);
   box-shadow: 0 0 8px 4px #00000014;
   transform: translate(100%);
@@ -191,9 +192,13 @@ export default {
   cursor: pointer;
 
   &:hover {
-    left: -52px !important;
-    width: 52px !important;
-    transform: scale(1.1);
+    left: -50px !important;
+    width: 50px !important;
+    transform: scale(1.06);
+    background-color: rgba(182, 181, 186, .9);
+    img {
+      filter: grayscale(1);
+    }
   }
   i {
     font-size: 20px;
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 2aca426e2..c731056c4 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -742,6 +742,8 @@
     "Reconnect": "Reconnect",
     "NewChat": "New Chat",
     "Chat": "Chat",
+    "Prompt": "Prompt",
+    "InputMessage": "Input message...",
     "CollapseSidebar": "Collapse the sidebar",
     "introduction": {
       "ConceptTitle": "🤔 Python interpreter",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index 52e6d4a39..03d70cad9 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -743,6 +743,8 @@
     "Reconnect": "再接続",
     "NewChat": "新しいチャット",
     "Chat": "チャット",
+    "Prompt": "ヒント",
+    "InputMessage": "メッセージの入力...",
     "CollapseSidebar": "サイドバーを閉じる",
     "introduction": {
       "ConceptTitle": "🤔 Python インタプリタ",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 89d624192..35027d2dc 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -795,6 +795,8 @@
     "Reconnect": "重新连接",
     "NewChat": "新聊天",
     "Chat": "聊天",
+    "Prompt": "提示词",
+    "InputMessage": "输入消息..."
     "EnterMessage": "请输入问题， Enter 发送",
     "CollapseSidebar": "收起侧边栏",
     "introduction": {