Allow to custom Host Agent

src/lib/common/LiveChatEntry.svelte

@@ -2,19 +2,15 @@
     import { fade } from 'svelte/transition';
     import { onMount } from 'svelte';
     import { PUBLIC_LIVECHAT_HOST, PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
-    import { getAgents } from '$lib/services/agent-service.js'
+    import { getSettingDetail } from '$lib/services/setting-service';
 
     let showChatIcon = false;
     let showChatBox = false;
     let chatUrl = PUBLIC_LIVECHAT_HOST;
 
-    /** @type {import('$types').AgentModel} */
-    let agent;
-
 	onMount(async () => {
-        let agents = await getAgents({isRouter: true});
-        agent = agents[0];
-        chatUrl = `${PUBLIC_LIVECHAT_HOST}/chat/${agent.id}`;
+        const agentSettings = await getSettingDetail("Agent");
+        chatUrl = `${PUBLIC_LIVECHAT_HOST}/chat/${agentSettings.hostAgentId}`;
         showChatIcon = true;
 	});
 

src/lib/helpers/types.js

@@ -55,13 +55,20 @@
  * @property {string} name
  * @property {string} content
  */
+
 /**
  * @typedef {Object} AgentLlmConfig
  * @property {boolean} is_inherit - Inherited from default Agent settings
  * @property {string} provider 
  * @property {string} model
  */
 
+/**
+ * @typedef {Object} LlmModelSetting
+ * @property {string} name
+ * @property {string} type
+ */
+
 /**
  * @typedef {Object} FunctionDef
  * @property {string} name 

src/lib/services/api-endpoints.js

@@ -34,6 +34,10 @@ export const endpoints = {
     conversationDetailUrl: `${host}/conversation/{conversationId}`,
     dialogsUrl: `${host}/conversation/{conversationId}/dialogs`,
 
+    // LLM provider
+    llmProvidersUrl: `${host}/llm-providers`,
+    llmProviderModelsUrl: `${host}/llm-provider/{provider}/models`,
+
     // logging
     loggingFullLogUrl: `${host}/logger/full-log`,
 

src/lib/services/llm-provider-service.js

@@ -0,0 +1,24 @@
+import { endpoints } from './api-endpoints.js';
+import { replaceUrl } from '$lib/helpers/http.js';
+import axios from 'axios';
+
+/**
+ * Get provider list
+ * @returns {Promise<string[]>}
+ */
+export async function getLlmProviders() {
+    let url = endpoints.llmProvidersUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
+/**
+ * Get provider model list
+ * @param {string} provider
+ * @returns {Promise<import('$types').LlmModelSetting[]>}
+ */
+export async function getLlmProviderModels(provider) {
+    let url = replaceUrl(endpoints.llmProviderModelsUrl, {provider: provider});
+    const response = await axios.get(url);
+    return response.data;
+}

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

@@ -34,14 +34,16 @@
 
 <Row>
     {#if agent}
-    <Col lg={4}>
+    <Col lg={3}>
         <AgentOverview agent={agent} />
         <AgentLlmConfig agent={agent} />
     </Col>
-    <Col lg={8}>
+    <Col lg={6}>
         <AgentPrompt agent={agent} />
-        <AgentFunction agent={agent} />
     </Col>
+    <Col lg={3}>
+        <AgentFunction agent={agent} />
+    </Col>    
     {/if}
 </Row>
 <Row>

src/routes/page/agent/[agentId]/agent-llm-config.svelte

@@ -1,14 +1,29 @@
 <script>
     import { Button, Card, CardBody, CardHeader, Col } from '@sveltestrap/sveltestrap';
+    import { getLlmProviders, getLlmProviderModels } from '$lib/services/llm-provider-service';
+    import { onMount } from 'svelte';
+
+    /** @type {string[]} */
+    let options = [];
 
-    let options = [
-        { id: 1, name: 'azure-openai' },
-        { id: 2, name: 'google-ai' },
-        { id: 3, name: 'llama-sharp' },
-    ]
     /** @type {import('$types').AgentModel} */
     export let agent;
+
+    /** @type {import('$types').LlmModelSetting[]} */
+    let models = []
+
     let config = agent.llm_config;
+
+    onMount(async () =>{
+        options = await getLlmProviders();
+        models = await getLlmProviderModels(config.provider);
+    });
+
+    /** @param {string} provider */
+    async function handleProviderChanged(provider) {
+        config.is_inherit = false;
+        models = await getLlmProviderModels(provider);
+    }
 </script>
 
 <Card>
@@ -24,9 +39,9 @@
         <div class="mb-3 row">
             <label class="col-md-3 col-form-label" for="example-large">Provider</label>
             <div class="col-md-9">
-                <select class="form-select" bind:value={config.provider} on:change={() => config.is_inherit = false}>
+                <select class="form-select" bind:value={config.provider} on:change={() => handleProviderChanged(config.provider)}>
                 {#each options as option}
-                    <option value={option.name}>{option.name}</option>
+                    <option value={option}>{option}</option>
                 {/each}
                 </select>
             </div>
@@ -37,7 +52,11 @@
                 Model
             </label>
             <div class="col-md-9">
-                <input class="form-control" type="text" bind:value={config.model} on:change={() => config.is_inherit = false}/>
+                <select class="form-select" bind:value={config.model} on:change={() => config.is_inherit = false}>
+                    {#each models as option}
+                        <option value={option.name}>{option.name}</option>
+                    {/each}
+                </select>                
             </div>
         </div>
     </CardBody>