@brainfish-ai/devdoc 0.1.42 → 0.1.43

package/renderer/components/docs-viewer/search/search-dialog.js

@@ -0,0 +1,367 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+import { MagnifyingGlass, File, Code, ArrowRight, BookOpen, Lightning } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+const METHOD_COLORS = {
+    GET: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+    POST: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+    PUT: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+    PATCH: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',
+    DELETE: 'bg-red-500/10 text-red-600 dark:text-red-400'
+};
+export function SearchDialog({ open, onOpenChange, items, onSelect }) {
+    const [query, setQuery] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    // Filter and group items based on query with fuzzy/BM25-like scoring
+    const { groupedResults } = useMemo(()=>{
+        let filtered;
+        if (!query.trim()) {
+            // Show a mix of docs and endpoints when no query
+            const docs = items.filter((i)=>i.type === 'doc').slice(0, 15);
+            const endpoints = items.filter((i)=>i.type === 'endpoint').slice(0, 15);
+            filtered = [
+                ...docs,
+                ...endpoints
+            ];
+        } else {
+            // Tokenize query
+            const queryTokens = query.toLowerCase().split(/\s+/).filter((t)=>t.length > 1);
+            const queryLower = query.toLowerCase();
+            // Score each item
+            const scored = items.map((item)=>{
+                let score = 0;
+                const titleLower = item.title.toLowerCase();
+                const descLower = (item.description || '').toLowerCase();
+                const pathLower = (item.path || '').toLowerCase();
+                const hrefLower = item.href.toLowerCase();
+                // Exact phrase match (highest priority)
+                if (titleLower.includes(queryLower)) score += 100;
+                if (pathLower.includes(queryLower)) score += 80;
+                if (descLower.includes(queryLower)) score += 60;
+                if (hrefLower.includes(queryLower)) score += 40;
+                // Token matching
+                for (const token of queryTokens){
+                    // Title matches
+                    if (titleLower === token) score += 50;
+                    else if (titleLower.startsWith(token)) score += 30;
+                    else if (titleLower.includes(token)) score += 20;
+                    // Path matches (for endpoints and docs)
+                    if (pathLower.includes(token)) score += 25;
+                    const pathParts = pathLower.split(/[\/\s-]/);
+                    if (pathParts.some((part)=>part === token)) score += 35;
+                    if (pathParts.some((part)=>part.startsWith(token))) score += 20;
+                    // Description matches
+                    if (descLower.includes(token)) score += 15;
+                    // Href/slug matches
+                    const hrefParts = hrefLower.split(/[\/\s-#]/);
+                    if (hrefParts.some((part)=>part === token)) score += 30;
+                    if (hrefParts.some((part)=>part.startsWith(token))) score += 15;
+                    // Method matching for endpoints
+                    if (item.method && item.method.toLowerCase() === token) score += 25;
+                    // Fuzzy matching
+                    const allWords = [
+                        titleLower,
+                        ...pathParts,
+                        ...hrefParts
+                    ].filter(Boolean);
+                    for (const word of allWords){
+                        if (word.length > 2 && token.length > 2) {
+                            const minLen = Math.min(word.length, token.length);
+                            let matches = 0;
+                            for(let i = 0; i < minLen; i++){
+                                if (word[i] === token[i]) matches++;
+                            }
+                            if (matches / minLen > 0.7) score += 5;
+                        }
+                    }
+                }
+                return {
+                    item,
+                    score
+                };
+            });
+            // Filter and sort by score
+            filtered = scored.filter((s)=>s.score > 0).sort((a, b)=>b.score - a.score).slice(0, 30).map((s)=>s.item);
+        }
+        // Group by type
+        const grouped = {
+            docs: filtered.filter((i)=>i.type === 'doc'),
+            endpoints: filtered.filter((i)=>i.type === 'endpoint')
+        };
+        return {
+            groupedResults: grouped
+        };
+    }, [
+        query,
+        items
+    ]);
+    // Flat list for keyboard navigation
+    const flatItems = useMemo(()=>{
+        return [
+            ...groupedResults.docs,
+            ...groupedResults.endpoints
+        ];
+    }, [
+        groupedResults
+    ]);
+    // Reset selection when results change
+    useEffect(()=>{
+        setSelectedIndex(0);
+    }, [
+        flatItems
+    ]);
+    // Reset and focus when dialog opens
+    useEffect(()=>{
+        if (open) {
+            setQuery('');
+            setSelectedIndex(0);
+            setTimeout(()=>inputRef.current?.focus(), 50);
+        }
+    }, [
+        open
+    ]);
+    // Scroll selected item into view
+    useEffect(()=>{
+        if (listRef.current && flatItems.length > 0) {
+            const selectedEl = listRef.current.querySelector(`[data-index="${selectedIndex}"]`);
+            selectedEl?.scrollIntoView({
+                block: 'nearest'
+            });
+        }
+    }, [
+        selectedIndex,
+        flatItems.length
+    ]);
+    // Handle selection
+    const handleSelect = useCallback((item)=>{
+        onSelect(item);
+        onOpenChange(false);
+    }, [
+        onSelect,
+        onOpenChange
+    ]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((e)=>{
+        switch(e.key){
+            case 'ArrowDown':
+                e.preventDefault();
+                setSelectedIndex((i)=>Math.min(i + 1, flatItems.length - 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setSelectedIndex((i)=>Math.max(i - 1, 0));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (flatItems[selectedIndex]) {
+                    handleSelect(flatItems[selectedIndex]);
+                }
+                break;
+        }
+    }, [
+        flatItems,
+        selectedIndex,
+        handleSelect
+    ]);
+    // Get the global index for an item
+    const getGlobalIndex = (item)=>{
+        return flatItems.findIndex((i)=>i.id === item.id);
+    };
+    const renderItem = (item)=>{
+        const index = getGlobalIndex(item);
+        return /*#__PURE__*/ _jsxs("button", {
+            "data-index": index,
+            onClick: ()=>handleSelect(item),
+            onMouseEnter: ()=>setSelectedIndex(index),
+            className: cn('w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors duration-75', index === selectedIndex ? 'bg-primary/10 text-foreground' : 'hover:bg-muted/50'),
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "shrink-0",
+                    children: item.type === 'endpoint' ? /*#__PURE__*/ _jsx(Code, {
+                        className: "h-4 w-4 text-muted-foreground",
+                        weight: "bold"
+                    }) : /*#__PURE__*/ _jsx(File, {
+                        className: "h-4 w-4 text-muted-foreground",
+                        weight: "bold"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex-1 min-w-0",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                item.method && /*#__PURE__*/ _jsx("span", {
+                                    className: cn('px-1.5 py-0.5 rounded text-[10px] font-bold uppercase shrink-0', METHOD_COLORS[item.method] || 'bg-gray-500/10 text-gray-600'),
+                                    children: item.method
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "font-medium truncate text-sm",
+                                    children: item.title
+                                })
+                            ]
+                        }),
+                        (item.path || item.description) && /*#__PURE__*/ _jsx("p", {
+                            className: "text-xs text-muted-foreground truncate mt-0.5",
+                            children: item.type === 'endpoint' ? item.path : item.description || item.path
+                        })
+                    ]
+                }),
+                index === selectedIndex && /*#__PURE__*/ _jsx(ArrowRight, {
+                    className: "h-4 w-4 text-muted-foreground shrink-0"
+                })
+            ]
+        }, item.id);
+    };
+    const hasResults = flatItems.length > 0;
+    return /*#__PURE__*/ _jsx(Dialog, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ _jsxs(DialogContent, {
+            className: "max-w-2xl p-0 gap-0 overflow-hidden !duration-150",
+            onOpenAutoFocus: (e)=>e.preventDefault(),
+            children: [
+                /*#__PURE__*/ _jsx(VisuallyHidden.Root, {
+                    children: /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: "Search documentation"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center border-b px-4 gap-3",
+                    children: [
+                        /*#__PURE__*/ _jsx(MagnifyingGlass, {
+                            className: "h-5 w-5 text-muted-foreground shrink-0"
+                        }),
+                        /*#__PURE__*/ _jsx("input", {
+                            ref: inputRef,
+                            value: query,
+                            onChange: (e)=>setQuery(e.target.value),
+                            onKeyDown: handleKeyDown,
+                            placeholder: "Search documentation and endpoints...",
+                            className: "flex-1 h-14 text-base bg-transparent outline-none placeholder:text-muted-foreground"
+                        }),
+                        /*#__PURE__*/ _jsx("kbd", {
+                            className: "hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+                            children: "ESC"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    ref: listRef,
+                    className: "max-h-[400px] overflow-y-auto",
+                    children: !hasResults && query ? /*#__PURE__*/ _jsxs("div", {
+                        className: "py-12 text-center text-muted-foreground",
+                        children: [
+                            /*#__PURE__*/ _jsx(MagnifyingGlass, {
+                                className: "h-10 w-10 mx-auto mb-3 opacity-50"
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                className: "text-sm",
+                                children: [
+                                    'No results found for "',
+                                    query,
+                                    '"'
+                                ]
+                            })
+                        ]
+                    }) : !hasResults ? /*#__PURE__*/ _jsx("div", {
+                        className: "py-12 text-center text-muted-foreground",
+                        children: /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm",
+                            children: "Start typing to search..."
+                        })
+                    }) : /*#__PURE__*/ _jsxs("div", {
+                        className: "py-2",
+                        children: [
+                            groupedResults.docs.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                                className: "mb-2",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center gap-2 px-4 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(BookOpen, {
+                                                className: "h-3.5 w-3.5",
+                                                weight: "bold"
+                                            }),
+                                            "Documentation",
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "text-[10px] font-normal ml-auto",
+                                                children: groupedResults.docs.length
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "px-2 space-y-0.5",
+                                        children: groupedResults.docs.map(renderItem)
+                                    })
+                                ]
+                            }),
+                            groupedResults.endpoints.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center gap-2 px-4 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Lightning, {
+                                                className: "h-3.5 w-3.5",
+                                                weight: "bold"
+                                            }),
+                                            "API Endpoints",
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "text-[10px] font-normal ml-auto",
+                                                children: groupedResults.endpoints.length
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "px-2 space-y-0.5",
+                                        children: groupedResults.endpoints.map(renderItem)
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "border-t px-4 py-2 flex items-center gap-4 text-xs text-muted-foreground bg-muted/30",
+                    children: [
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "flex items-center gap-1",
+                            children: [
+                                /*#__PURE__*/ _jsx("kbd", {
+                                    className: "px-1.5 py-0.5 rounded border bg-background text-[10px]",
+                                    children: "↑↓"
+                                }),
+                                "navigate"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "flex items-center gap-1",
+                            children: [
+                                /*#__PURE__*/ _jsx("kbd", {
+                                    className: "px-1.5 py-0.5 rounded border bg-background text-[10px]",
+                                    children: "↵"
+                                }),
+                                "select"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "flex items-center gap-1",
+                            children: [
+                                /*#__PURE__*/ _jsx("kbd", {
+                                    className: "px-1.5 py-0.5 rounded border bg-background text-[10px]",
+                                    children: "esc"
+                                }),
+                                "close"
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}

package/renderer/components/docs-viewer/search/use-search.js

@@ -0,0 +1,89 @@
+'use client';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+export function useSearch({ requests, folders, docGroups }) {
+    const [isOpen, setIsOpen] = useState(false);
+    // Build search items from collection
+    const searchItems = useMemo(()=>{
+        const items = [];
+        // Add endpoints from requests
+        requests.forEach((request)=>{
+            items.push({
+                id: request.id,
+                title: request.name,
+                description: request.description || undefined,
+                type: 'endpoint',
+                method: request.method,
+                path: request.endpoint,
+                href: `#api/${request.id}`
+            });
+        });
+        // Add endpoints from folders recursively
+        const addFolderItems = (folder, parentPath = '')=>{
+            folder.requests?.forEach((request)=>{
+                items.push({
+                    id: request.id,
+                    title: request.name,
+                    description: request.description || undefined,
+                    type: 'endpoint',
+                    method: request.method,
+                    path: request.endpoint,
+                    href: `#api/${request.id}`
+                });
+            });
+            folder.folders?.forEach((subFolder)=>{
+                addFolderItems(subFolder, `${parentPath}/${folder.name}`);
+            });
+        };
+        folders.forEach((folder)=>addFolderItems(folder));
+        // Add doc pages recursively (including nested children)
+        const addDocPages = (pages, groupPath)=>{
+            pages.forEach((page)=>{
+                items.push({
+                    id: `doc-${page.slug}`,
+                    title: page.title,
+                    description: page.description,
+                    type: 'doc',
+                    path: groupPath,
+                    href: `#guides/page/${page.slug}`
+                });
+                // Recursively add children
+                if (page.children && page.children.length > 0) {
+                    addDocPages(page.children, `${groupPath} / ${page.title}`);
+                }
+            });
+        };
+        // Add doc groups recursively
+        const addDocGroup = (group, parentPath = '')=>{
+            const groupPath = parentPath ? `${parentPath} / ${group.title}` : group.title;
+            addDocPages(group.pages, groupPath);
+        };
+        docGroups?.forEach((group)=>{
+            addDocGroup(group);
+        });
+        return items;
+    }, [
+        requests,
+        folders,
+        docGroups
+    ]);
+    // Global keyboard shortcut (Cmd+K or Ctrl+K)
+    useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault();
+                setIsOpen(true);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, []);
+    const openSearch = useCallback(()=>setIsOpen(true), []);
+    const closeSearch = useCallback(()=>setIsOpen(false), []);
+    return {
+        isOpen,
+        setIsOpen,
+        openSearch,
+        closeSearch,
+        searchItems
+    };
+}