Merge pull request #190 from iceljc/features/refine-chat-window

refine agent detail page

src/lib/common/nav-bar/NavBar.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <ul
-    class="{disableDefaultStyles ? '' : 'nav nav-tabs nav-tabs-custom nav-justified nav-container'} {containerClasses}"
+    class="nav nav-tabs {disableDefaultStyles ? '' : 'nav-tabs-default nav-container'} {containerClasses}"
     style={`${containerStyles}`}
     id={id}
     role={role}

src/lib/common/nav-bar/NavItem.svelte

@@ -65,7 +65,7 @@
     role={containerRole}
 >
     <button
-        class="{disableDefaultNavBtnStyles ? '' : 'nav-link tab-btn'} {navBtnClasses}"
+        class="{disableDefaultNavBtnStyles ? '' : 'tab-btn nav-link'} {navBtnClasses}"
         class:active={active}
         style={`${navBtnStyles}`}
         id={navBtnId}

src/lib/helpers/types/types.js

@@ -87,6 +87,12 @@
  * @property {number} max_recursion_depth
  */
 
+/**
+ * @typedef {Object} ChannelInstruction
+ * @property {string} channel 
+ * @property {string} instruction
+ */
+
 /**
  * @typedef {Object} LlmModelSetting
  * @property {string} name
@@ -115,6 +121,7 @@
  * @property {string} description - Agent description.
  * @property {string} type - Agent type
  * @property {string} instruction - System prompt
+ * @property {ChannelInstruction[]} channel_instructions - Channel instructions
  * @property {boolean} disabled
  * @property {boolean} is_public
  * @property {boolean} is_host

src/lib/scss/custom/components/_nav.scss

@@ -19,12 +19,13 @@
 }
 
 
-.nav-tabs-custom {
+.nav-tabs-default {
   border-bottom: 2px solid var(--#{$prefix}border-color);
 
   .nav-item {
     position: relative;
     color: var(--#{$prefix}body-color);
+
     .nav-link {
       border: none;
 
@@ -40,21 +41,57 @@
         transform: scale(0);
       }
 
-      &.active{
+      &.active {
         color: $primary;
-        &:after{
+
+        &:after {
           transform: scale(1);
         }
       }
+    }
+  }
+}
+
+.nav-tabs-secondary {
+  border-bottom: 2px solid var(--#{$prefix}border-color);
+
+  .nav-item {
+    position: relative;
+    border-radius: 3px;
+
+    .nav-link {
+      border: none;
+      color: var(--#{$prefix}secondary);
+      text-transform: capitalize;
+
+      &::after {
+        content: "";
+        background: $secondary;
+        height: 2px;
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: -1px;
+        transition: all 250ms ease 0s;
+        transform: scale(0);
+      }
+
+      &.active {
+        color: $primary;
 
+        &:after {
+          background: $primary;
+          transform: scale(1);
+        }
+      }
     }
   }
 }
 
 
 // vertical nav
 
-.vertical-nav{
+.vertical-nav {
   .nav{
       .nav-link{
           padding: 24px 16px;

src/lib/scss/custom/pages/_agent.scss

@@ -40,6 +40,37 @@
     }
 }
 
+.agent-detail-sections {
+    .section-min-width {
+        min-width: 200px;
+    }
+
+    .agent-detail-section {
+        height: 800px;
+        margin-top: 10px;
+
+        @media (max-width: 423px) {
+            height: fit-content;
+        }
+
+        .agent-prompt-container {
+            height: 100%;
+
+            .agent-prompt-header {
+                background-color: white;
+                padding: 20px;
+            }
+        }
+    }
+}
+
+
+
+.agent-detail-overflow {
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
 .routing-rule-container {
     .rule-header {
         margin-top: 5px;

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

@@ -70,6 +70,7 @@
             ...agent,
             description: agent.description || '',
             instruction: agent.instruction || '',
+            channel_instructions: agent.channel_instructions || [],
             profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
             utilities: agent.utilities?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || []
         };
@@ -130,27 +131,37 @@
 <LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} />
 
 {#if agent}
-<Row>
-    <Col style="flex: 30%;">
-        <AgentOverview agent={agent} profiles={agent.profiles || []} utilities={agent.utilities || []} />
-        <AgentLlmConfig agent={agent} />
-        {#if agent.routing_rules?.length > 0}
-            <AgentRouting agent={agent} />
-        {/if}
-    </Col>
-    <Col style="flex: 40%;">
-        <AgentPrompt agent={agent} />
-    </Col>
-    <Col style="flex: 30%;">
+    <Row class="agent-detail-sections">
+        <Col class="section-min-width" style="flex: 30%;">
+            <div class="agent-detail-section agent-detail-overflow">
+                <AgentOverview agent={agent} profiles={agent.profiles || []} utilities={agent.utilities || []} />
+            </div>
+        </Col>
+        <Col class="section-min-width" style="flex: 40%; ">
+            <div class="agent-detail-section">
+                <AgentPrompt agent={agent} />
+            </div>
+        </Col>
+        <Col class="section-min-width" style="flex: 30%;">
+            <div class="agent-detail-section agent-detail-overflow">
+                <AgentLlmConfig agent={agent} />
+                {#if agent.routing_rules?.length > 0}
+                    <AgentRouting agent={agent} />
+                {/if}
+            </div>
+        </Col>
+    </Row>
+
+    <Row class="mt-3">
         <AgentFunction bind:this={agentFunctionCmp} agent={agent} />
-    </Col>    
-</Row>
-    {#if !!agent?.editable}
-    <Row>
-        <div class="hstack gap-2 my-4">
-            <Button class="btn btn-soft-primary" on:click={() => updateCurrentAgent()}>{$_('Save Agent')}</Button>
-            <Button class="btn btn-danger" on:click={() => deleteCurrentAgent()}>{$_('Delete Agent')}</Button>
-        </div>
     </Row>
+
+    {#if !!agent?.editable}
+        <Row>
+            <div class="hstack gap-2 my-4">
+                <Button class="btn btn-soft-primary" on:click={() => updateCurrentAgent()}>{$_('Save Agent')}</Button>
+                <Button class="btn btn-danger" on:click={() => deleteCurrentAgent()}>{$_('Delete Agent')}</Button>
+            </div>
+        </Row>
     {/if}
 {/if}

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

@@ -21,7 +21,7 @@
                 responses: agent.responses,
                 templates: agent.templates
             }
-        }         
+        };
     });
 
     /**
@@ -40,8 +40,8 @@
 
 <style>
     .my-json-editor {
-      /* define a custom theme color */
-      --jse-theme-color: var(--bs-primary);
-      --jse-theme-color-highlight: #687177;
+        /* define a custom theme color */
+        --jse-theme-color: var(--bs-primary);
+        --jse-theme-color-highlight: #687177;
     }
 </style>

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

