From 901e4cc46a1b3748e1305f2f905421a3ed466ef7 Mon Sep 17 00:00:00 2001 From: YuShifan <894402575bt@gmail.com> Date: Thu, 7 Dec 2023 11:36:17 +0800 Subject: [PATCH 1/2] feat(copilot): add preset prompt actions --- src/components/Copilot.vue | 221 ++++++++++++++++++++++++++++++++++++- src/lang/common.ts | 77 +++++++++++++ src/utils/element.ts | 2 + 3 files changed, 295 insertions(+), 5 deletions(-) diff --git a/src/components/Copilot.vue b/src/components/Copilot.vue index 25c2f733a..389447bae 100644 --- a/src/components/Copilot.vue +++ b/src/components/Copilot.vue @@ -25,7 +25,15 @@ {{ $t('common.thinking') }} -
+
+ + + { + 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 +296,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 +339,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 +401,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 }) } @@ -382,6 +555,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 { diff --git a/src/lang/common.ts b/src/lang/common.ts index 362f9ca31..86a6561a5 100644 --- a/src/lang/common.ts +++ b/src/lang/common.ts @@ -314,4 +314,81 @@ export default { ja: '以下のエラーメッセージを分析し、解決してください：', hu: 'Kérjük, segítsen elemezni és megoldani az alábbi hibaüzenetet: ', }, + promptCodegen: { + zh: '客户端代码生成', + en: 'Client Codegen', + tr: 'Kod Oluşturucu', + ja: 'コード生成', + hu: 'Kódgenerálás', + }, + promptProgrammingLanguage: { + zh: '使用当前连接创建 {0} MQTT Client 代码 {1}，如果使用了 MQTT5 的，注意配置属性', + en: 'Create {0} MQTT Client code with the current connection {1}, if you use MQTT5, pay attention to the configuration properties', + tr: 'Mevcut bağlantı ile {0} MQTT Client kodu oluştur {1}, MQTT5 kullanıyorsanız, yapılandırma özelliklerine dikkat edin', + ja: '現在の接続で {0} MQTTクライアントコードを作成する {1}，MQTT5を使用する場合は、構成プロパティに注意してください', + hu: 'Hozzon létre {0} MQTT ügyfélkódot az aktuális kapcsolattal {1}, ha MQTT5-öt használ, figyeljen a konfigurációs tulajdonságokra', + }, + genPayload: { + zh: '生成测试数据', + en: 'Generate Test Data', + tr: 'Test Verisi Oluştur', + ja: 'テストデータを生成する', + hu: 'Tesztadatok generálása', + }, + promptAutoFillPayload: { + zh: '给我一份 MQTT 测试数据，中等复杂结构，包含各种常见的测试场景数据。每次返回一个 JSON payload，不包含任何额外信息。', + en: 'Give me a piece of MQTT test data, medium complex structure, containing various common test scenario data. Return a JSON payload each time, without any additional information.', + tr: 'Bana bir MQTT test verisi ver, orta karmaşık yapı, çeşitli ortak test senaryo verileri içerir. Her seferinde bir JSON veri döndürün, herhangi bir ek bilgi içermez.', + ja: '私にMQTTテストデータを1つ与えてください。中程度の複雑な構造で、さまざまな一般的なテストシナリオデータを含みます。毎回JSONペイロードを返しますが、追加情報は含まれません。', + hu: 'Adj nekem egy MQTT tesztadatot, közepesen összetett szerkezetet, amely különféle gyakori teszteset-adatokat tartalmaz. Minden alkalommal visszaad egy JSON payloadot, bármilyen további információ nélkül.', + }, + mqttProtocol: { + zh: 'MQTT 协议是什么', + en: 'What is MQTT Protocol', + tr: 'MQTT Protokolü Nedir', + ja: 'MQTTプロトコルとは何ですか', + hu: 'Mi az MQTT protokoll', + }, + installEMQX: { + zh: '如何安装 EMQX', + en: 'How to install EMQX', + tr: 'EMQX Nasıl Kurulur', + ja: 'EMQXのインストール方法', + hu: 'Hogyan telepíthető az EMQX', + }, + emqxRule: { + zh: 'EMQX 规则引擎 SQL 示例', + en: 'EMQX Rule Engine SQL Example', + tr: 'EMQX Kural Motoru SQL Örneği', + ja: 'EMQXルールエンジンSQLの例', + hu: 'EMQX szabálymotor SQL példa', + }, + promptEmqxRule: { + zh: '请帮我编辑一段 EMQX 规则引擎的 SQL 示例，包含解释和简单教程', + en: 'Please help me edit an EMQX Rule Engine SQL example, including explanation and simple tutorial', + tr: 'Lütfen bana bir EMQX Kural Motoru SQL örneği düzenleme konusunda yardımcı olun, açıklama ve basit bir öğretici içerir', + ja: 'EMQXルールエンジンSQLの例を編集してください。説明と簡単なチュートリアルが含まれています', + hu: 'Segítsen szerkeszteni egy EMQX szabálymotor SQL példát, beleértve a magyarázatot és az egyszerű útmutatót', + }, + currentConnectionInfo: { + zh: '当前连接信息', + en: 'Current Connection Info', + tr: 'Mevcut Bağlantı Bilgisi', + ja: '現在の接続情報', + hu: 'Jelenlegi kapcsolat információ', + }, + promptCurrentConnectionInfo: { + zh: '请帮我解释当前连接的信息，包含连接的基本信息 {0}', + en: 'Please help me explain the information of the current connection, including the basic information of the connection {0}', + tr: 'Lütfen bana mevcut bağlantının bilgisini açıklama konusunda yardımcı olun, bağlantının temel bilgilerini içerir {0}', + ja: '現在の接続の情報を説明してください。接続の基本情報を含みます {0}', + hu: 'Segítsen elmagyarázni a jelenlegi kapcsolat adatait, beleértve a kapcsolat alapadatait {0}', + }, + explainer: { + zh: '解释器', + en: 'Explainer', + tr: 'Açıklayıcı', + ja: '解説者', + hu: 'Magyarázó', + }, } diff --git a/src/utils/element.ts b/src/utils/element.ts index ae639aa86..aec2a7b8f 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -62,6 +62,7 @@ import { // Collapse, // CollapseItem, // Cascader, + CascaderPanel, ColorPicker, // Transfer, // Container, @@ -135,6 +136,7 @@ export default (Vue: typeof _Vue) => { // Vue.use(Collapse) // Vue.use(CollapseItem) // Vue.use(Cascader) + Vue.use(CascaderPanel) Vue.use(ColorPicker) // Vue.use(Transfer) // Vue.use(Container) From 6b9a4daf09a5594c3e5771095f357a6e472f6ea2 Mon Sep 17 00:00:00 2001 From: YuShifan <894402575bt@gmail.com> Date: Thu, 7 Dec 2023 15:29:39 +0800 Subject: [PATCH 2/2] fix(copilot): fix the z-index issue --- src/components/Copilot.vue | 5 +++-- src/components/MsgPublish.vue | 1 - src/views/Home.vue | 2 +- src/views/connections/ConnectionsDetail.vue | 14 +++++++++++--- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/Copilot.vue b/src/components/Copilot.vue index 389447bae..b6dd43beb 100644 --- a/src/components/Copilot.vue +++ b/src/components/Copilot.vue @@ -1,6 +1,5 @@