Skip to content

Commit e0aae7f

Browse files
iceljciceljc
authored
Merge pull request #467 from iceljc/features/refine-response-format
refine response format
2 parents 65baeaf + 80b4306 commit e0aae7f

7 files changed

Lines changed: 100 additions & 28 deletions

File tree

‎src/lib/helpers/types/agentTypes.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
* @property {string?} [uid]
99
* @property {string} name
1010
* @property {string} content
11-
* @property {string?} [response_format]
1211
* @property {AgentTemplateConfig?} [llm_config]
1312
*/
1413

@@ -20,17 +19,19 @@
2019
* @property {number} max_recursion_depth
2120
* @property {number?} [max_output_tokens]
2221
* @property {string?} [reasoning_effort_level]
22+
* @property {string?} [response_format]
2323
* @property {any} [image_composition]
2424
* @property {any} [audio_transcription]
2525
* @property {any} [realtime]
2626
*/
2727

2828
/**
2929
* @typedef {Object} AgentTemplateConfig
30-
* @property {string?} provider
30+
* @property {string?} provider
3131
* @property {string?} model
3232
* @property {number?} [max_output_tokens]
3333
* @property {string?} [reasoning_effort_level]
34+
* @property {string?} [response_format]
3435
*/
3536

3637

‎src/lib/styles/pages/_agent.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2717,6 +2717,8 @@
27172717

27182718
.tplc-input {
27192719
width: 100%;
2720+
height: 2.5rem;
2721+
box-sizing: border-box;
27202722
padding: 0.3125rem 0.5rem;
27212723
font-size: 0.75rem;
27222724
line-height: 1.4;

‎src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { slide } from 'svelte/transition';
33
import Select from '$lib/common/dropdowns/Select.svelte';
44
import { INTEGER_REGEX } from '$lib/helpers/constants';
5-
import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
5+
import { LlmModelCapability, LlmModelType, ReasoningEffortLevel, ResponseFormat } from '$lib/helpers/enums';
66
77
/**
88
* @type {{
@@ -24,7 +24,8 @@
2424
provider: config.provider || null,
2525
model: config.model || null,
2626
max_output_tokens: Number(config.max_output_tokens) > 0 ? Number(config.max_output_tokens) : null,
27-
reasoning_effort_level: reasoningEffort
27+
reasoning_effort_level: reasoningEffort,
28+
response_format: config.response_format || null
2829
};
2930
}
3031
@@ -39,6 +40,14 @@
3940
}))
4041
];
4142
43+
const responseFormatOptions = [
44+
{ value: '', label: '' },
45+
...Object.values(ResponseFormat).map(v => ({
46+
value: v,
47+
label: v
48+
}))
49+
];
50+
4251
/** @type {boolean} */
4352
let collapsed = $state(false);
4453
@@ -139,6 +148,13 @@
139148
handleAgentChange();
140149
}
141150
151+
/** @param {any} e */
152+
function changeResponseFormat(e) {
153+
const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
154+
config.response_format = values[0] || null;
155+
handleAgentChange();
156+
}
157+
142158
/** @param {any} e */
143159
function validateIntegerInput(e) {
144160
const reg = new RegExp(INTEGER_REGEX, 'g');
@@ -277,6 +293,22 @@
277293
</div>
278294
</div>
279295
{/if}
296+
297+
<div class="cc-field">
298+
<label for="chat-response-format" class="cc-label">
299+
Response format
300+
</label>
301+
<div class="cc-input-wrap">
302+
<Select
303+
tag={'chat-response-format'}
304+
containerStyles={'width: 100%;'}
305+
placeholder={'Select a format'}
306+
selectedValues={config.response_format ? [config.response_format] : []}
307+
options={responseFormatOptions.filter(o => !!o.value)}
308+
onselect={e => changeResponseFormat(e)}
309+
/>
310+
</div>
311+
</div>
280312
</div>
281313
{/if}
282314
</div>

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

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,10 @@
9090
/** @param {any} e */
9191
function changeResponseFormat(e) {
9292
const value = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value)[0] || null;
93-
template.response_format = value;
93+
if (!template.llm_config) {
94+
template.llm_config = { provider: null, model: null };
95+
}
96+
template.llm_config.response_format = value;
9497
handleAgentChange();
9598
}
9699
@@ -178,23 +181,6 @@
178181
</script>
179182
180183
<div class="tplc-content">
181-
<div class="tplc-section">
182-
<h6 class="tplc-section-title">Template Configuration</h6>
183-
<div class="tplc-field">
184-
<label for="tpl-response-format" class="tplc-label">Response format</label>
185-
<Select
186-
tag={'tpl-response-format'}
187-
containerStyles={'width: 100%;'}
188-
placeholder={'Select a format'}
189-
selectedValues={template.response_format ? [template.response_format] : []}
190-
options={responseFormatOptions.filter(o => !!o.value)}
191-
onselect={e => changeResponseFormat(e)}
192-
/>
193-
</div>
194-
</div>
195-
196-
<hr class="tplc-divider" />
197-
198184
<div class="tplc-section">
199185
<h6 class="tplc-section-title">LLM Configuration</h6>
200186
<div class="tplc-field">
@@ -247,6 +233,18 @@
247233
/>
248234
</div>
249235
{/if}
236+
237+
<div class="tplc-field">
238+
<label for="tpl-response-format" class="tplc-label">Response format</label>
239+
<Select
240+
tag={'tpl-response-format'}
241+
containerStyles={'width: 100%;'}
242+
placeholder={'Select a format'}
243+
selectedValues={template.llm_config?.response_format ? [template.llm_config.response_format] : []}
244+
options={responseFormatOptions.filter(o => !!o.value)}
245+
onselect={e => changeResponseFormat(e)}
246+
/>
247+
</div>
250248
</div>
251249
</div>
252250

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
return {
4646
name: x.name.trim().toLowerCase(),
4747
content: x.content,
48-
response_format: x.response_format || null,
4948
llm_config: llmConfig
5049
};
5150
});
@@ -78,7 +77,6 @@
7877
uid: uuidv4(),
7978
name: x.name,
8079
content: x.content,
81-
response_format: x.response_format || null,
8280
llm_config: x.llm_config || null
8381
})) || []
8482
];

