Skip to content

Commit f7283f5

Browse files
author
Jicheng Lu
committed
refine agent templates
1 parent c70083a commit f7283f5

File tree

14 files changed

+333
-71
lines changed

14 files changed

+333
-71
lines changed

‎src/lib/common/InPlaceEdit.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
{:else}
6969
<!-- svelte-ignore a11y-click-events-have-key-events -->
7070
<!-- svelte-ignore a11y-no-static-element-interactions -->
71-
<div style="width: fit-content; min-width: 30%;" class="clickable" on:click={() => edit()}>
71+
<div style="width: fit-content; min-width: 30%;" class="clickable ellipsis" on:click={() => edit()}>
7272
{#if !!value?.trim()}
7373
<span>{value}</span>
7474
{:else}

‎src/lib/common/nav-bar/NavItem.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
on:input={handleTabInput}
119119
/>
120120
{:else}
121-
<div style="height: 100%" class="line-align-center">
121+
<div style="height: 100%;" class="line-align-center ellipsis">
122122
<div>{navBtnText}</div>
123123
</div>
124124
{/if}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
/**
77
* @typedef {Object} AgentTemplate
8+
* @property {string?} [uid]
89
* @property {string} name
910
* @property {string} content
1011
*/

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,12 @@
102102
background-color: white;
103103
padding: 20px;
104104
}
105+
106+
.agent-prompt-body {
107+
overflow-y: auto;
108+
scrollbar-width: none;
109+
margin-bottom: 0px !important;
110+
}
105111
}
106112
}
107113
}

‎src/routes/page/agent/[agentId]/+page.svelte‎

