"use client" import { createContext, useCallback, useContext, useMemo, useState, type ComponentProps, type PropsWithChildren, type ReactNode, } from "react" import { LibraryIcon, PlusSignIcon } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@/components/ui/command" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, type DialogDescriptionProps, type DialogTitleProps, } from "@/components/ui/dialog" import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Textarea } from "@/components/ui/textarea" import { useOptionalPromptInputController } from "@/components/ai-elements/prompt-input" // ============================================================================ // Types // ============================================================================ export interface Prompt { /** Unique identifier for the prompt */ id: string /** Display title for the prompt */ title: string /** Short description shown in the list */ description: string /** The actual prompt content to insert/copy */ prompt: string /** Optional category for grouping */ category?: string /** Whether this is a user-created prompt */ isCustom?: boolean } export interface PromptLibraryContextValue { /** All available prompts */ prompts: Prompt[] /** Add a custom prompt */ addCustom: (prompt: Omit) => void /** Remove a custom prompt */ removeCustom: (id: string) => void /** Select a prompt (insert or copy) */ selectPrompt: (prompt: Prompt) => void /** Last selected prompt ID */ lastSelectedId: string | null /** Open state for the popover */ open: boolean /** Set open state for the popover */ setOpen: (open: boolean) => void /** Open state for the create dialog */ createDialogOpen: boolean /** Set open state for the create dialog */ setCreateDialogOpen: (open: boolean) => void } // ============================================================================ // Context // ============================================================================ const PromptLibraryContext = createContext( null ) /** * Hook to access the PromptLibrary context * @throws Error if used outside of PromptLibrary provider */ export const usePromptLibrary = () => { const ctx = useContext(PromptLibraryContext) if (!ctx) { throw new Error( "usePromptLibrary must be used within a PromptLibrary provider" ) } return ctx } // ============================================================================ // Controllable State Hook // ============================================================================ function useControllableState( controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void ): [T, (value: T | ((prev: T) => T)) => void] { const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue) const isControlled = controlledValue !== undefined const value = isControlled ? controlledValue : uncontrolledValue const setValue = useCallback( (nextValue: T | ((prev: T) => T)) => { const resolvedValue = typeof nextValue === "function" ? (nextValue as (prev: T) => T)(value) : nextValue if (!isControlled) { setUncontrolledValue(resolvedValue) } onChange?.(resolvedValue) }, [isControlled, onChange, value] ) return [value, setValue] } // ============================================================================ // Root Component // ============================================================================ export type PromptLibraryProps = PropsWithChildren<{ /** Initial set of prompts */ prompts?: Prompt[] /** Callback when prompts change (for custom prompts) */ onPromptsChange?: (prompts: Prompt[]) => void /** Callback when a prompt is selected */ onSelect?: (prompt: Prompt) => void /** Controlled open state for popover */ open?: boolean /** Callback when open state changes */ onOpenChange?: (open: boolean) => void }> /** * Root component for the PromptLibrary widget. * Provides context for all child components. * Integrates with PromptInput when used inside PromptInputProvider. */ export function PromptLibrary({ prompts: controlledPrompts, onPromptsChange, onSelect, open: controlledOpen, onOpenChange, children, }: PromptLibraryProps) { const [internalPrompts, setInternalPrompts] = useState( controlledPrompts ?? [] ) const prompts = controlledPrompts ?? internalPrompts const [open, setOpen] = useControllableState( controlledOpen, false, onOpenChange ) const [createDialogOpen, setCreateDialogOpen] = useState(false) const [lastSelectedId, setLastSelectedId] = useState(null) // Try to get PromptInput controller for integration const promptInputController = useOptionalPromptInputController() const selectPrompt = useCallback( async (prompt: Prompt) => { setLastSelectedId(prompt.id) if (promptInputController) { // Insert directly into PromptInput textarea promptInputController.textInput.setInput(prompt.prompt) } else { // Fallback: copy to clipboard try { await navigator.clipboard.writeText(prompt.prompt) } catch (err) { console.error("Failed to copy to clipboard:", err) } } // Close popover after selection setOpen(false) // Call onSelect callback onSelect?.(prompt) }, [promptInputController, setOpen, onSelect] ) const addCustom = useCallback( (prompt: Omit) => { const newPrompt: Prompt = { ...prompt, id: `custom-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, isCustom: true, } if (controlledPrompts) { onPromptsChange?.([...controlledPrompts, newPrompt]) } else { setInternalPrompts((prev) => [...prev, newPrompt]) } }, [controlledPrompts, onPromptsChange] ) const removeCustom = useCallback( (id: string) => { if (controlledPrompts) { onPromptsChange?.(controlledPrompts.filter((p) => p.id !== id)) } else { setInternalPrompts((prev) => prev.filter((p) => p.id !== id)) } }, [controlledPrompts, onPromptsChange] ) const contextValue = useMemo( () => ({ prompts, addCustom, removeCustom, selectPrompt, lastSelectedId, open, setOpen, createDialogOpen, setCreateDialogOpen, }), [ prompts, addCustom, removeCustom, selectPrompt, lastSelectedId, open, setOpen, createDialogOpen, ] ) return ( {children} ) } // ============================================================================ // Trigger Component // ============================================================================ export type PromptLibraryTriggerProps = ComponentProps & { /** Custom label for the trigger button */ label?: ReactNode } /** * Button that opens the prompt library popover. */ export function PromptLibraryTrigger({ className, label, children, ...props }: PromptLibraryTriggerProps) { return ( ) } // ============================================================================ // Content Component // ============================================================================ export type PromptLibraryContentProps = ComponentProps /** * Popover content container for the prompt library list. */ export function PromptLibraryContent({ className, children, ...props }: PromptLibraryContentProps) { return ( {children} ) } // ============================================================================ // Search Component // ============================================================================ export type PromptLibrarySearchProps = ComponentProps /** * Search input for filtering prompts. */ export function PromptLibrarySearch({ placeholder = "Search prompts...", className, ...props }: PromptLibrarySearchProps) { return ( ) } // ============================================================================ // List Component // ============================================================================ export type PromptLibraryListProps = ComponentProps /** * Scrollable list container for prompts. */ export function PromptLibraryList({ className, children, ...props }: PromptLibraryListProps) { return ( {children} ) } // ============================================================================ // Empty Component // ============================================================================ export type PromptLibraryEmptyProps = ComponentProps /** * Empty state shown when no prompts match the search. */ export function PromptLibraryEmpty({ children = "No prompts found.", className, ...props }: PromptLibraryEmptyProps) { return ( {children} ) } // ============================================================================ // Group Component // ============================================================================ export type PromptLibraryGroupProps = ComponentProps /** * Group container for categorizing prompts. */ export function PromptLibraryGroup({ className, ...props }: PromptLibraryGroupProps) { return ( :first-child_[cmdk-item]]:rounded-t-md", // Last child in group gets rounded bottom "[&_[cmdk-group-items]>:last-child_[cmdk-item]]:rounded-b-md", className )} data-slot="prompt-library-group" {...props} /> ) } // ============================================================================ // Separator Component // ============================================================================ export type PromptLibrarySeparatorProps = ComponentProps< typeof CommandSeparator > /** * Visual separator between prompt groups. */ export function PromptLibrarySeparator({ className, ...props }: PromptLibrarySeparatorProps) { return ( ) } // ============================================================================ // Item Component // ============================================================================ export type PromptLibraryItemProps = Omit< ComponentProps, "value" | "onSelect" > & { /** The prompt data */ prompt: Prompt /** Disable hover card preview */ disablePreview?: boolean } /** * Individual prompt item with click-to-select and optional hover preview. */ export function PromptLibraryItem({ prompt, disablePreview = false, className, children, ...props }: PromptLibraryItemProps) { const { selectPrompt, lastSelectedId } = usePromptLibrary() const isLastSelected = lastSelectedId === prompt.id const handleSelect = () => { selectPrompt(prompt) } const itemContent = (

