2025-05-21 21:47:44 +01:00
|
|
|
import React, { useState } from "react";
|
2025-05-28 21:43:02 +01:00
|
|
|
import { Box, Text, Stack, Button, TextInput, Group } from "@mantine/core";
|
2025-05-29 17:26:32 +01:00
|
|
|
import { useTranslation } from "react-i18next";
|
2025-05-21 21:47:44 +01:00
|
|
|
|
|
|
|
type Tool = {
|
|
|
|
icon: React.ReactNode;
|
|
|
|
name: string;
|
|
|
|
};
|
|
|
|
|
|
|
|
type ToolRegistry = {
|
|
|
|
[id: string]: Tool;
|
|
|
|
};
|
|
|
|
|
|
|
|
interface ToolPickerProps {
|
2025-07-16 17:53:50 +01:00
|
|
|
selectedToolKey: string | null;
|
2025-05-21 21:47:44 +01:00
|
|
|
onSelect: (id: string) => void;
|
|
|
|
toolRegistry: ToolRegistry;
|
|
|
|
}
|
|
|
|
|
2025-06-19 19:47:44 +01:00
|
|
|
const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps) => {
|
2025-05-29 17:26:32 +01:00
|
|
|
const { t } = useTranslation();
|
2025-05-21 21:47:44 +01:00
|
|
|
const [search, setSearch] = useState("");
|
|
|
|
|
|
|
|
const filteredTools = Object.entries(toolRegistry).filter(([_, { name }]) =>
|
|
|
|
name.toLowerCase().includes(search.toLowerCase())
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2025-05-28 21:43:02 +01:00
|
|
|
<Box >
|
2025-05-21 21:47:44 +01:00
|
|
|
<TextInput
|
2025-05-29 17:26:32 +01:00
|
|
|
placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
|
2025-05-21 21:47:44 +01:00
|
|
|
value={search}
|
|
|
|
onChange={(e) => setSearch(e.currentTarget.value)}
|
|
|
|
mb="md"
|
|
|
|
autoComplete="off"
|
|
|
|
/>
|
2025-05-28 21:43:02 +01:00
|
|
|
<Stack align="flex-start">
|
2025-05-21 21:47:44 +01:00
|
|
|
{filteredTools.length === 0 ? (
|
|
|
|
<Text c="dimmed" size="sm">
|
2025-05-29 17:26:32 +01:00
|
|
|
{t("toolPicker.noToolsFound", "No tools found")}
|
2025-05-21 21:47:44 +01:00
|
|
|
</Text>
|
|
|
|
) : (
|
|
|
|
filteredTools.map(([id, { icon, name }]) => (
|
|
|
|
<Button
|
|
|
|
key={id}
|
|
|
|
variant={selectedToolKey === id ? "filled" : "subtle"}
|
|
|
|
onClick={() => onSelect(id)}
|
|
|
|
size="md"
|
|
|
|
radius="md"
|
2025-05-28 21:43:02 +01:00
|
|
|
leftSection={icon}
|
|
|
|
fullWidth
|
|
|
|
justify="flex-start"
|
2025-05-21 21:47:44 +01:00
|
|
|
>
|
|
|
|
{name}
|
|
|
|
</Button>
|
|
|
|
))
|
|
|
|
)}
|
|
|
|
</Stack>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ToolPicker;
|