Skip to content

Commit

Permalink
Merge pull request #1014 from khoj-ai/features/improve-agent-management
Browse files Browse the repository at this point in the history
- Add support for seeing all steps of the agent modification flow via tabs at the top of the modal
- Separate knowledge base & tool selection into two separate parts
  • Loading branch information
sabaimran authored Dec 24, 2024
2 parents 3e6ba45 + cc7fd11 commit cd4cf4f
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 15 deletions.
56 changes: 42 additions & 14 deletions src/interface/web/app/components/agentCard/agentCard.tsx
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
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

0 comments on commit cd4cf4f

Please sign in to comment.