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

38
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,6 +1259,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
return ( return (
<Form {...props.form}> <Form {...props.form}>
<ScrollArea className="h-full">
<form <form
onSubmit={props.form.handleSubmit(handleSubmit)} onSubmit={props.form.handleSubmit(handleSubmit)}
className="space-y-6 pb-4 h-full flex flex-col justify-between" className="space-y-6 pb-4 h-full flex flex-col justify-between"
@@ -1270,7 +1273,9 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`} className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`}
onClick={() => onClick={() =>
setCurrentStep( setCurrentStep(
formGroups.findIndex((g) => g.tabName === group.tabName), formGroups.findIndex(
(g) => g.tabName === group.tabName,
),
) )
} }
> >
@@ -1285,7 +1290,21 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
</TabsContent> </TabsContent>
))} ))}
</Tabs> </Tabs>
<div className="flex justify-between mt-4">
{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>
</ScrollArea>
<div className="flex justify-between mt-1 left-0 right-0 bg-white p-1">
<Button <Button
type="button" type="button"
variant={"outline"} variant={"outline"}
@@ -1321,19 +1340,6 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
</Button> </Button>
)} )}
</div> </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>
</Form> </Form>
); );
} }