diff --git a/src/lib/helpers/types/instructTypes.js b/src/lib/helpers/types/instructTypes.js index 102936a7..c60cd137 100644 --- a/src/lib/helpers/types/instructTypes.js +++ b/src/lib/helpers/types/instructTypes.js @@ -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] */ /** diff --git a/src/lib/services/instruct-service.js b/src/lib/services/instruct-service.js index 1c40229c..33f28915 100644 --- a/src/lib/services/instruct-service.js +++ b/src/lib/services/instruct-service.js @@ -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; } diff --git a/src/routes/page/instruction/instruction-components/instruction-template.svelte b/src/routes/page/instruction/instruction-components/instruction-agent.svelte similarity index 75% rename from src/routes/page/instruction/instruction-components/instruction-template.svelte rename to src/routes/page/instruction/instruction-components/instruction-agent.svelte index e7a9ffbe..4d3559c9 100644 --- a/src/routes/page/instruction/instruction-components/instruction-template.svelte +++ b/src/routes/page/instruction/instruction-components/instruction-agent.svelte @@ -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)) || []; @@ -61,7 +61,7 @@ } function dispatchEvent() { - svelteDispatch('agentSelected', { + svelteDispatch('selectAgent', { agent: selectedAgent || null, template: selectedTemplate || null }); @@ -73,12 +73,6 @@
Agent
- ({ label: x.provider, value: x.provider @@ -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 }); } @@ -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)} /> diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte index dfc25921..eb43dec3 100644 --- a/src/routes/page/instruction/testing/+page.svelte +++ b/src/routes/page/instruction/testing/+page.svelte @@ -3,7 +3,7 @@ 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'; @@ -11,12 +11,12 @@ 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; @@ -25,12 +25,13 @@ /** @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; @@ -38,6 +39,7 @@ let instruction = ''; let result = ''; let elapsedTime = ''; + let errorText = 'Please select an agent to proceed!'; /** @type {import('$agentTypes').AgentModel | null} */ let selectedAgent = null; @@ -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; @@ -167,7 +179,7 @@ - +
@@ -244,13 +256,19 @@
- resetInstruction()} - /> + /> --> +
+ +
+ +
Please select an agent to proceed!
+
@@ -264,20 +282,19 @@ class='form-control knowledge-textarea' rows={19} maxlength={maxLength} - disabled={isThinking} - placeholder={'Enter instruction...'} + disabled + placeholder={''} bind:value={instruction} /> -
+
- -
- + onAgentSelected(e)} + on:selectAgent={e => onAgentSelected(e)} />
@@ -310,7 +327,7 @@ disabled={isThinking} selectedProvider={selectedProvider} selectedModel={selectedModel} - on:llmSelected={e => onLlmSelected(e)} + on:selectLlm={e => onLlmSelected(e)} />