perf: add insert event (#5052)

* perf: add insert event perf: receive insert code perf: add content perf: update code perf: save panel to LocalStorage * perf: only terminal add insert action --------- Co-authored-by: Eric <xplzv@126.com>
2025-06-23 13:48:36 +00:00 · 2025-06-17 19:23:19 +08:00 · 2025-06-17 19:23:19 +08:00 · d72671d2c9
commit d72671d2c9
parent 8f17fa82a2
5 changed files with 175 additions and 37 deletions
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
@ -1,6 +1,6 @@
 <template>
  <div class="container">
-    <div class="chat-action">
+    <div v-if="hasPrompt" class="chat-action">
      <Select2
        v-model="select.value"
        :disabled="isLoading || isSelectDisabled"
@ -36,6 +36,10 @@ export default {
    expanded: {
      type: Boolean,
      default: false
+    },
+    hasPrompt: {
+      type: Boolean,
+      default: true
    }
  },
  data() {
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@ -33,7 +33,7 @@
                <!-- eslint-disable-next-line -->
                <div class="divider"></div>
                <p>
-                  <MessageText :message="item.reasoning" />
+                  <MessageText :message="item.reasoning" @insert-code="handleInsertCode" />
                </p>
              </div>

@ -41,8 +41,7 @@
                <span v-if="isServerError" class="error">
                  {{ isServerError }}
                </span>
-                <MessageText :message="item.result" />
-              </div>
+                <MessageText :message="item.result" :is-terminal="isTerminal" @insert-code="handleInsertCode" /></div>
            </div>
          </div>
          <div class="action">
@ -93,6 +92,10 @@ export default {
      type: Object,
      default: () => {
      }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
    }
  },
  data() {
@ -142,6 +145,9 @@ export default {
      if (value === 'copy') {
        copy(this.item.result.content)
      }
+    },
+    handleInsertCode(code) {
+      this.$emit('insert-code', code)
    }
  }
 }
