feat(copilot): add preset prompt actions

src/components/Copilot.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="right-panel">
-    <a @click="toggleWindow" href="javascript:;"><i class="el-icon-chat-line-square"></i></a>
     <transition name="pop">
       <el-card v-show="showCopilot" class="copilot" shadow="never">
         <div slot="header" class="clearfix">
@@ -25,7 +24,15 @@
             <span class="chat-title"><i class="el-icon-loading"></i>{{ $t('common.thinking') }}</span>
           </div>
         </div>
-        <div class="footer">
+        <div class="footer" v-click-outside="handleClickPresetOutside">
+          <transition name="el-zoom-in-bottom">
+            <el-cascader-panel
+              v-if="showPresetPrompt"
+              class="preset-prompts"
+              :options="presetPromptOptions"
+              @change="handlePresetsChange"
+            ></el-cascader-panel>
+          </transition>
           <el-input
             type="textarea"
             :autosize="{ minRows: 1, maxRows: 4 }"
@@ -34,6 +41,8 @@
             v-model="currentPublishMsg"
             :placeholder="$t('common.copiltePubMsgPlacehoder')"
             @keyup.enter="sendMessage()"
+            @focus="showPresetPrompt = true"
+            @input="showPresetPrompt = false"
           ></el-input>
           <el-button
             class="chat-pub-btn"
@@ -59,11 +68,16 @@ import Prism from 'prismjs'
 import CryptoJS from 'crypto-js'
 import { ENCRYPT_KEY, getCopilotMessageId } from '@/utils/idGenerator'
 import useServices from '@/database/useServices'
