Features/refine chat window

src/lib/helpers/types.js

@@ -82,8 +82,9 @@
 /**
  * @typedef {Object} AgentLlmConfig
  * @property {boolean} is_inherit - Inherited from default Agent settings
- * @property {string} provider 
- * @property {string} model
+ * @property {string?} provider 
+ * @property {string?} model
+ * @property {number} max_recursion_depth
  */
 
 /**

src/lib/scss/custom/pages/_chat.scss

@@ -200,7 +200,7 @@
                     flex: 1 1 fit-content;
                     border-radius: 10px;
                     border-width: 2px;
-                    max-width: 100%;
+                    max-width: 45%;
                     margin-bottom: 0px;
 
                     .card-element-title {

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

@@ -76,7 +76,7 @@
         <AgentOverview agent={agent} />
         <AgentLlmConfig agent={agent} />
         {#if agent.routing_rules?.length > 0}
-        <AgentRouting agent={agent} />
+            <AgentRouting agent={agent} />
         {/if}
     </Col>
     <Col style="flex: 40%;">

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

@@ -1,30 +1,64 @@
 <script>
-    import { Button, Card, CardBody, CardHeader, Col } from '@sveltestrap/sveltestrap';
+    import { Button, Card, CardBody, CardHeader, Col, Input } from '@sveltestrap/sveltestrap';
     import { getLlmProviders, getLlmProviderModels } from '$lib/services/llm-provider-service';
     import { onMount } from 'svelte';
 
     /** @type {string[]} */
-    let options = [];
+    let providers = [];
 
     /** @type {import('$types').AgentModel} */
     export let agent;
 
     /** @type {import('$types').LlmModelSetting[]} */
-    let models = []
+    let models = [];
+
+    const lowerLimit = 1;
+    const upperLimit = 10;
 
     let config = agent.llm_config;
 
     onMount(async () =>{
-        options = await getLlmProviders();
-        models = await getLlmProviderModels(config.provider);
+        providers = await getLlmProviders();
+        providers = ['', ...providers]
+        if (!!config.provider) {
+            models = await getLlmProviderModels(config.provider);
+        }
     });
 
-    /** @param {string} provider */
-    async function handleProviderChanged(provider) {
+    /** @param {any} e */
+    async function changeProvider(e) {
+        const provider = e.target.value;
+        config.provider = provider || null;
+
+        if (!!!provider) {
+            models = [];
+            config.model = null;
+            return;
+        }
+
         config.is_inherit = false;
         models = await getLlmProviderModels(provider);
         config.model = models[0]?.name;
     }
+
+    /** @param {any} e */
+    function changeModel(e) {
+        config.is_inherit = false;
+        config.model = e.target.value || null;
+    }
+
+    /** @param {any} e */
+    function changeMaxRecursiveDepth(e) {
+        let value = Number(e.target.value) || 0;
+
+        if (value < lowerLimit) {
+            value = lowerLimit;
+        } else if (value > upperLimit) {
+            value = upperLimit;
+        }
+
+        config.max_recursion_depth = value;
+    }
 </script>
 
 <Card>
@@ -38,13 +72,15 @@
         </div>
 
         <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={() => handleProviderChanged(config.provider)}>
-                {#each options as option}
-                    <option value={option}>{option}</option>
-                {/each}
-                </select>
+            <label for="example-large" class="col-md-3 col-form-label">
+                Provider
+            </label>
+            <div class="col-md-9 config-item-container">
+                <Input type="select" value={config.provider} on:change={e => changeProvider(e)}>
+                    {#each providers as option}
+                        <option value={option}>{option}</option>
+                    {/each}
+                </Input>
             </div>
         </div>
 
@@ -53,12 +89,21 @@
                 Model
             </label>
             <div class="col-md-9">
-                <select class="form-select" bind:value={config.model} on:change={() => config.is_inherit = false}>
+                <Input type="select" value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
                     {#each models as option}
                         <option value={option.name}>{option.name}</option>
                     {/each}
-                </select>                
+                </Input>                
+            </div>
+        </div>
+
+        <div class="mb-3 row">
+            <label for="example-text-input" class="col-md-3 col-form-label">
+                Maximum recursive depth
+            </label>
+            <div class="col-md-9">
+                <Input type="number" min={lowerLimit} max={upperLimit} style="text-align: center;" value={config.max_recursion_depth} on:change={e => changeMaxRecursiveDepth(e)} />              
             </div>
         </div>
     </CardBody>
-</Card>
+</Card>

src/routes/page/agent/[agentId]/agent-prompt.svelte

@@ -32,6 +32,7 @@
                 type="textarea"
                 id="formmessage"
                 class="form-control"
+                style="scrollbar-width: thin;"
                 rows="20"
                 bind:value={agent.instruction}
                 placeholder="Enter your Message"