Features/refine agent rule

src/lib/helpers/http.js

@@ -75,7 +75,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
         new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-script/generate', 'g')
     ];
 
     /** @type {RegExp[]} */

src/lib/helpers/types/agentTypes.js

@@ -135,6 +135,31 @@
  * @property {AgentCodeScriptUpdateOptions?} [options]
  */
 
+/** 
+ * @typedef {Object} AgentCodeScriptGenerateModel
+ * @property {string?} [text]
+ * @property {CodeProcessOptions?} [options]
+ */
+
+/** 
+ * @typedef {Object} CodeProcessOptions
+ * @property {boolean?} [save_to_db] - Whether to save the generated code to database.
+ * @property {string?} [script_name] - The code script name.
+ * @property {string?} [script_type] - The code script type.
+ * @property {string?} [agent_id] - The agent id.
+ * @property {string?} [template_name] - The template name.
+ * @property {any?} [data] - The template data.
+ * @property {string?} [provider] - The llm provider.
+ * @property {string?} [model] - The llm model.
+ */
+
+/** 
+ * @typedef {Object} CodeGenerationResult
+ * @property {boolean?} [success]
+ * @property {string?} [content]
+ * @property {string?} [language]
+ * @property {string?} [error_message]
+ */
 
 /**
  * @typedef {Object} ChannelInstruction
@@ -204,6 +229,8 @@
  * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [output_args]
+ * @property {string?} [json_args]
  */
 
 

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

@@ -58,7 +58,7 @@
             }
         }
     }
-    
+
     .list-add {
         font-size: 20px;
 
@@ -94,10 +94,10 @@
         @media (max-width: 423px) {
             height: fit-content;
         }
-    
+
         .agent-prompt-container {
             height: 100%;
-    
+
             .agent-prompt-header {
                 background-color: white;
                 padding: 15px;
@@ -167,7 +167,7 @@
             box-shadow: none !important;
         }
     }
-    
+
     .utility-wrapper {
         border: 1px dotted var(--bs-primary);
         border-radius: 5px;
@@ -262,12 +262,17 @@
     .tooltip-inner {
         text-align: start;
         max-width: fit-content;
-        padding: 20px;
+        padding: 5px 10px;
     }
 
     .markdown-div {
         max-height: 500px;
         font-size: 15px;
+
+        pre {
+            white-space: pre !important;
+            width: fit-content;
+        }
     }
 
     &.show {
@@ -286,4 +291,49 @@
         overflow-x: auto;
         scrollbar-width: thin;
     }
-}
+}
+
+// Responsive adjustments for utility
+@media (max-width: 768px) {
+  .agent-utility-container {
+    padding: 0 5px;
+
+    .utility-wrapper {
+      .utility-row-primary {
+        flex-direction: column;
+      }
+
+      .utility-row {
+        .utility-label,
+        .utility-value {
+          width: 100%;
+        }
+
+        .utility-value {
+          flex-direction: column;
+        }
+
+        .utility-input,
+        .utility-delete {
+          width: 100%;
+        }
+
+        .utility-delete {
+          display: flex;
+          justify-content: flex-end;
+          align-items: end;
+          margin-top: 6px;
+        }
+      }
+
+      .utility-row-secondary {
+        .utility-content {
+          .utility-list-item {
+            flex-direction: column;
+            gap: 6px;
+          }
+        }
+      }
+    }
+  }
+}

src/lib/services/agent-service.js

@@ -156,4 +156,18 @@ export async function updateAgentCodeScripts(agentId, update) {
         ...update
     });
     return response.data;
+}
+
+/**
+ * Generate agent code script
+ * @param {string} agentId
+ * @param {import('$agentTypes').AgentCodeScriptGenerateModel} request
+ * @returns {Promise<import('$agentTypes').CodeGenerationResult>}
+ */
+export async function generateAgentCodeScript(agentId, request) {
+    const url = endpoints.agentCodeScriptGenerateUrl.replace("{agentId}", agentId);
+    const response = await axios.post(url, {
+        ...request
+    });
+    return response.data;
 }

src/lib/services/api-endpoints.js

@@ -41,6 +41,7 @@ export const endpoints = {
     // agent code script:
     agentCodeScriptListUrl: `${host}/agent/{agentId}/code-scripts`,
     agentCodeScriptUpdateUrl: `${host}/agent/{agentId}/code-scripts`,
+    agentCodeScriptGenerateUrl: `${host}/agent/{agentId}/code-script/generate`,
 
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,

src/routes/page/agent/[agentId]/+page.svelte

@@ -1,26 +1,23 @@
 <script>
-	import {
-		Col,
-		Row,
-        Button
-	} from '@sveltestrap/sveltestrap';
+    import { onDestroy, onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import { _ } from 'svelte-i18n'; 
+    import Swal from 'sweetalert2';
+	import { Col, Row, Button } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import AgentInstruction from './agent-components/agent-instruction.svelte';
-	import AgentOverview from './agent-components/agent-overview.svelte';
-    import AgentFunction from './agent-components/agent-function.svelte';
-    import AgentTabs from './agent-tabs.svelte';
-    import { page } from '$app/stores';
     import { deleteAgent, getAgent, saveAgent } from '$lib/services/agent-service.js';
-    import { onDestroy, onMount } from 'svelte';
-    import { _ } from 'svelte-i18n'  
-    import Swal from 'sweetalert2'
-	import { goto } from '$app/navigation';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
-	import AgentTemplate from './agent-components/agent-template.svelte';
 	import { globalEventStore } from '$lib/helpers/store';
 	import { GlobalEvent } from '$lib/helpers/enums';
+	import { myInfo } from '$lib/services/auth-service';
+    import AgentInstruction from './agent-components/agent-instruction.svelte';
+	import AgentOverview from './agent-components/agent-overview.svelte';
+    import AgentFunction from './agent-components/agent-function.svelte';
+    import AgentTabs from './agent-tabs.svelte';
+    import AgentTemplate from './agent-components/agent-template.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
     let agent;
@@ -34,6 +31,8 @@
     let agentTabsCmp = null;
     /** @type {any} */
 	let unsubscriber;
+    /** @type {import('$userTypes').UserModel} */
+	let user;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -42,13 +41,11 @@
     const duration = 3000;
     const params = $page.params;
 
-    onMount(() => {
+    onMount(async () => {
         isLoading = true;
-        getAgent(params.agentId).then(data => {
-            agent = data;
-        }).finally(() => {
-            isLoading = false;
-        });
+        user = await myInfo();
+        agent = await getAgent(params.agentId);
+        isLoading = false;
 
         unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
 			if (event.name !== GlobalEvent.Search) return;
@@ -203,6 +200,7 @@
                 <AgentTabs
                     bind:this={agentTabsCmp}
                     agent={agent}
+                    user={user}
                 />
             </div>
         </Col>