// Ported from vercel/ai-elements @ main (packages/elements/src/chain-of-thought.tsx). // Customizations applied on import: import-alias rewrites, RTL physical→logical // class swap, Vercel theme-token sweep. See scripts/registry/port-ai-elements.mjs // for the deterministic transforms — re-run to re-sync against upstream. "use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import type { LucideIcon } from "lucide-react"; import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react"; import type { ComponentProps, ReactNode } from "react"; import { createContext, memo, useContext, useMemo } from "react"; import { Badge } from "@/components/registry/primitives/core/badge"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/registry/primitives/core/collapsible"; import { cn } from "@/lib/registry/cn"; interface ChainOfThoughtContextValue { isOpen: boolean; setIsOpen: (open: boolean) => void; } const ChainOfThoughtContext = createContext( null, ); const useChainOfThought = () => { const context = useContext(ChainOfThoughtContext); if (!context) { throw new Error( "ChainOfThought components must be used within ChainOfThought", ); } return context; }; export type ChainOfThoughtProps = ComponentProps<"div"> & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; }; export const ChainOfThought = memo( ({ className, open, defaultOpen = false, onOpenChange, children, ...props }: ChainOfThoughtProps) => { const [isOpen, setIsOpen] = useControllableState({ defaultProp: defaultOpen, onChange: onOpenChange, prop: open, }); const chainOfThoughtContext = useMemo( () => ({ isOpen, setIsOpen }), [isOpen, setIsOpen], ); return (

{children}

); }, ); export type ChainOfThoughtHeaderProps = ComponentProps< typeof CollapsibleTrigger >; export const ChainOfThoughtHeader = memo( ({ className, children, ...props }: ChainOfThoughtHeaderProps) => { const { isOpen, setIsOpen } = useChainOfThought(); return ( {children ?? "Chain of Thought"} ); }, ); export type ChainOfThoughtStepProps = ComponentProps<"div"> & { icon?: LucideIcon; label: ReactNode; description?: ReactNode; status?: "complete" | "active" | "pending"; }; const stepStatusStyles = { active: "text-foreground", complete: "text-muted-foreground", pending: "text-muted-foreground/50", }; export const ChainOfThoughtStep = memo( ({ className, icon: Icon = DotIcon, label, description, status = "complete", children, ...props }: ChainOfThoughtStepProps) => (

{label}

{description && (

{description}

)} {children}

), ); export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">; export const ChainOfThoughtSearchResults = memo( ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (

), ); export type ChainOfThoughtSearchResultProps = ComponentProps; export const ChainOfThoughtSearchResult = memo( ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => ( {children} ), ); export type ChainOfThoughtContentProps = ComponentProps< typeof CollapsibleContent >; export const ChainOfThoughtContent = memo( ({ className, children, ...props }: ChainOfThoughtContentProps) => { const { isOpen } = useChainOfThought(); return ( {children} ); }, ); export type ChainOfThoughtImageProps = ComponentProps<"div"> & { caption?: string; }; export const ChainOfThoughtImage = memo( ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (

{children}

{caption &&

{caption}

}

), ); ChainOfThought.displayName = "ChainOfThought"; ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader"; ChainOfThoughtStep.displayName = "ChainOfThoughtStep"; ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults"; ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult"; ChainOfThoughtContent.displayName = "ChainOfThoughtContent"; ChainOfThoughtImage.displayName = "ChainOfThoughtImage";

Chain Of Thought

Showcase

Chain Of Thought