Skip to content

Commit

Permalink
enhance: make action icons more compact
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanhopperlowe
ryanhopperlowe committed Dec 17, 2024
1 parent 439b8b4 commit 5fdabc4
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 68 deletions.
32 changes: 17 additions & 15 deletions ui/admin/app/components/agent/ToolForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,21 +166,23 @@ export function ToolForm({
onDelete={() => removeTools([field.tool])}
actions={
<Tooltip>
<TooltipTrigger>
<Switch
checked={
field.variant ===
ToolVariant.DEFAULT
}
onCheckedChange={(checked) =>
updateVariant(
field.tool,
checked
? ToolVariant.DEFAULT
: ToolVariant.AVAILABLE
)
}
/>
<TooltipTrigger asChild>
<div>
<Switch
checked={
field.variant ===
ToolVariant.DEFAULT
}
onCheckedChange={(checked) =>
updateVariant(
field.tool,
checked
? ToolVariant.DEFAULT
: ToolVariant.AVAILABLE
)
}
/>
</div>
</TooltipTrigger>

<TooltipContent>
Expand Down
167 changes: 114 additions & 53 deletions ui/admin/app/components/chat/ChatActions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { LibraryIcon, WrenchIcon } from "lucide-react";
import {
LibraryIcon,
PaperclipIcon,
TableIcon,
WrenchIcon,
} from "lucide-react";
import { useMemo } from "react";

import { Agent } from "~/lib/model/agents";
Expand All @@ -20,6 +25,11 @@ import {
PopoverTrigger,
} from "~/components/ui/popover";
import { Switch } from "~/components/ui/switch";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "~/components/ui/tooltip";

export function ChatActions({ className }: { className?: string }) {
const { threadId } = useChat();
Expand All @@ -41,6 +51,10 @@ export function ChatActions({ className }: { className?: string }) {
/>

<KnowledgeInfo knowledge={knowledge ?? []} disabled={!thread} />

<FilesInfo />

<TablesInfo />
</div>
</div>
);
Expand Down Expand Up @@ -98,34 +112,38 @@ function ToolsInfo({
};

return (
<Popover>
<PopoverTrigger asChild>
<Button
size="sm"
variant="outline"
className={cn("gap-2", className)}
startContent={<WrenchIcon />}
disabled={disabled}
>
Tools
</Button>
</PopoverTrigger>

<PopoverContent className="w-80">
{toolItems.length > 0 ? (
<div className="space-y-2">
<TypographySmall className="font-semibold">
Available Tools
</TypographySmall>
<div className="space-y-1">
{toolItems.map(renderToolItem)}
<Tooltip>
<TooltipContent>Tools</TooltipContent>

<Popover>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button
size="icon-sm"
variant="outline"
className={cn("gap-2", className)}
startContent={<WrenchIcon />}
disabled={disabled}
/>
</PopoverTrigger>
</TooltipTrigger>

<PopoverContent className="w-80">
{toolItems.length > 0 ? (
<div className="space-y-2">
<TypographySmall className="font-semibold">
Available Tools
</TypographySmall>
<div className="space-y-1">
{toolItems.map(renderToolItem)}
</div>
</div>
</div>
) : (
<TypographyMuted>No tools available</TypographyMuted>
)}
</PopoverContent>
</Popover>
) : (
<TypographyMuted>No tools available</TypographyMuted>
)}
</PopoverContent>
</Popover>
</Tooltip>
);

function renderToolItem({ isEnabled, isToggleable, tool }: ToolItem) {
Expand Down Expand Up @@ -160,32 +178,75 @@ function KnowledgeInfo({
disabled?: boolean;
}) {
return (
<Popover>
<PopoverTrigger asChild>
<Tooltip>
<TooltipContent>Knowledge</TooltipContent>

<Popover>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button
size="icon-sm"
variant="outline"
className={cn("gap-2", className)}
startContent={<LibraryIcon />}
disabled={disabled}
/>
</PopoverTrigger>
</TooltipTrigger>

<PopoverContent>
{knowledge.length > 0 ? (
<div className="space-y-2">
{knowledge.map((file) => (
<TypographyMuted key={file.id}>
{file.fileName}
</TypographyMuted>
))}
</div>
) : (
<TypographyMuted>
No knowledge available
</TypographyMuted>
)}
</PopoverContent>
</Popover>
</Tooltip>
);
}

function FilesInfo() {
return (
<Tooltip>
<TooltipContent>Files</TooltipContent>

<TooltipTrigger asChild>
<Button
size="sm"
size="icon-sm"
variant="outline"
className={cn("gap-2", className)}
startContent={<LibraryIcon />}
disabled={disabled}
>
Knowledge
</Button>
</PopoverTrigger>

<PopoverContent>
{knowledge.length > 0 ? (
<div className="space-y-2">
{knowledge.map((file) => (
<TypographyMuted key={file.id}>
{file.fileName}
</TypographyMuted>
))}
</div>
) : (
<TypographyMuted>No knowledge available</TypographyMuted>
)}
</PopoverContent>
</Popover>
className="gap-2"
startContent={<PaperclipIcon />}
/>
</TooltipTrigger>
</Tooltip>
);
}

function TablesInfo() {
return (
<Tooltip>
<TooltipContent>Tables (Coming Soon)</TooltipContent>

<TooltipTrigger asChild>
<div>
<Button
size="icon-sm"
variant="outline"
className="gap-2"
startContent={<TableIcon />}
disabled
/>
</div>
</TooltipTrigger>
</Tooltip>
);
}

0 comments on commit 5fdabc4

Please sign in to comment.