diff --git a/components/chat/chatBar/CatalogListBox.tsx b/components/chat/chatBar/CatalogListBox.tsx index c0d0f49..6c7a917 100644 --- a/components/chat/chatBar/CatalogListBox.tsx +++ b/components/chat/chatBar/CatalogListBox.tsx @@ -1,5 +1,9 @@ import { useDebouncedValue } from '@/hooks/useDebounce'; -import { FeaturedTool, FeaturedToolsByCategory } from '@/model/tools'; +import { + FeaturedTool, + FeaturedToolList, + FeaturedToolsByCategory, +} from '@/model/tools'; import { Listbox, ListboxItem, @@ -41,14 +45,13 @@ export const CatalogListBox = forwardRef( const debouncedQuery = useDebouncedValue(query || '', 250); const featuredResults = useMemo(() => { - const flattened = (featuredTools: Record) => - Object.entries(featuredTools).flatMap(([category, tools]) => - tools.map((tool) => ({ tool, category })) - ); - - if (debouncedQuery.trim().length <= 0) return FeaturedToolsByCategory; + if (debouncedQuery.trim().length <= 0) + return Object.fromEntries(FeaturedToolsByCategory); - const fuse = new Fuse(flattened(FeaturedToolsByCategory), fuseOptions); + const fuse = new Fuse( + FeaturedToolList.map((tool) => ({ tool, category: tool.category })), + fuseOptions + ); const results = fuse.search(debouncedQuery).map((result) => result.item); results.reverse(); diff --git a/components/chat/chatBar/search/catalog.tsx b/components/chat/chatBar/search/catalog.tsx index 0c4d166..020beaf 100644 --- a/components/chat/chatBar/search/catalog.tsx +++ b/components/chat/chatBar/search/catalog.tsx @@ -1,5 +1,9 @@ import { useDebouncedValue } from '@/hooks/useDebounce'; -import { FeaturedTool, FeaturedToolsByCategory } from '@/model/tools'; +import { + FeaturedTool, + FeaturedToolList, + FeaturedToolsByCategory, +} from '@/model/tools'; import { Card, Listbox, @@ -50,14 +54,13 @@ export default forwardRef( const debouncedQuery = useDebouncedValue(query, 250); const featuredResults = useMemo(() => { - const flattened = (featuredTools: Record) => - Object.entries(featuredTools).flatMap(([category, tools]) => - tools.map((tool) => ({ tool, category })) - ); - - if (debouncedQuery.trim().length <= 0) return FeaturedToolsByCategory; + if (debouncedQuery.trim().length <= 0) + return Object.fromEntries(FeaturedToolsByCategory); - const fuse = new Fuse(flattened(FeaturedToolsByCategory), fuseOptions); + const fuse = new Fuse( + FeaturedToolList.map((tool) => ({ tool, category: tool.category })), + fuseOptions + ); const results = fuse.search(debouncedQuery).map((result) => result.item); results.reverse(); diff --git a/model/tools.tsx b/model/tools.tsx index b3ee633..1a0eda5 100644 --- a/model/tools.tsx +++ b/model/tools.tsx @@ -51,7 +51,7 @@ export type FeaturedTool = { }; // note(tylerslaton) - This will eventually be retrieved from the tools site, for now we must endure the pain of hardcoding. -const featuredTools: FeaturedTool[] = [ +export const FeaturedToolList: FeaturedTool[] = [ { name: 'Vision', description: 'Allows the assistant to interact with images.', @@ -285,14 +285,19 @@ const toolIconMap = new Map React.ReactNode>([ ]); export const FeaturedToolMap = new Map( - featuredTools.map((tool) => [tool.url, tool]) + FeaturedToolList.map((tool) => [tool.url, tool]) ); -// using Object.groupby for backwards compatibility -export const FeaturedToolsByCategory = Object.groupBy( - featuredTools, - (tool) => tool.category -) as Record; +// Object.groupBy is not supported in all browsers :( +export const FeaturedToolsByCategory = FeaturedToolList.reduce((acc, tool) => { + if (!acc.get(tool.category)) { + acc.set(tool.category, []); + } + + acc.get(tool.category)?.push(tool); + + return acc; +}, new Map()); export const ToolIcon = ({ toolName }: { toolName?: string }) => { if (!toolName) return ;