klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 21:29:11 +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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea } from "@/components/ui/scroll-area";
export interface AgentData {
slug: string;
@@ -967,7 +968,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
? `${field.value.length} files selected`
: "Select files"}
</CollapsibleTrigger>
<CollapsibleContent>
<CollapsibleContent className="m-1">
<Command>
<AlertDialog open={warning !== null || error != null}>
<AlertDialogContent>
@@ -1040,6 +1041,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<CommandItem
value={file}
key={file}
className="break-all"
onSelect={() => {
const currentFiles =
props.form.getValues("files") ||
@@ -1257,6 +1259,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
return (
<Form {...props.form}>
<ScrollArea className="h-full">
<form
onSubmit={props.form.handleSubmit(handleSubmit)}
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"}`}
onClick={() =>
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>
))}
</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
type="button"
variant={"outline"}
@@ -1321,19 +1340,6 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
</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>
</Form>
);
}