From a851aefd5ade545b4107097b6ecf44a0620a8973 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 20 Feb 2025 22:47:35 -0600
Subject: [PATCH 1/2] integrate chat completion endpoint

---
 src/lib/helpers/http.js                       |   3 +-
 src/lib/helpers/types/conversationTypes.js    |   6 -
 src/lib/helpers/types/instructTypes.js        |  17 ++
 src/lib/scss/app.scss                         |   1 +
 src/lib/scss/custom/pages/_instruction.scss   |  85 ++++++
 src/lib/services/api-endpoints.js             |   1 +
 src/lib/services/instruct-service.js          |  15 +-
 .../page/conversation/state-search.svelte     |   2 +-
 src/routes/page/instruction/+page.svelte      | 244 ++++++++++++++++++
 .../instruction-setting.svelte                | 180 +++++++++++++
 .../instruction-state.svelte                  |  94 +++++++
 svelte.config.js                              |   2 +
 12 files changed, 640 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/helpers/types/instructTypes.js
 create mode 100644 src/lib/scss/custom/pages/_instruction.scss
 create mode 100644 src/routes/page/instruction/+page.svelte
 create mode 100644 src/routes/page/instruction/instruction-components/instruction-setting.svelte
 create mode 100644 src/routes/page/instruction/instruction-components/instruction-state.svelte

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 46799e05..e5003153 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -74,7 +74,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/(.*?)/search', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/create', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
-        new RegExp('http(s*)://(.*?)/users', 'g')
+        new RegExp('http(s*)://(.*?)/users', 'g'),
+        new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g')
     ];
 
     /** @type {RegExp[]} */
diff --git a/src/lib/helpers/types/conversationTypes.js b/src/lib/helpers/types/conversationTypes.js
index 070b7b2a..577fe067 100644
--- a/src/lib/helpers/types/conversationTypes.js
+++ b/src/lib/helpers/types/conversationTypes.js
@@ -1,9 +1,3 @@
-/**
- * @typedef {Object} InstructMessageModel
- * @property {string} [instruction] - User provided prompt instead of predefined template.
- * @property {string} [template] - The template name.
- */
-
 /**
  * @typedef {Object} MessageConfig
  * @property {string} [taskId] - Optional task id.
diff --git a/src/lib/helpers/types/instructTypes.js b/src/lib/helpers/types/instructTypes.js
new file mode 100644
index 00000000..14054cf6
--- /dev/null
+++ b/src/lib/helpers/types/instructTypes.js
@@ -0,0 +1,17 @@
+/**
+ * @typedef {Object} InstructMessageModel
+ * @property {string} [instruction] - User provided prompt instead of predefined template.
+ * @property {string} [template] - The template name.
+ */
+
+/**
+ * @typedef {Object} IncomingInstructRequest
+ * @property {string} text
+ * @property {string} [agentId]
+ * @property {string} [instruction]
+ * @property {string} [provider]
+ * @property {string} [model]
+ * @property {import('$conversationTypes').ConversationStateModel[]} [states]
+ */
+
+export default {};
\ No newline at end of file
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index 604f0c2d..02692538 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -95,6 +95,7 @@ File: Main Css File
 @import "custom/pages/knowledgebase";
 @import "custom/pages/users";
 @import "custom/pages/roles";
+@import "custom/pages/instruction";
 
 // Common
 @import "custom/common/animation";
