+
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/tools/automate/ToolSelector.tsx b/frontend/src/components/tools/automate/ToolSelector.tsx
index 80b68b0a4..4fb87548f 100644
--- a/frontend/src/components/tools/automate/ToolSelector.tsx
+++ b/frontend/src/components/tools/automate/ToolSelector.tsx
@@ -1,10 +1,11 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
-import { Menu, Stack, Text, ScrollArea } from '@mantine/core';
+import { Stack, Text, ScrollArea } from '@mantine/core';
import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
import { useToolSections } from '../../../hooks/useToolSections';
import { renderToolButtons } from '../shared/renderToolButtons';
import ToolSearch from '../toolPicker/ToolSearch';
+import ToolButton from '../toolPicker/ToolButton';
interface ToolSelectorProps {
onSelect: (toolKey: string) => void;
@@ -24,6 +25,8 @@ export default function ToolSelector({
const { t } = useTranslation();
const [opened, setOpened] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
+ const [shouldAutoFocus, setShouldAutoFocus] = useState(false);
+ const containerRef = useRef
(null);
// Filter out excluded tools (like 'automate' itself)
const baseFilteredTools = useMemo(() => {
@@ -66,13 +69,21 @@ export default function ToolSelector({
}
if (!sections || sections.length === 0) {
+ // If no sections, create a simple group from filtered tools
+ if (baseFilteredTools.length > 0) {
+ return [{
+ name: 'All Tools',
+ subcategoryId: 'all' as any,
+ tools: baseFilteredTools.map(([key, tool]) => ({ id: key, tool }))
+ }];
+ }
return [];
}
// Find the "all" section which contains all tools without duplicates
const allSection = sections.find(s => (s as any).key === 'all');
return allSection?.subcategories || [];
- }, [isSearching, searchGroups, sections]);
+ }, [isSearching, searchGroups, sections, baseFilteredTools]);
const handleToolSelect = useCallback((toolKey: string) => {
onSelect(toolKey);
@@ -88,8 +99,25 @@ export default function ToolSelector({
const handleSearchFocus = () => {
setOpened(true);
+ setShouldAutoFocus(true); // Request auto-focus for the input
};
+ // Handle click outside to close dropdown
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+ setOpened(false);
+ setSearchTerm('');
+ }
+ };
+
+ if (opened) {
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }
+ }, [opened]);
+
+
const handleSearchChange = (value: string) => {
setSearchTerm(value);
if (!opened) {
@@ -97,6 +125,14 @@ export default function ToolSelector({
}
};
+ const handleInputFocus = () => {
+ if (!opened) {
+ setOpened(true);
+ }
+ // Clear auto-focus flag since input is now focused
+ setShouldAutoFocus(false);
+ };
+
// Get display value for selected tool
const getDisplayValue = () => {
if (selectedValue && toolRegistry[selectedValue]) {
@@ -106,77 +142,63 @@ export default function ToolSelector({
};
return (
-
-