51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T2c79,"use client"; import * as React from "react"; import { Bot, ChevronRight, GitBranch, Settings, User, Wrench, } from "lucide-react"; import { cn } from "@/lib/utils"; type NodeType = "user" | "assistant" | "system" | "tool"; interface ConversationNode { id: string; type: NodeType; content: string; children?: ConversationNode[]; isActive?: boolean; } interface AiConversationTreeContextValue { nodes: ConversationNode[]; activeNodeId?: string; expandedIds: Set; toggleExpanded: (id: string) => void; onNodeSelect?: (nodeId: string) => void; } const AiConversationTreeContext = React.createContext(null); function useConversationTreeContext() { const context = React.useContext(AiConversationTreeContext); if (!context) { throw new Error( "AiConversationTree components must be used within ", ); } return context; } function collectAllNodeIds(nodes: ConversationNode[]): string[] { const ids: string[] = []; const traverse = (node: ConversationNode) => { ids.push(node.id); node.children?.forEach(traverse); }; nodes.forEach(traverse); return ids; } function findActivePath( nodes: ConversationNode[], targetId: string, ): Set { const path = new Set(); const traverse = (node: ConversationNode, currentPath: string[]): boolean => { const newPath = [...currentPath, node.id]; if (node.id === targetId) { newPath.forEach((id) => path.add(id)); return true; } if (node.children) { for (const child of node.children) { if (traverse(child, newPath)) { return true; } } } return false; }; nodes.forEach((node) => traverse(node, [])); return path; } interface AiConversationTreeProps { nodes: ConversationNode[]; activeNodeId?: string; onNodeSelect?: (nodeId: string) => void; defaultExpandAll?: boolean; className?: string; children?: React.ReactNode; } function AiConversationTree({ nodes, activeNodeId, onNodeSelect, defaultExpandAll = true, className, children, }: AiConversationTreeProps) { const [expandedIds, setExpandedIds] = React.useState>(() => { if (defaultExpandAll) { return new Set(collectAllNodeIds(nodes)); } return new Set(); }); const toggleExpanded = React.useCallback((id: string) => { setExpandedIds((prev) => { const next = new Set(prev); if (next.has(id)) { next.delete(id); } else { next.add(id); } return next; }); }, []); const contextValue = React.useMemo( () => ({ nodes, activeNodeId, expandedIds, toggleExpanded, onNodeSelect }), [nodes, activeNodeId, expandedIds, toggleExpanded, onNodeSelect], ); return (

{children}

); } interface AiConversationTreeHeaderProps { title?: string; children?: React.ReactNode; className?: string; } function AiConversationTreeHeader({ title = "Conversation Tree", children, className, }: AiConversationTreeHeaderProps) { const { nodes } = useConversationTreeContext(); const stats = React.useMemo(() => { let totalNodes = 0; let branches = 0; const traverse = (node: ConversationNode) => { totalNodes++; if (node.children && node.children.length > 1) { branches++; } node.children?.forEach(traverse); }; nodes.forEach(traverse); return { totalNodes, branches }; }, [nodes]); return (

{title} {stats.totalNodes} messages {stats.branches > 0 && ` / ${stats.branches} branches`}

{children}

); } interface AiConversationTreeContentProps { className?: string; } function AiConversationTreeContent({ className, }: AiConversationTreeContentProps) { const { nodes, activeNodeId } = useConversationTreeContext(); const activePath = React.useMemo( () => activeNodeId ? findActivePath(nodes, activeNodeId) : new Set(), [nodes, activeNodeId], ); return (

{nodes.map((node) => ( ))}

); } interface AiConversationTreeNodeProps { node: ConversationNode; depth: number; activePath: Set; className?: string; } function AiConversationTreeNode({ node, depth, activePath, className, }: AiConversationTreeNodeProps) { const { activeNodeId, expandedIds, toggleExpanded, onNodeSelect } = useConversationTreeContext(); const hasChildren = node.children && node.children.length > 0; const isExpanded = expandedIds.has(node.id); const isActive = node.id === activeNodeId; const isInActivePath = activePath.has(node.id); const nodeConfig = React.useMemo(() => { const configs: Record< NodeType, { icon: React.ReactNode; label: string; className: string } > = { user: { icon: , label: "User", className: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300", }, assistant: { icon: , label: "Assistant", className: "bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300", }, system: { icon: , label: "System", className: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300", }, tool: { icon: , label: "Tool", className: "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300", }, }; return configs[node.type]; }, [node.type]); const handleClick = React.useCallback(() => { onNodeSelect?.(node.id); }, [node.id, onNodeSelect]); const handleToggle = React.useCallback( (e: React.MouseEvent) => { e.stopPropagation(); toggleExpanded(node.id); }, [node.id, toggleExpanded], ); return (

0 && "ml-4", )} style={{ marginLeft: depth > 0 ? `${depth * 16}px` : undefined }} onClick={handleClick} > {hasChildren ? ( ) : (

)}

{nodeConfig.icon}

{node.content} {hasChildren && ( {node.children?.length} )}

{hasChildren && isExpanded && (

0 ? `${depth * 16}px` : undefined }} /> {node.children?.map((child) => ( ))}

)}

); } interface AiConversationTreePreviewProps { className?: string; } function AiConversationTreePreview({ className, }: AiConversationTreePreviewProps) { const { nodes, activeNodeId } = useConversationTreeContext(); const activeNode = React.useMemo(() => { if (!activeNodeId) return null; const findNode = ( searchNodes: ConversationNode[], ): ConversationNode | null => { for (const node of searchNodes) { if (node.id === activeNodeId) return node; if (node.children) { const found = findNode(node.children); if (found) return found; } } return null; }; return findNode(nodes); }, [nodes, activeNodeId]); if (!activeNode) { return (

Select a message to preview

); } const nodeConfig = { user: { label: "User", className: "text-blue-600 dark:text-blue-400" }, assistant: { label: "Assistant", className: "text-purple-600 dark:text-purple-400", }, system: { label: "System", className: "text-gray-600 dark:text-gray-400" }, tool: { label: "Tool", className: "text-amber-600 dark:text-amber-400" }, }[activeNode.type]; return (

{nodeConfig.label} #{activeNode.id}

{activeNode.content}

); } export { AiConversationTree, AiConversationTreeHeader, AiConversationTreeContent, AiConversationTreeNode, AiConversationTreePreview, }; export type { AiConversationTreeProps, ConversationNode, NodeType }; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://www.tryelements.dev/r/conversation-tree.json","proxyUrl":"https://shadcnregistry.com/r/elements/conversation-tree","itemId":"@elements/conversation-tree"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/default/blocks/ai/ai-conversation-tree/components/elements/ai-conversation-tree.tsx","content":"$54","type":"registry:component"}]}]]}],"$L55"]}]

AI Conversation Tree

Installation

Files

components

Styles