Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refine agent detail page #190

Merged
merged 1 commit into from
Aug 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/common/nav-bar/NavBar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/common/nav-bar/NavItem.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
7 changes: 7 additions & 0 deletions src/lib/helpers/types/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,12 @@
* @property {number} max_recursion_depth
*/

/**
* @typedef {Object} ChannelInstruction
* @property {string} channel
* @property {string} instruction
*/

/**
* @typedef {Object} LlmModelSetting
* @property {string} name
Expand Down Expand Up @@ -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
Expand Down
45 changes: 41 additions & 4 deletions src/lib/scss/custom/components/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
Expand Down
31 changes: 31 additions & 0 deletions src/lib/scss/custom/pages/_agent.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
51 changes: 31 additions & 20 deletions src/routes/page/agent/[agentId]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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) || []
};
Expand Down Expand Up @@ -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}
8 changes: 4 additions & 4 deletions src/routes/page/agent/[agentId]/agent-function.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
responses: agent.responses,
templates: agent.templates
}
}
};
});

/**
Expand All @@ -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>
92 changes: 81 additions & 11 deletions src/routes/page/agent/[agentId]/agent-prompt.svelte
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 1 addition & 2 deletions src/routes/page/setting/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import HeadTitle from '$lib/common/HeadTitle.svelte';
import { _ } from 'svelte-i18n';
import {
Button,
Card,
CardBody,
CardText,
Expand Down Expand Up @@ -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
Expand Down
Loading