refine response format

Author: Jicheng Lu

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,17 +19,19 @@
  * @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]
  */
 
 /**
  * @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]
  */
 
 

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;

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>

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>
 

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
             })) || []
         ];