Skip to content

Commit b5eeee6

Browse files
author
Jicheng Lu
committed
refine routing mode and card styles
1 parent 274c817 commit b5eeee6

File tree

7 files changed

+78
-41
lines changed

7 files changed

+78
-41
lines changed

‎src/lib/helpers/enums.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,11 @@ const agentType = {
7171
};
7272
export const AgentType = Object.freeze(agentType);
7373

74-
const agentMode = {
74+
const routingMode = {
7575
Eager: "eager",
7676
Lazy: "lazy"
7777
};
78-
export const AgentMode = Object.freeze(agentMode);
78+
export const RoutingMode = Object.freeze(routingMode);
7979

8080
const agentTaskStatus = {
8181
Scheduled: 'scheduled',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
* @property {string} name - Agent name.
4545
* @property {string} description - Agent description.
4646
* @property {string} type - Agent type
47-
* @property {string} mode - Agent mode
47+
* @property {string?} mode - Agent routing mode
4848
* @property {string} instruction - System prompt
4949
* @property {ChannelInstruction[]} channel_instructions - Channel instructions
5050
* @property {boolean} disabled

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
/**
1515
* @typedef {Object} IdName
16-
* @property {string} id - The id.
16+
* @property {string?} id - The id.
1717
* @property {string} name - The name.
1818
*/
1919

‎src/lib/scss/custom/common/_common.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,14 @@ button:focus {
167167
overflow: hidden;
168168
text-overflow: ellipsis;
169169
}
170+
171+
.truncate-text {
172+
display: -webkit-box;
173+
-webkit-line-clamp: 3;
174+
-webkit-box-orient: vertical;
175+
text-overflow: ellipsis;
176+
overflow-y: hidden;
177+
}
170178

171179
.disable-outline {
172180
outline: none !important;

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

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { _ } from 'svelte-i18n';
55
import InPlaceEdit from '$lib/common/InPlaceEdit.svelte';
66
import { utcToLocal } from '$lib/helpers/datetime';
7-
import { AgentMode, AgentType } from '$lib/helpers/enums';
7+
import { RoutingMode, AgentType } from '$lib/helpers/enums';
88
import { AgentExtensions } from '$lib/helpers/utils/agent';
99
1010
const limit = 10;
@@ -21,14 +21,21 @@
2121
2222
/** @type {() => void} */
2323
export let handleAgentChange = () => {};
24-
25-
onMount(() => {});
2624
2725
/** @type {import('$commonTypes').IdName[]} */
28-
const agentModeOptions = Object.entries(AgentMode).map(([k, v]) => (
26+
let routingModeOptions = Object.entries(RoutingMode).map(([k, v]) => (
2927
{ id: v, name: v }
3028
));
3129
30+
31+
onMount(() => {
32+
init();
33+
});
34+
35+
function init() {
36+
routingModeOptions = [{ id: null, name: '' }, ...routingModeOptions];
37+
}
38+
3239
function addProfile() {
3340
if (!!!agent) return;
3441
@@ -67,7 +74,7 @@
6774
* @param {any} e
6875
*/
6976
function changeMode(e) {
70-
const value = e.target.value;
77+
const value = e.target.value || null;
7178
agent.mode = value;
7279
handleAgentChange();
7380
}
@@ -127,6 +134,29 @@
127134
{/if}
128135
</td>
129136
</tr>
137+
{#if 1}
138+
<tr>
139+
<th class="agent-prop-key" style="vertical-align: middle">
140+
<div class="mt-1">
141+
Routing Mode
142+
</div>
143+
</th>
144+
<td>
145+
<div class="mt-2 mb-2" style="width: fit-content;">
146+
<Input
147+
type="select"
148+
on:change={e => changeMode(e)}
149+
>
150+
{#each [...routingModeOptions] as option}
151+
<option value={option.id} selected={option.id === agent.mode}>
152+
{option.name}
153+
</option>
154+
{/each}
155+
</Input>
156+
</div>
157+
</td>
158+
</tr>
159+
{/if}
130160
<tr>
131161
<th class="agent-prop-key">
132162
<div class="mt-2 mb-2">
@@ -272,27 +302,6 @@
272302
</div>
273303
</td>
274304
</tr>
275-
<tr>
276-
<th class="agent-prop-key" style="vertical-align: middle">
277-
<div class="mt-1">
278-
Mode
279-
</div>
280-
</th>
281-
<td>
282-
<div class="mt-2 mb-2" style="width: fit-content;">
283-
<Input
284-
type="select"
285-
on:change={e => changeMode(e)}
286-
>
287-
{#each [...agentModeOptions] as option}
288-
<option value={option.id} selected={option.id === agent.mode}>
289-
{option.name}
290-
</option>
291-
{/each}
292-
</Input>
293-
</div>
294-
</td>
295-
</tr>
296305
<tr>
297306
<th class="agent-prop-key" style="vertical-align: middle">
298307
<div class="mt-1">

‎src/routes/page/agent/card-agent.svelte‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@
88
99
/** @type {import('$agentTypes').AgentModel[]} */
1010
export let agents;
11+
1112
</script>
1213

1314
{#each agents as agent}
1415
<Col xl="4" sm="6">
1516
<Card style={"height: 95%;"}>
1617
<CardBody>
17-
<div class="d-flex">
18-
<div class="avatar-md me-4">
18+
<div class="d-flex justify-content-between" style="gap: 1.5rem;">
19+
<div class="avatar-md">
1920
<span class="avatar-title rounded-circle bg-light text-danger font-size-16">
2021
{#if agent.icon_url}
2122
<img src={agent.icon_url} alt="" height="60" />
@@ -54,8 +55,17 @@
5455
{:else}
5556
<p>Provided by {agent.plugin.name}</p>
5657
{/if}
57-
<p class="text-muted mb-4" style="height: 35px;">{agent.description}</p>
58-
<div class="avatar-group" style="height:35px;">
58+
<div
59+
class="text-muted mb-2 truncate-text"
60+
style="height: 60px;"
61+
data-bs-toggle="tooltip"
62+
data-bs-placement="top"
63+
title={agent.description}
64+
>
65+
{agent.description}
66+
</div>
67+
<div class="overflow-hidden">
68+
<div class="avatar-group" style="height:35px;">
5969
{#if agent.is_router}
6070
<div class="avatar-group-item me-3">
6171
<img src="icons/router.png" class="rounded-circle avatar-xs" alt="routing"/>
@@ -68,12 +78,14 @@
6878
{/if}
6979
{#each agent.functions as fn}
7080
<div class="avatar-group-item">
71-
<Link href="#" class="d-inline-block" id={"member" + fn.name}>
81+
<div class="d-inline-block" id={"member" + fn.name}>
7282
<img src="images/function.png" class="rounded-circle avatar-xs" alt={fn.name}/>
73-
</Link>
83+
</div>
7484
</div>
7585
{/each}
7686
</div>
87+
</div>
88+
7789
</div>
7890
</div>
7991
</CardBody>

‎src/routes/page/plugin/plugin-list.svelte‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,18 +69,26 @@
6969
{#each plugins as item}
7070
<Col xl={3} md={6} style="margin-bottom: 10px;">
7171
<Card style="height: 100%">
72-
<CardBody>
72+
<CardBody class="d-flex flex-column justify-content-between">
7373
<div class="favorite-icon">
74-
<Link href="#"><i class="uil uil-heart-alt fs-18" /></Link>
74+
<div><i class="uil uil-heart-alt fs-18" /></div>
7575
</div>
76-
<img src={item.icon_url} alt="{item.name}" height="35" style="max-width: 100%;" class="mb-3" />
76+
<img src={item.icon_url} alt="{item.name}" height="35" width="35" class="mb-3" />
7777
<h5 class="fs-17 mb-2">
78-
<Link href="#" class="text-dark">{item.name}</Link>
78+
<div class="text-dark">{item.name}</div>
7979
<small class="text-muted fw-normal">plugin</small>
8080
</h5>
8181
<ul class="list-inline mb-0">
8282
<li>
83-
<p class="text-muted fs-14 mb-1">{item.description}</p>
83+
<p
84+
class="text-muted fs-14 mb-1 truncate-text"
85+
style="height: 60px;"
86+
data-bs-toggle="tooltip"
87+
data-bs-placement="top"
88+
title={item.description}
89+
>
90+
{item.description}
91+
</p>
8492
</li>
8593
{' '}
8694
<li>

0 commit comments

Comments
 (0)