Merge pull request #432 from iceljc/features/graph-rule-engine

Features/graph rule engine

Author: iceljc

package-lock.json

@@ -39,6 +39,7 @@
 	"dependencies": {
 		"@codemirror/commands": "^6.10.0",
 		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/lang-json": "^6.0.2",
 		"@codemirror/lang-python": "^6.2.1",
 		"@codemirror/language": "^6.11.3",
 		"@codemirror/state": "^6.5.2",

package.json

@@ -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/common/modals/PlainModal.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount, createEventDispatcher } from "svelte";
     import CodeMirror from "svelte-codemirror-editor";
-    import { keymap } from "@codemirror/view";
+    import { keymap, lineNumbers } from "@codemirror/view";
     import { indentUnit, indentOnInput, indentService } from "@codemirror/language";
     import { defaultKeymap, history, indentWithTab, historyKeymap } from "@codemirror/commands";
     import { EditorState } from "@codemirror/state";
@@ -20,14 +20,23 @@
     /** @type {string} */
     export let containerClasses = '';
 
+    /** @type {boolean} */
+    export let useDarkTheme = true;
+
+    /** @type {boolean} */
+    export let hideLineNumber = false;
+
+    /** @type {boolean} */
+    export let editable = true;
+
 
     /** @type {import("@codemirror/state").Extension[]} */
     const baseExtensions = [
         indentUnit.of("    "),
         EditorState.tabSize.of(4),
         indentOnInput(),
         history(),
-        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
+        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
     ];
 
     /** @type {import("@codemirror/state").Extension[]} */
@@ -59,6 +68,17 @@
                 javascript(),
                 ...baseExtensions
             ];
+        } else {
+            extensions = [
+                ...baseExtensions
+            ];
+        }
+
+        if (hideLineNumber) {
+            extensions = [
+                lineNumbers({ formatNumber: () => "" }),
+                ...extensions
+            ];
         }
     });
 
@@ -73,8 +93,9 @@
 
 <CodeMirror
     class={`code-script-container ${containerClasses}`}
-    theme={oneDark}
     lineWrapping
+    theme={useDarkTheme ? oneDark : null}
+    editable={editable}
     extensions={extensions}
     value={scriptText}
     on:change={e => handleChange(e)}

src/lib/common/shared/CodeScript.svelte

@@ -233,6 +233,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
         new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/rule/triggers', 'g'),
+        new RegExp('http(s*)://(.*?)/rule/config/options', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/llm-configs', 'g'),

src/lib/helpers/http.js

@@ -194,6 +194,7 @@
  * @property {boolean} disabled
  * @property {string?} [visibility_expression]
  * @property {UtilityItem[]} items
+ * @property {boolean} [expanded]
  */
 
 /**
@@ -212,6 +213,7 @@
  * @property {string} server_id 
  * @property {boolean} disabled 
  * @property {import('$commonTypes').NameBase[]} functions
+ * @property {boolean} [expanded]
  */
 
 /**
@@ -221,20 +223,21 @@
  * @property {string?} [displayName]
  * @property {boolean} disabled
  * @property {number?} [confidence]
+ * @property {boolean} [expanded]
  */
 
 /**
  * @typedef {Object} AgentRule
  * @property {string} trigger_name 
- * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [config]
  * @property {any?} [output_args]
  * @property {string?} [json_args]
  * @property {string?} [statement]
+ * @property {boolean} [expanded]
  */
 
-
 /**
  * @typedef {Object} AgentTaskSearchOption
  * @property {string?} [agentId]

src/lib/helpers/types/agentTypes.js

@@ -225,4 +225,12 @@ button:focus {
     text-decoration: none !important;
     transform: none !important;
   }
+}
+
+.collapse-toggle {
+  transition: transform 0.2s ease-in-out;
+}
+
+.collapse-toggle.rotated {
+  transform: rotate(90deg);
 }

src/lib/scss/custom/common/_common.scss

@@ -175,6 +175,16 @@
     border: 1px dashed var(--bs-primary);
     border-radius: 5px;
 
+    .config-header {
+        cursor: pointer;
+        user-select: none;
+        outline: none;
+    }
+
+    .config-header:hover h6 {
+        opacity: 0.8;
+    }
+
     .llm-config-item {
         display: flex;
         flex-wrap: wrap;
@@ -323,6 +333,25 @@
     }
 }
 
+.agent-rule-config {
+    min-height: 0px;
+    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;
@@ -339,6 +368,16 @@
 // Responsive adjustments for utility
 @media (max-width: 1250px) {
     .agent-config-container {
+        .config-header {
+            cursor: pointer;
+            user-select: none;
+            outline: none;
+        }
+
+        .config-header:hover h6 {
+            opacity: 0.8;
+        }
+
         .llm-config-item {
             flex-direction: column;
 

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

@@ -115,6 +115,16 @@ export async function getAgentRuleOptions() {
     return response.data;
 }
 
+/**
+ * Get agent rule config options
+ * @returns {Promise<any>}
+ */
+export async function getAgentRuleConfigOptions() {
+    const url = endpoints.agentRuleConfigOptionsUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
 /**
  * Get agent labels
  * @param {number?} [size]

src/lib/services/agent-service.js

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