klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use tabs to separate sections in the agent mod form

Browse Source 
- Add knowledge base as a separate section, apart from tools
- This makes it easier to navigate the different components quickly
This commit is contained in:
sabaimran
2024-12-20 14:41:15 -08:00
parent efe812e323
commit cc7fd1163f
1 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/interface/web/app/components/agentCard/agentCard.tsx
View File

@@ -91,6 +91,8 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
import ShareLink from "@/app/components/shareLink/shareLink"; import ShareLink from "@/app/components/shareLink/shareLink";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
export interface AgentData { export interface AgentData {
slug: string; slug: string;
name: string; name: string;
@@ -427,7 +429,9 @@ export function AgentCard(props: AgentCardProps) {
</div> </div>
{props.editCard ? ( {props.editCard ? (
<DialogContent <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> <DialogTitle>
Edit <b>{props.data.name}</b> Edit <b>{props.data.name}</b>
@@ -534,12 +538,13 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
{ name: "persona", label: "Personality" }, { name: "persona", label: "Personality" },
]; ];
const advancedFields = [ const toolsFields = [
{ name: "files", label: "Knowledge Base" },
{ name: "input_tools", label: "Input Tools" }, { name: "input_tools", label: "Input Tools" },
{ name: "output_modes", label: "Output Modes" }, { name: "output_modes", label: "Output Modes" },
]; ];
const knowledgeBaseFields = [{ name: "files", label: "Knowledge Base" }];
const customizationFields = [ const customizationFields = [
{ name: "color", label: "Color" }, { name: "color", label: "Color" },
{ name: "icon", label: "Icon" }, { name: "icon", label: "Icon" },
@@ -548,9 +553,10 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
]; ];
const formGroups = [ const formGroups = [
{ fields: basicFields, label: "Basic Settings" }, { fields: basicFields, label: "Basic Settings", tabName: "basic" },
{ fields: customizationFields, label: "Customization & Access" }, { fields: customizationFields, label: "Customization & Access", tabName: "customize" },
{ fields: advancedFields, label: "Advanced Settings" }, { fields: knowledgeBaseFields, label: "Knowledge Base", tabName: "knowledge" },
{ fields: toolsFields, label: "Tools Settings", tabName: "tools" },
]; ];
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
@@ -749,7 +755,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="chat_model" name="chat_model"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-1 grid gap-2"> <FormItem className="my-3 grid gap-2">
<FormLabel>Chat Model</FormLabel> <FormLabel>Chat Model</FormLabel>
<FormDescription> <FormDescription>
{!props.isSubscribed ? ( {!props.isSubscribed ? (
@@ -796,7 +802,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="privacy_level" name="privacy_level"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-1 grid gap-2"> <FormItem className="my-3 grid gap-2">
<FormLabel> <FormLabel>
<div>Privacy Level</div> <div>Privacy Level</div>
</FormLabel> </FormLabel>
@@ -1080,7 +1086,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="input_tools" name="input_tools"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col gap-2"> <FormItem className="flex flex-col gap-2 my-2">
<FormLabel>Restrict Input Tools</FormLabel> <FormLabel>Restrict Input Tools</FormLabel>
<FormDescription> <FormDescription>
Which knowledge retrieval tools should this agent be limited to? Which knowledge retrieval tools should this agent be limited to?
@@ -1166,7 +1172,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="output_modes" name="output_modes"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col gap-2"> <FormItem className="flex flex-col gap-2 my-2">
<FormLabel>Restrict Output Modes</FormLabel> <FormLabel>Restrict Output Modes</FormLabel>
<FormDescription> <FormDescription>
Which output modes should this agent be limited to? Which output modes should this agent be limited to?
@@ -1252,10 +1258,32 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
return ( return (
<Form {...props.form}> <Form {...props.form}>
<form onSubmit={props.form.handleSubmit(handleSubmit)} className="space-y-6"> <form
<div className="space-y-6">{formGroups[currentStep].label}</div> onSubmit={props.form.handleSubmit(handleSubmit)}
{currentStep < formGroups.length && className="space-y-6 h-full flex flex-col justify-between"
formGroups[currentStep].fields.map((field) => renderFormField(field.name))} >
<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"> <div className="flex justify-between mt-4">
<Button <Button
type="button" type="button"