{children ?? ( <> {prompt.title} {prompt.description} )}

) if (disablePreview || !prompt.prompt) { return itemContent } return ( {itemContent} ) } // ============================================================================ // Item Title Component // ============================================================================ export type PromptLibraryItemTitleProps = ComponentProps<"span"> /** * Title text for a prompt item. */ export function PromptLibraryItemTitle({ className, ...props }: PromptLibraryItemTitleProps) { return ( ) } // ============================================================================ // Item Description Component // ============================================================================ export type PromptLibraryItemDescriptionProps = ComponentProps<"span"> /** * Description text for a prompt item. */ export function PromptLibraryItemDescription({ className, ...props }: PromptLibraryItemDescriptionProps) { return ( ) } // ============================================================================ // Hover Card Component // ============================================================================ export interface PromptLibraryHoverCardProps { /** The prompt to preview */ prompt: Prompt /** The trigger element (prompt item) */ children: ReactNode } /** * Hover card that shows the full prompt content on hover. */ export function PromptLibraryHoverCard({ prompt, children, }: PromptLibraryHoverCardProps) { return ( {children}

{prompt.title} {prompt.description}

{prompt.prompt && (

{prompt.prompt}

)} {prompt.category && ( Category: {prompt.category} )} {prompt.isCustom && ( Custom prompt )}

) } // ============================================================================ // Footer Component // ============================================================================ export type PromptLibraryFooterProps = ComponentProps<"div"> /** * Footer container that stays fixed at the bottom of the popover. * Use this to place the create trigger outside the scrollable list. */ export function PromptLibraryFooter({ className, children, ...props }: PromptLibraryFooterProps) { return (

