Skip to content

refine instruction #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 26, 2025
Merged

refine instruction #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/lib/helpers/types/instructTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
/**
* @typedef {Object} InstructMessageModel
* @property {string} text - The user message.
* @property {string} [instruction] - User provided prompt instead of predefined template.
* @property {string} [template] - The template name.
* @property {string?} [template] - The template name.
* @property {string?} [provider] - The LLM provider.
* @property {string?} [model] - The LLM model.
* @property {import('$conversationTypes').ConversationStateModel[]} [states]
*/

/**
Expand Down
10 changes: 6 additions & 4 deletions src/lib/services/instruct-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ import qs from 'qs';
/**
* Execute agent instruction by template or user provided prompt.
* @param {string} agentId
* @param {import('$instructTypes').InstructMessageModel} instruction
* @param {import('$instructTypes').InstructMessageModel} request
* @returns {Promise<{ text: string }>}
*/
export async function executeAgentInstruction(agentId, instruction) {
let url = replaceUrl(endpoints.instructCompletionUrl, {agentId: agentId});
await axios.post(url, instruction);
export async function executeAgentInstruction(agentId, request) {
const url = replaceUrl(endpoints.instructCompletionUrl, {agentId: agentId});
const response = await axios.post(url, request);
return response.data;
}


Expand Down
16 changes: 2 additions & 14 deletions ...on-components/instruction-template.svelte → ...ction-components/instruction-agent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
* @param {import('$agentTypes').AgentModel[]} agents
*/
function collectAgentOptions(agents) {
agentOptions = agents?.filter(x => x.templates?.length > 0).map(x => ({
agentOptions = agents?.map(x => ({
label: x.name,
value: x.id
}))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
Expand Down Expand Up @@ -61,7 +61,7 @@
}

function dispatchEvent() {
svelteDispatch('agentSelected', {
svelteDispatch('selectAgent', {
agent: selectedAgent || null,
template: selectedTemplate || null
});
Expand All @@ -73,12 +73,6 @@
<div class="instruct-setting-item">
<div class="instruct-setting-dropdown">
<div class="text-primary fw-bold mb-1">Agent</div>
<!-- <select class="form-select" id="agent" value={selectedAgent?.id || null} disabled={disabled} on:change={e => selectAgent(e)}>
<option value={null}>{$_('Select Agent')}</option>
{#each agentOptions as op}
<option value={`${op.id}`} selected={op.id === selectedAgent?.id}>{$_(`${op.name}`)}</option>
{/each}
</select> -->
<Select
tag={'agent-select'}
placeholder={'Select Agent'}
Expand All @@ -94,12 +88,6 @@
<div class="instruct-setting-item">
<div class="instruct-setting-dropdown">
<div class="text-primary fw-bold mb-1">Template</div>
<!-- <select class="form-select" id="template" value={selectedTemplate?.id || null} disabled={disabled} on:change={e => selectTemplate(e)}>
<option value={null}>{$_('Select Template')}</option>
{#each templateOptions as op}
<option value={`${op.id}`} selected={op.id === selectedTemplate?.id}>{$_(`${op.name}`)}</option>
{/each}
</select> -->
<Select
tag={'template-select'}
placeholder={'Select Template'}
Expand Down
27 changes: 14 additions & 13 deletions src/routes/page/instruction/instruction-components/instruction-llm.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
/** @type {import('$commonTypes').LlmConfig | null | undefined} */
export let selectedProvider = null;

/** @type {any} */
/** @type {string?} */
export let selectedModel = null;

/** @type {import('$commonTypes').LabelValuePair[]} */
Expand All @@ -31,11 +31,16 @@
});

$: {
collectLlmOptions(llmConfigs);
initLlmOptions(llmConfigs);
}

/** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
function collectLlmOptions(llmConfigs) {
function initLlmOptions(llmConfigs) {
selectedProvider = null;
selectedModel = null;
providerOptions = [];
modelOptions = [];

providerOptions = llmConfigs?.map(x => ({
label: x.provider,
value: x.provider
Expand All @@ -55,30 +60,26 @@
function selectModel(e) {
// @ts-ignore
const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
selectedModel = selectedValues.length > 0 ? modelOptions.find(x => x.id === selectedValues[0]) : null;
selectedModel = selectedValues.length > 0 ? modelOptions.find(x => x.value === selectedValues[0])?.value : null;
dispatchEvent();
}

/** @param {any?} targetModel */
/** @param {string?} targetModel */
function onProviderChanged(targetModel = null) {
modelOptions = selectedProvider?.models?.map(x => ({
id: x.name,
name: x.name,
label: x.name,
value: x.name
}))?.sort((a, b) => a.label.localeCompare(b.label)) || [];

if (!!targetModel) {
selectedModel = modelOptions.find(x => x.value === targetModel) || null;
} else {
selectedModel = modelOptions.length > 0 ? modelOptions[0] : null;
selectedModel = modelOptions.find(x => x.value === targetModel)?.value || null;
}
}

function dispatchEvent() {
svelteDispatch('llmSelected', {
svelteDispatch('selectLlm', {
provider: selectedProvider || null,
model: selectedModel?.name
model: selectedModel
});
}
</script>
Expand Down Expand Up @@ -108,7 +109,7 @@
placeholder={'Select Model'}
searchMode
disabled={disabled}
selectedValues={selectedModel?.id ? [selectedModel.id] : []}
selectedValues={selectedModel ? [selectedModel] : []}
options={modelOptions}
on:select={e => selectModel(e)}
/>
Expand Down
61 changes: 39 additions & 22 deletions src/routes/page/instruction/testing/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
import { fly } from 'svelte/transition';
import { _ } from 'svelte-i18n';
import util from "lodash";
import { Button, Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
import { Button, Card, CardBody, Col, Row, Tooltip } from '@sveltestrap/sveltestrap';
import LoadingDots from '$lib/common/LoadingDots.svelte';
import HeadTitle from '$lib/common/HeadTitle.svelte';
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
import Markdown from '$lib/common/markdown/Markdown.svelte';
import InstructionState from '../instruction-components/instruction-state.svelte';
import { getAgents } from '$lib/services/agent-service';
import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
import { sendChatCompletion } from '$lib/services/instruct-service';
import { executeAgentInstruction } from '$lib/services/instruct-service';
import { getLlmConfigs } from '$lib/services/llm-provider-service';
import { LlmModelType } from '$lib/helpers/enums';
import NavBar from '$lib/common/nav-bar/NavBar.svelte';
import NavItem from '$lib/common/nav-bar/NavItem.svelte';
import InstructionTemplate from '../instruction-components/instruction-template.svelte';
import InstructionAgent from '../instruction-components/instruction-agent.svelte';
import InstructionLlm from '../instruction-components/instruction-llm.svelte';

const maxLength = 64000;
Expand All @@ -25,19 +25,21 @@

/** @type {any[]}*/
const tabs = [
{ name: 'instruction-template', displayText: 'Template' },
{ name: 'instruction-agent', displayText: 'Agent' },
{ name: 'instruction-llm', displayText: 'LLM Config' },
{ name: 'instruction-states', displayText: 'States' }
];

let isLoading = false;
let isError = false;
let isThinking = false;
let requestDone = false;

let text = '';
let instruction = '';
let result = '';
let elapsedTime = '';
let errorText = 'Please select an agent to proceed!';

/** @type {import('$agentTypes').AgentModel | null} */
let selectedAgent = null;
Expand Down Expand Up @@ -79,21 +81,31 @@
});

function sendRequest() {
if (!selectedAgent) {
isError = true;
errorText = 'Please select an agent to proceed!';
setTimeout(() => {
isError = false;
errorText = '';
}, 1500);
return;
}

isThinking = true;
requestDone = false;
elapsedTime = '';
const formattedStates = formatStates(states);
const start = new Date();
sendChatCompletion({
const agentId = selectedAgent?.id || '';
executeAgentInstruction(agentId, {
text: util.trim(text) || '',
instruction: util.trim(instruction) || null,
agentId: selectedAgent?.id,
provider: selectedProvider?.provider || DEFAULT_PROVIDER,
model: selectedModel || DEFAULT_MODEL,
instruction: '#TEMPLATE#',
provider: selectedProvider?.provider,
model: selectedModel,
template: selectedTemplate,
states: formattedStates
}).then(res => {
result = res || '';
result = res?.text || '';
}).finally(() => {
isThinking = false;
requestDone = true;
Expand Down Expand Up @@ -167,7 +179,7 @@

<HeadTitle title="{$_('Instruction')}" />
<Breadcrumb pagetitle="{$_('Testing')}" title="{$_('Instruction')}"/>
<LoadingToComplete isLoading={isLoading} />
<LoadingToComplete isLoading={isLoading} isError={isError} errorText={errorText} />

<div class="d-xl-flex">
<div class="w-100">
Expand Down Expand Up @@ -244,13 +256,19 @@
<div class="line-align-center">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<i
<!-- <i
class="mdi mdi-refresh text-primary clickable"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title={'Reset'}
on:click={e => resetInstruction()}
/>
/> -->
<div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
<i class="bx bx-info-circle" />
</div>
<Tooltip target="demo-tooltip" placement="right" class="demo-tooltip-note">
<div>Please select an agent to proceed!</div>
</Tooltip>
</div>
</div>
</Col>
Expand All @@ -264,20 +282,19 @@
class='form-control knowledge-textarea'
rows={19}
maxlength={maxLength}
disabled={isThinking}
placeholder={'Enter instruction...'}
disabled
placeholder={''}
bind:value={instruction}
/>
<div class="text-secondary text-end text-count">
<!-- <div class="text-secondary text-end text-count">
<div>{instruction?.length || 0}/{maxLength}</div>
</div>
</div> -->
</div>
</div>
</Col>
<Col lg="5" class="instruction-gap">
<Card>
<CardBody>

<NavBar
id={'instruction-nav-container'}
disableDefaultStyles
Expand All @@ -297,11 +314,11 @@
{/each}
</NavBar>

<div class:hide={selectedTab !== 'instruction-template'}>
<InstructionTemplate
<div class:hide={selectedTab !== 'instruction-agent'}>
<InstructionAgent
agents={agents}
disabled={isThinking}
on:agentSelected={e => onAgentSelected(e)}
on:selectAgent={e => onAgentSelected(e)}
/>
</div>
<div class:hide={selectedTab !== 'instruction-llm'}>
Expand All @@ -310,7 +327,7 @@
disabled={isThinking}
selectedProvider={selectedProvider}
selectedModel={selectedModel}
on:llmSelected={e => onLlmSelected(e)}
on:selectLlm={e => onLlmSelected(e)}
/>
</div>
<div class:hide={selectedTab !== 'instruction-states'}>
Expand Down