From 09371eb454faf3e72b54b7807e9ae4dfeeacbc45 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 24 Jun 2026 17:54:31 -0500
Subject: [PATCH 1/2] refine response format

---
 src/lib/helpers/types/agentTypes.js           |  5 +--
 src/lib/styles/pages/_agent.scss              |  2 ++
 .../llm-configs/chat-config.svelte            | 36 +++++++++++++++++--
 .../templates/agent-template-config.svelte    | 34 +++++++++---------
 .../templates/agent-template.svelte           |  2 --
 5 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 58924fe4..cc8cfb62 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -8,7 +8,6 @@
  * @property {string?} [uid]
  * @property {string} name
  * @property {string} content
- * @property {string?} [response_format]
  * @property {AgentTemplateConfig?} [llm_config]
  */
 
@@ -20,6 +19,7 @@
  * @property {number} max_recursion_depth
  * @property {number?} [max_output_tokens]
  * @property {string?} [reasoning_effort_level]
+ * @property {string?} [response_format]
  * @property {any} [image_composition]
  * @property {any} [audio_transcription]
  * @property {any} [realtime]
@@ -27,10 +27,11 @@
 
 /**
  * @typedef {Object} AgentTemplateConfig
- * @property {string?} provider 
+ * @property {string?} provider
  * @property {string?} model
  * @property {number?} [max_output_tokens]
  * @property {string?} [reasoning_effort_level]
+ * @property {string?} [response_format]
  */
 
 
diff --git a/src/lib/styles/pages/_agent.scss b/src/lib/styles/pages/_agent.scss
index a6819455..8fb401d0 100644
--- a/src/lib/styles/pages/_agent.scss
+++ b/src/lib/styles/pages/_agent.scss
@@ -2717,6 +2717,8 @@
 
 .tplc-input {
 		width: 100%;
+		height: 2.5rem;
+		box-sizing: border-box;
 		padding: 0.3125rem 0.5rem;
 		font-size: 0.75rem;
 		line-height: 1.4;
diff --git a/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte b/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
index f36cf2fa..3922aaca 100644
--- a/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
@@ -2,7 +2,7 @@
     import { slide } from 'svelte/transition';
     import Select from '$lib/common/dropdowns/Select.svelte';
     import { INTEGER_REGEX } from '$lib/helpers/constants';
-    import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
+    import { LlmModelCapability, LlmModelType, ReasoningEffortLevel, ResponseFormat } from '$lib/helpers/enums';
 
     /**
      * @type {{
@@ -24,7 +24,8 @@
             provider: config.provider || null,
             model: config.model || null,
             max_output_tokens: Number(config.max_output_tokens) > 0 ? Number(config.max_output_tokens) : null,
-            reasoning_effort_level: reasoningEffort
+            reasoning_effort_level: reasoningEffort,
+            response_format: config.response_format || null
         };
     }
 
@@ -39,6 +40,14 @@
         }))
     ];
 
+    const responseFormatOptions = [
+        { value: '', label: '' },
+        ...Object.values(ResponseFormat).map(v => ({
+            value: v,
+            label: v
+        }))
+    ];
+
     /** @type {boolean} */
     let collapsed = $state(false);
 
@@ -139,6 +148,13 @@
         handleAgentChange();
     }
 
+    /** @param {any} e */
+    function changeResponseFormat(e) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+        config.response_format = values[0] || null;
+        handleAgentChange();
+    }
+
     /** @param {any} e */
     function validateIntegerInput(e) {
         const reg = new RegExp(INTEGER_REGEX, 'g');
@@ -277,6 +293,22 @@
             </div>
         </div>
         {/if}
+
+        <div class="cc-field">
+            <label for="chat-response-format" class="cc-label">
+                Response format
+            </label>
+            <div class="cc-input-wrap">
+                <Select
+                    tag={'chat-response-format'}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a format'}
+                    selectedValues={config.response_format ? [config.response_format] : []}
+                    options={responseFormatOptions.filter(o => !!o.value)}
+                    onselect={e => changeResponseFormat(e)}
+                />
+            </div>
+        </div>
     </div>
     {/if}
 </div>
diff --git a/src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte
index 6376ea6c..83caac66 100644
--- a/src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte
@@ -90,7 +90,10 @@
     /** @param {any} e */
     function changeResponseFormat(e) {
         const value = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value)[0] || null;
-        template.response_format = value;
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        template.llm_config.response_format = value;
         handleAgentChange();
     }
 
