perf: chat增加提示词 (#3603)

Co-authored-by: “huailei000” <2280131253@qq.com> Co-authored-by: huailei <31801270+huailei000@users.noreply.github.com>
2025-08-31 22:48:27 +00:00 · 2023-12-14 16:37:48 +08:00
parent 3bf7eed52e
commit 9b7a360ea1
9 changed files with 95 additions and 31 deletions
--- 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) {
--- 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
+              }
            }
          }
        }
--- 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{
--- 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%);
--- 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);
      }
    }
  }
--- 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;
--- 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",
--- 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 インタプリタ",
--- 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": {