update reqs

open ai integration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.101.17-dev",
+  "version": "0.101.19-dev",
   "private": true,
   "productName": "Tactical RMM",
   "scripts": {
@@ -10,12 +10,12 @@
     "format": "prettier --write \"**/*.{js,ts,vue,,html,md,json}\" --ignore-path .gitignore"
   },
   "dependencies": {
-    "@quasar/extras": "1.16.2",
-    "apexcharts": "3.37.3",
-    "axios": "1.3.5",
+    "@quasar/extras": "1.16.3",
+    "apexcharts": "3.40.0",
+    "axios": "1.4.0",
     "dotenv": "16.0.3",
     "qrcode.vue": "3.3.4",
-    "quasar": "2.11.10",
+    "quasar": "2.12.0",
     "vue": "3.2.47",
     "vue3-ace-editor": "2.2.2",
     "vue3-apexcharts": "1.4.1",
@@ -24,17 +24,17 @@
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@quasar/cli": "^2.0.0",
+    "@quasar/cli": "^2.1.0",
     "@intlify/unplugin-vue-i18n": "^0.10.0",
-    "@quasar/app-vite": "^1.2.1",
-    "@types/node": "^18.15.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@quasar/app-vite": "^1.3.0",
+    "@types/node": "^18.16.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "autoprefixer": "10.4.14",
-    "eslint": "8.37.0",
+    "eslint": "8.40.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-vue": "8.7.1",
-    "prettier": "2.8.7",
+    "prettier": "2.8.8",
     "typescript": "5.0.4"
   }
 }

src/api/core.js

@@ -38,3 +38,8 @@ export async function runURLAction(payload) {
     console.error(e);
   }
 }
+
+export async function generateScript(payload) {
+  const { data } = await axios.post(`${baseUrl}/openai/generate/`, payload);
+  return data;
+}

src/components/modals/coresettings/EditCoreSettings.vue

@@ -12,6 +12,7 @@
           <q-tab name="urlactions" label="URL Actions" />
           <q-tab name="retention" label="Retention" />
           <q-tab name="apikeys" label="API Keys" />
+          <q-tab name="openai" label="Open AI" />
         </q-tabs>
       </template>
       <template v-slot:after>
@@ -508,6 +509,49 @@
               <q-tab-panel name="apikeys">
                 <APIKeysTable />
               </q-tab-panel>
+
+              <!-- Open AI -->
+              <q-tab-panel name="openai">
+                <div class="text-subtitle2">Open AI</div>
+                <q-separator />
+                <q-card-section class="row">
+                  <div class="col-4">API Key:</div>
+                  <div class="col-2"></div>
+                  <q-input
+                    dense
+                    outlined
+                    v-model="settings.open_ai_token"
+                    class="col-6"
+                  />
+                </q-card-section>
+                <q-card-section class="row">
+                  <div class="col-4">Open AI Model:</div>
+                  <div class="col-2"></div>
+                  <q-input
+                    dense
+                    outlined
+                    v-model="settings.open_ai_model"
+                    class="col-6"
+                  >
+                    <template v-slot:after>
+                      <q-btn
+                        round
+                        dense
+                        flat
+                        icon="info"
+                        size="sm"
+                        @click="
+                          openURL(
+                            'https://platform.openai.com/docs/models/overview'
+                          )
+                        "
+                      >
+                        <q-tooltip>Click to see available options</q-tooltip>
+                      </q-btn>
+                    </template>
+                  </q-input>
+                </q-card-section>
+              </q-tab-panel>
             </q-tab-panels>
           </q-scroll-area>
           <q-card-section class="row items-center">

src/components/scripts/ScriptFormModal.vue

@@ -11,7 +11,17 @@
       :style="maximized ? '' : 'width: 90vw; max-width: 90vw'"
     >
       <q-bar>
