add response format in instruction test

Author: Jicheng Lu

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>

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>