‎src/routes/page/instruction/instruction-components/instruction-llm.svelte‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import Select from '$lib/common/dropdowns/Select.svelte';
33
import { INTEGER_REGEX } from '$lib/helpers/constants';
4-
import { ReasoningEffortLevel } from '$lib/helpers/enums';
4+
import { ReasoningEffortLevel, ResponseFormat } from '$lib/helpers/enums';
55
66
/**
77
* @type {{
@@ -11,7 +11,8 @@
1111
* selectedModel?: string | null,
1212
* selectedReasoningEffortLevel?: string | null,
1313
* selectedMaxOutputTokens?: number | null,
14-
* onSelectLlm?: (detail: { provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null }) => void
14+
* selectedResponseFormat?: string | null,
15+
* 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
1516
* }}
1617
*/
1718
let {
@@ -21,6 +22,7 @@
2122
selectedModel = $bindable(null),
2223
selectedReasoningEffortLevel = $bindable(null),
2324
selectedMaxOutputTokens = $bindable(null),
25+
selectedResponseFormat = $bindable(null),
2426
onSelectLlm
2527
} = $props();
2628
@@ -30,6 +32,12 @@
3032
label: v
3133
}));
3234
35+
/** @type {import('$commonTypes').LabelValuePair[]} */
36+
const responseFormatOptions = Object.values(ResponseFormat).map(v => ({
37+
value: v,
38+
label: v
39+
}));
40+
3341
/** @type {import('$commonTypes').LabelValuePair[]} */
3442
let providerOptions = $derived(
3543
llmConfigs?.map(x => ({
@@ -99,6 +107,14 @@
99107
fireSelectLlm();
100108
}
101109
110+
/** @param {any} e */
111+
function selectResponseFormat(e) {
112+
// @ts-ignore
113+
const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
114+
selectedResponseFormat = selectedValues.length > 0 ? selectedValues[0] : null;
115+
fireSelectLlm();
116+
}
117+
102118
/** @param {any} e */
103119
function validateIntegerInput(e) {
104120
const reg = new RegExp(INTEGER_REGEX, 'g');
@@ -112,7 +128,8 @@
112128
provider: selectedProvider || null,
113129
model: selectedModel,
114130
reasoning_effort_level: selectedReasoningEffortLevel || null,
115-
max_output_tokens: selectedMaxOutputTokens || null
131+
max_output_tokens: selectedMaxOutputTokens || null,
132+
response_format: selectedResponseFormat || null
116133
});
117134
}
118135
</script>
@@ -183,4 +200,19 @@
183200
/>
184201
</div>
185202
{/if}
203+
204+
<div>
205+
<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">
206+
<i class="mdi mdi-code-json text-sm leading-none"></i>
207+
Response format
208+
</label>
209+
<Select
210+
tag={'response-format-select'}
211+
placeholder={'Select a format'}
212+
disabled={disabled}
213+
selectedValues={selectedResponseFormat ? [selectedResponseFormat] : []}
214+
options={responseFormatOptions}
215+
onselect={e => selectResponseFormat(e)}
216+
/>
217+
</div>
186218
</div>

‎src/routes/page/instruction/testing/+page.svelte‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@
5757
/** @type {number | null} */
5858
let selectedMaxOutputTokens = $state(null);
5959
60+
/** @type {string | null} */
61+
let selectedResponseFormat = $state(null);
62+
6063
/** @type {string | null} */
6164
let selectedTemplate = $state(null);
6265
@@ -114,6 +117,9 @@
114117
if (selectedMaxOutputTokens && selectedMaxOutputTokens > 0) {
115118
clonedStates.push({ key: 'max_tokens', value: selectedMaxOutputTokens.toString() });
116119
}
120+
if (selectedResponseFormat) {
121+
clonedStates.push({ key: 'response_format', value: selectedResponseFormat });
122+
}
117123
118124
const formattedStates = formatKeyValues(states, clonedStates);
119125
const formatedArgs = formatKeyValues(args);
@@ -194,6 +200,7 @@
194200
selectedModel = modelName;
195201
selectedReasoningEffortLevel = llmConfig?.reasoning_effort_level || null;
196202
selectedMaxOutputTokens = llmConfig?.max_output_tokens || null;
203+
selectedResponseFormat = llmConfig?.response_format || null;
197204
198205
if (selectedAgent?.id) {
199206
initAgentCodeScripts(selectedAgent.id);
@@ -202,12 +209,13 @@
202209
}
203210
}
204211
205-
/** @param {{ provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null }} detail */
212+
/** @param {{ provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null, response_format: string | null }} detail */
206213
function onLlmSelected(detail) {
207214
selectedProvider = detail.provider || null;
208215
selectedModel = detail.model || '';
209216
selectedReasoningEffortLevel = detail.reasoning_effort_level || null;
210217
selectedMaxOutputTokens = detail.max_output_tokens || null;
218+
selectedResponseFormat = detail.response_format || null;
211219
}
212220
213221
/** @param {string} agentId */
@@ -404,6 +412,7 @@
404412
bind:selectedModel={selectedModel}
405413
bind:selectedReasoningEffortLevel={selectedReasoningEffortLevel}
406414
bind:selectedMaxOutputTokens={selectedMaxOutputTokens}
415+
bind:selectedResponseFormat={selectedResponseFormat}
407416
onSelectLlm={detail => onLlmSelected(detail)}
408417
/>
409418
</div>

0 commit comments

Comments
 (0)