@@ -178,23 +181,6 @@
 </script>
 
 <div class="tplc-content">
-    <div class="tplc-section">
-        <h6 class="tplc-section-title">Template Configuration</h6>
-        <div class="tplc-field">
-            <label for="tpl-response-format" class="tplc-label">Response format</label>
-            <Select
-                tag={'tpl-response-format'}
-                containerStyles={'width: 100%;'}
-                placeholder={'Select a format'}
-                selectedValues={template.response_format ? [template.response_format] : []}
-                options={responseFormatOptions.filter(o => !!o.value)}
-                onselect={e => changeResponseFormat(e)}
-            />
-        </div>
-    </div>
-
-    <hr class="tplc-divider" />
-
     <div class="tplc-section">
         <h6 class="tplc-section-title">LLM Configuration</h6>
         <div class="tplc-field">
@@ -247,6 +233,18 @@
             />
         </div>
         {/if}
+
+        <div class="tplc-field">
+            <label for="tpl-response-format" class="tplc-label">Response format</label>
+            <Select
+                tag={'tpl-response-format'}
+                containerStyles={'width: 100%;'}
+                placeholder={'Select a format'}
+                selectedValues={template.llm_config?.response_format ? [template.llm_config.response_format] : []}
+                options={responseFormatOptions.filter(o => !!o.value)}
+                onselect={e => changeResponseFormat(e)}
+            />
+        </div>
     </div>
 </div>
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
index 5afb4277..7da2231a 100644
--- a/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
@@ -45,7 +45,6 @@
             return {
                 name: x.name.trim().toLowerCase(),
                 content: x.content,
-                response_format: x.response_format || null,
                 llm_config: llmConfig
             };
         });
@@ -78,7 +77,6 @@
                 uid: uuidv4(),
                 name: x.name,
                 content: x.content,
-                response_format: x.response_format || null,
                 llm_config: x.llm_config || null
             })) || []
         ];

From 80b4306f109a5e8c81f5f239ee12465712016812 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 24 Jun 2026 18:08:14 -0500
Subject: [PATCH 2/2] add response format in instruction test

---
 .../instruction-llm.svelte                    | 38 +++++++++++++++++--
 .../page/instruction/testing/+page.svelte     | 11 +++++-
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
index 5c2157bb..f61e145b 100644
--- a/src/routes/page/instruction/instruction-components/instruction-llm.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -1,7 +1,7 @@
 <script>
     import Select from '$lib/common/dropdowns/Select.svelte';
     import { INTEGER_REGEX } from '$lib/helpers/constants';
-    import { ReasoningEffortLevel } from '$lib/helpers/enums';
+    import { ReasoningEffortLevel, ResponseFormat } from '$lib/helpers/enums';
 
     /**
      * @type {{
@@ -11,7 +11,8 @@
      *   selectedModel?: string | null,
      *   selectedReasoningEffortLevel?: string | null,
      *   selectedMaxOutputTokens?: number | null,
-     *   onSelectLlm?: (detail: { provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null }) => void
+     *   selectedResponseFormat?: string | null,
+     *   onSelectLlm?: (detail: { provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null, response_format: string | null }) => void
      * }}
      */
     let {
@@ -21,6 +22,7 @@
         selectedModel = $bindable(null),
         selectedReasoningEffortLevel = $bindable(null),
         selectedMaxOutputTokens = $bindable(null),
+        selectedResponseFormat = $bindable(null),
         onSelectLlm
     } = $props();
 
