add rule config

Author: Jicheng Lu

src/lib/common/modals/PlainModal.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Modal, ModalBody, ModalHeader } from "@sveltestrap/sveltestrap";
+    import { Modal, ModalBody } from "@sveltestrap/sveltestrap";
 
     /** @type {boolean} */
     export let isOpen;
@@ -16,6 +16,9 @@
     /** @type {string} */
     export let containerStyles = '';
 
+    /** @type {string} */
+    export let bodyStyles = '';
+
     /** @type {() => void} */
     export let toggleModal;
 </script>
@@ -30,7 +33,7 @@
     toggle={() => toggleModal()}
     unmountOnClose
 >
-    <ModalBody>
+    <ModalBody style={bodyStyles}>
         <slot />
     </ModalBody>
 </Modal>

src/lib/helpers/types/agentTypes.js

@@ -231,22 +231,12 @@
  * @property {string} trigger_name 
  * @property {string?} [displayName]
  * @property {boolean} disabled
- * @property {AgentRuleCriteria?} [rule_criteria]
  * @property {any?} [output_args]
  * @property {string?} [json_args]
  * @property {string?} [statement]
  * @property {boolean} [expanded]
  */
 
-/**
- * @typedef {Object} AgentRuleCriteria
- * @property {string?} [name]
- * @property {string?} [criteria_text]
- * @property {boolean} disabled
- * @property {any} [config]
- */
-
-
 /**
  * @typedef {Object} AgentTaskSearchOption
  * @property {string?} [agentId]

src/lib/scss/custom/pages/_agent.scss

@@ -338,6 +338,20 @@
     max-height: 200px;
 }
 
+.rule-config-modal {
+    .modal-content {
+        width: 1400px;
+        max-width: calc(100vw - 2rem);
+        height: 80vh;
+        margin: 0 auto;
+    }
+
+    .modal-body {
+        height: 100%;
+        box-sizing: border-box;
+    }
+}
+
 .code-editor {
     max-height: 500px;
     overflow-y: auto;

src/lib/services/agent-service.js

@@ -117,10 +117,10 @@ export async function getAgentRuleOptions() {
 
 /**
  * Get agent rule criteria providers
- * @returns {Promise<import('$commonTypes').KeyValuePair[]>}
+ * @returns {Promise<any[]>}
  */
-export async function getAgentRuleCriteriaProviders() {
-    const url = endpoints.agentRuleCriteriaProvidersUrl;
+export async function getAgentRuleConfigOptions() {
+    const url = endpoints.agentRuleConfigOptionsUrl;
     const response = await axios.get(url);
     return response.data;
 }

src/lib/services/api-endpoints.js

@@ -40,7 +40,7 @@ export const endpoints = {
     agentCreateUrl: `${host}/agent`,
     agentUtilityOptionsUrl: `${host}/agent/utility/options`,
     agentRuleOptionsUrl: `${host}/rule/triggers`,
-    agentRuleCriteriaProvidersUrl: `${host}/rule/criteria-providers`,
+    agentRuleConfigOptionsUrl: `${host}/rule/config/options`,
     agentLabelsUrl: `${host}/agent/labels`,
 
     // agent code script:

src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte

@@ -27,8 +27,8 @@
     /** @type {any[]} */
     export let ruleOptions = [];
 
-    /** @type {any[]} */
-    export let criteriaOptions = [];
+    /** @type {any} */
+    export let configOptions = {};
 
     /** @type {number} */
     export let windowWidth;
@@ -80,6 +80,12 @@
             rule: rule
         });
     }
+
+    function toggleConfig() {
+        svelteDispatch('config', {
+            ruleIdx: ruleIndex
+        });
+    }
 </script>
 
 <div class="utility-wrapper">
@@ -133,6 +139,22 @@
                     </BotsharpTooltip>
                 </div>
                 {/if}
+
+                {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && Object.keys(configOptions || {}).length > 0}
+                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                <div class="line-align-center">
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <i
+                        class="bx bx-cog text-primary fs-6 clickable"
+                        style="padding-top: 2px;"
+                        id={`rule-config-${ruleIndex}`}
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        title="Rule config"
+                        on:click={() => toggleConfig()}
+                    />
+                </div>
+                {/if}
             </div>
         </div>
         <div class="utility-value">
@@ -164,7 +186,7 @@
     {#if !collapsed}
     <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
         <div class="utility-content">
-            <div class="utility-list-item">
+            <!-- <div class="utility-list-item">
                 <div class="utility-label line-align-center">
                     <div class="d-flex gap-1">
                         <div class="line-align-center">
@@ -286,7 +308,7 @@
                     <div class="utility-delete line-align-center"></div>
                 </div>
             </div>
-            {/if}
+            {/if} -->
         </div>
     </div>
     {/if}