Features/refine agent rule

src/lib/common/StateModal.svelte

@@ -201,7 +201,7 @@
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-no-static-element-interactions -->
                         <i
-                            class="bx bx-no-entry clickable"
+                            class="bx bxs-no-entry clickable"
                             class:hide={states.length === 1}
                             on:click={() => remove(idx)}
                         />

src/lib/common/StateSearch.svelte

@@ -58,7 +58,7 @@
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-static-element-interactions -->
                     <i
-                        class="bx bx-no-entry text-danger clickable"
+                        class="bx bxs-no-entry text-danger clickable"
                         class:hide={states.length === 1}
                         on:click={() => removeState(idx)}
                     />

src/lib/helpers/constants.js

@@ -37,10 +37,12 @@ export const FILE_EDITORS = [
     EditorType.File
 ];
 
-export const LEARNER_ID = "01acc3e5-0af7-49e6-ad7a-a760bd12dc40";
-export const EVALUATOR_ID = "2cd4b805-7078-4405-87e9-2ec9aadf8a11";
-export const TRAINING_MODE = "training";
+export const LEARNER_AGENT_ID = "01acc3e5-0af7-49e6-ad7a-a760bd12dc40";
+export const EVALUATOR_AGENT_ID = "2cd4b805-7078-4405-87e9-2ec9aadf8a11";
+export const AI_PROGRAMMER_AGENT_ID = "c2a2faf6-b8b5-47fe-807b-f4714cf25dd4";
+export const RULE_TRIGGER_CODE_GENERATE_TEMPLATE = "rule-trigger-code-generate_instruction";
 
+export const TRAINING_MODE = "training";
 export const DEFAULT_KNOWLEDGE_COLLECTION = "BotSharp";
 export const IMAGE_DATA_PREFIX = 'data:image';
 

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[]} */
@@ -111,7 +112,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g'),
-        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g')
+        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {

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,9 @@
  * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [output_args]
+ * @property {string?} [json_args]
+ * @property {string?} [statement]
  */
 
 

src/lib/helpers/types/instructTypes.js

@@ -6,6 +6,7 @@
  * @property {string?} [provider] - The LLM provider.
  * @property {string?} [model] - The LLM model.
  * @property {import('$conversationTypes').ConversationStateModel[]} [states]
+ * @property {CodeInstructOptions?} [codeOptions]
  */
 
 /**
@@ -59,4 +60,12 @@
  * @property {string?} [endTime]
  */
 
+/**
+ * @typedef {Object} CodeInstructOptions
+ * @property {string?} [processor] - The code processor.
+ * @property {string?} [script_name] - The code script name.
+ * @property {string?} [script_type] - The code script type: src or test.
+ * @property {{key: string, value: string}[]?} [arguments] - The arguments.
+ */
+
 export default {};

src/lib/helpers/utils/common.js

@@ -143,6 +143,21 @@ export function goToUrl(url, opts = {}) {
     goto(url, { replaceState, noScroll });
 }
 
+/**
+ * @param {HTMLElement | null | undefined} container
+ * @param {ScrollBehavior} behavior
+ */
+export function scrollToBottom(container, behavior = 'smooth') {
+    if (container) {
+        setTimeout(() => {
+            container.scrollTo({
+                top: container.scrollHeight,
+                behavior: behavior
+            });
+        }, 0);
+    }
+}
+
 /**
  * @param {string} str
  */

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;
@@ -147,6 +147,22 @@
     padding: 10px;
     border: 1px dashed var(--bs-primary);
     border-radius: 5px;
+
+    .llm-config-item {
+        display: flex;
+        flex-wrap: wrap;
+
+        .llm-config-label {
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            flex: 0.25;
+        }
+
+        .llm-config-input {
+            flex: 0.75;
+        }
+    }
 }
 
 .agent-utility-container {
@@ -167,7 +183,7 @@
             box-shadow: none !important;
         }
     }
-    
+
     .utility-wrapper {
         border: 1px dotted var(--bs-primary);
         border-radius: 5px;
@@ -262,12 +278,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 +307,61 @@
         overflow-x: auto;
         scrollbar-width: thin;
     }
-}
+}
+
+// Responsive adjustments for utility
+@media (max-width: 1250px) {
+    .agent-config-container {
+        .llm-config-item {
+            flex-direction: column;
+
+            .llm-config-label {
+                width: 100%;
+            }
+
+            .llm-config-input {
+                width: 100%;
+            }
+        }
+    }
+
+    .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/scss/custom/pages/_instruction.scss

@@ -57,7 +57,7 @@
         justify-content: center;
 
         .instruct-setting-dropdown {
-            width: 60%;
+            width: 75%;
         }
 
         @media (max-width: 992px) {
@@ -72,12 +72,16 @@
     padding: 20px 10px;
 }
 
-.instruct-state-container {
+.instruct-kv-container {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    max-height: 200px;
+    overflow-y: auto;
+    scrollbar-width: none;
+    padding-top: 20px;
 
-    .instruct-state-item {
+    .instruct-kv-item {
         display: flex;
         gap: 30px;
         justify-content: center;

src/lib/scss/custom/pages/_knowledgebase.scss

@@ -22,7 +22,7 @@
 }
 
 .demo-tooltip-icon {
-    font-size: 18px;
+    font-size: 15px;
 }
 
 .demo-tooltip-note {

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/chat/[agentId]/+page.svelte

@@ -1,14 +1,13 @@
 <script>
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-
     // This page is used to initialize a new conversation for client
+    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
     import { getToken, setToken } from '$lib/services/auth-service.js'
     import { getUserStore } from '$lib/helpers/store.js';
     import { conversationStore } from '$lib/helpers/store.js';
-	import { LEARNER_ID, TRAINING_MODE } from '$lib/helpers/constants';
+	import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
 
     const params = $page.params;
 
@@ -43,7 +42,7 @@
         const chatUrl = new URL(`chat/${agentId}/${conversationId}`, window.location.origin);
 
         const searchParams = new URLSearchParams();
-        if (agentId === LEARNER_ID) {
+        if (agentId === LEARNER_AGENT_ID) {
             searchParams.append('mode', TRAINING_MODE);
         }
 

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -44,7 +44,7 @@
 		PUBLIC_LIVECHAT_STREAM_ENABLED,
 		PUBLIC_DEBUG_MODE
 	} from '$env/static/public';
-	import { BOT_SENDERS, LEARNER_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
+	import { BOT_SENDERS, LEARNER_AGENT_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { newConversation } from '$lib/services/conversation-service';
 	import DialogModal from '$lib/common/DialogModal.svelte';
@@ -1724,7 +1724,7 @@
 														Add Tags
 													</DropdownItem>
 												{/if}
-												{#if agent?.id === LEARNER_ID && mode === TRAINING_MODE}
+												{#if agent?.id === LEARNER_AGENT_ID && mode === TRAINING_MODE}
 													<DropdownItem on:click={() => handleSaveKnowledge()}>Save Knowledge</DropdownItem>
 												{/if}											
 												<DropdownItem on:click={() => pinDashboard()}>