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

Update some edge cases and usability of create agent flow

Browse Source 
- Use the slug to determine which agent to PATCH
- Make the agent creation form multi-step to streamline the process
This commit is contained in:
sabaimran
2024-10-14 14:07:23 -07:00
parent 8ff13e4cf6
commit 81aa1b5589
4 changed files with 643 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
src/interface/web/app/agents/page.tsx
View File

@@ -35,8 +35,10 @@ import {
DotsThreeVertical, DotsThreeVertical,
Pencil, Pencil,
Trash, Trash,
ArrowRight,
ArrowLeft,
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import { set, z } from "zod"; import { set, z, ZodError } from "zod";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { import {
Dialog, Dialog,
@@ -245,12 +247,18 @@ function AgentCard(props: AgentCardProps) {
let agentsApiUrl = `/api/agents`; let agentsApiUrl = `/api/agents`;
let method = props.editCard ? "PATCH" : "POST"; let method = props.editCard ? "PATCH" : "POST";
let valuesToSend: any = values;
if (props.editCard) {
valuesToSend = { ...values, slug: props.data.slug };
}
fetch(agentsApiUrl, { fetch(agentsApiUrl, {
method: method, method: method,
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify(values), body: JSON.stringify(valuesToSend),
}) })
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
@@ -537,9 +545,36 @@ function AgentModificationForm(props: AgentModificationFormProps) {
const [progressValue, setProgressValue] = useState(0); const [progressValue, setProgressValue] = useState(0);
const [uploadedFiles, setUploadedFiles] = useState<string[]>([]); const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
const [allFileOptions, setAllFileOptions] = useState<string[]>([]); const [allFileOptions, setAllFileOptions] = useState<string[]>([]);
const [currentStep, setCurrentStep] = useState(0);
const [showSubscribeDialog, setShowSubscribeDialog] = useState(true); const [showSubscribeDialog, setShowSubscribeDialog] = useState(true);
const privacyOptions = ["public", "private", "protected"];
const basicFields = [
{ name: "name", label: "Name" },
{ name: "persona", label: "Personality" },
];
const advancedFields = [
{ name: "files", label: "Knowledge Base" },
{ name: "input_tools", label: "Input Tools" },
{ name: "output_modes", label: "Output Modes" },
];
const customizationFields = [
{ name: "color", label: "Color" },
{ name: "icon", label: "Icon" },
{ name: "chat_model", label: "Chat Model" },
{ name: "privacy_level", label: "Privacy Level" },
];
const formGroups = [
{ fields: basicFields, label: "Basic Settings" },
{ fields: customizationFields, label: "Customization & Access" },
{ fields: advancedFields, label: "Advanced Settings" },
];
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
@@ -563,7 +598,9 @@ function AgentModificationForm(props: AgentModificationFormProps) {
const currentFiles = props.form.getValues("files") || []; const currentFiles = props.form.getValues("files") || [];
const fileOptions = props.filesOptions || []; const fileOptions = props.filesOptions || [];
const concatenatedFiles = [...currentFiles, ...fileOptions]; const concatenatedFiles = [...currentFiles, ...fileOptions];
setAllFileOptions((prev) => [...prev, ...concatenatedFiles]); const fullAllFileOptions = [...allFileOptions, ...concatenatedFiles];
const dedupedAllFileOptions = Array.from(new Set(fullAllFileOptions));
setAllFileOptions(dedupedAllFileOptions);
}, []); }, []);
useEffect(() => { useEffect(() => {
@@ -614,6 +651,25 @@ function AgentModificationForm(props: AgentModificationFormProps) {
uploadFiles(event.target.files); uploadFiles(event.target.files);
} }
const handleNext = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
if (currentStep < formGroups.length - 1) {
setCurrentStep(currentStep + 1);
}
};
const handlePrevious = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
if (currentStep > 0) {
setCurrentStep(currentStep - 1);
}
};
const handleSubmit = (values: any) => {
props.onSubmit(values);
setIsSaving(true);
};
const handleAgentFileChange = (files: string[]) => { const handleAgentFileChange = (files: string[]) => {
for (const file of files) { for (const file of files) {
const currentFiles = props.form.getValues("files") || []; const currentFiles = props.form.getValues("files") || [];
@@ -624,7 +680,30 @@ function AgentModificationForm(props: AgentModificationFormProps) {
} }
}; };
const privacyOptions = ["public", "private", "protected"]; const areRequiredFieldsCompletedForCurrentStep = (formGroup: {
fields: { name: string }[];
}) => {
try {
EditAgentSchema.parse(props.form.getValues());
return true;
} catch (error) {
const errors: { [key: string]: string } = (error as ZodError).errors.reduce(
(acc: any, curr: any) => {
acc[curr.path[0]] = curr.message;
return acc;
},
{},
);
for (const field of formGroup.fields) {
if (errors[field.name]) {
return false;
}
}
return true;
}
};
if (!props.isSubscribed && showSubscribeDialog) { if (!props.isSubscribed && showSubscribeDialog) {
return ( return (
@@ -658,16 +737,12 @@ function AgentModificationForm(props: AgentModificationFormProps) {
); );
} }
const renderFormField = (fieldName: string) => {
switch (fieldName) {
case "name":
return ( return (
<Form {...props.form}>
<form
onSubmit={props.form.handleSubmit((values) => {
props.onSubmit(values);
setIsSaving(true);
})}
className="space-y-6"
>
<FormField <FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="name" name="name"
render={({ field }) => ( render={({ field }) => (
@@ -684,29 +759,11 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
);
<FormField case "chat_model":
control={props.form.control} return (
name="persona"
render={({ field }) => (
<FormItem className="space-y-1 grid gap-2">
<FormLabel>Personality</FormLabel>
<FormDescription>
What is the personality, thought process, or tuning of this agent?
Get creative; this is how you can influence the agent constitution.
</FormDescription>
<FormControl>
<Textarea
placeholder="You are an excellent biologist, at the top of your field in marine biology."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="chat_model" name="chat_model"
render={({ field }) => ( render={({ field }) => (
@@ -723,7 +780,10 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormControl> </FormControl>
<SelectContent className="items-start space-y-1 inline-flex flex-col"> <SelectContent className="items-start space-y-1 inline-flex flex-col">
{props.modelOptions.map((modelOption) => ( {props.modelOptions.map((modelOption) => (
<SelectItem key={modelOption.id} value={modelOption.name}> <SelectItem
key={modelOption.id}
value={modelOption.name}
>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{modelOption.name} {modelOption.name}
</div> </div>
@@ -735,7 +795,11 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
);
case "privacy_level":
return (
<FormField <FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="privacy_level" name="privacy_level"
render={({ field }) => ( render={({ field }) => (
@@ -746,7 +810,10 @@ function AgentModificationForm(props: AgentModificationFormProps) {
<FormDescription> <FormDescription>
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant={"ghost" as const} className="p-0 h-fit"> <Button
variant={"ghost" as const}
className="p-0 h-fit"
>
<span className="items-center flex gap-1 text-sm"> <span className="items-center flex gap-1 text-sm">
<Info className="inline" /> <Info className="inline" />
<p className="text-sm">Learn more</p> <p className="text-sm">Learn more</p>
@@ -785,18 +852,18 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
<div className="grid"> );
<FormLabel className="mb-2">Look & Feel</FormLabel> case "color":
<div className="flex gap-1 justify-left flex-col md:flex-row"> return (
<FormField <FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="color" name="color"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-3"> <FormItem className="space-y-3">
<Select <FormLabel>Color</FormLabel>
onValueChange={field.onChange} <FormDescription>Choose a color for your agent.</FormDescription>
defaultValue={field.value} <Select onValueChange={field.onChange} defaultValue={field.value}>
>
<FormControl> <FormControl>
<SelectTrigger className="w-[200px]"> <SelectTrigger className="w-[200px]">
<SelectValue placeholder="Color" /> <SelectValue placeholder="Color" />
@@ -820,16 +887,18 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
);
case "icon":
return (
<FormField <FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="icon" name="icon"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-3"> <FormItem className="space-y-3">
<Select <FormLabel>Icon</FormLabel>
onValueChange={field.onChange} <FormDescription>Choose an icon for your agent.</FormDescription>
defaultValue={field.value} <Select onValueChange={field.onChange} defaultValue={field.value}>
>
<FormControl> <FormControl>
<SelectTrigger className="w-[200px]"> <SelectTrigger className="w-[200px]">
<SelectValue placeholder="Icon" /> <SelectValue placeholder="Icon" />
@@ -855,16 +924,36 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
</div> );
</div> case "persona":
<FormItem className="flex flex-col"> return (
<FormLabel className="text-md">Advanced Settings</FormLabel>
<FormDescription>
These are optional settings that you can use to customize your agent.
</FormDescription>
</FormItem>
<FormField <FormField
key={fieldName}
control={props.form.control}
name="persona"
render={({ field }) => (
<FormItem className="space-y-1 grid gap-2">
<FormLabel>Personality</FormLabel>
<FormDescription>
What is the personality, thought process, or tuning of this
agent? Get creative; this is how you can influence the agent
constitution.
</FormDescription>
<FormControl>
<Textarea
placeholder="You are an excellent biologist, at the top of your field in marine biology."
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
);
case "files":
return (
<FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="files" name="files"
render={({ field }) => ( render={({ field }) => (
@@ -938,7 +1027,9 @@ function AgentModificationForm(props: AgentModificationFormProps) {
) : ( ) : (
<div className="flex items-center justify-center w-full h-full"> <div className="flex items-center justify-center w-full h-full">
<Plus className="h-6 w-6 mr-2" /> <Plus className="h-6 w-6 mr-2" />
<span>Drag and drop files here</span> <span>
Drag and drop files here
</span>
</div> </div>
)} )}
</div> </div>
@@ -954,15 +1045,19 @@ function AgentModificationForm(props: AgentModificationFormProps) {
key={file} key={file}
onSelect={() => { onSelect={() => {
const currentFiles = const currentFiles =
props.form.getValues("files") || []; props.form.getValues("files") ||
const newFiles = currentFiles.includes( [];
file, const newFiles =
) currentFiles.includes(file)
? currentFiles.filter( ? currentFiles.filter(
(item) => item !== file, (item) =>
item !== file,
) )
: [...currentFiles, file]; : [...currentFiles, file];
props.form.setValue("files", newFiles); props.form.setValue(
"files",
newFiles,
);
}} }}
> >
<Check <Check
@@ -985,7 +1080,11 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
);
case "input_tools":
return (
<FormField <FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="input_tools" name="input_tools"
render={({ field }) => ( render={({ field }) => (
@@ -1018,7 +1117,9 @@ function AgentModificationForm(props: AgentModificationFormProps) {
"input_tools", "input_tools",
) || []; ) || [];
const newInputTools = const newInputTools =
currentInputTools.includes(key) currentInputTools.includes(
key,
)
? currentInputTools.filter( ? currentInputTools.filter(
(item) => (item) =>
item !== key, item !== key,
@@ -1037,12 +1138,23 @@ function AgentModificationForm(props: AgentModificationFormProps) {
className={cn( className={cn(
"mr-2 h-4 w-4", "mr-2 h-4 w-4",
field.value && field.value &&
field.value.includes(key) field.value.includes(
key,
)
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
/> />
<b>{key}</b>: {value} <div
className={cn(
"flex items-center space-x-2",
)}
>
<p>
<b>{key}</b>
</p>
<p>{value}</p>
</div>
</CommandItem> </CommandItem>
), ),
)} )}
@@ -1054,7 +1166,11 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
);
case "output_modes":
return (
<FormField <FormField
key={fieldName}
control={props.form.control} control={props.form.control}
name="output_modes" name="output_modes"
render={({ field }) => ( render={({ field }) => (
@@ -1087,7 +1203,9 @@ function AgentModificationForm(props: AgentModificationFormProps) {
"output_modes", "output_modes",
) || []; ) || [];
const newOutputModes = const newOutputModes =
currentOutputModes.includes(key) currentOutputModes.includes(
key,
)
? currentOutputModes.filter( ? currentOutputModes.filter(
(item) => (item) =>
item !== key, item !== key,
@@ -1106,12 +1224,23 @@ function AgentModificationForm(props: AgentModificationFormProps) {
className={cn( className={cn(
"mr-2 h-4 w-4", "mr-2 h-4 w-4",
field.value && field.value &&
field.value.includes(key) field.value.includes(
key,
)
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0",
)} )}
/> />
<b>{key}</b>: {value} <div
className={cn(
"flex items-center space-x-2",
)}
>
<p>
<b>{key}</b>
</p>
<p>{value}</p>
</div>
</CommandItem> </CommandItem>
), ),
)} )}
@@ -1123,6 +1252,55 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</FormItem> </FormItem>
)} )}
/> />
);
default:
return null;
}
};
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))}
<div className="flex justify-between mt-4">
<Button
type="button"
variant={"outline"}
onClick={handlePrevious}
disabled={currentStep === 0}
className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
>
<ArrowLeft className="mr-2 h-4 w-4" />
Previous
</Button>
{currentStep < formGroups.length - 1 ? (
<Button
type="button"
variant={"outline"}
onClick={handleNext}
disabled={
!areRequiredFieldsCompletedForCurrentStep(formGroups[currentStep])
}
className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
>
Next
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
) : (
<Button
type="submit"
variant={"outline"}
disabled={isSaving || !props.isSubscribed}
className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
>
<FloppyDisk className="h-4 w-4 mr-2" />
{isSaving ? "Booting..." : "Save"}
</Button>
)}
</div>
{props.errors && ( {props.errors && (
<Alert className="bg-secondary border-none my-4"> <Alert className="bg-secondary border-none my-4">
<AlertDescription className="flex items-center gap-1"> <AlertDescription className="flex items-center gap-1">
@@ -1134,28 +1312,6 @@ function AgentModificationForm(props: AgentModificationFormProps) {
</AlertDescription> </AlertDescription>
</Alert> </Alert>
)} )}
<fieldset>
<Button
type="submit"
variant={"ghost"}
disabled={isSaving || !props.isSubscribed}
className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
>
<FloppyDisk className="h-4 w-4 mr-2" />
{isSaving ? "Booting..." : "Save"}
</Button>
{!!!props.create && props.form.getValues("privacy_level") !== "private" && (
<ShareLink
buttonTitle="Share"
title="Share Agent"
description="Share a link to this agent with others. They'll be able to chat with it, and ask questions to all of its knowledge base."
buttonVariant={"ghost" as const}
buttonClassName={`${colorOptionClassName}`}
includeIcon={true}
url={`${window.location.origin}/agents?agent=${props.slug}`}
/>
)}
</fieldset>
</form> </form>
</Form> </Form>
); );

4
src/khoj/database/adapters/__init__.py
View File

@@ -696,10 +696,12 @@ class AgentAdapters:
files: List[str], files: List[str],
input_tools: List[str], input_tools: List[str],
output_modes: List[str], output_modes: List[str],
slug: Optional[str] = None,
): ):
chat_model_option = await ChatModelOptions.objects.filter(chat_model=chat_model).afirst() chat_model_option = await ChatModelOptions.objects.filter(chat_model=chat_model).afirst()
agent, created = await Agent.objects.filter(name=name, creator=user).aupdate_or_create( # Slug will be None for new agents, which will trigger a new agent creation with a generated, immutable slug
agent, created = await Agent.objects.filter(slug=slug, creator=user).aupdate_or_create(
defaults={ defaults={
"name": name, "name": name,
"creator": user, "creator": user,

5
src/khoj/routers/api_agents.py
View File

@@ -35,6 +35,7 @@ class ModifyAgentBody(BaseModel):
files: Optional[List[str]] = [] files: Optional[List[str]] = []
input_tools: Optional[List[str]] = [] input_tools: Optional[List[str]] = []
output_modes: Optional[List[str]] = [] output_modes: Optional[List[str]] = []
slug: Optional[str] = None
@api_agents.get("", response_class=Response) @api_agents.get("", response_class=Response)
@@ -192,6 +193,7 @@ async def create_agent(
body.files, body.files,
body.input_tools, body.input_tools,
body.output_modes, body.output_modes,
body.slug,
) )
agents_packet = { agents_packet = {
@@ -233,7 +235,7 @@ async def update_agent(
status_code=400, status_code=400,
) )
selected_agent = await AgentAdapters.aget_agent_by_name(body.name, user) selected_agent = await AgentAdapters.aget_agent_by_slug(body.slug, user)
if not selected_agent: if not selected_agent:
return Response( return Response(
@@ -253,6 +255,7 @@ async def update_agent(
body.files, body.files,
body.input_tools, body.input_tools,
body.output_modes, body.output_modes,
body.slug,
) )
agents_packet = { agents_packet = {

2
src/khoj/routers/api_chat.py
View File

@@ -209,7 +209,7 @@ def chat_history(
agent_metadata = None agent_metadata = None
if conversation.agent: if conversation.agent:
if conversation.agent.privacy_level == Agent.PrivacyLevel.PRIVATE: if conversation.agent.privacy_level == Agent.PrivacyLevel.PRIVATE and conversation.agent.creator != user:
conversation.agent = None conversation.agent = None
else: else:
agent_metadata = { agent_metadata = {