--- a/src/components/Apps/ChatAi/components/ChitChat/MessageText.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/MessageText.vue
@ -25,6 +25,10 @@ export default {
      type: Object,
      default: () => {
      }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
    }
  },
  data() {
@ -45,10 +49,10 @@ export default {
    this.init()
  },
  updated() {
-    this.addCopyEvents()
+    this.addEvents()
  },
  destroyed() {
-    this.removeCopyEvents()
+    this.removeEvents()
  },
  methods: {
    init() {
@ -69,26 +73,64 @@ export default {
      this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
    },
    highlightBlock(str, lang) {
-      return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${'Copy'}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+      let insertSpanHmtl = `<span class="code-block-header__insert">${this.$t('insert')}</span>`
+      if (!this.isTerminal) {
+        insertSpanHmtl = ''
+      }
+      return `<pre class="code-block-wrapper">
+        <div class="code-block-header">
+        <span class="code-block-header__lang">${lang}</span>  
+        <span class="code-block-header__actions">
+        ${insertSpanHmtl}
+          <span class="code-block-header__copy">${'Copy'}</span>
+        </span>
+        </div>
+        <code class="hljs code-block-body ${lang}">${str}</code></pre>`
    },
-    addCopyEvents() {
-      const copyBtn = document.querySelectorAll('.code-block-header__copy')
-      copyBtn.forEach((btn) => {
-        btn.addEventListener('click', () => {
-          const code = btn.parentElement?.nextElementSibling?.textContent
-          if (code) {
-            copy(code)
-          }
+    addEvents() {
+      this.addBtnClickEvents('.code-block-header__copy', this.handlerClickCopy)
+      this.addBtnClickEvents('.code-block-header__insert', this.handlerClickInsert)
+    },
+
+    handlerClickCopy(event) {
+      const wrapper = event.target.closest('.code-block-wrapper')
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          copy(codeText)
+        }
+      }
+    },
+    handlerClickInsert(event) {
+      const wrapper = event.target.closest('.code-block-wrapper')
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          this.$emit('insert-code', codeText)
+        }
+      }
+    },
+    addBtnClickEvents(selector, callback) {
+      const buttons = this.$refs.textRef.querySelectorAll(selector)
+      buttons.forEach((btn) => {
+        btn.addEventListener('click', callback)
+      })
+    },
+    removeBtnClickEvent(selector) {
+      const buttons = this.$refs.textRef.querySelectorAll(selector)
+      buttons.forEach((btn) => {
+        btn.removeEventListener('click', () => {
        })
      })
    },
-    removeCopyEvents() {
+    removeEvents() {
      if (this.$refs.textRef) {
-        const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
-        copyBtn.forEach((btn) => {
-          btn.removeEventListener('click', () => {
-          })
-        })
+        this.removeBtnClickEvent('.code-block-header__copy')
+        this.addBtnClickEvents('.code-block-header__insert')
      }
    }
  }
@ -98,6 +140,7 @@ export default {
 <style lang="scss" scoped>
 .markdown-body {
  font-size: 13px;
+  max-width: 300px;;

  &::v-deep p {
    margin-bottom: 0 !important;
@ -115,26 +158,46 @@ export default {

  &::v-deep .code-block-wrapper {
    background: #1F2329;
-    padding: 2px 6px;
+    padding: 0;
    margin: 5px 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;

    .code-block-body {
-      padding: 5px 10px 0;
+      padding: 5px 10px;
    }
-  ;

    .code-block-header {
      margin-bottom: 4px;
      overflow: hidden;
      background: #353946;
      color: #c2d1e1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px 8px;
+      width: 100%;
+      box-sizing: border-box;

-      .code-block-header__copy {
-        float: right;
-        cursor: pointer;
+      .code-block-header__actions {
+        display: flex;
+        gap: 8px;

-        &:hover {
-          color: #6e747b;
+        .code-block-header__copy {
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
+        }
+
+        .code-block-header__insert {
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
        }
      }
    }
@ -178,6 +241,7 @@ export default {
  0% {
    opacity: 1;
  }
+
  100% {
    opacity: 0;
  }
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
@ -17,7 +17,7 @@
          </div>
        </div>
      </div>
-      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" />
+      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" :is-terminal="isTerminal" @insert-code="insertCode" />
    </div>
    <div class="input-box">
      <el-button
@ -28,7 +28,7 @@
        size="small"
        @click="onStopHandle"
      >{{ $tc('Stop') }}</el-button>
-      <ChatInput ref="chatInput" :expanded="expanded" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      <ChatInput ref="chatInput" :expanded="expanded" :has-prompt="!isTerminal" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
    </div>
  </div>
 </template>
@ -68,7 +68,10 @@ export default {
      prompt: '',
      conversationId: '',
      showIntroduction: false,
-      introduction: []
+      introduction: [],
+      terminalContext: null,
+      isTerminal: false,
+      sessionChat: {}
    }
  },
  computed: {
@ -100,6 +103,9 @@ export default {
      this.showIntroduction = true
      this.conversationId = ''
      this.$refs.chatInput.select.value = ''
+      if (this.terminalContext) {
+        this.prompt = this.terminalContext.content || ''
+      }
      const chat = {
        message: {
          content: this.$t('ChatHello'),
@ -150,6 +156,32 @@ export default {
      addMessageToActiveChat(data)
      setLoading(true)
    },
+    onTerminalContext(terminalContext) {
+      const originSessionId = this.terminalContext?.sessionId
+      const newSessionId = terminalContext.sessionId || ''
+      if (originSessionId) {
+        this.saveSessionChat(originSessionId)
+      }
+      this.terminalContext = terminalContext
+      this.isTerminal = true
+      this.prompt = terminalContext.content || ''
+      if (originSessionId !== newSessionId) {
+        if (this.sessionChat[newSessionId]) {
+          clearChats()
+          for (const chat of this.sessionChat[newSessionId]) {
+            addChatMessageById(chat)
+          }
+        } else {
+          this.onNewChat()
+        }
+      }
+    },
+    saveSessionChat(sessionId) {
+      if (this.terminalContext) {
+        this.sessionChat[sessionId] = JSON.parse(JSON.stringify(this.activeChat.chats))
+      }
+    },
+
    onSendHandle(value) {
      this.showIntroduction = false
      this.socket = ws || {}
@ -204,6 +236,15 @@ export default {
    sendIntroduction(item) {
      this.showIntroduction = false
      this.onSendHandle(item.content)
+    },
+    insertCode(code) {
+      this.sendPostMessage({
+        name: 'INSERT_TERMINAL_CODE',
+        data: code.replace(/^[\s\r\n]+|[\s\r\n]+$/g, '')
+      })
+    },
+    sendPostMessage(data) {
+      window.parent.postMessage(data)
    }
  }
 }
--- a/src/components/Apps/ChatAi/index.vue
+++ b/src/components/Apps/ChatAi/index.vue
@ -47,7 +47,9 @@ import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
 import { ws } from '@/utils/socket'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
+import { ObjectLocalStorage } from '@/utils/common'

+const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
  components: {
    DrawerPanel,
@ -76,12 +78,15 @@ export default {
      robotUrl: require('@/assets/img/robot-assistant.png'),
      height: '400px',
      expanded: false,
-      clientOffset: {}
+      clientOffset: {},
+      currentTerminalContent: {}
    }
  },
  watch: {
  },
  mounted() {
+    const expanded = aiPannelLocalStorage.get('expanded')
+    this.updateExpandedState(expanded)
    this.handlePostMessage()
  },
  methods: {
@ -90,6 +95,16 @@ export default {
        if (event.data === 'show-chat-panel') {
          this.$refs.drawer.show = true
          this.initWebSocket()
+          return
+        }
+        const msg = event.data
+        switch (msg.name) {
+          case 'current_terminal_content':
+            // {content: '...', terminalId: '',sessionId: '',viewId: '',viewName: ''}
+            this.$log.debug('current_terminal_content', msg)
+            this.currentTerminalContent = msg.data
+            this.$refs.component?.onTerminalContext(msg.data)
+            break
        }
      })
    },
@ -113,12 +128,20 @@ export default {
      this.$refs.drawer.show = false
    },
    expandFull() {
-      this.height = '100%'
-      this.expanded = true
+      this.updateExpandedState(true)
+      this.save_pannel_settings()
    },
    compress() {
-      this.height = '400px'
-      this.expanded = false
+      this.updateExpandedState(false)
+      this.save_pannel_settings()
+    },
+    save_pannel_settings() {
+      aiPannelLocalStorage.set('expanded', this.expanded)
+      console.log('AI panel settings saved:', this.expanded)
+    },
+    updateExpandedState(expanded) {
+      this.expanded = expanded
+      this.height = expanded ? '100%' : '400px'
    },
    onNewChat() {
      this.active = 'chat'