Skip to content

Commit c2e10ee

Browse files
iceljciceljc
authored
Merge pull request #375 from iceljc/features/refine-chat-window
refine instruction
2 parents 73260a3 + 659942c commit c2e10ee

File tree

5 files changed

+66
-54
lines changed

5 files changed

+66
-54
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
/**
22
* @typedef {Object} InstructMessageModel
3+
* @property {string} text - The user message.
34
* @property {string} [instruction] - User provided prompt instead of predefined template.
4-
* @property {string} [template] - The template name.
5+
* @property {string?} [template] - The template name.
6+
* @property {string?} [provider] - The LLM provider.
7+
* @property {string?} [model] - The LLM model.
8+
* @property {import('$conversationTypes').ConversationStateModel[]} [states]
59
*/
610

711
/**

‎src/lib/services/instruct-service.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import qs from 'qs';
66
/**
77
* Execute agent instruction by template or user provided prompt.
88
* @param {string} agentId
9-
* @param {import('$instructTypes').InstructMessageModel} instruction
9+
* @param {import('$instructTypes').InstructMessageModel} request
10+
* @returns {Promise<{ text: string }>}
1011
*/
11-
export async function executeAgentInstruction(agentId, instruction) {
12-
let url = replaceUrl(endpoints.instructCompletionUrl, {agentId: agentId});
13-
await axios.post(url, instruction);
12+
export async function executeAgentInstruction(agentId, request) {
13+
const url = replaceUrl(endpoints.instructCompletionUrl, {agentId: agentId});
14+
const response = await axios.post(url, request);
15+
return response.data;
1416
}
1517

1618

‎src/routes/page/instruction/instruction-components/instruction-template.svelte‎ renamed to ‎src/routes/page/instruction/instruction-components/instruction-agent.svelte‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
* @param {import('$agentTypes').AgentModel[]} agents
3030
*/
3131
function collectAgentOptions(agents) {
32-
agentOptions = agents?.filter(x => x.templates?.length > 0).map(x => ({
32+
agentOptions = agents?.map(x => ({
3333
label: x.name,
3434
value: x.id
3535
}))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
@@ -61,7 +61,7 @@
6161
}
6262
6363
function dispatchEvent() {
64-
svelteDispatch('agentSelected', {
64+
svelteDispatch('selectAgent', {
6565
agent: selectedAgent || null,
6666
template: selectedTemplate || null
6767
});
@@ -73,12 +73,6 @@
7373
<div class="instruct-setting-item">
7474
<div class="instruct-setting-dropdown">
7575
<div class="text-primary fw-bold mb-1">Agent</div>
76-
<!-- <select class="form-select" id="agent" value={selectedAgent?.id || null} disabled={disabled} on:change={e => selectAgent(e)}>
77-
<option value={null}>{$_('Select Agent')}</option>
78-
{#each agentOptions as op}
79-
<option value={`${op.id}`} selected={op.id === selectedAgent?.id}>{$_(`${op.name}`)}</option>
80-
{/each}
81-
</select> -->
8276
<Select
8377
tag={'agent-select'}
8478
placeholder={'Select Agent'}
@@ -94,12 +88,6 @@
9488
<div class="instruct-setting-item">
9589
<div class="instruct-setting-dropdown">
9690
<div class="text-primary fw-bold mb-1">Template</div>
97-
<!-- <select class="form-select" id="template" value={selectedTemplate?.id || null} disabled={disabled} on:change={e => selectTemplate(e)}>
98-
<option value={null}>{$_('Select Template')}</option>
99-
{#each templateOptions as op}
100-
<option value={`${op.id}`} selected={op.id === selectedTemplate?.id}>{$_(`${op.name}`)}</option>
101-
{/each}
102-
</select> -->
10391
<Select
10492
tag={'template-select'}
10593
placeholder={'Select Template'}

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
/** @type {import('$commonTypes').LlmConfig | null | undefined} */
1515
export let selectedProvider = null;
1616
17-
/** @type {any} */
17+
/** @type {string?} */
1818
export let selectedModel = null;
1919
2020
/** @type {import('$commonTypes').LabelValuePair[]} */
@@ -31,11 +31,16 @@
3131
});
3232
3333
$: {
34-
collectLlmOptions(llmConfigs);
34+
initLlmOptions(llmConfigs);
3535
}
3636
3737
/** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
38-
function collectLlmOptions(llmConfigs) {
38+
function initLlmOptions(llmConfigs) {
39+
selectedProvider = null;
40+
selectedModel = null;
41+
providerOptions = [];
42+
modelOptions = [];
43+
3944
providerOptions = llmConfigs?.map(x => ({
4045
label: x.provider,
4146
value: x.provider
@@ -55,30 +60,26 @@
5560
function selectModel(e) {
5661
// @ts-ignore
5762
const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
58-
selectedModel = selectedValues.length > 0 ? modelOptions.find(x => x.id === selectedValues[0]) : null;
63+
selectedModel = selectedValues.length > 0 ? modelOptions.find(x => x.value === selectedValues[0])?.value : null;
5964
dispatchEvent();
6065
}
6166
62-
/** @param {any?} targetModel */
67+
/** @param {string?} targetModel */
6368
function onProviderChanged(targetModel = null) {
6469
modelOptions = selectedProvider?.models?.map(x => ({
65-
id: x.name,
66-
name: x.name,
6770
label: x.name,
6871
value: x.name
6972
}))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
7073
7174
if (!!targetModel) {
72-
selectedModel = modelOptions.find(x => x.value === targetModel) || null;
73-
} else {
74-
selectedModel = modelOptions.length > 0 ? modelOptions[0] : null;
75+
selectedModel = modelOptions.find(x => x.value === targetModel)?.value || null;
7576
}
7677
}
7778
7879
function dispatchEvent() {
79-
svelteDispatch('llmSelected', {
80+
svelteDispatch('selectLlm', {
8081
provider: selectedProvider || null,
81-
model: selectedModel?.name
82+
model: selectedModel
8283
});
8384
}
8485
</script>
@@ -108,7 +109,7 @@
108109
placeholder={'Select Model'}
109110
searchMode
110111
disabled={disabled}
111-
selectedValues={selectedModel?.id ? [selectedModel.id] : []}
112+
selectedValues={selectedModel ? [selectedModel] : []}
112113
options={modelOptions}
113114
on:select={e => selectModel(e)}
114115
/>

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

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
import { fly } from 'svelte/transition';
44
import { _ } from 'svelte-i18n';
55
import util from "lodash";
6-
import { Button, Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
6+
import { Button, Card, CardBody, Col, Row, Tooltip } from '@sveltestrap/sveltestrap';
77
import LoadingDots from '$lib/common/LoadingDots.svelte';
88
import HeadTitle from '$lib/common/HeadTitle.svelte';
99
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
1010
import Markdown from '$lib/common/markdown/Markdown.svelte';
1111
import InstructionState from '../instruction-components/instruction-state.svelte';
1212
import { getAgents } from '$lib/services/agent-service';
1313
import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
14-
import { sendChatCompletion } from '$lib/services/instruct-service';
14+
import { executeAgentInstruction } from '$lib/services/instruct-service';
1515
import { getLlmConfigs } from '$lib/services/llm-provider-service';
1616
import { LlmModelType } from '$lib/helpers/enums';
1717
import NavBar from '$lib/common/nav-bar/NavBar.svelte';
1818
import NavItem from '$lib/common/nav-bar/NavItem.svelte';
19-
import InstructionTemplate from '../instruction-components/instruction-template.svelte';
19+
import InstructionAgent from '../instruction-components/instruction-agent.svelte';
2020
import InstructionLlm from '../instruction-components/instruction-llm.svelte';
2121
2222
const maxLength = 64000;
@@ -25,19 +25,21 @@
2525
2626
/** @type {any[]}*/
2727
const tabs = [
28-
{ name: 'instruction-template', displayText: 'Template' },
28+
{ name: 'instruction-agent', displayText: 'Agent' },
2929
{ name: 'instruction-llm', displayText: 'LLM Config' },
3030
{ name: 'instruction-states', displayText: 'States' }
3131
];
3232
3333
let isLoading = false;
34+
let isError = false;
3435
let isThinking = false;
3536
let requestDone = false;
3637
3738
let text = '';
3839
let instruction = '';
3940
let result = '';
4041
let elapsedTime = '';
42+
let errorText = 'Please select an agent to proceed!';
4143
4244
/** @type {import('$agentTypes').AgentModel | null} */
4345
let selectedAgent = null;
@@ -79,21 +81,31 @@
7981
});
8082
8183
function sendRequest() {
84+
if (!selectedAgent) {
85+
isError = true;
86+
errorText = 'Please select an agent to proceed!';
87+
setTimeout(() => {
88+
isError = false;
89+
errorText = '';
90+
}, 1500);
91+
return;
92+
}
93+
8294
isThinking = true;
8395
requestDone = false;
8496
elapsedTime = '';
8597
const formattedStates = formatStates(states);
8698
const start = new Date();
87-
sendChatCompletion({
99+
const agentId = selectedAgent?.id || '';
100+
executeAgentInstruction(agentId, {
88101
text: util.trim(text) || '',
89-
instruction: util.trim(instruction) || null,
90-
agentId: selectedAgent?.id,
91-
provider: selectedProvider?.provider || DEFAULT_PROVIDER,
92-
model: selectedModel || DEFAULT_MODEL,
102+
instruction: '#TEMPLATE#',
103+
provider: selectedProvider?.provider,
104+
model: selectedModel,
93105
template: selectedTemplate,
94106
states: formattedStates
95107
}).then(res => {
96-
result = res || '';
108+
result = res?.text || '';
97109
}).finally(() => {
98110
isThinking = false;
99111
requestDone = true;
@@ -167,7 +179,7 @@
167179
168180
<HeadTitle title="{$_('Instruction')}" />
169181
<Breadcrumb pagetitle="{$_('Testing')}" title="{$_('Instruction')}"/>
170-
<LoadingToComplete isLoading={isLoading} />
182+
<LoadingToComplete isLoading={isLoading} isError={isError} errorText={errorText} />
171183
172184
<div class="d-xl-flex">
173185
<div class="w-100">
@@ -244,13 +256,19 @@
244256
<div class="line-align-center">
245257
<!-- svelte-ignore a11y-click-events-have-key-events -->
246258
<!-- svelte-ignore a11y-no-static-element-interactions -->
247-
<i
259+
<!-- <i
248260
class="mdi mdi-refresh text-primary clickable"
249261
data-bs-toggle="tooltip"
250262
data-bs-placement="bottom"
251263
title={'Reset'}
252264
on:click={e => resetInstruction()}
253-
/>
265+
/> -->
266+
<div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
267+
<i class="bx bx-info-circle" />
268+
</div>
269+
<Tooltip target="demo-tooltip" placement="right" class="demo-tooltip-note">
270+
<div>Please select an agent to proceed!</div>
271+
</Tooltip>
254272
</div>
255273
</div>
256274
</Col>
@@ -264,20 +282,19 @@
264282
class='form-control knowledge-textarea'
265283
rows={19}
266284
maxlength={maxLength}
267-
disabled={isThinking}
268-
placeholder={'Enter instruction...'}
285+
disabled
286+
placeholder={''}
269287
bind:value={instruction}
270288
/>
271-
<div class="text-secondary text-end text-count">
289+
<!-- <div class="text-secondary text-end text-count">
272290
<div>{instruction?.length || 0}/{maxLength}</div>
273-
</div>
291+
</div> -->
274292
</div>
275293
</div>
276294
</Col>
277295
<Col lg="5" class="instruction-gap">
278296
<Card>
279297
<CardBody>
280-
281298
<NavBar
282299
id={'instruction-nav-container'}
283300
disableDefaultStyles
@@ -297,11 +314,11 @@
297314
{/each}
298315
</NavBar>
299316
300-
<div class:hide={selectedTab !== 'instruction-template'}>
301-
<InstructionTemplate
317+
<div class:hide={selectedTab !== 'instruction-agent'}>
318+
<InstructionAgent
302319
agents={agents}
303320
disabled={isThinking}
304-
on:agentSelected={e => onAgentSelected(e)}
321+
on:selectAgent={e => onAgentSelected(e)}
305322
/>
306323
</div>
307324
<div class:hide={selectedTab !== 'instruction-llm'}>
@@ -310,7 +327,7 @@
310327
disabled={isThinking}
311328
selectedProvider={selectedProvider}
312329
selectedModel={selectedModel}
313-
on:llmSelected={e => onLlmSelected(e)}
330+
on:selectLlm={e => onLlmSelected(e)}
314331
/>
315332
</div>
316333
<div class:hide={selectedTab !== 'instruction-states'}>

0 commit comments

Comments
 (0)