feat(settings): add enable copilot switch

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mqttx-cli",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "MQTTX Command Line Tools",
   "keywords": [
     "mqtt",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTTX",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "MQTT desktop client",
   "author": "EMQX Team <yusf@emqx.io>",
   "scripts": {

src/background.ts

@@ -126,6 +126,7 @@ async function createWindow() {
       syncOsTheme: setting.syncOsTheme,
       multiTopics: setting.multiTopics,
       jsonHighlight: setting.jsonHighlight,
+      enableCopilot: setting.enableCopilot,
       openAIAPIKey: setting.openAIAPIKey,
       model: setting.model,
     }

src/database/database.config.ts

@@ -41,6 +41,7 @@ import { jsonHighlight1691071794840 } from './migration/1691071794840-jsonHighli
 import { ALPNProtocols1691817588169 } from './migration/1691817588169-ALPNProtocols'
 import { aiSettings1701761407723 } from './migration/1701761407723-aiSettings'
 import { aiTables1701936842016 } from './migration/1701936842016-aiTables'
+import { enableCopilot1703659148195 } from './migration/1703659148195-enableCopilot'
 
 const STORE_PATH = getAppDataPath('MQTTX')
 try {
@@ -88,6 +89,7 @@ const ORMConfig = {
     ALPNProtocols1691817588169,
     aiSettings1701761407723,
     aiTables1701936842016,
+    enableCopilot1703659148195,
   ],
   migrationsTableName: 'temp_migration_table',
   entities: [

src/database/migration/1703659148195-enableCopilot.ts

@@ -0,0 +1,122 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class enableCopilot1703659148195 implements MigrationInterface {
+  name = 'enableCopilot1703659148195'
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            CREATE TABLE "temporary_SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1),
+                "jsonHighlight" boolean NOT NULL DEFAULT (1),
+                "openAIAPIKey" varchar NOT NULL DEFAULT (''),
+                "model" varchar NOT NULL DEFAULT ('gpt-3.5-turbo'),
+                "enableCopilot" boolean NOT NULL DEFAULT (1)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "temporary_SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "syncOsTheme",
+                    "multiTopics",
+                    "jsonHighlight",
+                    "openAIAPIKey",
+                    "model"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "syncOsTheme",
+                "multiTopics",
+                "jsonHighlight",
+                "openAIAPIKey",
+                "model"
+            FROM "SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "SettingEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "temporary_SettingEntity"
+                RENAME TO "SettingEntity"
+        `)
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            ALTER TABLE "SettingEntity"
+                RENAME TO "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1),
+                "jsonHighlight" boolean NOT NULL DEFAULT (1),
+                "openAIAPIKey" varchar NOT NULL DEFAULT (''),
+                "model" varchar NOT NULL DEFAULT ('gpt-3.5-turbo')
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "syncOsTheme",
+                    "multiTopics",
+                    "jsonHighlight",
+                    "openAIAPIKey",
+                    "model"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "syncOsTheme",
+                "multiTopics",
+                "jsonHighlight",
+                "openAIAPIKey",
+                "model"
+            FROM "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "temporary_SettingEntity"
+        `)
+  }
+}

src/database/models/SettingEntity.ts

@@ -35,6 +35,9 @@ export default class SettingEntity {
   @Column({ type: 'boolean', default: true })
   jsonHighlight!: boolean
 
+  @Column({ type: 'boolean', default: true })
+  enableCopilot!: boolean
+
   @Column({ type: 'varchar', default: '' })
   openAIAPIKey!: string
 

src/lang/settings.ts

@@ -174,4 +174,11 @@ export default {
     ja: 'モデル',
     hu: 'Modell',
   },
+  enableCopilot: {
+    zh: '启用 Copilot',
+    en: 'Enable Copilot',
+    tr: "Copilot'u Etkinleştir",
+    ja: 'Copilotを有効にする',
+    hu: 'Copilot engedélyezése',
+  },
 }

src/store/getter.ts

@@ -16,6 +16,7 @@ const getters = {
   currentScript: (state: State) => state.app.currentScript,
   multiTopics: (state: State) => state.app.multiTopics,
   jsonHighlight: (state: State) => state.app.jsonHighlight,
+  enableCopilot: (state: State) => state.app.enableCopilot,
   openAIAPIKey: (state: State) => state.app.openAIAPIKey,
   model: (state: State) => state.app.model,
   isPrismButtonAdded: (state: State) => state.app.isPrismButtonAdded,

src/store/modules/app.ts

@@ -24,6 +24,7 @@ const TOGGLE_JSON_HIGHLIGHT = 'TOGGLE_JSON_HIGHLIGHT'
 const SET_OPEN_AI_API_KEY = 'SET_OPEN_AI_API_KEY'
 const SET_MODEL = 'SET_MODEL'
 const SET_INSERT_BUTTON_ADDED = 'SET_INSERT_BUTTON_ADDED'
+const TOGGLE_ENABLE_COPILOT = 'TOGGLE_ENABLE_COPILOT'
 
 const getShowSubscriptions = (): boolean => {
   const $showSubscriptions: string | null = localStorage.getItem('showSubscriptions')
@@ -54,6 +55,7 @@ const app = {
     willMessageVisible: true,
     currentScript: null,
     currentConnectionId: null,
+    enableCopilot: settingData.enableCopilot,
     openAIAPIKey: settingData.openAIAPIKey || '',
     model: settingData.model || 'gpt-3.5-turbo',
     isPrismButtonAdded: false,
@@ -149,6 +151,9 @@ const app = {
     [SET_INSERT_BUTTON_ADDED](state: App, isPrismButtonAdded: boolean) {
       state.isPrismButtonAdded = isPrismButtonAdded
     },
+    [TOGGLE_ENABLE_COPILOT](state: App, enableCopilot: boolean) {
+      state.enableCopilot = enableCopilot
+    },
   },
   actions: {
     async TOGGLE_THEME({ commit }: any, payload: App) {
@@ -232,6 +237,12 @@ const app = {
     async SET_CURRENT_CONNECTION_ID({ commit }: any, currentConnectionId: string) {
       commit(SET_CURRENT_CONNECTION_ID, currentConnectionId)
     },
+    async TOGGLE_ENABLE_COPILOT({ commit }: any, payload: App) {
+      const { settingService } = useServices()
+      commit(TOGGLE_ENABLE_COPILOT, payload.enableCopilot)
+      settingData.enableCopilot = payload.enableCopilot
+      await settingService.update(payload)
+    },
     async SET_OPEN_AI_API_KEY({ commit }: any, payload: App) {
       const { settingService } = useServices()
       commit(SET_OPEN_AI_API_KEY, payload.openAIAPIKey)

src/types/global.d.ts

@@ -105,6 +105,7 @@ declare global {
     currentConnectionId: string | null
     connectionTreeState: ConnectionTreeStateMap
     jsonHighlight: boolean
+    enableCopilot: boolean
     openAIAPIKey: string
     model: AIModel
     isPrismButtonAdded: boolean

src/version.ts

@@ -1 +1 @@
-export default '1.9.7'
+export default '1.9.8'

src/views/connections/ConnectionsDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="connections-detail">
-    <copilot ref="copilot" :record="record" mode="connections" />
+    <copilot v-if="enableCopilot" ref="copilot" :record="record" mode="connections" />
     <div ref="connectionTopbar" class="connections-topbar right-topbar">
       <div class="connections-info">
         <div class="topbar">
@@ -87,7 +87,7 @@
                 <i class="iconfont icon-a-stopscrip"></i>
               </a>
             </el-tooltip>
-            <a href="javascript:;" @click="toggleShowCopilot" style="margin-right: 12px">
+            <a href="javascript:;" v-if="enableCopilot" @click="toggleShowCopilot" style="margin-right: 12px">
               <i class="el-icon-chat-line-square"></i>
             </a>
             <template v-if="!isNewWindow">
@@ -368,6 +368,7 @@ export default class ConnectionsDetail extends Vue {
   @Getter('currentTheme') private theme!: Theme
   @Getter('showClientInfo') private clientInfoVisibles!: { [id: string]: boolean }
   @Getter('currentScript') private scriptOption!: ScriptState | null
+  @Getter('enableCopilot') private enableCopilot!: boolean
 
   /**
    * Notice: when we jump order by `other page` -> `creation page` -> `connection page`,
@@ -1789,10 +1790,14 @@ export default class ConnectionsDetail extends Vue {
    * @param {string} msgTitle - The title of the error message.
    */
   private notifyErrorWithCopilot(msgTitle: string, promptInfo?: string, callback?: () => void) {
+    const askCopilotButton = `
+      <button id="notify-copilot-button">Ask Copilot</button>
+    `
+    const message = this.enableCopilot ? askCopilotButton : ''
     const notify = this.$notify({
       title: msgTitle,
       dangerouslyUseHTMLString: true,
-      message: '<button id="notify-copilot-button">Ask Copilot</button>',
+      message,
       type: 'error',
       duration: 4000,
       offset: 30,

src/views/settings/index.vue

@@ -254,6 +254,22 @@
       <div class="settings-title">MQTTX Copilot</div>
       <el-divider></el-divider>
 
+      <el-row class="settings-item" type="flex" justify="space-between" align="middle">
+        <el-col :span="20">
+          <label>{{ $t('settings.enableCopilot') }}</label>
+        </el-col>
+        <el-col :span="4">
+          <el-switch
+            :value="enableCopilot"
+            active-color="#13ce66"
+            inactive-color="#A2A9B0"
+            @change="handleEnableCopilotSwitchChange"
+          >
+          </el-switch>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+
       <el-row class="settings-item" type="flex" justify="space-between" align="middle">
         <el-col :span="20">
           <label>OpenAI API Key</label>
@@ -265,6 +281,7 @@
             placeholder="sk-*******"
             type="password"
             clearable
+            :disabled="!enableCopilot"
             @clear="handleAIConfigChanged('apiKey')"
             @blur="handleAIConfigChanged('apiKey')"
           ></el-input>
@@ -281,6 +298,7 @@
             class="settings-options ai-model-select"
             v-model="aiConfig.model"
             size="mini"
+            :disabled="!enableCopilot"
             @change="handleAIConfigChanged('model')"
           >
             <el-option v-for="model in AImodelsOptions" :key="model" :label="model" :value="model"> </el-option>
@@ -314,6 +332,7 @@ export default class Settings extends Vue {
   @Action('SET_MAX_RECONNECT_TIMES') private actionMaxReconnectTimes!: (payload: { maxReconnectTimes: number }) => void
   @Action('TOGGLE_MULTI_TOPICS') private actionToggleMultiTopics!: (payload: { multiTopics: boolean }) => void
   @Action('TOGGLE_JSON_HIGHLIGHT') private actionToggleJsonHighlight!: (payload: { jsonHighlight: boolean }) => void
+  @Action('TOGGLE_ENABLE_COPILOT') private actionToggleEnableCopilot!: (payload: { enableCopilot: boolean }) => void
   @Action('SET_OPEN_AI_API_KEY') private actionSetOpenAIAPIKey!: (payload: { openAIAPIKey: string }) => void
   @Action('SET_MODEL') private actionSetModel!: (payload: { model: AIModel }) => void
 
@@ -325,6 +344,7 @@ export default class Settings extends Vue {
   @Getter('maxReconnectTimes') private maxReconnectTimes!: number
   @Getter('multiTopics') private multiTopics!: boolean
   @Getter('jsonHighlight') private jsonHighlight!: boolean
+  @Getter('enableCopilot') private enableCopilot!: boolean
   @Getter('openAIAPIKey') private openAIAPIKey!: string
   @Getter('model') private model!: AIModel
 
@@ -410,6 +430,10 @@ export default class Settings extends Vue {
     this.showHistoryData = true
   }
 
+  private handleEnableCopilotSwitchChange(value: boolean) {
+    this.actionToggleEnableCopilot({ enableCopilot: value })
+  }
+
   private handleAIConfigChanged(action: 'apiKey' | 'model') {
     if (action === 'apiKey') {
       let saveKey = ''

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mqttx-web",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vue-cli-service serve",