"use client" import { createContext, useCallback, useContext, useMemo, useState, type ComponentProps, type PropsWithChildren, type ReactNode, } from "react" import { CheckmarkSquare02Icon, PlusSignIcon, SettingsIcon, } 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" // ============================================================================ // Types // ============================================================================ export interface Instruction { /** Unique identifier for the instruction */ id: string /** Display title for the instruction */ title: string /** Short description shown in the list */ description: string /** Full instruction content shown in hover preview */ content?: string /** Whether this is a user-created instruction */ isCustom?: boolean } export interface InstructionsContextValue { /** Currently active instruction IDs */ activeIds: string[] /** Toggle an instruction's active state */ toggle: (id: string) => void /** Check if an instruction is active */ isActive: (id: string) => boolean /** All available instructions */ instructions: Instruction[] /** Add a custom instruction */ addCustom: (instruction: Omit) => void /** Remove a custom instruction */ removeCustom: (id: string) => void /** 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 InstructionsContext = createContext(null) /** * Hook to access the Instructions context * @throws Error if used outside of Instructions provider */ export const useInstructions = () => { const ctx = useContext(InstructionsContext) if (!ctx) { throw new Error( "useInstructions must be used within an Instructions 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 InstructionsProps = PropsWithChildren<{ /** Controlled active instruction IDs */ value?: string[] /** Callback when active instructions change */ onValueChange?: (value: string[]) => void /** Default active instruction IDs (uncontrolled) */ defaultValue?: string[] /** Initial set of instructions */ instructions?: Instruction[] /** Callback when instructions change (for custom instructions) */ onInstructionsChange?: (instructions: Instruction[]) => void /** Controlled open state for popover */ open?: boolean /** Callback when open state changes */ onOpenChange?: (open: boolean) => void }> /** * Root component for the Instructions widget. * Provides context for all child components. */ export function Instructions({ value, onValueChange, defaultValue = [], instructions: controlledInstructions, onInstructionsChange, open: controlledOpen, onOpenChange, children, }: InstructionsProps) { const [activeIds, setActiveIds] = useControllableState( value, defaultValue, onValueChange ) const [internalInstructions, setInternalInstructions] = useState< Instruction[] >(controlledInstructions ?? []) const instructions = controlledInstructions ?? internalInstructions const [open, setOpen] = useControllableState( controlledOpen, false, onOpenChange ) const [createDialogOpen, setCreateDialogOpen] = useState(false) const toggle = useCallback( (id: string) => { setActiveIds((prev) => prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id] ) }, [setActiveIds] ) const isActive = useCallback( (id: string) => activeIds.includes(id), [activeIds] ) const addCustom = useCallback( (instruction: Omit) => { const newInstruction: Instruction = { ...instruction, id: `custom-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, isCustom: true, } if (controlledInstructions) { onInstructionsChange?.([...controlledInstructions, newInstruction]) } else { setInternalInstructions((prev) => [...prev, newInstruction]) } }, [controlledInstructions, onInstructionsChange] ) const removeCustom = useCallback( (id: string) => { // Also remove from active if it was active setActiveIds((prev) => prev.filter((i) => i !== id)) if (controlledInstructions) { onInstructionsChange?.( controlledInstructions.filter((i) => i.id !== id) ) } else { setInternalInstructions((prev) => prev.filter((i) => i.id !== id)) } }, [controlledInstructions, onInstructionsChange, setActiveIds] ) const contextValue = useMemo( () => ({ activeIds, toggle, isActive, instructions, addCustom, removeCustom, open, setOpen, createDialogOpen, setCreateDialogOpen, }), [ activeIds, toggle, isActive, instructions, addCustom, removeCustom, open, setOpen, createDialogOpen, ] ) return ( {children} ) } // ============================================================================ // Trigger Component // ============================================================================ export type InstructionsTriggerProps = ComponentProps & { /** Custom label for the trigger button */ label?: ReactNode } /** * Button that opens the instructions popover. * Shows active count badge when instructions are selected. */ export function InstructionsTrigger({ className, label, children, ...props }: InstructionsTriggerProps) { const { activeIds } = useInstructions() const activeCount = activeIds.length return ( ) } // ============================================================================ // Content Component // ============================================================================ export type InstructionsContentProps = ComponentProps /** * Popover content container for the instructions list. */ export function InstructionsContent({ className, children, ...props }: InstructionsContentProps) { return ( {children} ) } // ============================================================================ // Search Component // ============================================================================ export type InstructionsSearchProps = ComponentProps /** * Search input for filtering instructions. */ export function InstructionsSearch({ placeholder = "Search instructions...", className, ...props }: InstructionsSearchProps) { return ( ) } // ============================================================================ // List Component // ============================================================================ export type InstructionsListProps = ComponentProps /** * Scrollable list container for instructions. */ export function InstructionsList({ className, children, ...props }: InstructionsListProps) { return ( {children} ) } // ============================================================================ // Empty Component // ============================================================================ export type InstructionsEmptyProps = ComponentProps /** * Empty state shown when no instructions match the search. */ export function InstructionsEmpty({ children = "No instructions found.", className, ...props }: InstructionsEmptyProps) { return ( {children} ) } // ============================================================================ // Group Component // ============================================================================ export type InstructionsGroupProps = ComponentProps /** * Group container for categorizing instructions. * Applies rounded corners to first/last items only. */ export function InstructionsGroup({ className, ...props }: InstructionsGroupProps) { 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="instructions-group" {...props} /> ) } // ============================================================================ // Separator Component // ============================================================================ export type InstructionsSeparatorProps = ComponentProps /** * Visual separator between instruction groups. */ export function InstructionsSeparator({ className, ...props }: InstructionsSeparatorProps) { return ( ) } // ============================================================================ // Item Component // ============================================================================ export type InstructionsItemProps = Omit< ComponentProps, "value" | "onSelect" > & { /** The instruction data */ instruction: Instruction /** Disable hover card preview */ disablePreview?: boolean } /** * Individual instruction item with toggle state and optional hover preview. */ export function InstructionsItem({ instruction, disablePreview = false, className, children, ...props }: InstructionsItemProps) { const { toggle, isActive } = useInstructions() const active = isActive(instruction.id) const handleSelect = () => { toggle(instruction.id) } const itemContent = (

{active && ( )}

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

) if (disablePreview || !instruction.content) { return itemContent } return ( {itemContent} ) } // ============================================================================ // Item Title Component // ============================================================================ export type InstructionsItemTitleProps = ComponentProps<"span"> /** * Title text for an instruction item. */ export function InstructionsItemTitle({ className, ...props }: InstructionsItemTitleProps) { return ( ) } // ============================================================================ // Item Description Component // ============================================================================ export type InstructionsItemDescriptionProps = ComponentProps<"span"> /** * Description text for an instruction item. */ export function InstructionsItemDescription({ className, ...props }: InstructionsItemDescriptionProps) { return ( ) } // ============================================================================ // Hover Card Component // ============================================================================ export interface InstructionsHoverCardProps { /** The instruction to preview */ instruction: Instruction /** The trigger element (instruction item) */ children: ReactNode } /** * Hover card that shows the full instruction content on hover. */ export function InstructionsHoverCard({ instruction, children, }: InstructionsHoverCardProps) { return ( {children}

{instruction.title} {instruction.description}

{instruction.content && (

{instruction.content}

)} {instruction.isCustom && ( Custom instruction )}

) } // ============================================================================ // Footer Component // ============================================================================ export type InstructionsFooterProps = 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 InstructionsFooter({ className, children, ...props }: InstructionsFooterProps) { return (

{children}

) } // ============================================================================ // Create Trigger Component // ============================================================================ export type InstructionsCreateTriggerProps = Omit< ComponentProps, "onSelect" > & { /** Custom label for the create button */ label?: ReactNode } /** * Button that opens the create instruction dialog. */ export function InstructionsCreateTrigger({ label = "New Instruction", className, children, ...props }: InstructionsCreateTriggerProps) { const { setCreateDialogOpen, setOpen } = useInstructions() const handleSelect = () => { setOpen(false) setCreateDialogOpen(true) } return ( {children ?? ( <> {label} )} ) } // ============================================================================ // Create Dialog Component // ============================================================================ export type InstructionsCreateDialogProps = 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 instructions. */ export function InstructionsCreateDialog({ title = "Create Instruction", description = "Create a custom instruction to guide the AI's behavior.", children, ...props }: InstructionsCreateDialogProps) { const { createDialogOpen, setCreateDialogOpen, addCustom } = useInstructions() const [formTitle, setFormTitle] = useState("") const [formDescription, setFormDescription] = useState("") const [formContent, setFormContent] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!(formTitle.trim() && formDescription.trim())) { return } addCustom({ title: formTitle.trim(), description: formDescription.trim(), content: formContent.trim() || undefined, }) // Reset form setFormTitle("") setFormDescription("") setFormContent("") setCreateDialogOpen(false) } const handleOpenChange = (open: boolean) => { setCreateDialogOpen(open) if (!open) { // Reset form when closing setFormTitle("") setFormDescription("") setFormContent("") } } return (

Ai Instructions

Instalação

Dependências