-        {{ title }}
+        <span class="q-pr-sm">{{ title }}</span>
+        <q-btn
+          v-if="!script && openAIEnabled"
+          size="xs"
+          :disable="loading"
+          dense
+          label="Generate Script"
+          color="primary"
+          no-caps
+          @click="generateScriptOpenAI"
+        />
         <q-space />
         <q-btn
           dense
@@ -57,116 +67,133 @@
           ><br />Add one to get rid of this warning. Ignore if windows.
         </q-banner>
         <div class="row q-pa-sm">
-          <div class="col-4 q-gutter-sm q-pr-sm">
-            <q-input
-              filled
-              dense
-              :readonly="readonly"
-              v-model="formScript.name"
-              label="Name"
-              :rules="[(val) => !!val || '*Required']"
-              hide-bottom-space
-            />
-            <q-input
-              filled
-              dense
-              :readonly="readonly"
-              v-model="formScript.description"
-              label="Description"
-            />
-            <q-select
-              :readonly="readonly"
-              options-dense
-              filled
-              dense
-              v-model="formScript.shell"
-              :options="shellOptions"
-              emit-value
-              map-options
-              label="Shell Type"
-            />
-            <tactical-dropdown
-              v-model="formScript.supported_platforms"
-              :options="agentPlatformOptions"
-              label="Supported Platforms (All supported if blank)"
-              clearable
-              mapOptions
-              filled
-              multiple
-              :readonly="readonly"
-            />
-            <tactical-dropdown
-              filled
-              v-model="formScript.category"
-              :options="categories"
-              use-input
-              clearable
-              new-value-mode="add-unique"
-              filterable
-              label="Category"
-              :readonly="readonly"
-              hide-bottom-space
-            />
-            <tactical-dropdown
-              v-model="formScript.args"
-              label="Script Arguments (press Enter after typing each argument)"
-              filled
-              use-input
-              multiple
-              hide-dropdown-icon
-              input-debounce="0"
-              new-value-mode="add"
-              :readonly="readonly"
-            />
-            <tactical-dropdown
-              v-model="formScript.env_vars"
-              :label="envVarsLabel"
-              filled
-              use-input
-              multiple
-              hide-dropdown-icon
-              input-debounce="0"
-              new-value-mode="add"
-              :readonly="readonly"
-            />
-            <q-input
-              type="number"
-              filled
-              dense
-              :readonly="readonly"
-              v-model.number="formScript.default_timeout"
-              label="Timeout (seconds)"
-              :rules="[(val) => val >= 5 || 'Minimum is 5']"
-              hide-bottom-space
-            />
-            <q-checkbox
-              v-model="formScript.run_as_user"
-              label="Run As User (Windows only)"
-            >
-              <q-tooltip
-                >Setting this value on the script model will always override any
-                'Run As User' checkboxes in the UI and force this script to
-                always be run in the context of the logged in user. If no user
-                is logged in, the script will not run and an error will be
-                returned.
-              </q-tooltip>
-            </q-checkbox>
-            <q-input
-              label="Syntax"
-              type="textarea"
-              style="height: 150px; overflow-y: auto; resize: none"
-              v-model="formScript.syntax"
-              dense
-              filled
-              :readonly="readonly"
-            />
-          </div>
+          <q-scroll-area
+            :thumb-style="{
+              right: '4px',
+              borderRadius: '5px',
+              width: '5px',
+              opacity: 0.75,
+            }"
+            :bar-style="{
+              right: '2px',
+              borderRadius: '9px',
+              width: '9px',
+              opacity: 0.2,
+            }"
+            class="col-4 q-mb-none q-pb-none"
+            :style="{ height: `${maximized ? '82vh' : '64vh'}` }"
+          >
+            <div class="q-gutter-sm q-pr-sm">
+              <q-input
+                filled
+                dense
+                :readonly="readonly"
+                v-model="formScript.name"
+                label="Name"
+                :rules="[(val) => !!val || '*Required']"
+                hide-bottom-space
+              />
+              <q-input
+                filled
+                dense
+                :readonly="readonly"
+                v-model="formScript.description"
+                label="Description"
+              />
+              <q-select
+                :readonly="readonly"
+                options-dense
+                filled
+                dense
+                v-model="formScript.shell"
+                :options="shellOptions"
+                emit-value
+                map-options
+                label="Shell Type"
+              />
+              <tactical-dropdown
+                v-model="formScript.supported_platforms"
+                :options="agentPlatformOptions"
+                label="Supported Platforms (All supported if blank)"
+                clearable
+                mapOptions
+                filled
+                multiple
+                :readonly="readonly"
+              />
+              <tactical-dropdown
+                filled
+                v-model="formScript.category"
+                :options="categories"
+                use-input
+                clearable
+                new-value-mode="add-unique"
+                filterable
+                label="Category"
+                :readonly="readonly"
+                hide-bottom-space
+              />
+              <tactical-dropdown
+                v-model="formScript.args"
+                label="Script Arguments (press Enter after typing each argument)"
+                filled
+                use-input
+                multiple
+                hide-dropdown-icon
+                input-debounce="0"
+                new-value-mode="add"
+                :readonly="readonly"
+              />
+              <tactical-dropdown
+                v-model="formScript.env_vars"
+                :label="envVarsLabel"
+                filled
+                use-input
+                multiple
+                hide-dropdown-icon
+                input-debounce="0"
+                new-value-mode="add"
+                :readonly="readonly"
+              />
+              <q-input
+                type="number"
+                filled
+                dense
+                :readonly="readonly"
+                v-model.number="formScript.default_timeout"
+                label="Timeout (seconds)"
+                :rules="[(val) => val >= 5 || 'Minimum is 5']"
+                hide-bottom-space
+              />
+              <q-checkbox
+                v-model="formScript.run_as_user"
+                label="Run As User (Windows only)"
+              >
+                <q-tooltip
+                  >Setting this value on the script model will always override
+                  any 'Run As User' checkboxes in the UI and force this script
+                  to always be run in the context of the logged in user. If no
+                  user is logged in, the script will not run and an error will
+                  be returned.
+                </q-tooltip>
+              </q-checkbox>
+              <q-input
+                label="Syntax"
+                type="textarea"
+                style="height: 150px; overflow-y: auto; resize: none"
+                v-model="formScript.syntax"
+                dense
+                filled
+                :readonly="readonly"
+              />
+            </div>
+          </q-scroll-area>
           <v-ace-editor
             v-model:value="formScript.script_body"
             class="col-8"
             :lang="lang"
             :theme="$q.dark.isActive ? 'tomorrow_night_eighties' : 'tomorrow'"