{children}

) } // ============================================================================ // Create Trigger Component // ============================================================================ export type PromptLibraryCreateTriggerProps = Omit< ComponentProps, "onSelect" > & { /** Custom label for the create button */ label?: ReactNode } /** * Button that opens the create prompt dialog. */ export function PromptLibraryCreateTrigger({ label = "New Prompt", className, children, ...props }: PromptLibraryCreateTriggerProps) { const { setCreateDialogOpen, setOpen } = usePromptLibrary() const handleSelect = () => { setOpen(false) setCreateDialogOpen(true) } return ( {children ?? ( <> {label} )} ) } // ============================================================================ // Create Dialog Component // ============================================================================ export type PromptLibraryCreateDialogProps = Omit< ComponentProps, "open" | "onOpenChange" | "children" > & { /** Dialog title */ title?: DialogTitleProps["children"] /** Dialog description */ description?: DialogDescriptionProps["children"] /** Custom form content to replace the default form */ children?: ReactNode } /** * Modal dialog for creating custom prompts. */ export function PromptLibraryCreateDialog({ title = "Create Prompt", description = "Create a custom prompt template for quick access.", children, ...props }: PromptLibraryCreateDialogProps) { const { createDialogOpen, setCreateDialogOpen, addCustom } = usePromptLibrary() const [formTitle, setFormTitle] = useState("") const [formDescription, setFormDescription] = useState("") const [formPrompt, setFormPrompt] = useState("") const [formCategory, setFormCategory] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!(formTitle.trim() && formDescription.trim() && formPrompt.trim())) { return } addCustom({ title: formTitle.trim(), description: formDescription.trim(), prompt: formPrompt.trim(), category: formCategory.trim() || undefined, }) // Reset form setFormTitle("") setFormDescription("") setFormPrompt("") setFormCategory("") setCreateDialogOpen(false) } const handleOpenChange = (open: boolean) => { setCreateDialogOpen(open) if (!open) { // Reset form when closing setFormTitle("") setFormDescription("") setFormPrompt("") setFormCategory("") } } return (

Prompt Library

Instalação

Dependências