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

Improve the agent management UX #1014

Open
wants to merge 2 commits into
base: features/use-sidebar
Choose a base branch
from
Open
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
56 changes: 42 additions & 14 deletions src/interface/web/app/components/agentCard/agentCard.tsx
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we want to redirect not logged in users to sign-in before trying to edit a card. Right now I can fill all fields in an agent card but can't create it until logged in. This maybe annoying

Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,8 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
import ShareLink from "@/app/components/shareLink/shareLink";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export interface AgentData {
slug: string;
name: string;
Expand Down Expand Up @@ -427,7 +429,9 @@ export function AgentCard(props: AgentCardProps) {
</div>
{props.editCard ? (
<DialogContent
className={"lg:max-w-screen-lg overflow-y-scroll max-h-screen"}
className={
"lg:max-w-screen-lg py-4 overflow-y-scroll h-4/6 rounded-lg flex flex-col"
}
>
<DialogTitle>
Edit <b>{props.data.name}</b>
Expand Down Expand Up @@ -534,12 +538,13 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
{ name: "persona", label: "Personality" },
];

const advancedFields = [
{ name: "files", label: "Knowledge Base" },
const toolsFields = [
{ name: "input_tools", label: "Input Tools" },
{ name: "output_modes", label: "Output Modes" },
];

const knowledgeBaseFields = [{ name: "files", label: "Knowledge Base" }];

const customizationFields = [
{ name: "color", label: "Color" },
{ name: "icon", label: "Icon" },
Expand All @@ -548,9 +553,10 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
];

const formGroups = [
{ fields: basicFields, label: "Basic Settings" },
{ fields: customizationFields, label: "Customization & Access" },
{ fields: advancedFields, label: "Advanced Settings" },
{ fields: basicFields, label: "Basic Settings", tabName: "basic" },
{ fields: customizationFields, label: "Customization & Access", tabName: "customize" },
{ fields: knowledgeBaseFields, label: "Knowledge Base", tabName: "knowledge" },
{ fields: toolsFields, label: "Tools Settings", tabName: "tools" },
];

const fileInputRef = useRef<HTMLInputElement>(null);
Expand Down Expand Up @@ -749,7 +755,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control}
name="chat_model"
render={({ field }) => (
<FormItem className="space-y-1 grid gap-2">
<FormItem className="my-3 grid gap-2">
<FormLabel>Chat Model</FormLabel>
<FormDescription>
{!props.isSubscribed ? (
Expand Down Expand Up @@ -796,7 +802,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control}
name="privacy_level"
render={({ field }) => (
<FormItem className="space-y-1 grid gap-2">
<FormItem className="my-3 grid gap-2">
<FormLabel>
<div>Privacy Level</div>
</FormLabel>
Expand Down Expand Up @@ -1080,7 +1086,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control}
name="input_tools"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<FormItem className="flex flex-col gap-2 my-2">
<FormLabel>Restrict Input Tools</FormLabel>
<FormDescription>
Which knowledge retrieval tools should this agent be limited to?
Expand Down Expand Up @@ -1166,7 +1172,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control}
name="output_modes"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<FormItem className="flex flex-col gap-2 my-2">
<FormLabel>Restrict Output Modes</FormLabel>
<FormDescription>
Which output modes should this agent be limited to?
Expand Down Expand Up @@ -1252,10 +1258,32 @@ export function AgentModificationForm(props: AgentModificationFormProps) {

return (
<Form {...props.form}>
<form onSubmit={props.form.handleSubmit(handleSubmit)} className="space-y-6">
<div className="space-y-6">{formGroups[currentStep].label}</div>
{currentStep < formGroups.length &&
formGroups[currentStep].fields.map((field) => renderFormField(field.name))}
<form
onSubmit={props.form.handleSubmit(handleSubmit)}
className="space-y-6 h-full flex flex-col justify-between"
>
<Tabs defaultValue="basic" value={formGroups[currentStep].tabName}>
<TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-fit">
{formGroups.map((group) => (
<TabsTrigger
key={group.tabName}
value={group.tabName}
onClick={() =>
setCurrentStep(
formGroups.findIndex((g) => g.tabName === group.tabName),
)
}
>
{group.label}
</TabsTrigger>
))}
</TabsList>
{formGroups.map((group) => (
<TabsContent key={group.tabName} value={group.tabName}>
{group.fields.map((field) => renderFormField(field.name))}
</TabsContent>
))}
</Tabs>
<div className="flex justify-between mt-4">
<Button
type="button"
Expand Down
55 changes: 55 additions & 0 deletions src/interface/web/components/ui/tabs.tsx
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If all required fields aren't populated the save fails but i don't know which required fields I didn't fill. need to go through each tab to check that. Maybe good to add some something in the tab names to indicate that the fields in that tab need to be filled/fixed (e.g a * suffix so Customize => Customize *) or the tab becomes red

Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
"use client";

import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";

import { cn } from "@/lib/utils";

const Tabs = TabsPrimitive.Root;

const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className,
)}
{...props}
/>
));
TabsList.displayName = TabsPrimitive.List.displayName;

const TabsTrigger = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className,
)}
{...props}
/>
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

const TabsContent = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className,
)}
{...props}
/>
));
TabsContent.displayName = TabsPrimitive.Content.displayName;

export { Tabs, TabsList, TabsTrigger, TabsContent };
1 change: 1 addition & 0 deletions src/interface/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-tabs": "^1.1.2",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.6",
Expand Down
2 changes: 1 addition & 1 deletion src/interface/web/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -914,7 +914,7 @@
"@radix-ui/react-use-previous" "1.1.0"
"@radix-ui/react-use-size" "1.1.0"

"@radix-ui/react-tabs@^1.1.1":
"@radix-ui/react-tabs@^1.1.1", "@radix-ui/react-tabs@^1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.2.tgz#a72da059593cba30fccb30a226d63af686b32854"
integrity sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==
Expand Down
Loading