-            :style="{ height: `${maximized ? '87vh' : '64vh'}` }"
+            :style="{ height: `${maximized ? '82vh' : '64vh'}` }"
             wrap
             :printMargin="false"
             :options="{ fontSize: '14px' }"
@@ -220,9 +247,11 @@
 <script>
 // composable imports
 import { ref, computed, onMounted } from "vue";
+import { useStore } from "vuex";
 import { useQuasar, useDialogPluginComponent } from "quasar";
 import { saveScript, editScript, downloadScript } from "@/api/scripts";
 import { useAgentDropdown, agentPlatformOptions } from "@/composables/agents";
+import { generateScript } from "@/api/core";
 import { notifySuccess } from "@/utils/notify";
 
 // ui imports
@@ -266,6 +295,10 @@ export default {
     const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
     const $q = useQuasar();
 
+    // setup store
+    const store = useStore();
+    const openAIEnabled = computed(() => store.state.openAIIntegrationEnabled);
+
     // setup agent dropdown
     const { agent, agentOptions, getAgentOptions } = useAgentDropdown();
 
@@ -355,6 +388,23 @@ export default {
       });
     }
 
+    function generateScriptOpenAI() {
+      $q.dialog({
+        title: "Ask ChatGPT what you need!",
+        prompt: {
+          model: `${lang.value} code that `,
+          type: "text",
+        },
+        cancel: true,
+        persistent: true,
+      }).onOk(async (data) => {
+        const completion = await generateScript({
+          prompt: data,
+        });
+        script.value.script_body = completion;
+      });
+    }
+
     // component life cycle hooks
     onMounted(async () => {
       agentLoading.value = true;
@@ -380,10 +430,12 @@ export default {
 
       //computed
       title,
+      openAIEnabled,
 
       //methods
       submitForm,
       openTestScriptModal,
+      generateScriptOpenAI,
 
       // quasar dialog plugin
       dialogRef,

src/components/scripts/ScriptSnippetFormModal.vue

@@ -11,7 +11,17 @@
       :style="maximized ? '' : 'width: 70vw; max-width: 90vw'"
     >
       <q-bar>
-        {{ title }}
+        <span class="q-pr-sm">{{ title }}</span>
+        <q-btn
+          v-if="!snippet && openAIEnabled"
+          :disable="loading"
+          dense
+          size="xs"
+          label="Generate Script"
+          color="primary"
+          no-caps
+          @click="generateScriptOpenAI"
+        />
         <q-space />
         <q-btn
           dense
@@ -97,6 +107,9 @@
 <script>
 // composable imports
 import { ref, computed } from "vue";
+import { useStore } from "vuex";
+import { useQuasar } from "quasar";
+import { generateScript } from "@/api/core";
 import { useDialogPluginComponent } from "quasar";
 import { saveScriptSnippet, editScriptSnippet } from "@/api/scripts";
 import { notifySuccess } from "@/utils/notify";
@@ -128,6 +141,13 @@ export default {
     // setup quasar plugins
     const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 
+    // setup quasar
+    const $q = useQuasar();
+
+    // setup store
+    const store = useStore();
+    const openAIEnabled = computed(() => store.state.openAIIntegrationEnabled);
+
     // snippet form logic
     const snippet = props.snippet
       ? ref(Object.assign({}, props.snippet))
@@ -167,6 +187,23 @@ export default {
       loading.value = false;
     }
 
+    function generateScriptOpenAI() {
+      $q.dialog({
+        title: "Ask ChatGPT what you need!",
+        prompt: {
+          model: `${lang.value} code that `,
+          type: "text",
+        },
+        cancel: true,
+        persistent: true,
+      }).onOk(async (data) => {
+        const completion = await generateScript({
+          prompt: data,
+        });
+        snippet.value.code = completion;
+      });
+    }
+
     return {
       // reactive data
       formSnippet: snippet.value,
@@ -179,9 +216,11 @@ export default {
 
       //computed
       title,
+      openAIEnabled,
 
       //methods
       submitForm,
+      generateScriptOpenAI,
 
       // quasar dialog plugin
       dialogRef,

src/store/index.js

@@ -33,6 +33,7 @@ export default function () {
         currentTRMMVersion: null,
         latestTRMMVersion: null,
         dateFormat: "MMM-DD-YYYY - HH:mm",
+        openAIIntegrationEnabled: false,
       };
     },
     getters: {
@@ -136,6 +137,9 @@ export default function () {
       setDateFormat(state, val) {
         state.dateFormat = val;
       },
+      setOpenAIIntegrationStatus(state, val) {
+        state.openAIIntegrationEnabled = val;
+      },
     },
     actions: {
       setClientTreeSplitter(context, val) {
@@ -217,6 +221,10 @@ export default function () {
         context.commit("setShowCommunityScripts", data.show_community_scripts);
         context.commit("SET_HOSTED", data.hosted);
         context.commit("SET_TOKEN_EXPIRED", data.token_is_expired);
+        context.commit(
+          "setOpenAIIntegrationStatus",
+          data.open_ai_integration_enabled
+        );
 
         if (data.date_format && data.date_format !== "")
           context.commit("setDateFormat", data.date_format);