diff --git a/src/lib/scss/custom/pages/_instruction.scss b/src/lib/scss/custom/pages/_instruction.scss
new file mode 100644
index 00000000..3a06401c
--- /dev/null
+++ b/src/lib/scss/custom/pages/_instruction.scss
@@ -0,0 +1,85 @@
+.instruction-container {
+    .text-count {
+        margin-top: 2px;
+        font-size: 10px;
+    }
+
+    .instruction-result-container {
+        .instruction-result-body {
+            font-size: 15px;
+            padding: 5px 10px;
+            overflow-y: auto;
+            max-height: 500px;
+            scrollbar-width: thin;
+        }
+    }
+}
+
+.instruction-border {
+    border: 1px dashed var(--bs-primary);
+    border-radius: 5px;
+}
+
+.instruct-header {
+    font-size: 17px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.instruct-text-header {
+    font-size: 17px;
+    display: flex;
+    gap: 5px;
+}
+
+.instruct-setting-container {
+    display: flex;
+    flex-wrap: wrap;
+
+    .instruct-setting-section {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    @media (max-width: 992px) {
+        .instruct-setting-section {
+            margin-top: 10px;
+        }
+
+        .instruction-gap {
+            margin-top: 10px;
+        }
+    }
+
+    .instruct-setting-item {
+        display: flex;
+        justify-content: center;
+
+        .instruct-setting-dropdown {
+            width: 60%;
+        }
+
+        @media (max-width: 992px) {
+            .instruct-setting-dropdown {
+                width: 100%;
+            }
+        }
+    }
+}
+
+.instruct-setting-padding {
+    padding: 20px 10px;
+}
+
+.instruct-state-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .instruct-state-item {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+    }
+}
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 024db209..fca17e29 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -44,6 +44,7 @@ export const endpoints = {
 
     // agent instruct
     instructCompletionUrl: `${host}/instruct/{agentId}`,
+    chatCompletionUrl: `${host}/instruct/chat-completion`,
 
     // agent realtime interaction
     agentInitRealtimeSessionUrl: `${host}/agent/{agentId}/realtime/session`,
diff --git a/src/lib/services/instruct-service.js b/src/lib/services/instruct-service.js
index b8c9963c..f9bf8ff3 100644
--- a/src/lib/services/instruct-service.js
+++ b/src/lib/services/instruct-service.js
@@ -5,9 +5,20 @@ import axios from 'axios';
 /**
  * Execute agent instruction by template or user provided prompt.
  * @param {string} agentId
- * @param {import('$conversationTypes').InstructMessageModel} instruction
+ * @param {import('$instructTypes').InstructMessageModel} instruction
  */
 export async function executeAgentInstruction(agentId, instruction) {
     let url = replaceUrl(endpoints.instructCompletionUrl, {agentId: agentId});
     await axios.post(url, instruction);
-}
\ No newline at end of file
+}
+
+
+/**
+ * Execute chat completion.
+ * @param {import('$instructTypes').IncomingInstructRequest} request
+ */
+export async function sendChatCompletion(request) {
+    const url = endpoints.chatCompletionUrl;
+    const response = await axios.post(url, request);
+    return response.data;
+}
diff --git a/src/routes/page/conversation/state-search.svelte b/src/routes/page/conversation/state-search.svelte
index 9067ace2..7296ae1f 100644
--- a/src/routes/page/conversation/state-search.svelte
+++ b/src/routes/page/conversation/state-search.svelte
@@ -53,7 +53,7 @@
                     placeholder="Enter a value"
                 />
             </div>
-            <div class="state-delete line-align-center" style="flex: 0 0 13px;">
+            <div class="line-align-center" style="flex: 0 0 13px;">
                 <div>
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/src/routes/page/instruction/+page.svelte b/src/routes/page/instruction/+page.svelte
new file mode 100644
index 00000000..d6402939
--- /dev/null
+++ b/src/routes/page/instruction/+page.svelte
@@ -0,0 +1,244 @@
+<script>
+    import { onMount } from 'svelte';
+    import { fly } from 'svelte/transition';
+	import { _ } from 'svelte-i18n';
+	import util from "lodash";
+	import { Button, Col, Row } 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 InstructionSetting from './instruction-components/instruction-setting.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';
+
+    const maxLength = 64000;
+
+    let isLoading = false;
+    let isThinking = false;
+    let requestDone = false;
+    
+    let text = '';
+    let instruction = '';
+    let result = '';
+    let elapsedTime = '';
+
+    /** @type {import('$agentTypes').AgentModel | null} */
+    let selectedAgent = null;
+    
+    /** @type {import('$agentTypes').AgentModel[]} */
+    let agents = [];
+
+    /** @type {any[]} */
+    let states = [
+        { key: '', value: ''}
+    ];
+
+    onMount(async () => {
+        try {
+            isLoading = true;
+            const pagedAgents = await getAgents({ pager: { page: 1, size: 1000, count: 0 } });
+            agents = pagedAgents.items || [];
+        } catch {
+            agents = [];
+        } finally {
+            isLoading = false;
+        }
+    });
+
+
+    function sendRequest() {
+        isThinking = true;
+        requestDone = false;
+        elapsedTime = '';
+        const formattedStates = formatStates(states);
+        const start = new Date();
+        sendChatCompletion({
+            text: util.trim(text),
+            instruction: util.trim(instruction),
+            provider: 'openai',
+            model: 'gpt-4o-mini',
+            states: formattedStates
+        }).then(res => {
+            result = res || '';
+        }).finally(() => {
+            isThinking = false;
+            requestDone = true;
+            const gap = new Date().getTime() - start.getTime();
+            elapsedTime = `${(gap / 1000).toFixed(3)}s`;
+        });
+    }
+
+    /** @param {any[]} states */
+    function formatStates(states) {
+        return states?.filter(x => !!util.trim(x.key) && !!util.trim(x.value)).map(x => {
+            return {
+                key: util.trim(x.key),
+                value: util.trim(x.value)
+            };
+        }) || [];
+    }
+
+    /** @param {KeyboardEvent} e */
+	function pressKey(e) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isLoading) {
+			return;
+		}
+
+		if (e.key === 'Enter') {
+			e.preventDefault();
+		}
+
+		sendRequest();
+	}
+
+    function closeResponse() {
+        requestDone = false;
+        result = '';
+        elapsedTime = ''
+    }
+
+    function resetInstruction() {
+        instruction = '';
+    }
+
+    /** @param {any} e */
+    function onAgentSelected(e) {
+        selectedAgent = e.detail.selectedAgent || null;
+        instruction = selectedAgent?.instruction || '';
+    }
+
+    /** @param {any} e */
+    function onTemplateSelected(e) {
+        const template = e.detail.selectedTemplate || null;
+        let text = template?.content;
+        if (!template) {
+            text = selectedAgent?.instruction;
+        }
+        instruction = text || '';
+    }
+    
+</script>
+
+<HeadTitle title="{$_('Instruction')}" />
+<Breadcrumb pagetitle="{$_('Instruction')}" title="{$_('Instruction')}"/>
+<LoadingToComplete isLoading={isLoading} />
+
+<div class="d-xl-flex">
+	<div class="w-100">
+        <div class="instruction-container mb-4">
+            <textarea
+                class='form-control knowledge-textarea'
+                rows={8}
+                maxlength={maxLength}
+                disabled={isThinking}
+                placeholder={'Start typing here...'}
+                bind:value={text}
+                on:keydown={(e) => pressKey(e)}
+            />
+            <div class="text-secondary text-count" style="display: flex; justify-content: space-between;">
+                <div>
+                    {#if elapsedTime}
+                        {`Elapsed time: ${elapsedTime}`}
+                    {/if}
+                </div>
+                <div>{text?.length || 0}/{maxLength}</div>
+            </div>
+        
+            <div class="mt-2 text-end">
+                <Button
+                    color="primary"
+                    disabled={!text || util.trim(text).length === 0 || isThinking}
+                    on:click={() => sendRequest()}
+                >
+                    {'Send'}
+                </Button>
+            </div>
+        
+            {#if isThinking}
+                <div class="knowledge-loader mt-4">
+                    <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+                </div>
+            {:else if requestDone && !!result}
+                <div
+                    class="instruction-result-container mt-3"
+                    in:fly={{ y: -10, duration: 500 }}
+                >
+                    <div class="instruct-header text-primary fw-bold">
+                        <div>{'Response'}</div>
+                        <div>
+                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <i
+                                class="mdi mdi-close-thick text-danger clickable"
+                                on:click={() => closeResponse()}
+                            />
+                        </div>
+                    </div>
+                    <div class="instruction-result-body instruction-section instruction-border mt-2">
+                        <Markdown containerClasses={'markdown-dark text-dark'} text={result} rawText />
+                    </div>
+                </div>
+            {:else if requestDone && !result}
+                <div class="mt-3">
+                    <h4 class="text-secondary text-center">{"Ehhh, no idea..."}</h4>
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+
+<div class="d-xl-flex mt-3">
+    <div class="w-100">
+        <InstructionSetting
+            disabled={isThinking}
+            agents={agents}
+            on:agentSelected={e => onAgentSelected(e)}
+            on:templateSelected={e => onTemplateSelected(e)}
+        />
+    </div>
+</div>
+
+
+<div class="d-xl-flex mt-4 mb-5">
+	<div class="w-100">
+        <Row class="instruct-setting-container">
+            <Col lg="9">
+                <div>
+                    <div class="instruct-text-header text-primary fw-bold mb-2">
+                        <div class="line-align-center">
+                            {'Instruction'}
+                        </div>
+                        <div class="line-align-center">
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <i
+                                class="mdi mdi-refresh text-primary clickable"
+                                data-bs-toggle="tooltip"
+                                data-bs-placement="bottom"
+                                title={'Reset'}
+                                on:click={e => resetInstruction()}
+                            />
+                        </div>
+                    </div>
+                    <div class="instruct-setting-section instruction-border instruct-setting-padding">
+                        <textarea
+                            class='form-control knowledge-textarea'
+                            rows={19}
+                            maxlength={maxLength}
+                            disabled={isThinking}
+                            placeholder={'Start typing here...'}
+                            bind:value={instruction}
+                        />
+                    </div>
+                </div>
+            </Col>
+            <Col lg="3">
+                <InstructionState bind:states={states} disabled={isThinking} />
+            </Col>
+        </Row>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-setting.svelte b/src/routes/page/instruction/instruction-components/instruction-setting.svelte
new file mode 100644
index 00000000..26df6bc2
--- /dev/null
+++ b/src/routes/page/instruction/instruction-components/instruction-setting.svelte
@@ -0,0 +1,180 @@
+<script>
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { fly } from 'svelte/transition';
+	import { _ } from 'svelte-i18n';
+	import { Col, Row, Button } from '@sveltestrap/sveltestrap';
+
+
+    const svelteDispatch = createEventDispatcher();
+
+    /** @type {import('$agentTypes').AgentModel[]} */
+    export let agents = [];
+
+    /** @type {any[]} */
+    export let providers = [];
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {boolean} */
+    let showSetting = true;
+
+    /** @type {any[]} */
+    let agentOptions = [];
+    /** @type {any[]} */
+    let templateOptions = [];
+    /** @type {any[]} */
+    let providerOptions = [];
+    /** @type {any[]} */
+    let modelOptions = [];
+
+    /** @type {import('$agentTypes').AgentModel | null} */
+    let selectedAgent = null;
+    /** @type {any} */
+    let selectedTemplate = null;
+    /** @type {any} */
+    let selectedProvider = null;
+    /** @type {any} */
+    let selectedModel = null;
+
+    $: {
+        agentOptions = collectAgentOptions(agents);
+    }
+
+    /**
+	 * @param {import('$agentTypes').AgentModel[]} agents
+	 */
+    function collectAgentOptions(agents) {
+        return agents?.map(x => ({
+            id: x.id,
+            name: x.name
+        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+    }
+
+    /** @param {any} e */
+    function selectAgent(e) {
+        const selected = e.target.value || null;
+        selectedTemplate = null;
+        selectedAgent = agents.find(x => x.id === selected) || null;
+        templateOptions = selectedAgent?.templates?.map(x => ({
+            id: x.name,
+            name: x.name,
+            content: x.content
+        })) || [];
+
+        svelteDispatch('agentSelected', {
+            selectedAgent: selectedAgent
+        });
+    }
+
+    /** @param {any} e */
+    function selectTemplate(e) {
+        const selected = e.target.value || null;
+        selectedTemplate = templateOptions.find(x => x.name === selected) || null;
+        svelteDispatch('templateSelected', {
+            selectedTemplate: selectedTemplate
+        });
+    }
+
+    /** @param {any} e */
+    function selectProvider(e) {
+
+    }
+
+    /** @param {any} e */
+    function selectModel(e) {
+
+    }
+</script>
+
+<div class="instruct-header text-primary fw-bold mb-2">
+    <div class="line-align-center">
+        {#if showSetting}
+            {'Settings'}
+        {/if}
+    </div>
+    <div>
+        <Button
+            color={showSetting ? 'secondary' : 'info'}
+            data-bs-toggle="tooltip"
+            data-bs-placement="bottom"
+            title={`${showSetting ? 'Close' : 'Open'} Settings`}
+            on:click={() => showSetting = !showSetting}
+        >
+            <div class="state-search-btn">
+                <div>
+                    {#if showSetting}
+                        <i class="bx bx-hide" />
+                    {:else}
+                        <i class="bx bx-cog" />
+                    {/if}
+                </div>
+            </div>
+        </Button>	
+    </div>
+</div>
+
+{#if showSetting}
+<div
+    in:fly={{ y: -10, duration: 500 }}
+    out:fly={{ y: -10, duration: 200 }}
+>
+    <Row class="instruct-setting-container">
+        <Col lg="6">
+            <div class="instruct-setting-section instruction-border instruct-setting-padding">
+                <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>
+                    </div>
+                </div>
+    
+                <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>
+                    </div>
+                </div>
+            </div>
+        </Col>
+    
+        <Col lg="6">
+            <div class="instruct-setting-section instruction-border instruct-setting-padding">
+                <div class="instruct-setting-item">
+                    <div class="instruct-setting-dropdown">
+                        <div class="text-primary fw-bold mb-1">LLM Provider</div>
+                        <select class="form-select" id="provider" value={selectedProvider?.id || null} disabled={disabled} on:change={e => selectProvider(e)}>
+                            <option value={null} disabled selected>{$_('Select Provider')}</option>
+                            {#each providerOptions as op}
+                                <option value={`${op.id}`} selected={op.id === selectedProvider?.id}>{$_(`${op.name}`)}</option>
+                            {/each}
+                        </select>
+                    </div>
+                </div>
+    
+                <div class="instruct-setting-item">
+                    <div class="instruct-setting-dropdown">
+                        <div class="text-primary fw-bold mb-1">LLM Model</div>
+                        <select class="form-select" id="model" value={selectedModel?.id || null} disabled={disabled} on:change={e => selectModel(e)}>
+                            <option value={null} disabled selected>{$_('Select Model')}</option>
+                            {#each modelOptions as op}
+                                <option value={`${op.id}`} selected={op.id === selectedModel?.id}>{$_(`${op.name}`)}</option>
+                            {/each}
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </Col>
+    </Row>
+</div>
+{/if}
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-state.svelte b/src/routes/page/instruction/instruction-components/instruction-state.svelte
new file mode 100644
index 00000000..9c155b6d
--- /dev/null
+++ b/src/routes/page/instruction/instruction-components/instruction-state.svelte
@@ -0,0 +1,94 @@
+<script>
+    import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { Button, Input } from '@sveltestrap/sveltestrap';
+
+    const maxLength = 3000;
+    const limit = 8;
+
+    /** @type {{key: string, value: string | null}[]} */
+    export let states = [];
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+
+    /** @param {number} idx */
+    function removeState(idx) {
+        if (disabled) return;
+
+        states = states.filter((_, index) => index !== idx);
+    }
+
+    function addState() {
+        states = [
+            ...states,
+            { key: '', value: ''}
+        ];
+    }
+</script>
+
+
+<div class="instruction-gap">
+    <div class="instruct-header text-primary fw-bold mb-2">
+        {'States'}
+    </div>
+    <div class="instruct-setting-section instruction-border instruct-setting-padding">
+        <div class="instruct-state-container">
+            {#each states as state, idx}
+                <div class="instruct-state-item">
+                    <div>
+                        {#if idx === 0}
+                        <div class="text-primary mb-1">
+                            {'Key'}
+                        </div>
+                        {/if}
+                        <Input
+                            type="text"
+                            bind:value={state.key}
+                            maxlength={maxLength}
+                            disabled={disabled}
+                            placeholder="Enter a state"
+                        />
+                    </div>
+                    <div>
+                        {#if idx === 0}
+                        <div class="text-primary mb-1">
+                            {'Value'}
+                        </div>
+                        {/if}
+                        <Input
+                            type="text"
+                            bind:value={state.value}
+                            maxlength={maxLength}
+                            disabled={disabled}
+                            placeholder="Enter a value"
+                        />
+                    </div>
+                    <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '0px'}`}>
+                        <div>
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <i
+                                class="bx bx-no-entry text-danger clickable"
+                                on:click={() => removeState(idx)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            {/each}
+            {#if states.length < limit}
+            <div class="text-center">
+                <Button 
+                    color="link"
+                    style="padding-left: 0px;"
+                    disabled={disabled}
+                    on:click={() => addState()}
+                >
+                    Add +
+                </Button>
+            </div>
+            {/if}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index ae998f5b..61d9bd45 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -17,6 +17,7 @@ const config = {
 			$roleTypes: './src/lib/helpers/types/roleTypes.js',
 			$pluginTypes: './src/lib/helpers/types/pluginTypes.js',
 			$realtimeTypes: './src/lib/helpers/types/realtimeTypes.js',
+			$instructTypes: './src/lib/helpers/types/instructTypes.js'
 		},
 
 		// for static deployment
@@ -51,6 +52,7 @@ const config = {
 				"/page/agent/[agentId]",
 				"/page/agent/[agentId]/build",
 				"/page/agent/[agentId]/train",
+				"/page/instruction",
 				"/page/conversation",
 				"/page/conversation/[conversationId]",
 				"/page/task",

From 3751aa61b5f10b5ce21abf58ddb00f3cd49531a6 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Fri, 21 Feb 2025 11:37:50 -0600
Subject: [PATCH 2/2] complete

---
 src/lib/helpers/enums.js                      | 11 ++-
 src/lib/helpers/types/commonTypes.js          | 13 ++++
 src/lib/services/api-endpoints.js             |  1 +
 src/lib/services/llm-provider-service.js      | 20 +++++
 src/routes/page/instruction/+page.svelte      | 42 +++++++---
 .../instruction-setting.svelte                | 76 +++++++++++++++----
 6 files changed, 137 insertions(+), 26 deletions(-)

diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index a223b674..6007e0a0 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -164,4 +164,13 @@ const globalEvent = {
     Search: "search",
     Chat: "chat"
 };
-export const GlobalEvent = Object.freeze(globalEvent);
\ No newline at end of file
+export const GlobalEvent = Object.freeze(globalEvent);
+
+const llmModelType = {
+    Text: 1,
+    Chat: 2,
+    Image: 3,
+    Embedding: 4,
+    Audio: 5
+};
+export const LlmModelType = Object.freeze(llmModelType);
\ No newline at end of file
diff --git a/src/lib/helpers/types/commonTypes.js b/src/lib/helpers/types/commonTypes.js
index 009a8711..10a1188b 100644
--- a/src/lib/helpers/types/commonTypes.js
+++ b/src/lib/helpers/types/commonTypes.js
@@ -24,6 +24,19 @@
  * @property {T[]} items - Items.
  */
 
+/**
+ * @typedef {Object} LlmConfigOption
+ * @property {number?} [type]
+ * @property {boolean?} [multiModal]
+ * @property {boolean?} [imageGeneration]
+ */
+
+/**
+ * @typedef {Object} LlmConfig
+ * @property {string} provider
+ * @property {LlmModelSetting[]} models
+ */
+
 /**
  * @typedef {Object} LlmModelSetting
  * @property {string} name
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index fca17e29..ddcf3e20 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -74,6 +74,7 @@ export const endpoints = {
     // LLM provider
     llmProvidersUrl: `${host}/llm-providers`,
     llmProviderModelsUrl: `${host}/llm-provider/{provider}/models`,
+    llmConfigsUrl: `${host}/llm-configs`,
 
     // logging
     loggingFullLogUrl: `${host}/logger/full-log`,
diff --git a/src/lib/services/llm-provider-service.js b/src/lib/services/llm-provider-service.js
index 025ab061..7d15c608 100644
--- a/src/lib/services/llm-provider-service.js
+++ b/src/lib/services/llm-provider-service.js
@@ -21,4 +21,24 @@ export async function getLlmProviderModels(provider) {
     let url = replaceUrl(endpoints.llmProviderModelsUrl, {provider: provider});
     const response = await axios.get(url);
     return response.data;
+}
+
+
+/**
+ * Get llm configs
+ * @param {import('$commonTypes').LlmConfigOption?} [options]
+ * @returns {Promise<import('$commonTypes').LlmConfig[]>}
+ */
+export async function getLlmConfigs(options = null) {
+    const url = endpoints.llmConfigsUrl;
+    const response = await axios.get(url, {
+        params: {
+            options: options
+        },
+        paramsSerializer: {
+            dots: true,
+            indexes: null,
+        }
+    });
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/routes/page/instruction/+page.svelte b/src/routes/page/instruction/+page.svelte
index d6402939..33c42a57 100644
--- a/src/routes/page/instruction/+page.svelte
+++ b/src/routes/page/instruction/+page.svelte
@@ -13,8 +13,12 @@
 	import { getAgents } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import { sendChatCompletion } from '$lib/services/instruct-service';
+	import { getLlmConfigs } from '$lib/services/llm-provider-service';
+	import { LlmModelType } from '$lib/helpers/enums';
 
     const maxLength = 64000;
+    const DEFAULT_PROVIDER = 'openai';
+    const DEFAULT_MODEL = 'gpt-4o-mini';
 
     let isLoading = false;
     let isThinking = false;
@@ -27,10 +31,19 @@
 
     /** @type {import('$agentTypes').AgentModel | null} */
     let selectedAgent = null;
+
+    /** @type {string | null} */
+    let selectedProvider = null;
+
+    /** @type {string | null} */
+    let selectedModel = null;
     
     /** @type {import('$agentTypes').AgentModel[]} */
     let agents = [];
 
+    /** @type {import('$commonTypes').LlmConfig[]} */
+    let llmConfigs = [];
+
     /** @type {any[]} */
     let states = [
         { key: '', value: ''}
@@ -41,6 +54,7 @@
             isLoading = true;
             const pagedAgents = await getAgents({ pager: { page: 1, size: 1000, count: 0 } });
             agents = pagedAgents.items || [];
+            llmConfigs = await getLlmConfigs({ type: LlmModelType.Chat });
         } catch {
             agents = [];
         } finally {
@@ -56,10 +70,11 @@
         const formattedStates = formatStates(states);
         const start = new Date();
         sendChatCompletion({
-            text: util.trim(text),
-            instruction: util.trim(instruction),
-            provider: 'openai',
-            model: 'gpt-4o-mini',
+            text: util.trim(text) || '',
+            instruction: util.trim(instruction) || null,
+            agentId: selectedAgent?.id,
+            provider: selectedProvider || DEFAULT_PROVIDER,
+            model: selectedModel || DEFAULT_MODEL,
             states: formattedStates
         }).then(res => {
             result = res || '';
@@ -108,18 +123,20 @@
     function onAgentSelected(e) {
         selectedAgent = e.detail.selectedAgent || null;
         instruction = selectedAgent?.instruction || '';
-    }
 
-    /** @param {any} e */
-    function onTemplateSelected(e) {
         const template = e.detail.selectedTemplate || null;
-        let text = template?.content;
-        if (!template) {
-            text = selectedAgent?.instruction;
+        if (!!template) {
+            instruction = template?.content || '';
         }
-        instruction = text || '';
+
+        onLlmSelected(e);
     }
     
+    /** @param {any} e */
+    function onLlmSelected(e) {
+        selectedProvider = e.detail.selectedProvider || null;
+        selectedModel = e.detail.selectedModel || '';
+    }
 </script>
 
 <HeadTitle title="{$_('Instruction')}" />
@@ -196,8 +213,9 @@
         <InstructionSetting
             disabled={isThinking}
             agents={agents}
+            llmConfigs={llmConfigs}
             on:agentSelected={e => onAgentSelected(e)}
-            on:templateSelected={e => onTemplateSelected(e)}
+            on:llmSelected={e => onLlmSelected(e)}
         />
     </div>
 </div>
diff --git a/src/routes/page/instruction/instruction-components/instruction-setting.svelte b/src/routes/page/instruction/instruction-components/instruction-setting.svelte
index 26df6bc2..475d5dbf 100644
--- a/src/routes/page/instruction/instruction-components/instruction-setting.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-setting.svelte
@@ -7,11 +7,14 @@
 
     const svelteDispatch = createEventDispatcher();
 
+    const DEFAULT_PROVIDER = 'openai';
+    const DEFAULT_MODEL = 'gpt-4o-mini';
+
     /** @type {import('$agentTypes').AgentModel[]} */
     export let agents = [];
 
-    /** @type {any[]} */
-    export let providers = [];
+    /** @type {import('$commonTypes').LlmConfig[]} */
+    export let llmConfigs = [];
 
     /** @type {boolean} */
     export let disabled = false;
@@ -28,62 +31,109 @@
     /** @type {any[]} */
     let modelOptions = [];
 
-    /** @type {import('$agentTypes').AgentModel | null} */
+    /** @type {import('$agentTypes').AgentModel?} */
     let selectedAgent = null;
     /** @type {any} */
     let selectedTemplate = null;
-    /** @type {any} */
+    /** @type {import('$commonTypes').LlmConfig?} */
     let selectedProvider = null;
     /** @type {any} */
     let selectedModel = null;
 
     $: {
-        agentOptions = collectAgentOptions(agents);
+        collectAgentOptions(agents);
+        collectLlmOptions(llmConfigs);
     }
 
     /**
 	 * @param {import('$agentTypes').AgentModel[]} agents
 	 */
     function collectAgentOptions(agents) {
-        return agents?.map(x => ({
+        agentOptions = agents?.map(x => ({
             id: x.id,
             name: x.name
         }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
     }
 
+    /** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
+    function collectLlmOptions(llmConfigs) {
+        providerOptions = llmConfigs?.map(x => ({
+            id: x.provider,
+            name: x.provider
+        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+    }
+
     /** @param {any} e */
     function selectAgent(e) {
         const selected = e.target.value || null;
         selectedTemplate = null;
-        selectedAgent = agents.find(x => x.id === selected) || null;
+        selectedAgent = agents?.find(x => x.id === selected) || null;
         templateOptions = selectedAgent?.templates?.map(x => ({
             id: x.name,
             name: x.name,
             content: x.content
         })) || [];
 
+        const provider = selectedAgent?.llm_config?.provider || DEFAULT_PROVIDER;
+        const model = selectedAgent?.llm_config?.model || DEFAULT_MODEL;
+        selectedProvider = llmConfigs?.find(x => x.provider === provider) || null;
+        onProviderChanged(model);
+
         svelteDispatch('agentSelected', {
-            selectedAgent: selectedAgent
+            selectedAgent: selectedAgent,
+            selectedTemplate: selectedTemplate,
+            selectedProvider: selectedProvider?.provider,
+            selectedModel: selectedModel?.name
         });
     }
 
     /** @param {any} e */
     function selectTemplate(e) {
         const selected = e.target.value || null;
-        selectedTemplate = templateOptions.find(x => x.name === selected) || null;
-        svelteDispatch('templateSelected', {
-            selectedTemplate: selectedTemplate
+        selectedTemplate = templateOptions.find(x => x.id === selected) || null;
+        svelteDispatch('agentSelected', {
+            selectedAgent: selectedAgent,
+            selectedTemplate: selectedTemplate,
+            selectedProvider: selectedProvider?.provider,
+            selectedModel: selectedModel?.name
         });
     }
 
     /** @param {any} e */
     function selectProvider(e) {
+        const selected = e.target.value || null;
+        selectedProvider = llmConfigs?.find(x => x.provider === selected) || null;
+        onProviderChanged();
 
+        svelteDispatch('llmSelected', {
+            selectedProvider: selectedProvider?.provider,
+            selectedModel: selectedModel?.name
+        });
     }
 
     /** @param {any} e */
     function selectModel(e) {
+        const selected = e.target.value || null;
+        selectedModel = modelOptions.find(x => x.id === selected);
+
+        svelteDispatch('llmSelected', {
+            selectedProvider: selectedProvider?.provider,
+            selectedModel: selectedModel?.name
+        });
+    }
+
+    /** @param {any?} targetModel */
+    function onProviderChanged(targetModel = null) {
+        modelOptions = selectedProvider?.models?.map(x => ({
+            id: x.name,
+            name: x.name
+        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
 
+        if (!!targetModel) {
+            selectedModel = modelOptions.find(x => x.name === targetModel) || null;
+        } else {
+            selectedModel = modelOptions.length > 0 ? modelOptions[0] : null;
+        }
     }
 </script>
 
@@ -153,10 +203,10 @@
                 <div class="instruct-setting-item">
                     <div class="instruct-setting-dropdown">
                         <div class="text-primary fw-bold mb-1">LLM Provider</div>
-                        <select class="form-select" id="provider" value={selectedProvider?.id || null} disabled={disabled} on:change={e => selectProvider(e)}>
+                        <select class="form-select" id="provider" value={selectedProvider?.provider || null} disabled={disabled} on:change={e => selectProvider(e)}>
                             <option value={null} disabled selected>{$_('Select Provider')}</option>
                             {#each providerOptions as op}
-                                <option value={`${op.id}`} selected={op.id === selectedProvider?.id}>{$_(`${op.name}`)}</option>
+                                <option value={`${op.id}`} selected={op.id === selectedProvider?.provider}>{$_(`${op.name}`)}</option>
                             {/each}
                         </select>
                     </div>