diff --git a/frontend/public/toolIcons/tool_cryptoprice.svg b/frontend/public/toolIcons/tool_cryptoprice.svg deleted file mode 100644 index 6a422694..00000000 --- a/frontend/public/toolIcons/tool_cryptoprice.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/public/toolIcons/tool_notes.svg b/frontend/public/toolIcons/tool_notes.svg deleted file mode 100644 index 7a8d0bba..00000000 --- a/frontend/public/toolIcons/tool_notes.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/frontend/public/toolIcons/tool_read_webpage.svg b/frontend/public/toolIcons/tool_read_webpage.svg deleted file mode 100644 index 41692e95..00000000 --- a/frontend/public/toolIcons/tool_read_webpage.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/public/toolIcons/tool_scheduler.svg b/frontend/public/toolIcons/tool_scheduler.svg deleted file mode 100644 index 1071c65c..00000000 --- a/frontend/public/toolIcons/tool_scheduler.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/frontend/public/toolIcons/tool_todo_list.svg b/frontend/public/toolIcons/tool_todo_list.svg deleted file mode 100644 index 3eb8ef24..00000000 --- a/frontend/public/toolIcons/tool_todo_list.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx index e2a49a62..e8593caa 100644 --- a/frontend/src/agents/NewAgent.tsx +++ b/frontend/src/agents/NewAgent.tsx @@ -33,6 +33,7 @@ import { type MultiSelectPopoverItem, } from '../components/MultiSelectPopover'; import Spinner from '../components/Spinner'; +import ToolIcon from '../components/ToolIcon'; import AgentDetailsModal from '../modals/AgentDetailsModal'; import ConfirmationModal from '../modals/ConfirmationModal'; import { ActiveState, Doc, Prompt } from '../models/misc'; @@ -487,7 +488,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) { const base: MultiSelectPopoverItem = { id: tool.id, label: getToolDisplayName(tool), - icon: `/toolIcons/tool_${tool.name}.svg`, + icon: , group: groupFor(tool), }; if (tool.name === 'remote_device') { diff --git a/frontend/src/agents/SharedAgentCard.tsx b/frontend/src/agents/SharedAgentCard.tsx index 72f06ba0..f7745fe0 100644 --- a/frontend/src/agents/SharedAgentCard.tsx +++ b/frontend/src/agents/SharedAgentCard.tsx @@ -1,6 +1,7 @@ import { useTranslation } from 'react-i18next'; import EditIcon from '../assets/edit.svg'; +import ToolIcon from '../components/ToolIcon'; import { Avatar } from '../components/ui/avatar'; import { Button } from '../components/ui/button'; import { getToolDisplayName } from '../utils/toolUtils'; @@ -87,9 +88,9 @@ export default function SharedAgentCard({ key={index} className="bg-accent text-foreground dark:bg-card flex items-center gap-1 rounded-full px-3 py-1 text-xs font-light" > - {`${getToolDisplayName(tool)}{' '} {getToolDisplayName(tool)} diff --git a/frontend/public/toolIcons/tool_api_tool.svg b/frontend/src/assets/toolIcons/tool_api_tool.svg similarity index 100% rename from frontend/public/toolIcons/tool_api_tool.svg rename to frontend/src/assets/toolIcons/tool_api_tool.svg diff --git a/frontend/public/toolIcons/tool_brave.svg b/frontend/src/assets/toolIcons/tool_brave.svg similarity index 100% rename from frontend/public/toolIcons/tool_brave.svg rename to frontend/src/assets/toolIcons/tool_brave.svg diff --git a/frontend/src/assets/toolIcons/tool_cryptoprice.svg b/frontend/src/assets/toolIcons/tool_cryptoprice.svg new file mode 100644 index 00000000..5250a534 --- /dev/null +++ b/frontend/src/assets/toolIcons/tool_cryptoprice.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/toolIcons/tool_duckduckgo.svg b/frontend/src/assets/toolIcons/tool_duckduckgo.svg similarity index 100% rename from frontend/public/toolIcons/tool_duckduckgo.svg rename to frontend/src/assets/toolIcons/tool_duckduckgo.svg diff --git a/frontend/public/toolIcons/tool_mcp_tool.svg b/frontend/src/assets/toolIcons/tool_mcp_tool.svg similarity index 94% rename from frontend/public/toolIcons/tool_mcp_tool.svg rename to frontend/src/assets/toolIcons/tool_mcp_tool.svg index 22c980e3..09305470 100644 --- a/frontend/public/toolIcons/tool_mcp_tool.svg +++ b/frontend/src/assets/toolIcons/tool_mcp_tool.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/frontend/public/toolIcons/tool_memory.svg b/frontend/src/assets/toolIcons/tool_memory.svg similarity index 90% rename from frontend/public/toolIcons/tool_memory.svg rename to frontend/src/assets/toolIcons/tool_memory.svg index cd526397..4e3222e3 100644 --- a/frontend/public/toolIcons/tool_memory.svg +++ b/frontend/src/assets/toolIcons/tool_memory.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/assets/toolIcons/tool_notes.svg b/frontend/src/assets/toolIcons/tool_notes.svg new file mode 100644 index 00000000..e8eecb8b --- /dev/null +++ b/frontend/src/assets/toolIcons/tool_notes.svg @@ -0,0 +1 @@ + diff --git a/frontend/public/toolIcons/tool_ntfy.svg b/frontend/src/assets/toolIcons/tool_ntfy.svg similarity index 99% rename from frontend/public/toolIcons/tool_ntfy.svg rename to frontend/src/assets/toolIcons/tool_ntfy.svg index 71fd647f..6a5ebe13 100644 --- a/frontend/public/toolIcons/tool_ntfy.svg +++ b/frontend/src/assets/toolIcons/tool_ntfy.svg @@ -1,5 +1,5 @@ - + diff --git a/frontend/public/toolIcons/tool_postgres.svg b/frontend/src/assets/toolIcons/tool_postgres.svg similarity index 100% rename from frontend/public/toolIcons/tool_postgres.svg rename to frontend/src/assets/toolIcons/tool_postgres.svg diff --git a/frontend/src/assets/toolIcons/tool_read_webpage.svg b/frontend/src/assets/toolIcons/tool_read_webpage.svg new file mode 100644 index 00000000..75251ae8 --- /dev/null +++ b/frontend/src/assets/toolIcons/tool_read_webpage.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/toolIcons/tool_remote_device.svg b/frontend/src/assets/toolIcons/tool_remote_device.svg similarity index 92% rename from frontend/public/toolIcons/tool_remote_device.svg rename to frontend/src/assets/toolIcons/tool_remote_device.svg index 7f55d903..cabeca99 100644 --- a/frontend/public/toolIcons/tool_remote_device.svg +++ b/frontend/src/assets/toolIcons/tool_remote_device.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/assets/toolIcons/tool_scheduler.svg b/frontend/src/assets/toolIcons/tool_scheduler.svg new file mode 100644 index 00000000..26222c62 --- /dev/null +++ b/frontend/src/assets/toolIcons/tool_scheduler.svg @@ -0,0 +1 @@ + diff --git a/frontend/public/toolIcons/tool_telegram.svg b/frontend/src/assets/toolIcons/tool_telegram.svg similarity index 100% rename from frontend/public/toolIcons/tool_telegram.svg rename to frontend/src/assets/toolIcons/tool_telegram.svg diff --git a/frontend/src/assets/toolIcons/tool_todo_list.svg b/frontend/src/assets/toolIcons/tool_todo_list.svg new file mode 100644 index 00000000..422ac2cc --- /dev/null +++ b/frontend/src/assets/toolIcons/tool_todo_list.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx index d595ce98..76f77b68 100644 --- a/frontend/src/components/MessageInput.tsx +++ b/frontend/src/components/MessageInput.tsx @@ -29,6 +29,7 @@ import Upload from '../upload/Upload'; import { isTouchDevice } from '../utils/browserUtils'; import { Button } from './ui/button'; import { type MultiSelectPopoverItem } from './MultiSelectPopover'; +import ToolIcon from './ToolIcon'; import { AttachFileButton, AttachmentChipList, @@ -1438,7 +1439,7 @@ export default function MessageInput({ const toolItems: MultiSelectPopoverItem[] = userTools.map((tool) => ({ id: tool.id, label: tool.customName || tool.displayName, - icon: `/toolIcons/tool_${tool.name}.svg`, + icon: , })); const selectedToolIds = userTools diff --git a/frontend/src/components/ToolIcon.tsx b/frontend/src/components/ToolIcon.tsx new file mode 100644 index 00000000..bd9edab3 --- /dev/null +++ b/frontend/src/components/ToolIcon.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +type SvgComponent = React.FC>; + +// Inline every tool icon via vite-plugin-svgr so the monochrome icons inherit +// `currentColor` and follow the active theme; branded icons keep their own colors. +const iconModules = import.meta.glob('../assets/toolIcons/tool_*.svg', { + query: '?react', + import: 'default', + eager: true, +}) as Record; + +const iconByToolName: Record = {}; +for (const [filePath, Component] of Object.entries(iconModules)) { + const match = filePath.match(/tool_(.+)\.svg$/); + if (match) iconByToolName[match[1]] = Component; +} + +type ToolIconProps = { + /** Backend tool name, e.g. ``mcp_tool`` (resolves to ``tool_.svg``). */ + name: string; + className?: string; + /** Accessible label. Omit for decorative icons paired with visible text. */ + title?: string; +}; + +/** + * Renders a tool's icon inline so monochrome icons inherit ``currentColor`` and + * adapt to light/dark themes. Branded icons keep their own colors. + */ +export default function ToolIcon({ name, className, title }: ToolIconProps) { + const Icon = iconByToolName[name]; + if (!Icon) return null; + const a11y = title + ? { role: 'img' as const, 'aria-label': title } + : { 'aria-hidden': true as const }; + return ( + + ); +} diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx index 09fb44de..2a23d06e 100644 --- a/frontend/src/modals/AddToolModal.tsx +++ b/frontend/src/modals/AddToolModal.tsx @@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'; import userService from '../api/services/userService'; import SkeletonLoader from '../components/SkeletonLoader'; +import ToolIcon from '../components/ToolIcon'; import { Modal } from '../components/ui/modal'; import { useLoaderState } from '../hooks'; import PairDeviceModal from '../settings/PairDeviceModal'; @@ -149,10 +150,10 @@ export default function AddToolModal({ >
- {`${tool.name}
diff --git a/frontend/src/settings/RemoteDeviceConfig.tsx b/frontend/src/settings/RemoteDeviceConfig.tsx index b830a433..a037aa42 100644 --- a/frontend/src/settings/RemoteDeviceConfig.tsx +++ b/frontend/src/settings/RemoteDeviceConfig.tsx @@ -10,6 +10,7 @@ import devicesService, { import ArrowLeft from '../assets/arrow-left.svg'; import CopyButton from '../components/CopyButton'; import Spinner from '../components/Spinner'; +import ToolIcon from '../components/ToolIcon'; import { Accordion, AccordionContent, @@ -227,9 +228,9 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) { )}
- {`${tool.displayName}

diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx index 12db8ff3..bc50fa20 100644 --- a/frontend/src/settings/Tools.tsx +++ b/frontend/src/settings/Tools.tsx @@ -12,6 +12,7 @@ import NoFilesIcon from '../assets/no-files.svg'; import SearchIcon from '../assets/search.svg'; import ThreeDotsIcon from '../assets/three-dots.svg'; import SkeletonLoader from '../components/SkeletonLoader'; +import ToolIcon from '../components/ToolIcon'; import { Button } from '../components/ui/button'; import { Switch } from '../components/ui/switch'; import { @@ -404,9 +405,9 @@ export default function Tools() { )}
- {`${tool.displayName} {tool.default && ( diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts index 11f02fe2..b1f45c78 100644 --- a/frontend/src/vite-env.d.ts +++ b/frontend/src/vite-env.d.ts @@ -1 +1,2 @@ /// +///