4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T4fbd,"use client"; import { ArrowDownIcon, ArrowLeftIcon, ArrowUpIcon, CircleQuestionMarkIcon, CornerDownLeftIcon, SearchIcon, SparklesIcon, } from "lucide-react"; import Link from "next/link"; import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { useAutocompleteFilter } from "@/registry/default/ui/autocomplete"; import { Button } from "@/registry/default/ui/button"; import { Command, CommandCollection, CommandCreateHandle, CommandDialog, CommandDialogPopup, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, } from "@/registry/default/ui/command"; import { EmptyMedia } from "@/registry/default/ui/empty"; import { Input } from "@/registry/default/ui/input"; import { Kbd, KbdGroup } from "@/registry/default/ui/kbd"; import { ScrollArea } from "@/registry/default/ui/scroll-area"; import { Skeleton } from "@/registry/default/ui/skeleton"; import { Spinner } from "@/registry/default/ui/spinner"; interface Item { value: string; label: string; shortcut?: string; keywords?: string[]; } interface Group { value: string; items: Item[]; } const commandGroups: Group[] = [ { items: [ { keywords: ["dash"], label: "Dashboard", shortcut: "d", value: "dashboard", }, { keywords: ["proj"], label: "Projects", shortcut: "p", value: "projects", }, { keywords: ["team"], label: "Team", shortcut: "t", value: "team" }, ], value: "Pages", }, { items: [ { keywords: ["prof"], label: "Profile", shortcut: "p s", value: "profile", }, { keywords: ["acc"], label: "Account", shortcut: "a s", value: "account", }, { keywords: ["pref"], label: "Preferences", shortcut: "p r", value: "preferences", }, ], value: "Settings", }, { items: [ { keywords: ["docs"], label: "Documentation", shortcut: "d o", value: "docs", }, { keywords: ["sup"], label: "Support", shortcut: "s u", value: "support", }, { keywords: ["feed"], label: "Feedback", shortcut: "f b", value: "feedback", }, ], value: "Help", }, ]; const MOCK_AI_RESPONSE = `To create a new project, navigate to the Projects page and click the "New Project" button in the top right corner. You'll be prompted to enter a project name and description. Once created, you can invite team members by clicking the "Share" button and entering their email addresses. Team members will receive an invitation link via email or you can add them manually by clicking the "Add Team Member" button in the project settings. You can customize project settings at any time by clicking the settings icon in the project header. For more information, see the Project Settings documentation.`; const MOCK_REFERENCE_LINKS = [ { title: "Creating Projects", url: "/docs/projects/create" }, { title: "Team Collaboration", url: "/docs/team/collaborate" }, { title: "Project Settings", url: "/docs/projects/settings" }, ]; export const commandHandle: ReturnType = CommandCreateHandle(); interface AIState { mode: boolean; query: string; submittedQuery: string; response: string; referenceLinks: Array<{ title: string; url: string }>; isGenerating: boolean; error: string | null; } const initialAIState: AIState = { error: null, isGenerating: false, mode: false, query: "", referenceLinks: [], response: "", submittedQuery: "", }; function markdownToSafeHTML(markdown: string): string { // Simple markdown to HTML converter for demo purposes return markdown .split("\n\n") .map((para) => `

${para}

`) .join(""); } export default function PCommand2() { const [open, setOpen] = useState(false); const [aiState, setAIState] = useState(initialAIState); const [searchQuery, setSearchQuery] = useState(""); const aiInputRef = useRef(null); const searchInputRef = useRef(null); const abortControllerRef = useRef(null); const commandResetKeyRef = useRef(0); // Cleanup on unmount useEffect(() => { return () => { abortControllerRef.current?.abort(); }; }, []); const resetAIState = useCallback(() => { abortControllerRef.current?.abort(); setAIState(initialAIState); }, []); const handleItemClick = useCallback(() => { setOpen(false); }, []); const handleBackToSearch = useCallback(() => { resetAIState(); setSearchQuery(""); commandResetKeyRef.current += 1; searchInputRef.current?.focus(); }, [resetAIState]); const handleGenerateAI = useCallback( async (queryOverride?: string) => { const query = queryOverride || aiState.query; if (!query.trim()) return; abortControllerRef.current?.abort(); const controller = new AbortController(); abortControllerRef.current = controller; setAIState((prev) => ({ ...prev, error: null, isGenerating: true, query: "", referenceLinks: [], response: "", submittedQuery: query, })); try { await new Promise((resolve, reject) => { const timeout = setTimeout(resolve, 1500); controller.signal.addEventListener("abort", () => { clearTimeout(timeout); reject(new Error("aborted")); }); }); if (controller.signal.aborted) return; setAIState((prev) => ({ ...prev, isGenerating: false, referenceLinks: MOCK_REFERENCE_LINKS, response: MOCK_AI_RESPONSE, })); } catch (error) { if (error instanceof Error && error.message === "aborted") { return; } if (controller.signal.aborted) return; setAIState((prev) => ({ ...prev, error: "Failed to generate response. Please try again.", isGenerating: false, })); } }, [aiState.query], ); const handleAskAI = useCallback(() => { const currentQuery = searchQuery; setSearchQuery(""); if (currentQuery.trim()) { setAIState((prev) => ({ ...prev, mode: true })); handleGenerateAI(currentQuery); } else { setAIState((prev) => ({ ...prev, mode: true, query: "" })); aiInputRef.current?.focus(); } }, [searchQuery, handleGenerateAI]); const { contains } = useAutocompleteFilter({ sensitivity: "base" }); const filterItem = useCallback( (itemValue: unknown, query: string): boolean => { if (typeof itemValue !== "object" || itemValue === null) { return false; } const item = itemValue as Item; if (contains(item.label, query)) { return true; } if (contains(item.value, query)) { return true; } if (item.keywords?.some((keyword) => contains(keyword, query))) { return true; } return false; }, [contains], ); useEffect(() => { if (!open || !aiState.mode) return; const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); handleBackToSearch(); } }; document.addEventListener("keydown", handleEscape, true); return () => document.removeEventListener("keydown", handleEscape, true); }, [open, aiState.mode, handleBackToSearch]); useEffect(() => { if (aiState.mode && !aiState.isGenerating) { aiInputRef.current?.focus(); } }, [aiState.mode, aiState.isGenerating]); const hasResults = useMemo( () => !searchQuery.trim() || commandGroups.some((group) => group.items.some((item) => filterItem(item, searchQuery)), ), [searchQuery, filterItem], ); const handleOpenChange = useCallback( (newOpen: boolean) => { setOpen(newOpen); if (!newOpen) { setSearchQuery(""); resetAIState(); } }, [resetAIState], ); return ( <> {!aiState.mode ? (

setSearchQuery(e.target.value)} onKeyDown={(e) => { if (e.key === "Tab") { e.preventDefault(); handleAskAI(); } if ( e.key === "Enter" && !hasResults && searchQuery.trim() ) { e.preventDefault(); handleAskAI(); } }} placeholder="Type a command or search..." ref={searchInputRef} value={searchQuery} />

{searchQuery.trim() && (

No results found.

Press Enter to ask AI about:
{" "} {searchQuery}

)} {(group: Group) => ( {group.value} {(item: Item) => ( {item.label} {item.shortcut && ( {item.shortcut} )} )} )} {hasResults ? ( <>

Navigate

Open

Esc Close

) : (

Esc Close

)} ) : (

setAIState((prev) => ({ ...prev, query: e.target.value, })) } onKeyDown={(e) => { if (e.key === "Enter" && !aiState.isGenerating) { handleGenerateAI(); } if (e.key === "Escape") { e.preventDefault(); handleBackToSearch(); } }} placeholder="Ask AI anything…" ref={aiInputRef} size="lg" value={aiState.query} />

{!aiState.isGenerating && !aiState.response && !aiState.error && (

Ask AI anything and press Enter to get started.

)} {aiState.error && (

{aiState.error}

)} {aiState.isGenerating && (

)} {aiState.response && !aiState.isGenerating && ( <>

{aiState.referenceLinks.length > 0 && (

{aiState.referenceLinks.map((link, index) => ( ))}

)} )}

{aiState.isGenerating ? (

Generating response…

) : aiState.response ? (

You asked: "{aiState.submittedQuery}"

) : (

Ask AI

)} )} ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@coss","registryDependencies":["@coss/autocomplete","@coss/button","@coss/command","@coss/empty","@coss/input","@coss/kbd","@coss/scroll-area","@coss/skeleton","@coss/spinner"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/particles/p-command-2.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]