feat: add tool icons for enhanced UI in ComposerAction

This commit is contained in:
Anish Sarkar 2026-03-17 15:02:56 +05:30
parent 9f7da91775
commit 893df1718b
2 changed files with 37 additions and 0 deletions

View file

@ -88,6 +88,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
import { Switch } from "@/components/ui/switch";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { getToolIcon } from "@/contracts/enums/toolIcons";
import type { Document } from "@/contracts/types/document.types";
import { useBatchCommentsPreload } from "@/hooks/use-comments";
import { useCommentsElectric } from "@/hooks/use-comments-electric";
@ -670,11 +671,13 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
<div className="overflow-y-auto pb-6" onScroll={handleToolsScroll}>
{filteredTools?.map((tool) => {
const isDisabled = disabledTools.includes(tool.name);
const ToolIcon = getToolIcon(tool.name);
return (
<div
key={tool.name}
className="flex w-full items-center gap-3 px-4 py-2 hover:bg-muted-foreground/10 transition-colors"
>
<ToolIcon className="size-4 shrink-0 text-muted-foreground" />
<span className="flex-1 min-w-0 text-sm font-medium truncate">
{formatToolName(tool.name)}
</span>
@ -742,8 +745,10 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
>
{filteredTools?.map((tool) => {
const isDisabled = disabledTools.includes(tool.name);
const ToolIcon = getToolIcon(tool.name);
const row = (
<div className="flex w-full items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 hover:bg-muted-foreground/10 transition-colors">
<ToolIcon className="size-3.5 sm:size-4 shrink-0 text-muted-foreground" />
<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate">
{formatToolName(tool.name)}
</span>

View file

@ -0,0 +1,32 @@
import {
BookOpen,
Brain,
Database,
FileText,
Globe,
ImageIcon,
Link2,
type LucideIcon,
Podcast,
ScanLine,
Sparkles,
Wrench,
} from "lucide-react";
const TOOL_ICONS: Record<string, LucideIcon> = {
search_knowledge_base: Database,
generate_podcast: Podcast,
generate_report: FileText,
link_preview: Link2,
display_image: ImageIcon,
generate_image: Sparkles,
scrape_webpage: ScanLine,
web_search: Globe,
search_surfsense_docs: BookOpen,
save_memory: Brain,
recall_memory: Brain,
};
export function getToolIcon(name: string): LucideIcon {
return TOOL_ICONS[name] ?? Wrench;
}