@@ -30,6 +32,12 @@
         label: v
     }));
 
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    const responseFormatOptions = Object.values(ResponseFormat).map(v => ({
+        value: v,
+        label: v
+    }));
+
     /** @type {import('$commonTypes').LabelValuePair[]} */
     let providerOptions = $derived(
         llmConfigs?.map(x => ({
@@ -99,6 +107,14 @@
         fireSelectLlm();
     }
 
+    /** @param {any} e */
+    function selectResponseFormat(e) {
+        // @ts-ignore
+        const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+        selectedResponseFormat = selectedValues.length > 0 ? selectedValues[0] : null;
+        fireSelectLlm();
+    }
+
     /** @param {any} e */
     function validateIntegerInput(e) {
         const reg = new RegExp(INTEGER_REGEX, 'g');
@@ -112,7 +128,8 @@
             provider: selectedProvider || null,
             model: selectedModel,
             reasoning_effort_level: selectedReasoningEffortLevel || null,
-            max_output_tokens: selectedMaxOutputTokens || null
+            max_output_tokens: selectedMaxOutputTokens || null,
+            response_format: selectedResponseFormat || null
         });
     }
 </script>
@@ -183,4 +200,19 @@
         />
     </div>
     {/if}
+
+    <div>
+        <label for="response-format-select" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-code-json text-sm leading-none"></i>
+            Response format
+        </label>
+        <Select
+            tag={'response-format-select'}
+            placeholder={'Select a format'}
+            disabled={disabled}
+            selectedValues={selectedResponseFormat ? [selectedResponseFormat] : []}
+            options={responseFormatOptions}
+            onselect={e => selectResponseFormat(e)}
+        />
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index 2b11427a..52bc75ec 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -57,6 +57,9 @@
     /** @type {number | null} */
     let selectedMaxOutputTokens = $state(null);
 
+    /** @type {string | null} */
+    let selectedResponseFormat = $state(null);
+
     /** @type {string | null} */
     let selectedTemplate = $state(null);
 
@@ -114,6 +117,9 @@
         if (selectedMaxOutputTokens && selectedMaxOutputTokens > 0) {
             clonedStates.push({ key: 'max_tokens', value: selectedMaxOutputTokens.toString() });
         }
+        if (selectedResponseFormat) {
+            clonedStates.push({ key: 'response_format', value: selectedResponseFormat });
+        }
 
         const formattedStates = formatKeyValues(states, clonedStates);
         const formatedArgs = formatKeyValues(args);
@@ -194,6 +200,7 @@
         selectedModel = modelName;
         selectedReasoningEffortLevel = llmConfig?.reasoning_effort_level || null;
         selectedMaxOutputTokens = llmConfig?.max_output_tokens || null;
+        selectedResponseFormat = llmConfig?.response_format || null;
 
         if (selectedAgent?.id) {
             initAgentCodeScripts(selectedAgent.id);
@@ -202,12 +209,13 @@
         }
     }
 
-    /** @param {{ provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null }} detail */
+    /** @param {{ provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null, response_format: string | null }} detail */
     function onLlmSelected(detail) {
         selectedProvider = detail.provider || null;
         selectedModel = detail.model || '';
         selectedReasoningEffortLevel = detail.reasoning_effort_level || null;
         selectedMaxOutputTokens = detail.max_output_tokens || null;
+        selectedResponseFormat = detail.response_format || null;
     }
 
     /** @param {string} agentId */
@@ -404,6 +412,7 @@
                         bind:selectedModel={selectedModel}
                         bind:selectedReasoningEffortLevel={selectedReasoningEffortLevel}
                         bind:selectedMaxOutputTokens={selectedMaxOutputTokens}
+                        bind:selectedResponseFormat={selectedResponseFormat}
                         onSelectLlm={detail => onLlmSelected(detail)}
                     />
                 </div>