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

Allow better spacing in the agent card and make the buttons sticky

Browse Source
This commit is contained in:
sabaimran
2024-12-23 16:43:50 -08:00
parent c83709fdd1
commit 3fd0c202ea
1 changed files with 75 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,6 +92,7 @@ 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"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea } from "@/components/ui/scroll-area";
export interface AgentData { export interface AgentData {
slug: string; slug: string;
@@ -967,7 +968,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
? `${field.value.length} files selected` ? `${field.value.length} files selected`
: "Select files"} : "Select files"}
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent className="m-1">
<Command> <Command>
<AlertDialog open={warning !== null || error != null}> <AlertDialog open={warning !== null || error != null}>
<AlertDialogContent> <AlertDialogContent>
@@ -1040,6 +1041,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<CommandItem <CommandItem
value={file} value={file}
key={file} key={file}
className="break-all"
onSelect={() => { onSelect={() => {
const currentFiles = const currentFiles =
props.form.getValues("files") || props.form.getValues("files") ||
@@ -1257,83 +1259,87 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
return ( return (
<Form {...props.form}> <Form {...props.form}>
<form <ScrollArea className="h-full">
onSubmit={props.form.handleSubmit(handleSubmit)} <form
className="space-y-6 pb-4 h-full flex flex-col justify-between" onSubmit={props.form.handleSubmit(handleSubmit)}
> className="space-y-6 pb-4 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"> <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}
className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`}
onClick={() =>
setCurrentStep(
formGroups.findIndex(
(g) => g.tabName === group.tabName,
),
)
}
>
{group.label}{" "}
{!areRequiredFieldsCompletedForCurrentStep(group) && "*"}
</TabsTrigger>
))}
</TabsList>
{formGroups.map((group) => ( {formGroups.map((group) => (
<TabsTrigger <TabsContent key={group.tabName} value={group.tabName}>
key={group.tabName} {group.fields.map((field) => renderFormField(field.name))}
value={group.tabName} </TabsContent>
className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`}
onClick={() =>
setCurrentStep(
formGroups.findIndex((g) => g.tabName === group.tabName),
)
}
>
{group.label}{" "}
{!areRequiredFieldsCompletedForCurrentStep(group) && "*"}
</TabsTrigger>
))} ))}
</TabsList> </Tabs>
{formGroups.map((group) => (
<TabsContent key={group.tabName} value={group.tabName}> {props.errors && (
{group.fields.map((field) => renderFormField(field.name))} <Alert className="bg-secondary border-none my-4">
</TabsContent> <AlertDescription className="flex items-center gap-1">
))} <ShieldWarning
</Tabs> weight="fill"
<div className="flex justify-between mt-4"> className="h-4 w-4 text-yellow-400 inline"
/>
<span>{props.errors}</span>
</AlertDescription>
</Alert>
)}
</form>
</ScrollArea>
<div className="flex justify-between mt-1 left-0 right-0 bg-white p-1">
<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 <Button
type="button" type="button"
variant={"outline"} variant={"outline"}
onClick={handlePrevious} onClick={handleNext}
disabled={currentStep === 0} disabled={
!areRequiredFieldsCompletedForCurrentStep(formGroups[currentStep])
}
className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`} className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
> >
<ArrowLeft className="mr-2 h-4 w-4" /> Continue
Previous <ArrowRight className="ml-2 h-4 w-4" />
</Button>
) : (
<Button
type="submit"
variant={"outline"}
disabled={isSaving}
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> </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}`}
>
Continue
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
) : (
<Button
type="submit"
variant={"outline"}
disabled={isSaving}
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 && (
<Alert className="bg-secondary border-none my-4">
<AlertDescription className="flex items-center gap-1">
<ShieldWarning
weight="fill"
className="h-4 w-4 text-yellow-400 inline"
/>
<span>{props.errors}</span>
</AlertDescription>
</Alert>
)} )}
</form> </div>
</Form> </Form>
); );
} }