50: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"] 51: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"] 52:T33a9,"use client"; import { cn } from "@/lib/utils"; import { ChevronLeftIcon, ChevronRightIcon, Copy, Pencil } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import type { HTMLAttributes, ReactElement, ReactNode } from "react"; import { createContext, useContext, useEffect, useMemo, useState } from "react"; interface AIBranchContextType { branches: ReactElement[]; currentBranch: number; goToNext: () => void; goToPrevious: () => void; setBranches: (branches: ReactElement[]) => void; totalBranches: number; } /** * The same two springs every other AI component uses. * * This file predates that vocabulary and had eight hand-tuned * `stiffness`/`damping` pairs — several of which also passed `duration`, which * Motion ignores once stiffness is present. Sharing the tokens is what stops * `ai-branch` feeling like it came from a different library than `ai-message`. */ const SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: "spring" as const, }; const SPRING_SNAPPY = { bounce: 0, duration: 0.2, type: "spring" as const, }; const AIBranchContext = createContext(null); const useAIBranch = () => { const context = useContext(AIBranchContext); if (!context) { throw new Error("AIBranch components must be used within AIBranch"); } return context; }; export type AIBranchProps = HTMLAttributes & { defaultBranch?: number; onBranchChange?: (branchIndex: number) => void; }; export const AIBranch = ({ defaultBranch = 0, onBranchChange, className, ...props }: AIBranchProps) => { const [currentBranch, setCurrentBranch] = useState(defaultBranch); const [branches, setBranches] = useState([]); const handleBranchChange = (newBranch: number) => { setCurrentBranch(newBranch); onBranchChange?.(newBranch); }; const goToPrevious = () => { const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1; handleBranchChange(newBranch); }; const goToNext = () => { const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0; handleBranchChange(newBranch); }; const contextValue: AIBranchContextType = { branches, currentBranch, goToNext, goToPrevious, setBranches, totalBranches: branches.length, }; return (

div]:pb-0", className)} {...props} /> ); }; export interface AIBranchMessagesProps { children: ReactElement | ReactElement[]; } export const AIBranchMessages = ({ children }: AIBranchMessagesProps) => { const { currentBranch, setBranches, branches } = useAIBranch(); const shouldReduceMotion = useReducedMotion(); const childrenArray = useMemo( () => (Array.isArray(children) ? children : [children]), [children] ); // Use useEffect to update branches when they change useEffect(() => { if (branches.length !== childrenArray.length) { setBranches(childrenArray); } }, [childrenArray, branches, setBranches]); return childrenArray.map((branch, index) => ( div]:pb-0", index === currentBranch ? "block" : "hidden" )} initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 10 }} key={`branch-${index}-${currentBranch}`} transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT} > {branch} )); }; export type AIBranchSelectorProps = HTMLAttributes & { from: "user" | "assistant"; }; export const AIBranchSelector = ({ className, from, ...props }: AIBranchSelectorProps) => { const { totalBranches } = useAIBranch(); // Don't render if there's only one branch if (totalBranches <= 1) { return null; } return (

); }; export interface AIBranchPreviousProps { children?: ReactNode; className?: string; } export const AIBranchPrevious = ({ className, children, }: AIBranchPreviousProps) => { const { goToPrevious, totalBranches } = useAIBranch(); const shouldReduceMotion = useReducedMotion(); return ( {children ?? } ); }; export interface AIBranchNextProps { children?: ReactNode; className?: string; } export const AIBranchNext = ({ className, children }: AIBranchNextProps) => { const { goToNext, totalBranches } = useAIBranch(); const shouldReduceMotion = useReducedMotion(); return ( {children ?? } ); }; export interface AIBranchPageProps { className?: string; } export const AIBranchPage = ({ className }: AIBranchPageProps) => { const { currentBranch, totalBranches } = useAIBranch(); return ( {currentBranch + 1} of {totalBranches} ); }; // Updated type for conversation branches export interface AIBranchData { aiResponse: string; id: string; isActive: boolean; timestamp: Date; userMessage: string; } // Export the type alias for backward compatibility export type AIBranch = AIBranchData; interface LegacyAiBranchProps { branches: AIBranchData[]; className?: string; onBranchSelect: (branchId: string) => void; } // Updated legacy component to show conversation branches export function LegacyAiBranch({ branches, onBranchSelect, className, }: LegacyAiBranchProps) { const shouldReduceMotion = useReducedMotion(); const [currentBranchIndex, setCurrentBranchIndex] = useState(() => branches.findIndex((branch) => branch.isActive) ); const activeBranch = branches[currentBranchIndex]; const goToPrevious = () => { const newIndex = currentBranchIndex > 0 ? currentBranchIndex - 1 : branches.length - 1; setCurrentBranchIndex(newIndex); onBranchSelect(branches[newIndex].id); }; const goToNext = () => { const newIndex = currentBranchIndex < branches.length - 1 ? currentBranchIndex + 1 : 0; setCurrentBranchIndex(newIndex); onBranchSelect(branches[newIndex].id); }; return (

{/* Active Branch Display */} {activeBranch ? ( {/* User Message with Branch Navigation */}

{activeBranch.userMessage}

{/* Branch Navigation Controls */} {branches.length > 1 && (

{currentBranchIndex + 1}/{branches.length}

)}

{/* AI Response */}

{activeBranch.aiResponse}

) : null}

); } // Export the legacy component as the default for backward compatibility export { LegacyAiBranch as AiBranch }; // Add default export for lazy loading export default LegacyAiBranch; 4f:["$","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"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@smoothui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"index.tsx","content":"$52","type":"registry:ui","target":"components/smoothui/ai-branch/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]