Skip to content

Commit f20ffd8

Browse files
iceljciceljc
authored
Merge pull request #457 from iceljc/main
add realtime config reasoning
2 parents 81b4f06 + 469d6f1 commit f20ffd8

2 files changed

Lines changed: 212 additions & 3 deletions

File tree

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { LlmModelCapability, LlmModelType } from '$lib/helpers/enums';
55
import ChatConfig from './llm-configs/chat-config.svelte';
66
import LlmBasicConfig from './llm-configs/llm-basic-config.svelte';
7+
import RealtimeConfig from './llm-configs/realtime-config.svelte';
78
89
/**
910
* @type {{
@@ -78,13 +79,11 @@
7879
modelCapability={LlmModelCapability.AudioTranscription}
7980
{handleAgentChange}
8081
/>
81-
<LlmBasicConfig
82+
<RealtimeConfig
8283
title="Realtime"
8384
bind:this={realtimeConfigCmp}
8485
llmConfigOptions={llmConfigs}
8586
llmConfig={agent.llm_config?.realtime}
86-
modelType={LlmModelType.Realtime}
87-
modelCapability={LlmModelCapability.Realtime}
8887
{handleAgentChange}
8988
/>
9089
</div>

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

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<script>
2+
import { slide } from 'svelte/transition';
3+
import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
4+
5+
/**
6+
* @type {{
7+
* title?: string,
8+
* llmConfig?: any,
9+
* llmConfigOptions?: import('$commonTypes').LlmConfig[],
10+
* handleAgentChange?: () => void
11+
* }}
12+
*/
13+
let {
14+
title = 'Realtime',
15+
llmConfig,
16+
llmConfigOptions = [],
17+
handleAgentChange = () => {}
18+
} = $props();
19+
20+
export function fetchConfig() {
21+
if (!config.provider && !config.model) {
22+
return null;
23+
}
24+
25+
const reasoningEffort = models.find(x => x.name === config.model)?.reasoning != null ? config.reasoning_effort_level : null;
26+
return {
27+
...config,
28+
provider: config.provider || null,
29+
model: config.model || null,
30+
reasoning_effort_level: reasoningEffort
31+
};
32+
}
33+
34+
/** @type {import('$commonTypes').LabelValuePair[]} */
35+
const defaultReasonLevelOptions = [
36+
{ value: '', label: '' },
37+
...Object.entries(ReasoningEffortLevel).map(([k, v]) => ({
38+
value: v,
39+
label: v
40+
}))
41+
];
42+
43+
/** @type {boolean} */
44+
let collapsed = $state(true);
45+
46+
/** @type {import('$commonTypes').LlmConfig[]} */
47+
let innerLlmConfigOptions = $state([]);
48+
49+
/** @type {string[]} */
50+
let providers = $state([]);
51+
52+
/** @type {import('$commonTypes').LlmModelSetting[]} */
53+
let models = $state([]);
54+
55+
/** @type {import('$commonTypes').LabelValuePair[]} */
56+
let reasoningLevelOptions = $state(defaultReasonLevelOptions);
57+
58+
// svelte-ignore state_referenced_locally
59+
let config = $state(llmConfig || {});
60+
61+
let isReasoningModel = $derived(models.find(x => x.name === config.model)?.reasoning != null);
62+
63+
$effect(() => {
64+
if (llmConfigOptions.length > 0 && innerLlmConfigOptions.length === 0) {
65+
innerLlmConfigOptions = llmConfigOptions;
66+
const innerProviders = innerLlmConfigOptions.filter(x => x.models?.some(y => y.type === LlmModelType.Realtime || y.capabilities?.includes(LlmModelCapability.Realtime)));
67+
providers = ['', ...innerProviders.map(x => x.provider)];
68+
if (config.provider) {
69+
models = getLlmModels(config.provider);
70+
}
71+
const foundProvider = providers.find(x => x === config.provider);
72+
const foundModel = models.find(x => x.name === config.model);
73+
config.provider = foundProvider || null;
74+
config.model = foundModel?.name || null;
75+
onModelChanged(config);
76+
}
77+
});
78+
79+
/** @param {string} provider */
80+
function getLlmModels(provider) {
81+
return innerLlmConfigOptions.find(x => x.provider === provider)?.models
82+
?.filter(x => x.type === LlmModelType.Realtime || x.capabilities?.includes(LlmModelCapability.Realtime)) || [];
83+
}
84+
85+
/** @param {any} e */
86+
async function changeProvider(e) {
87+
const provider = e.target.value;
88+
config.provider = provider || null;
89+
90+
if (!provider) {
91+
models = [];
92+
config.model = null;
93+
config.reasoning_effort_level = null;
94+
handleAgentChange();
95+
return;
96+
}
97+
98+
models = getLlmModels(provider);
99+
config.model = models[0]?.name;
100+
config.reasoning_effort_level = null;
101+
onModelChanged(config);
102+
handleAgentChange();
103+
}
104+
105+
/** @param {any} e */
106+
function changeModel(e) {
107+
config.model = e.target.value || null;
108+
onModelChanged(config);
109+
config.reasoning_effort_level = null;
110+
handleAgentChange();
111+
}
112+
113+
/** @param {any} e */
114+
function changeReasoningEffortLevel(e) {
115+
config.reasoning_effort_level = e.target.value || null;
116+
handleAgentChange();
117+
}
118+
119+
/** @param {any} config */
120+
function onModelChanged(config) {
121+
reasoningLevelOptions = getReasoningLevelOptions(config?.model);
122+
}
123+
124+
/** @param {string | null | undefined} model */
125+
function getReasoningLevelOptions(model) {
126+
let options = defaultReasonLevelOptions;
127+
const foundModel = models.find(x => x.name === model);
128+
if (foundModel?.reasoning == null) {
129+
return options;
130+
}
131+
132+
const defaultOptions = foundModel?.reasoning?.parameters?.EffortLevel?.options;
133+
if (defaultOptions?.length > 0) {
134+
options = [
135+
{ value: '', label: '' },
136+
// @ts-ignore
137+
...defaultOptions.map(x => ({ value: x, label: x }))
138+
];
139+
}
140+
141+
return options;
142+
}
143+
</script>
144+
145+
146+
<div class="agent-config-container">
147+
<div
148+
class="config-header text-center"
149+
role="button"
150+
tabindex="0"
151+
onclick={() => collapsed = !collapsed}
152+
onkeydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
153+
>
154+
<h6 class="mt-1 mb-3 d-flex align-items-center justify-content-center gap-2">
155+
<i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
156+
{title}
157+
</h6>
158+
</div>
159+
160+
{#if !collapsed}
161+
<div transition:slide={{ duration: 200 }}>
162+
<div class="mb-3 row llm-config-item">
163+
<label for={`provider-${title}`} class="col-form-label llm-config-label">
164+
Provider
165+
</label>
166+
<div class="llm-config-input">
167+
<select class="form-select" id={`provider-${title}`} value={config.provider} onchange={e => changeProvider(e)}>
168+
{#each providers as option}
169+
<option value={option} selected={option == config.provider}>
170+
{option}
171+
</option>
172+
{/each}
173+
</select>
174+
</div>
175+
</div>
176+
177+
<div class="mb-3 row llm-config-item">
178+
<label for={`model-${title}`} class="col-form-label llm-config-label">
179+
Model
180+
</label>
181+
<div class="llm-config-input">
182+
<select class="form-select" id={`model-${title}`} value={config.model} disabled={models.length === 0} onchange={e => changeModel(e)}>
183+
{#each models as option}
184+
<option value={option.name} selected={option.name == config.model}>
185+
{option.name}
186+
</option>
187+
{/each}
188+
</select>
189+
</div>
190+
</div>
191+
192+
{#if isReasoningModel}
193+
<div class="mb-3 row llm-config-item">
194+
<label for={`reasoning-${title}`} class="col-form-label llm-config-label">
195+
Reasoning level
196+
</label>
197+
<div class="llm-config-input">
198+
<select class="form-select" id={`reasoning-${title}`} value={config.reasoning_effort_level} onchange={e => changeReasoningEffortLevel(e)}>
199+
{#each reasoningLevelOptions as option}
200+
<option value={option.value} selected={option.value == config.reasoning_effort_level}>
201+
{option.label}
202+
</option>
203+
{/each}
204+
</select>
205+
</div>
206+
</div>
207+
{/if}
208+
</div>
209+
{/if}
210+
</div>

0 commit comments

Comments
 (0)