Skip to content

Commit 2feb91b

Browse files
author
Jicheng Lu
committed
refine
1 parent 13595d3 commit 2feb91b

3 files changed

Lines changed: 161 additions & 40 deletions

File tree

‎src/lib/common/modals/StateModal.svelte‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { cubicOut } from 'svelte/easing';
44
import { untrack } from 'svelte';
55
import _ from "lodash";
6+
import { scrollToBottom } from '$lib/helpers/utils/common';
67
78
let {
89
isOpen = false,
@@ -39,6 +40,9 @@
3940
active_rounds: { data: -1, isValid: true }
4041
};
4142
43+
/** @type {HTMLDivElement | undefined} */
44+
let bodyEl = $state();
45+
4246
$effect(() => {
4347
if (isOpen) {
4448
untrack(() => {
@@ -91,6 +95,7 @@
9195
9296
function addState() {
9397
states = [...states, {...JSON.parse(JSON.stringify(defaultState))}];
98+
scrollToBottom(bodyEl);
9499
}
95100
96101
/** @param {number} index */
@@ -204,7 +209,7 @@
204209
</div>
205210
206211
<!-- Body -->
207-
<div class="stm-body px-5 py-4">
212+
<div class="stm-body px-5 py-4" bind:this={bodyEl}>
208213
<form>
209214
<div class="stm-rows flex flex-col gap-2.5">
210215
{#each states as state, idx (idx)}
@@ -410,8 +415,7 @@
410415
}
411416
412417
.stm-body {
413-
min-height: 200px;
414-
max-height: 300px;
418+
height: 25vh;
415419
overflow-y: auto;
416420
scrollbar-width: thin;
417421
margin-right: -0.375rem;

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1924,6 +1924,115 @@
19241924
}
19251925

19261926

1927+
/* ========================================================================
1928+
* src/routes/page/agent/[agentId]/agent-components/llm-configs/realtime-config.svelte
1929+
* ======================================================================== */
1930+
1931+
1932+
.rc-card {
1933+
padding: 0.625rem;
1934+
border: 1px dashed var(--color-primary);
1935+
border-radius: 0.5rem;
1936+
background-color: color-mix(in srgb, var(--color-primary) 3%, transparent);
1937+
}
1938+
1939+
1940+
.rc-header {
1941+
text-align: center;
1942+
cursor: pointer;
1943+
user-select: none;
1944+
outline: none;
1945+
1946+
1947+
&:hover .rc-header-title {
1948+
opacity: 0.8;
1949+
}
1950+
}
1951+
1952+
1953+
.rc-header-title {
1954+
margin: 0.25rem 0 0;
1955+
font-size: 0.9375rem;
1956+
font-weight: 600;
1957+
color: rgb(55 65 81);
1958+
display: flex;
1959+
align-items: center;
1960+
justify-content: center;
1961+
gap: 0.5rem;
1962+
transition: opacity 0.15s ease;
1963+
}
1964+
1965+
1966+
.rc-body {
1967+
display: flex;
1968+
flex-direction: column;
1969+
gap: 0.625rem;
1970+
margin-top: 0.75rem;
1971+
}
1972+
1973+
1974+
.rc-field {
1975+
display: flex;
1976+
flex-wrap: wrap;
1977+
align-items: center;
1978+
}
1979+
1980+
1981+
.rc-label {
1982+
flex: 0 0 25%;
1983+
max-width: 25%;
1984+
padding: 0 0.75rem;
1985+
font-size: 0.8125rem;
1986+
font-weight: 500;
1987+
color: rgb(75 85 99);
1988+
overflow-x: hidden;
1989+
text-overflow: ellipsis;
1990+
white-space: nowrap;
1991+
margin-bottom: 0;
1992+
}
1993+
1994+
1995+
.rc-input-wrap {
1996+
flex: 0 0 75%;
1997+
max-width: 75%;
1998+
padding: 0 0.75rem;
1999+
}
2000+
2001+
2002+
/* Selects are rendered via the Select component, which owns its styles */
2003+
2004+
2005+
@media (max-width: 1250px) {
2006+
.rc-field {
2007+
flex-direction: column;
2008+
align-items: stretch;
2009+
}
2010+
.rc-label,
2011+
.rc-input-wrap {
2012+
flex: 0 0 100%;
2013+
max-width: 100%;
2014+
}
2015+
}
2016+
2017+
2018+
/* ===== Dark mode ===== */
2019+
2020+
2021+
.dark .rc-card {
2022+
background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
2023+
}
2024+
2025+
2026+
.dark .rc-header-title {
2027+
color: rgb(229 231 235);
2028+
}
2029+
2030+
2031+
.dark .rc-label {
2032+
color: rgb(156 163 175);
2033+
}
2034+
2035+
19272036
/* ========================================================================
19282037
* src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte
19292038
* ======================================================================== */

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

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import { slide } from 'svelte/transition';
3+
import Select from '$lib/common/dropdowns/Select.svelte';
34
import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
45
56
/**
@@ -84,7 +85,8 @@
8485
8586
/** @param {any} e */
8687
async function changeProvider(e) {
87-
const provider = e.target.value;
88+
const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
89+
const provider = values[0] || '';
8890
config.provider = provider || null;
8991
9092
if (!provider) {
@@ -104,15 +106,17 @@
104106
105107
/** @param {any} e */
106108
function changeModel(e) {
107-
config.model = e.target.value || null;
109+
const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
110+
config.model = values[0] || null;
108111
onModelChanged(config);
109112
config.reasoning_effort_level = null;
110113
handleAgentChange();
111114
}
112115
113116
/** @param {any} e */
114117
function changeReasoningEffortLevel(e) {
115-
config.reasoning_effort_level = e.target.value || null;
118+
const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
119+
config.reasoning_effort_level = values[0] || null;
116120
handleAgentChange();
117121
}
118122
@@ -143,65 +147,69 @@
143147
</script>
144148
145149
146-
<div class="agent-config-container">
150+
<div class="rc-card">
147151
<div
148-
class="config-header text-center"
152+
class="rc-header"
149153
role="button"
150154
tabindex="0"
151155
onclick={() => collapsed = !collapsed}
152156
onkeydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
153157
>
154-
<h6 class="mt-1 mb-3 d-flex align-items-center justify-content-center gap-2">
158+
<h6 class="rc-header-title">
155159
<i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
156160
{title}
157161
</h6>
158162
</div>
159163
160164
{#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">
165+
<div transition:slide={{ duration: 200 }} class="rc-body">
166+
<div class="rc-field">
167+
<label for={`provider-${title}`} class="rc-label">
164168
Provider
165169
</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>
170+
<div class="rc-input-wrap">
171+
<Select
172+
tag={`provider-${title}`}
173+
containerStyles={'width: 100%;'}
174+
placeholder={'Select a provider'}
175+
selectedValues={config.provider ? [config.provider] : []}
176+
options={providers.filter(p => !!p).map(p => ({ label: p, value: p }))}
177+
onselect={e => changeProvider(e)}
178+
/>
174179
</div>
175180
</div>
176181
177-
<div class="mb-3 row llm-config-item">
178-
<label for={`model-${title}`} class="col-form-label llm-config-label">
182+
<div class="rc-field">
183+
<label for={`model-${title}`} class="rc-label">
179184
Model
180185
</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>
186+
<div class="rc-input-wrap">
187+
<Select
188+
tag={`model-${title}`}
189+
containerStyles={'width: 100%;'}
190+
placeholder={'Select a model'}
191+
disabled={models.length === 0}
192+
selectedValues={config.model ? [config.model] : []}
193+
options={models.map(m => ({ label: m.name, value: m.name }))}
194+
onselect={e => changeModel(e)}
195+
/>
189196
</div>
190197
</div>
191198
192199
{#if isReasoningModel}
193-
<div class="mb-3 row llm-config-item">
194-
<label for={`reasoning-${title}`} class="col-form-label llm-config-label">
200+
<div class="rc-field">
201+
<label for={`reasoning-${title}`} class="rc-label">
195202
Reasoning level
196203
</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>
204+
<div class="rc-input-wrap">
205+
<Select
206+
tag={`reasoning-${title}`}
207+
containerStyles={'width: 100%;'}
208+
placeholder={'Select a level'}
209+
selectedValues={config.reasoning_effort_level ? [config.reasoning_effort_level] : []}
210+
options={reasoningLevelOptions.filter(o => !!o.value)}
211+
onselect={e => changeReasoningEffortLevel(e)}
212+
/>
205213
</div>
206214
</div>
207215
{/if}

0 commit comments

Comments
 (0)