{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "elements-conversation-map", "type": "registry:component", "title": "Conversation map", "description": "A rail of the whole thread: one tick per turn, the turn being read marked and the ones on screen deepened, and a hover preview of what it says.", "registryDependencies": [ "https://r.assistant-ui.com/elements-surfaces.json", "https://r.assistant-ui.com/elements-range.json" ], "dependencies": [ "@base-ui/react" ], "files": [ { "type": "registry:component", "path": "components/assistant-ui/elements/conversation-map.tsx", "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/conversation-map.tsx", "content": "\"use client\";\n\nimport {\n useCallback,\n useRef,\n useState,\n type ComponentProps,\n type KeyboardEvent,\n} from \"react\";\nimport { PreviewCard } from \"@base-ui/react/preview-card\";\nimport { cn } from \"@/lib/utils\";\nimport { floating } from \"./surfaces\";\nimport { clamp } from \"../utils/range\";\n\nexport interface ConversationMapEntry {\n id: string;\n title: string;\n preview?: string;\n}\n\nconst TICK = '[data-slot=\"conversation-map-tick\"]';\n\nexport function ConversationMap({\n entries,\n activeId,\n visibleIds,\n onSelect,\n side = \"right\",\n className,\n onKeyDown,\n ...props\n}: Omit, \"children\" | \"onSelect\"> & {\n entries: readonly ConversationMapEntry[];\n activeId?: string | undefined;\n visibleIds?: readonly string[] | undefined;\n onSelect?: ((id: string) => void) | undefined;\n side?: \"left\" | \"right\";\n}) {\n const railRef = useRef(null);\n const [handle] = useState(() =>\n PreviewCard.createHandle(),\n );\n const [focusedIndex, setFocusedIndex] = useState(null);\n\n const inView = new Set(visibleIds);\n const activeIndex = entries.findIndex((entry) => entry.id === activeId);\n const tabbableIndex = clamp(\n focusedIndex ?? Math.max(0, activeIndex),\n 0,\n Math.max(0, entries.length - 1),\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n\n const ticks = railRef.current?.querySelectorAll(TICK);\n if (!ticks?.length) return;\n\n const current = Array.prototype.indexOf.call(ticks, event.target);\n if (current === -1) return;\n\n const next = {\n ArrowUp: current - 1,\n ArrowDown: current + 1,\n Home: 0,\n End: ticks.length - 1,\n }[event.key];\n if (next === undefined) return;\n\n event.preventDefault();\n ticks[clamp(next, 0, ticks.length - 1)]?.focus();\n },\n [onKeyDown],\n );\n\n return (\n \n {entries.map((entry, index) => {\n const current = index === activeIndex;\n const onScreen = current || inView.has(entry.id);\n return (\n }\n data-slot=\"conversation-map-tick\"\n data-active={current ? \"\" : undefined}\n data-in-view={onScreen ? \"\" : undefined}\n aria-label={entry.title}\n aria-current={current ? \"true\" : undefined}\n tabIndex={index === tabbableIndex ? 0 : -1}\n onFocus={() => setFocusedIndex(index)}\n onClick={onSelect ? () => onSelect(entry.id) : undefined}\n // The cap keeps a short thread packed instead of spread over the\n // whole gutter; a long one outgrows it and the share decides.\n className=\"group flex max-h-3.5 min-h-0 flex-1 items-center outline-none\"\n >\n {/* At rest every tick is the same short length and only weight and\n depth separate the tiers. Pointing at the rail grows them out by\n tier, and the one actually under the pointer reaches full length\n so the rail says which turn the card belongs to. */}\n \n \n );\n })}\n\n \n {({ payload }) => (\n \n \n \n

\n {payload?.title}\n

\n {payload?.preview && (\n

\n {payload.preview}\n

\n )}\n \n \n \n )}\n \n \n );\n}\n" } ] }