refine agent template config

Author: Jicheng Lu

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte

@@ -1,5 +1,6 @@
 <script>
     import { onMount } from 'svelte';
+    import { untrack } from 'svelte';
     import { INTEGER_REGEX } from '$lib/helpers/constants';
     import { LlmModelCapability, LlmModelType, ReasoningEffortLevel, ResponseFormat } from '$lib/helpers/enums';
     import { getLlmConfigs } from '$lib/services/llm-provider-service';
@@ -64,6 +65,21 @@
         }
     });
 
+    $effect(() => {
+        const provider = template.llm_config?.provider;
+        const model = template.llm_config?.model;
+        untrack(() => {
+            if (provider && llmConfigs.length > 0) {
+                models = getLlmModels(provider);
+                reasoningLevelOptions = getReasoningLevelOptions(model);
+            } else {
+                models = [];
+                reasoningLevelOptions = defaultReasonLevelOptions;
+            }
+        });
+    });
+
+
     /** @param {string} provider */
     function getLlmModels(provider) {
         return llmConfigs.find(x => x.provider === provider)?.models
@@ -197,7 +213,7 @@
             <label for="tpl-model" class="form-label config-label">Model</label>
             <select class="form-select form-select-sm" id="tpl-model"
                 value={template.llm_config?.model || ''}
-                disabled={models.length === 0}
+                disabled={models.length === 0 || !template.llm_config?.provider}
                 onchange={e => changeModel(e)}
             >
                 {#each models as option}

src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte

@@ -36,12 +36,19 @@
             selected_template = unique.length > 0 ? unique[0] : { ...defaultTemplate };
         }
 
-        return unique.map(x => ({
-            name: x.name.trim().toLowerCase(),
-            content: x.content,
-            response_format: x.response_format || null,
-            llm_config: x.llm_config || null
-        }));
+        return unique.map(x => {
+            const llmConfig = x.llm_config ? {
+                ...x.llm_config,
+                max_output_tokens: Number(x.llm_config.max_output_tokens) > 0 ? Number(x.llm_config.max_output_tokens) : null
+            } : null;
+
+            return {
+                name: x.name.trim().toLowerCase(),
+                content: x.content,
+                response_format: x.response_format || null,
+                llm_config: llmConfig
+            };
+        });
     }