4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T4c14,'use client' import { IconArrowDown, IconArrowLeft, IconArrowUp, IconSparkles, IconCornerDownLeft, IconSearch, } from '@tabler/icons-react' import Link from 'next/link' import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useAutocompleteFilter } from '@/components/ui/autocomplete' import { Button } from '@/components/ui/button' import { Command, CommandCollection, CommandCreateHandle, CommandDialog, CommandDialogPopup, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, } from '@/components/ui/command' import { EmptyMedia } from '@/components/ui/empty' import { Input } from '@/components/ui/input' import { Kbd, KbdGroup } from '@/components/ui/kbd' import { ScrollArea } from '@/components/ui/scroll-area' import { Skeleton } from '@/components/ui/skeleton' import { Spinner } from '@/components/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 Demo() { 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

)} )} ) } 4b:["$","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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/primitives-autocomplete.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-command.json","https://www.spaceui.one/r/primitives-empty.json","https://www.spaceui.one/r/primitives-input.json","https://www.spaceui.one/r/primitives-kbd.json","https://www.spaceui.one/r/primitives-scroll-area.json","https://www.spaceui.one/r/primitives-skeleton.json","https://www.spaceui.one/r/primitives-spinner.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/primitives/command/p-command-02/index.tsx","content":"$4e","type":"registry:ui","target":"components/spaceui/command.tsx"}],"className":"h-[70svh] min-h-80"}]]}]