Lines changed: 55 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
88
import HeadTitle from '$lib/common/HeadTitle.svelte';
99
import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
10-
import AgentPrompt from './agent-components/agent-prompt.svelte';
10+
import AgentInstruction from './agent-components/agent-instruction.svelte';
1111
import AgentOverview from './agent-components/agent-overview.svelte';
1212
import AgentFunction from './agent-components/agent-function.svelte';
1313
import AgentTabs from './agent-tabs.svelte';
@@ -19,13 +19,16 @@
1919
import { goto } from '$app/navigation';
2020
import { AgentExtensions } from '$lib/helpers/utils/agent';
2121
import LocalStorageManager from '$lib/helpers/utils/storage-manager';
22+
import AgentTemplate from './agent-components/agent-template.svelte';
2223
2324
/** @type {import('$agentTypes').AgentModel} */
2425
let agent;
2526
/** @type {any} */
2627
let agentFunctionCmp = null;
2728
/** @type {any} */
28-
let agentPromptCmp = null;
29+
let agentInstructionCmp = null;
30+
/** @type {any} */
31+
let agentTemplateCmp = null;
2932
/** @type {any} */
3033
let agentTabsCmp = null;
3134
/** @type {import('$agentTypes').AgentModel} */
@@ -90,7 +93,8 @@
9093
9194
function handleAgentUpdate() {
9295
fetchJsonContent();
93-
fetchPrompts();
96+
fetchInstructions();
97+
fetchTemplates();
9498
fetchTabData();
9599
96100
agent = {
@@ -114,7 +118,8 @@
114118
isLoading = false;
115119
isComplete = true;
116120
deleteAgentDraft();
117-
refreshChannelPrompts();
121+
refreshInstructions();
122+
refreshTemplates();
118123
setTimeout(() => {
119124
isComplete = false;
120125
}, duration);
@@ -132,53 +137,73 @@
132137
functions: textContent?.functions?.length > 0 ? textContent.functions :
133138
(jsonContent?.functions?.length > 0 ? jsonContent?.functions : []),
134139
responses: textContent?.responses?.length > 0 ? textContent.responses :
135-
(jsonContent?.responses?.length > 0 ? jsonContent?.responses : []),
136-
templates: textContent?.templates?.length > 0 ? textContent.templates :
137-
(jsonContent?.templates?.length > 0 ? jsonContent?.templates : []),
140+
(jsonContent?.responses?.length > 0 ? jsonContent?.responses : [])
138141
}
139142
}
140143
144+
// Functions, responses
141145
function fetchJsonContent() {
142146
const data = formatJsonContent();
143147
agent.functions = data.functions;
144148
agent.responses = data.responses;
145-
agent.templates = data.templates;
146149
}
147150
148-
function formatOriginalPrompts() {
149-
const obj = agentPromptCmp?.fetchOriginalChannelPrompts();
151+
// Insturctions
152+
function formatOriginalInstructions() {
153+
const obj = agentInstructionCmp?.fetchOriginalInstructions();
150154
return {
151155
instruction: obj.systemPrompt,
152156
channel_instructions: obj.channelPrompts || []
153157
}
154158
}
155159
156-
function fetchPrompts() {
157-
const obj = agentPromptCmp?.fetchChannelPrompts();
160+
function fetchInstructions() {
161+
const obj = agentInstructionCmp?.fetchInstructions();
158162
agent.instruction = obj.systemPrompt;
159163
agent.channel_instructions = obj.channelPrompts || [];
160164
}
161165
166+
function refreshInstructions() {
167+
agentInstructionCmp?.refreshInstructions();
168+
}
169+
170+
// Templates
171+
function formatOriginalTemplates() {
172+
const obj = agentTemplateCmp?.fetchOriginalTemplates();
173+
return {
174+
templates: obj.templates || []
175+
}
176+
}
177+
178+
function fetchTemplates() {
179+
const obj = agentTemplateCmp?.fetchTemplates();
180+
agent.templates = obj.templates || [];
181+
}
182+
183+
function refreshTemplates() {
184+
agentTemplateCmp?.refreshTemplates();
185+
}
186+
187+
188+
// Tab data
162189
function formatOriginalTabData() {
163-
const data = agentTabsCmp?.fetchOriginalData();
190+
const data = agentTabsCmp?.fetchOriginalTabData();
164191
return data ? {
165192
utilities: data.utilities || [],
166193
knowledge_bases: data.knwoledgebases || [],
167194
rules: data.rules || []
168195
} : null;
169196
}
197+
170198
function fetchTabData() {
171-
const data = agentTabsCmp?.fetchData();
199+
const data = agentTabsCmp?.fetchTabData();
172200
if (data) {
173201
agent.utilities = data.utilities || [];
174202
agent.knowledge_bases = data.knwoledgebases || [];
175203
agent.rules = data.rules || [];
176204
}
177205
}
178206
179-
function refreshChannelPrompts() {
180-
agentPromptCmp?.refreshChannelPrompts();
181-
}
182207
183208
function deleteCurrentAgent() {
184209
Swal.fire({
@@ -207,7 +232,8 @@
207232
const data = {
208233
...agent,
209234
...formatJsonContent(),
210-
...formatOriginalPrompts(),
235+
...formatOriginalInstructions(),
236+
...formatOriginalTemplates(),
211237
...formatOriginalTabData(),
212238
};
213239
saveAgentDraft(data);
@@ -218,7 +244,8 @@
218244
agentDraft = null;
219245
deleteAgentDraft();
220246
setTimeout(() => {
221-
refreshChannelPrompts();
247+
refreshInstructions();
248+
refreshTemplates();
222249
agentFunctionCmp?.reinit();
223250
agentTabsCmp?.reinit();
224251
});
@@ -253,8 +280,15 @@
253280
</Col>
254281
<Col class="section-min-width agent-col" style="flex: 60%;">
255282
<div class="agent-detail-section">
256-
<AgentPrompt
257-
bind:this={agentPromptCmp}
283+
<AgentInstruction
284+
bind:this={agentInstructionCmp}
285+
agent={agent}
286+
{handleAgentChange}
287+
/>
288+
</div>
289+
<div class="agent-detail-section">
290+
<AgentTemplate
291+
bind:this={agentTemplateCmp}
258292
agent={agent}
259293
{handleAgentChange}
260294
/>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
export let agent;
77
88
/** @type {() => void} */
9-
export let handleAgentChange;
9+
export let handleAgentChange = () => {};
1010
1111
export const fetchContent = () => {
1212
return content;
@@ -27,8 +27,7 @@
2727
content = {
2828
json: {
2929
functions: agent.functions,
30-
responses: agent.responses,
31-
templates: agent.templates
30+
responses: agent.responses
3231
}
3332
};
3433
}

‎src/routes/page/agent/[agentId]/agent-components/agent-prompt.svelte‎ renamed to ‎src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@
1313
export let agent;
1414
1515
/** @type {() => void} */
16-
export let handleAgentChange;
16+
export let handleAgentChange = () => {};
1717
18-
export const fetchOriginalChannelPrompts = () => {
18+
export const fetchOriginalInstructions = () => {
1919
return {
20-
systemPrompt: local_instructions?.[0]?.instruction || '',
21-
channelPrompts: local_instructions?.slice(1)?.map(x => ({
20+
systemPrompt: inner_instructions?.[0]?.instruction || '',
21+
channelPrompts: inner_instructions?.slice(1)?.map(x => ({
2222
channel: x.channel,
2323
instruction: x.instruction
2424
})) || []
2525
};
2626
};
2727
28-
export const fetchChannelPrompts = () => {
29-
const candidates = local_instructions?.filter((x, idx) => idx > 0 && !!x.channel?.trim())?.map(x => {
28+
export const fetchInstructions = () => {
29+
const candidates = inner_instructions?.filter((x, idx) => idx > 0 && !!x.channel?.trim())?.map(x => {
3030
return { channel: x.channel.trim().toLowerCase(), instruction: x.instruction };
3131
});
3232
@@ -39,12 +39,13 @@
3939
}
4040
4141
return {
42-
systemPrompt: local_instructions[0].instruction,
42+
systemPrompt: inner_instructions[0].instruction,
4343
channelPrompts: prompts
4444
};
4545
}
4646
47-
export const refreshChannelPrompts = () => init();
47+
export const refreshInstructions = () => init();
48+
4849
4950
/** @type {import('$agentTypes').ChannelInstruction} */
5051
const defaultInstruction = {
@@ -53,7 +54,7 @@
5354
};
5455
5556
/** @type {import('$agentTypes').ChannelInstruction[]} */
56-
let local_instructions = [];
57+
let inner_instructions = [];
5758
5859
/** @type {import('$agentTypes').ChannelInstruction} */
5960
let selected_instruction = { ...defaultInstruction };
@@ -63,7 +64,7 @@
6364
});
6465
6566
function init() {
66-
local_instructions = [
67+
inner_instructions = [
6768
{
6869
uid: uuidv4(),
6970
channel: defaultChannel,
@@ -76,7 +77,7 @@
7677
})) || []
7778
];
7879
79-
selected_instruction = local_instructions[0];
80+
selected_instruction = inner_instructions[0];
8081
}
8182
8283
/** @param {string | undefined} uid */
@@ -85,7 +86,7 @@
8586
return;
8687
}
8788
88-
selected_instruction = local_instructions.find(x => x.uid === uid) || { ...defaultInstruction };
89+
selected_instruction = inner_instructions.find(x => x.uid === uid) || { ...defaultInstruction };
8990
}
9091
9192
/** @param {any} e */
@@ -96,21 +97,23 @@
9697
}
9798
9899
function addChannel() {
99-
local_instructions = [
100-
...local_instructions,
100+
inner_instructions = [
101+
...inner_instructions,
101102
{
102103
uid: uuidv4(),
103104
channel: '',
104105
instruction: ''
105106
}
106107
];
108+
109+
selected_instruction = inner_instructions[inner_instructions.length-1];
107110
}
108111
109112
/** @param {string | undefined} uid */
110113
function deleteChannel(uid) {
111-
local_instructions = local_instructions.filter(x => x.uid !== uid);
114+
inner_instructions = inner_instructions.filter(x => x.uid !== uid);
112115
if (selected_instruction.uid === uid) {
113-
selected_instruction = local_instructions[0];
116+
selected_instruction = inner_instructions[0];
114117
}
115118
}
116119
</script>
@@ -124,7 +127,7 @@
124127
</div>
125128
</CardHeader>
126129
<CardBody>
127-
<FormGroup class="mb-3">
130+
<FormGroup>
128131
<div class="mb-2">
129132
<div class="line-align-center fw-bold">
130133
{'Description:'}
@@ -141,10 +144,10 @@
141144
/>
142145
</FormGroup>
143146
144-
<FormGroup class="mb-3" style="overflow-y: auto; scrollbar-width: none;">
147+
<FormGroup class="agent-prompt-body">
145148
<div class="mb-2" style="display: flex; gap: 10px;">
146149
<div class="line-align-center fw-bold">
147-
{#if local_instructions.length > 1}
150+
{#if inner_instructions.length > 1}
148151
{'Instructions:'}
149152
{:else}
150153
{'System instruction:'}
@@ -164,15 +167,15 @@
164167
</div>
165168
</div>
166169
167-
{#if local_instructions.length > 1}
170+
{#if inner_instructions.length > 1}
168171
<NavBar
169172
id={'agent-instruction-container'}
170173
disableDefaultStyles
171174
containerClasses={'nav-tabs-secondary'}
172175
>
173-
{#each local_instructions as inst, idx (idx) }
176+
{#each inner_instructions as inst, idx (idx) }
174177
<NavItem
175-
containerStyles={`flex: 0 1 calc(100% / ${local_instructions.length <= 2 ? local_instructions.length : 3})`}
178+
containerStyles={`flex: 0 1 calc(100% / ${inner_instructions.length <= 2 ? inner_instructions.length : 3})`}
176179
navBtnStyles={'text-transform: none;'}
177180
navBtnId={`${inst.channel}-prompt-tab`}
178181
dataBsTarget={`#${inst.channel}-prompt-tab-pane`}
@@ -182,7 +185,7 @@
182185
allowEdit={idx > 0}
183186
allowDelete={idx > 0}
184187
maxEditLength={20}
185-
editPlaceholder={'Type a channel name here...'}
188+
editPlaceholder={'Type a channel here...'}
186189
onClick={() => selectChannel(inst.uid)}
187190
onDelete={() => { deleteChannel(inst.uid); handleAgentChange(); }}
188191
onInput={handleAgentChange}
@@ -195,7 +198,7 @@
195198
class="form-control"
196199
style="scrollbar-width: thin; resize: none;"
197200
value={selected_instruction.instruction}
198-
rows={24}
201+
rows={20}
199202
on:input={(e) => { changePrompt(e); handleAgentChange(); }}
200203
placeholder="Enter your instruction"
201204
/>

0 commit comments

Comments
 (0)