add agent template config panel

Author: Jicheng Lu

src/lib/helpers/enums.js

@@ -249,6 +249,14 @@ const reasoningEffortLevel = {
 };
 export const ReasoningEffortLevel = Object.freeze(reasoningEffortLevel);
 
+const responseFormat = {
+    Json: "json",
+    Xml: "xml",
+    Md: "markdown",
+    Yaml: "yaml"
+};
+export const ResponseFormat = Object.freeze(responseFormat);
+
 const timeRange = {
     Last15Minutes: "Last 15 minutes",
     Last30Minutes: "Last 30 minutes",

src/lib/helpers/types/agentTypes.js

@@ -8,6 +8,8 @@
  * @property {string?} [uid]
  * @property {string} name
  * @property {string} content
+ * @property {string?} [response_format]
+ * @property {AgentTemplateConfig?} [llm_config]
  */
 
 /**
@@ -23,6 +25,14 @@
  * @property {any} [realtime]
  */
 
+/**
+ * @typedef {Object} AgentTemplateConfig
+ * @property {string?} provider 
+ * @property {string?} model
+ * @property {number?} [max_output_tokens]
+ * @property {string?} [reasoning_effort_level]
+ */
+
 
 /**
  * @typedef {Object} RouterSettings

src/lib/scss/app.scss

@@ -94,6 +94,7 @@ File: Main Css File
 @import "custom/pages/jobs";
 @import "custom/pages/conversation";
 @import "custom/pages/agent";
+@import "custom/pages/agent_template";
 @import "custom/pages/knowledgebase";
 @import "custom/pages/users";
 @import "custom/pages/roles";

src/lib/scss/custom/pages/_agent_template.scss

@@ -0,0 +1,111 @@
+.template-content-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 0;
+    position: relative;
+    align-items: stretch;
+    height: 380px;
+
+    .template-editor-area {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+
+        .template-textarea {
+            flex: 1;
+            scrollbar-width: thin;
+            resize: none;
+        }
+    }
+
+    .config-toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        cursor: pointer;
+        color: var(--bs-primary);
+        font-size: 18px;
+        user-select: none;
+        flex-shrink: 0;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .template-config-panel {
+        width: 0;
+        overflow: hidden;
+        transition: width 0.3s ease;
+        border-left: none;
+        flex-shrink: 0;
+
+        &.expanded {
+            width: 260px;
+            border-left: 1px solid var(--bs-border-color);
+            overflow-y: auto;
+            scrollbar-width: thin;
+        }
+
+        .template-config-content {
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+
+            .config-section {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .config-field {
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+            }
+
+            .config-label {
+                font-size: 0.8rem;
+                font-weight: 500;
+                margin-bottom: 0;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+
+        .config-toggle-btn {
+            width: 100%;
+            height: 24px;
+            flex-direction: row;
+
+            .mdi {
+                transform: rotate(90deg);
+            }
+        }
+
+        .template-config-panel {
+            width: 100% !important;
+            height: 0;
+            transition: height 0.3s ease;
+            border-left: none;
+
+            &.expanded {
+                width: 100% !important;
+                height: auto;
+                border-left: none;
+                border-top: 1px solid var(--bs-border-color);
+            }
+        }
+    }
+}

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

@@ -14,9 +14,9 @@
 	import { myInfo } from '$lib/services/auth-service';
     import AgentInstruction from './agent-components/agent-instruction.svelte';
 	import AgentOverview from './agent-components/agent-overview.svelte';
+    import AgentTemplate from './agent-components/templates/agent-template.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 = $state(/** @type {any} */ (undefined));