feat(copilot): support onclick to ask and analyze error msg

src/assets/scss/base.scss

@@ -140,3 +140,16 @@ textarea {
   padding: 16px 0;
   -webkit-app-region: drag;
 }
+
+#notify-copilot-button {
+  margin: 12px 0 4px 0;
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  background-color: transparent;
+  border: 1px solid var(--color-main-green);
+  color: var(--color-main-green);
+  border-radius: 4px;
+  padding: 0 24px;
+  cursor: pointer;
+}

src/components/Copilot.vue

@@ -63,7 +63,7 @@ export default class Copilot extends Vue {
   @Getter('openAIAPIKey') private openAIAPIKey!: string
   @Getter('model') private model!: AIModel
 
-  private showCopilot = false
+  public showCopilot = false
   private messages: CopilotMessage[] = []
   private systemMessages: CopilotMessage[] = [
     {
@@ -99,7 +99,7 @@ export default class Copilot extends Vue {
     this.showCopilot = !this.showCopilot
   }
 
-  private async sendMessage(msg?: string) {
+  public async sendMessage(msg?: string) {
     if (!this.openAIAPIKey) {
       this.$confirm(this.$tc('common.copilotAPIKeyRequired'), this.$tc('common.warning'), {
         type: 'warning',
@@ -115,8 +115,8 @@ export default class Copilot extends Vue {
       return
     }
 
-    const content = msg || this.currentPublishMsg
-    if (!content.trim()) return
+    const content = (msg || this.currentPublishMsg).replace(/\s+/g, ' ').trim()
+    if (!content) return
 
     this.isSending = true
     this.scrollToBottom()
@@ -128,7 +128,6 @@ export default class Copilot extends Vue {
     ]
 
     this.currentPublishMsg = ''
-
     const bytes = CryptoJS.AES.decrypt(this.openAIAPIKey, ENCRYPT_KEY)
     const decryptedKey = bytes.toString(CryptoJS.enc.Utf8)
     try {

src/components/SubscriptionsList.vue

@@ -238,7 +238,7 @@ export default class SubscriptionsList extends Vue {
   private client: Partial<MqttClient> = {
     connected: false,
   }
-  private showDialog: boolean = false
+  public showDialog: boolean = false
   private subRecord: SubscriptionModel = {
     id: getSubscriptionId(),
     topic: 'testtopic/#',
@@ -444,7 +444,7 @@ export default class SubscriptionsList extends Vue {
       this.client.subscribe(topicsArr, { qos, nl, rap, rh, properties }, async (error, granted) => {
         this.subLoading = false
         if (error) {
-          this.$message.error(error)
+          this.$emit('onSubError', error.toString(), `Topics: ${JSON.stringify(topicsArr)}`)
           this.$log.error(`Topic: subscribe error, ${error} `)
           return false
         }
@@ -462,7 +462,7 @@ export default class SubscriptionsList extends Vue {
           const errorReasonMsg: VueI18n.TranslateResult = this.getErrorReasonMsg(errorReason)
           const errorMsg: string = `${this.$t('connections.subFailed')} ${errorReasonMsg}`
           this.$log.error(`Topic: subscribe error, ${errorReasonMsg} `)
-          this.$message.error(errorMsg)
+          this.$emit('onSubError', errorMsg, `Topics: ${JSON.stringify(topicsArr)}`)
           return false
         }
         if (enable) {
@@ -532,7 +532,7 @@ export default class SubscriptionsList extends Vue {
         this.client.unsubscribe(topic, { qos }, async (error) => {
           this.unsubLoading = false
           if (error) {
-            this.$message.error(error)
+            this.$emit('onSubError', error.toString(), `Topic: ${topic}`)
             resolve(false)
             return false
           }

src/lang/common.ts

@@ -307,4 +307,11 @@ export default {
     ja: '設定',
     hu: 'Beállítások',
   },
+  promptError: {
+    zh: '请帮助解析并解决以下错误：',
+    en: 'Please help to analyze and resolve the following error: ',
+    tr: 'Lütfen aşağıdaki hata mesajını analiz etmeye ve çözmeye yardımcı olun: ',
+    ja: '以下のエラーメッセージを分析し、解決してください：',
+    hu: 'Kérjük, segítsen elemezni és megoldani az alábbi hibaüzenetet: ',
+  },
 }

src/utils/idGenerator.ts

@@ -3,7 +3,7 @@ export const getClientId = () => `mqttx_${Math.random().toString(16).substring(2
 export const getCollectionId = () => `collection_${uuidv4()}` as string
 export const getSubscriptionId = () => `scription_${uuidv4()}` as string
 export const getMessageId = () => `message_${uuidv4()}` as string
-export const ENCRYPT_KEY = '123e4567-e89b-12d3-a456-426614174000'
+export const ENCRYPT_KEY = Buffer.from('123e4567-e89b-12d3-a456-426614174000').toString('base64')
 
 export default {
   getClientId,

src/views/connections/ConnectionsDetail.vue

@@ -86,7 +86,7 @@
                 <i class="iconfont icon-a-stopscrip"></i>
               </a>
             </el-tooltip>
-            <copilot style="margin-right: 12px" :record="record" mode="connections" />
+            <copilot ref="copilot" style="margin-right: 12px" :record="record" mode="connections" />
             <template v-if="!isNewWindow">
               <el-tooltip
                 placement="bottom"
@@ -218,6 +218,7 @@
           :top="showClientInfo ? bodyTop.open : bodyTop.close"
           @onClickTopic="handleTopicClick"
           @deleteTopic="handleTopicDelete"
+          @onSubError="handleSubTopicError"
         />
         <MessageList
           ref="msgList"
@@ -579,13 +580,7 @@ export default class ConnectionsDetail extends Vue {
     } catch (error) {
       const err = error as Error
       this.connectLoading = false
-      this.$notify({
-        title: err.toString(),
-        message: '',
-        type: 'error',
-        duration: 4000,
-        offset: 30,
-      })
+      this.notifyErrorWithCopilot(err.toString())
     }
   }
 
@@ -928,6 +923,12 @@ export default class ConnectionsDetail extends Vue {
     this.handleMessages()
   }
 
+  private handleSubTopicError(errMsg: string, info?: string) {
+    this.notifyErrorWithCopilot(errMsg, info, () => {
+      this.subListRef.showDialog = false
+    })
+  }
+
   private handleSearchOpen() {
     this.searchVisible = true
     const $el = document.getElementById('searchTopic')
@@ -1015,13 +1016,7 @@ export default class ConnectionsDetail extends Vue {
     this.client.end!(true)
     this.retryTimes = 0
     this.connectLoading = false
-    this.$notify({
-      title: msgTitle,
-      message: '',
-      type: 'error',
-      duration: 4000,
-      offset: 30,
-    })
+    this.notifyErrorWithCopilot(msgTitle)
     this.$log.error(`${this.record.name} connect fail, MQTT.js onError trigger, ${error.stack}`)
     this.$emit('reload')
   }
@@ -1778,6 +1773,44 @@ export default class ConnectionsDetail extends Vue {
     })
   }
 
+  /**
+   * Notifies the user with an error message using the Copilot feature.
+   *
+   * @param {string} msgTitle - The title of the error message.
+   */
+  private notifyErrorWithCopilot(msgTitle: string, promptInfo?: string, callback?: () => void) {
+    const notify = this.$notify({
+      title: msgTitle,
+      dangerouslyUseHTMLString: true,
+      message: '<button id="notify-copilot-button">Ask Copilot</button>',
+      type: 'error',
+      duration: 0,
+      offset: 30,
+    })
+
+    this.$nextTick(() => {
+      const button = document.getElementById('notify-copilot-button')
+      if (button) {
+        button.addEventListener('click', () => {
+          const sendMsg = promptInfo ? `${promptInfo}\n${msgTitle}` : msgTitle
+          this.askCopilot(`${this.$tc('common.promptError')}\`\`\`${sendMsg}\`\`\``)
+          notify.close()
+          callback?.()
+        })
+      }
+    })
+  }
+
+  /**
+   * Asks Copilot a question and shows the Copilot component.
+   * @param askMsg The question to ask Copilot.
+   */
+  private askCopilot(askMsg: string) {
+    const copilotRef: Copilot = this.$refs.copilot as Copilot
+    copilotRef.showCopilot = true
+    copilotRef.sendMessage(askMsg)
+  }
+
   private created() {
     this.getConnectionValue(this.curConnectionId)
     ipcRenderer.on('searchContent', () => {

src/views/settings/index.vue

@@ -264,6 +264,8 @@
             v-model="aiConfig.openAIAPIKey"
             placeholder="sk-*******"
             type="password"
+            clearable
+            @clear="handleAIConfigChanged('apiKey')"
             @blur="handleAIConfigChanged('apiKey')"
           ></el-input>
         </el-col>
@@ -410,8 +412,11 @@ export default class Settings extends Vue {
 
   private handleAIConfigChanged(action: 'apiKey' | 'model') {
     if (action === 'apiKey') {
-      const encryptedKey = CryptoJS.AES.encrypt(this.aiConfig.openAIAPIKey.trim(), ENCRYPT_KEY).toString()
-      this.actionSetOpenAIAPIKey({ openAIAPIKey: encryptedKey })
+      let saveKey = ''
+      if (this.aiConfig.openAIAPIKey !== '') {
+        saveKey = CryptoJS.AES.encrypt(this.aiConfig.openAIAPIKey.trim(), ENCRYPT_KEY).toString()
+      }
+      this.actionSetOpenAIAPIKey({ openAIAPIKey: saveKey })
     } else if (action === 'model') {
       this.actionSetModel({ model: this.aiConfig.model })
     }