+import ClickOutside from 'vue-click-outside'
+import VueI18n from 'vue-i18n'
 
 @Component({
   components: {
     VueMarkdown,
   },
+  directives: {
+    ClickOutside,
+  },
 })
 export default class Copilot extends Vue {
   @Prop({}) public record?: ConnectionModel
@@ -73,6 +87,7 @@ export default class Copilot extends Vue {
   @Getter('model') private model!: AIModel
 
   public showCopilot = false
+  public showPresetPrompt = false
   private page = 1
   private hasMore = true
   private isLoading = false
@@ -92,11 +107,144 @@ export default class Copilot extends Vue {
     assistant: 'MQTTX Copilot',
   }
 
+  private currPresetPrompt = ''
+  get presetPromptsMap(): Record<string, string | VueI18n.TranslateResult> {
+    return {
+      javascript: this.$t('common.promptProgrammingLanguage', ['JavaScript', '@connection']),
+      python: this.$t('common.promptProgrammingLanguage', ['Python', '@connection']),
+      java: this.$t('common.promptProgrammingLanguage', ['Java', '@connection']),
+      go: this.$t('common.promptProgrammingLanguage', ['Go', '@connection']),
+      c: this.$t('common.promptProgrammingLanguage', ['C', '@connection']),
+      cpp: this.$t('common.promptProgrammingLanguage', ['C++', '@connection']),
+      csharp: this.$t('common.promptProgrammingLanguage', ['C#', '@connection']),
+      php: this.$t('common.promptProgrammingLanguage', ['PHP', '@connection']),
+      swift: this.$t('common.promptProgrammingLanguage', ['Swift', '@connection']),
+      kotlin: this.$t('common.promptProgrammingLanguage', ['Kotlin', '@connection']),
+      rust: this.$t('common.promptProgrammingLanguage', ['Rust', '@connection']),
+      dart: this.$t('common.promptProgrammingLanguage', ['Dart', '@connection']),
+      erlang: this.$t('common.promptProgrammingLanguage', ['Erlang', '@connection']),
+      autoFillPayload: this.$t('common.promptAutoFillPayload'),
+      mqttProtocol: this.$t('common.mqttProtocol'),
+      installEMQX: this.$t('common.installEMQX'),
+      emqxRule: this.$t('common.promptEmqxRule'),
+      connectionInfo: this.$t('common.promptCurrentConnectionInfo', ['@connection']),
+    }
+  }
+  private presetPromptOptions = [
+    {
+      value: 'clientCodegen',
+      label: this.$tc('common.promptCodegen'),
+      children: [
+        {
+          value: 'javascript',
+          label: 'JavaScript',
+        },
+        {
+          value: 'python',
+          label: 'Python',
+        },
+        {
+          value: 'java',
+          label: 'Java',
+        },
+        {
+          value: 'go',
+          label: 'Go',
+        },
+        {
+          value: 'c',
+          label: 'C',
+        },
+        {
+          value: 'cpp',
+          label: 'C++',
+        },
+        {
+          value: 'csharp',
+          label: 'C#',
+        },
+        {
+          value: 'php',
+          label: 'PHP',
+        },
+        {
+          value: 'swift',
+          label: 'Swift',
+        },
+        {
+          value: 'kotlin',
+          label: 'Kotlin',
+        },
+        {
+          value: 'rust',
+          label: 'Rust',
+        },
+        {
+          value: 'dart',
+          label: 'Dart',
+        },
+        {
+          value: 'erlang',
+          label: 'Erlang',
+        },
+      ],
+    },
+    {
+      value: 'payload',
+      label: 'Payload',
+      children: [
+        {
+          value: 'autoFillPayload',
+          label: this.$tc('common.genPayload'),
+        },
+      ],
+    },
+    {
+      value: 'emqx',
+      label: 'EMQX',
+      children: [
+        {
+          value: 'installEMQX',
+          label: this.$t('common.installEMQX'),
+        },
+        {
+          value: 'emqxRule',
+          label: this.$t('common.emqxRule'),
+        },
+      ],
+    },
+    {
+      value: 'mqtt',
+      label: 'MQTT FAQs',
+      children: [
+        {
+          value: 'mqttProtocol',
+          label: this.$tc('common.mqttProtocol'),
+        },
+      ],
+    },
+    {
+      value: 'explain',
+      label: this.$t('common.explainer'),
+      children: [
+        {
+          value: 'connectionInfo',
+          label: this.$t('common.currentConnectionInfo'),
+        },
+      ],
+    },
+  ]
+
   @Watch('showCopilot')
   private handleShowCopilotChange(newValue: boolean, oldValue: boolean) {
     if (newValue === true && oldValue === false && this.isSending === false) {
       this.loadMessages({ reset: true })
     }
+    this.$nextTick(() => {
+      setTimeout(() => {
+        Prism.highlightAll()
+      }, 100)
+    })
   }
 
   private getChatBodyRef() {
@@ -147,7 +295,12 @@ export default class Copilot extends Vue {
 
     const userMessages = [
       ...this.systemMessages.map(({ role, content }) => ({ role, content })),
-      ...this.messages.slice(-20).map(({ role, content }) => ({ role, content })),
+      ...this.messages.slice(-20).map(({ role, content }) => {
+        if (content.includes('@connection')) {
+          return { role, content: content.replace('@connection', JSON.stringify(this.record)) }
+        }
+        return { role, content }
+      }),
     ]
 
     this.currentPublishMsg = ''
@@ -185,11 +338,19 @@ export default class Copilot extends Vue {
       this.$nextTick(() => {
         Prism.highlightAll()
       })
-    } catch (error) {
-      const err = error as unknown as Error
-      this.$message.error(`API Error: ${String(err)}`)
+      if (this.currPresetPrompt === 'autoFillPayload') {
+        this.$emit('autoFillPayload', responseMessage.content)
+      }
+    } catch (err) {
+      const error = err as unknown as any
+      if (error.response.data) {
+        this.$message.error(`API Error: ${error.response.data.error.message}`)
+      } else {
+        this.$message.error(`API Error: ${error}`)
+      }
     } finally {
       this.isSending = false
+      this.currPresetPrompt = ''
       this.scrollToBottom()
     }
   }
@@ -239,6 +400,17 @@ export default class Copilot extends Vue {
     })
   }
 
+  private handlePresetsChange(prompts: string[]) {
+    this.currPresetPrompt = prompts[prompts.length - 1]
+    const sendMessage = this.presetPromptsMap[this.currPresetPrompt]
+    this.sendMessage(sendMessage as string)
+    this.showPresetPrompt = false
+  }
+
+  private handleClickPresetOutside() {
+    this.showPresetPrompt = false
+  }
+
   private created() {
     this.loadMessages({ reset: true })
   }
@@ -288,7 +460,9 @@ body.night {
         .el-button--text {
           padding: 0;
           i {
-            font-size: 16px !important;
+            font-size: 16px;
+            color: var(--color-text-title);
+            font-weight: 400;
           }
         }
       }
@@ -382,6 +556,44 @@ body.night {
       padding: 12px 16px;
       display: flex;
       align-items: center;
+      .preset-prompts.el-cascader-panel.is-bordered {
+        box-shadow: #0000001a 0px 4px 12px;
+        background: var(--color-bg-normal);
+        position: absolute;
+        bottom: 68px;
+        border: 1px solid var(--color-border-default);
+        .el-cascader-node.in-active-path,
+        .el-cascader-node.is-selectable.in-checked-path,
+        .el-cascader-node.is-active {
+          font-weight: normal;
+        }
+        .el-cascader-node {
+          padding: 0 12px 0 12px;
+          .el-cascader-node__label {
+            padding: 0;
+            padding-right: 30px;
+          }
+        }
+        .el-cascader-menu {
+          min-width: auto;
+          border-right: 1px solid var(--color-border-default);
+          &:last-child {
+            border-right: none;
+          }
+        }
+        .el-cascader-menu,
+        i {
+          color: var(--color-text-default);
+        }
+        .el-icon-check.el-cascader-node__prefix {
+          display: none;
+        }
+        .el-cascader-node:not(.is-disabled):hover,
+        .el-cascader-node:not(.is-disabled):focus {
+          background-color: transparent;
+          color: var(--color-main-green);
+        }
+      }
       .chat-msg-input {
         flex-grow: 1;
         textarea {

src/components/MsgPublish.vue

@@ -594,7 +594,6 @@ export default class MsgPublish extends Vue {
     position: absolute;
     transform: translate(0, -100%);
     width: 100%;
-    z-index: 11;
     .el-card.meta-card {
       padding: 10px;
       padding-bottom: 0px;