@@ -1,41 +1,111 @@
 <script>
-    import { Card, CardBody, Col, FormGroup, Label, Input } from '@sveltestrap/sveltestrap';
+    import { onMount } from 'svelte';
+    import { Card, CardBody, FormGroup, Label, Input, CardHeader } from '@sveltestrap/sveltestrap';
+    import NavBar from '$lib/common/nav-bar/NavBar.svelte';
+	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
     
     /** @type {import('$types').AgentModel} */
     export let agent;
+
+    const defaultChannel = "default";
+
+    /** @type {import('$types').ChannelInstruction} */
+    const defaultInstruction = {
+        channel: defaultChannel,
+        instruction: ''
+    };
+
+    /** @type {import('$types').ChannelInstruction[]} */
+    let local_instructions = [];
+
+    /** @type {import('$types').ChannelInstruction} */
+    let selected_instruction = { ...defaultInstruction };
+
+    onMount(() => {
+        local_instructions = [
+            {
+                channel: defaultChannel,
+                instruction: agent.instruction
+            },
+            ...agent.channel_instructions
+        ];
+
+        selected_instruction = local_instructions[0];
+    });
+
+    /** @param {string} channel */
+    function selectChannel(channel) {
+        if (channel === selected_instruction.channel) {
+            return;
+        }
+
+        selected_instruction = local_instructions.find(x => x.channel === channel) || { ...defaultInstruction };
+    }
+
+    /** @param {any} e */
+    function changePrompt(e) {
+        e.preventDefault();
+        const value = e.target.value;
+        selected_instruction.instruction = value || '';
+
+        if (selected_instruction.channel === defaultChannel) {
+            agent.instruction = selected_instruction.instruction;
+        }
+    }
 </script>
 
-<Card>
-    <CardBody class="border-bottom">
+<Card class="agent-prompt-container">
+    <CardHeader class="agent-prompt-header border-bottom">
         <div class="d-flex">
             <div class="flex-grow-1">
                 <h5 class="fw-semibold">{agent.name}</h5>
             </div>
         </div>
-    </CardBody>
+    </CardHeader>
     <CardBody>
         <FormGroup class="mb-3">
             <Label for="formmessage">Description:</Label>
             <Input
                 type="textarea"
                 id="formmessage"
                 class="form-control"
+                style="scrollbar-width: thin; resize: none;"
                 rows="4"
                 bind:value={agent.description}
                 placeholder="Enter your Message"
             />
         </FormGroup>
 
-        <FormGroup class="mb-3">
-            <Label for="formmessage">System Prompt:</Label>
+        <FormGroup class="mb-3" style="overflow-y: auto; scrollbar-width: none;">
+            <Label for="form-prompt">System Prompt:</Label>
+            {#if local_instructions.length > 1}
+            <NavBar
+                id={'agent-instruction-container'}
+                disableDefaultStyles
+                containerClasses={'nav-tabs-secondary'}
+            >
+                {#each local_instructions as inst, idx (idx) }
+                <NavItem
+                    containerStyles={`flex: 0 1 calc(100% / ${local_instructions.length})`}
+                    navBtnId={`${inst.channel}-prompt-tab`}
+                    dataBsTarget={`#${inst.channel}-prompt-tab-pane`}
+                    ariaControls={`${inst.channel}-prompt-tab-pane`}
+                    navBtnText={inst.channel}
+                    active={inst.channel === selected_instruction.channel}
+                    onClick={() => selectChannel(inst.channel)}
+                />
+                {/each}
+            </NavBar>
+            {/if}
             <Input
                 type="textarea"
-                id="formmessage"
+                id="form-prompt"
                 class="form-control"
-                style="scrollbar-width: thin;"
-                rows="20"
-                bind:value={agent.instruction}
-                placeholder="Enter your Message"
+                style="scrollbar-width: thin; resize: none;"
+                rows="24"
+                value={selected_instruction.instruction}
+                on:input={(e) => changePrompt(e)}
+                placeholder="Enter your Prompt"
             />
         </FormGroup>
     </CardBody>

src/routes/page/setting/+page.svelte

@@ -3,7 +3,6 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import { _ } from 'svelte-i18n';
     import {
-		Button,
 		Card,
 		CardBody,
 		CardText,
@@ -57,7 +56,7 @@
         <CardTitle class="h4">{$_('System & Plugin Settings')}</CardTitle>
         <p class="card-title-desc"></p>
 
-        <Nav tabs class="nav-tabs-custom nav-justified">
+        <Nav tabs class="nav-tabs-default nav-justified">
             {#each settings as tab}
             <NavItem id={tab}>
                 <NavLink