@vvedantb/ui 0.18.1 → 0.19.0

package/README.md

@@ -1227,6 +1227,21 @@ const config = {
 ```
 
 - `Conversation`: `classes.content` (`ConversationContent`), `classes.scroll` (a default `scrollClassName`, merged before the prop), `classes.download`, and for `ConversationScrollButton` `classes.scrollButton`, `classes.scrollButtonMotion` (the animated wrapper; `""` renders it without a class) and `classes.scrollButtonFrame` (a static wrapper around the presence; none by default). `scrollButton` holds defaults for `label`, `icon`, `showDelay`, `size` and the motion (`initial`, `animate`, `exit`, `transition`). New `ConversationScrollButton` props: `label` (text after the icon, also `aria-label` and `title`), `icon`, `showDelay` (ms to wait after leaving the bottom before showing; hiding stays immediate; default 0) and `resetKey` (a change hides the button and cancels a pending show). The button now animates with `m` inside its own `LazyMotion`, so it also works under an app's `<LazyMotion strict>`.
+- `JumpRail`, `ChatJumpRail` (new): a timeline minimap for long scroll areas. Place it in a `relative` parent. `ChatJumpRail` goes inside `Conversation` and reads the scroll viewport and `stopScroll` from its context:
+
+  ```tsx
+  <Conversation>
+    <ConversationContent>{/* rows with data-message-id */}</ConversationContent>
+    <ChatJumpRail
+      messages={buildChatJumpRailTicks(transcript)}
+      renderedFromId={firstRenderedId}
+      onRevealMessage={revealMessage}
+      formatPreview={mentionsToText}
+    />
+  </Conversation>
+  ```
+
+  Outside a `StickToBottom` (for example a page outline) use `JumpRail` with `items` (`{ id, title, preview?, level? }`), a `scrollRef` or `getScrollElement`, and `targetAttribute="data-toc-id"` or `resolveTarget`. `onReveal` runs when a target is not in the DOM; `onBeforeScroll` runs just before it. `onSelect(id)` runs after a click or Enter/Space pick, once the scroll has started or `onReveal` has run, so an app can move focus to the target for keyboard users; `ChatJumpRail` accepts it too. `observeKey` re-observes when the rendered window changes. The geometry helpers (`resolveJumpRailTopPercent`, `resolveJumpRailIndexFromPointer`, `resolveJumpRailHeightStyle`, `resolveJumpRailTickWidthClass`, `resolveJumpRailTickLevelStyle`) are exported.
 - `Message`: `classes.root`, `classes.user`, `classes.assistant` (the role classes of `Message`), `classes.content` (all `MessageContent` classes), `classes.branchSelector`, `classes.branchIcon` (a class in place of the arrows' `size={14}`), and `lazyActionTooltips`: a `MessageAction` mounts its tooltip on first hover or focus (focus opens it), not with the button.
 - `PromptInput`: `classes.group` (the input group, default `overflow-hidden`), `classes.groupIdle` / `classes.groupDragOver` (added while no drag / an accepted drag is over the form), `classes.groupDefault` (added when no `containerClassName` is given), `classes.textarea`, `classes.footer`, `classes.submit`, `classes.tabItem`; `submitIcons.<send|submitted|streaming|error>`, `submitCrossfade` (cross-fade the submit icon on status change) and `menuTriggerAsChild` (`PromptInputActionMenuTrigger` becomes the Radix trigger instead of a button inside it). New `PromptInput` props: `dataDrop` (`{ type, onDrop }`: a non-file drag of that MIME type counts as a drag over the form and `onDrop` gets its string payload) and `inputGroupClassName` (same as `containerClassName`). The attachments context adds `replace(id, file)`; `accept` now matches extension patterns such as `.html` by file name; `useOptionalPromptInputController` is exported.
 - `PromptInputSettings` (new): an overflow menu with a "Model" submenu (one radio list, or a submenu per provider). Entry: `providerLabel(provider)` (default the id), `providerIcon(provider)` (default none), `classes.trigger`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -172,7 +172,7 @@
     "vitest": "^3.2.0",
     "zod": "^4.0.0",
     "zod3": "npm:zod@^3.25.76",
-    "@vvedantb/server": "0.7.1"
+    "@vvedantb/server": "0.8.1"
   },
   "peerDependenciesMeta": {
     "@clerk/clerk-react": {

package/src/ai-elements/chat-jump-rail.tsx

@@ -0,0 +1,125 @@
+"use client";
+import { useMemo } from "react";
+import { useStickToBottomContext } from "use-stick-to-bottom";
+import { JumpRail, type JumpRailItem, type JumpRailProps } from "./jump-rail";
+
+/** One rail tick: a user turn and the assistant reply to it. */
+export interface ChatJumpRailMessage {
+  id: string;
+  content: string;
+  reply?: string;
+}
+
+/** A transcript row, as input to `buildChatJumpRailTicks`. */
+export interface ChatJumpRailTranscriptMessage {
+  id: string;
+  role: string;
+  content: string;
+  /** System alerts are skipped, both as ticks and as replies. */
+  isSystemAlert?: boolean;
+}
+
+/**
+ * One tick per user turn. The reply is the next assistant row before the next
+ * user row; system alerts are skipped.
+ */
+export function buildChatJumpRailTicks(
+  messages: readonly ChatJumpRailTranscriptMessage[],
+): ChatJumpRailMessage[] {
+  const ticks: ChatJumpRailMessage[] = [];
+  for (let i = 0; i < messages.length; i++) {
+    const message = messages[i];
+    if (!message || message.role !== "user" || message.isSystemAlert) continue;
+    let reply: string | undefined;
+    for (let j = i + 1; j < messages.length; j++) {
+      const next = messages[j];
+      if (!next || next.isSystemAlert) continue;
+      if (next.role === "user") break;
+      if (next.role === "assistant") {
+        reply = next.content;
+        break;
+      }
+    }
+    ticks.push({
+      id: message.id,
+      content: message.content,
+      ...(reply !== undefined && reply.length > 0 ? { reply } : {}),
+    });
+  }
+  return ticks;
+}
+
+function collapseWhitespace(text: string): string {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Maps chat ticks to rail items. `formatPreview` turns raw text into display
+ * text (for example mention tokens to names); whitespace is collapsed after it.
+ * An empty user text becomes "Message".
+ */
+export function buildChatJumpRailItems(
+  messages: readonly ChatJumpRailMessage[],
+  formatPreview: (text: string) => string = (text) => text,
+): JumpRailItem[] {
+  return messages.map((message) => {
+    const title = collapseWhitespace(formatPreview(message.content));
+    const reply = message.reply ? collapseWhitespace(formatPreview(message.reply)) : "";
+    return {
+      id: message.id,
+      title: title.length > 0 ? title : "Message",
+      preview: reply.length > 0 ? reply : null,
+    };
+  });
+}
+
+export interface ChatJumpRailProps
+  extends Omit<
+    JumpRailProps,
+    "items" | "scrollRef" | "getScrollElement" | "onReveal" | "onBeforeScroll" | "observeKey"
+  > {
+  /** The whole transcript as ticks (see `buildChatJumpRailTicks`), rendered or not. */
+  messages: readonly ChatJumpRailMessage[];
+  /**
+   * First row the transcript renders. A window that grows upwards has to
+   * re-observe, so a change here does.
+   */
+  renderedFromId?: string;
+  /** Renders an older turn outside the transcript window, then scrolls to it. */
+  onRevealMessage?: (messageId: string) => void;
+  /** Raw text to display text. Default: the text as is. */
+  formatPreview?: (text: string) => string;
+}
+
+/**
+ * `JumpRail` for a chat. Must render inside `<Conversation>` (StickToBottom):
+ * it reads the scroll viewport and `stopScroll` from its context and resolves
+ * `[data-message-id]` targets in it. Jumping to a turn that is not rendered
+ * stops the stick-to-bottom scroll and calls `onRevealMessage`.
+ */
+export function ChatJumpRail({
+  messages,
+  renderedFromId,
+  onRevealMessage,
+  formatPreview,
+  testId = "chat-jump-rail",
+  ...rest
+}: ChatJumpRailProps) {
+  const { scrollRef, stopScroll } = useStickToBottomContext();
+  // Memoised on `messages`, which keeps its identity while a turn streams.
+  const items = useMemo(
+    () => buildChatJumpRailItems(messages, formatPreview),
+    [messages, formatPreview],
+  );
+  return (
+    <JumpRail
+      {...rest}
+      testId={testId}
+      items={items}
+      scrollRef={scrollRef}
+      observeKey={renderedFromId ?? null}
+      onBeforeScroll={stopScroll}
+      {...(onRevealMessage ? { onReveal: onRevealMessage } : {})}
+    />
+  );
+}

package/src/ai-elements/jump-rail-geometry.ts

@@ -0,0 +1,84 @@
+/** Matches t3code `TIMELINE_MINIMAP_ITEM_SPACING`: a compact rail, not full height. */
+export const JUMP_RAIL_ITEM_SPACING_PX = 8;
+/** `dvh`, not `vh`: mobile browser chrome makes `100vh` taller than the visible area. */
+export const JUMP_RAIL_MAX_HEIGHT_CSS = "calc(100dvh - 18rem)";
+/** Fewest items for which the rail renders. */
+export const JUMP_RAIL_MIN_VISIBLE_ITEMS = 2;
+/** Tick x offset per heading level below 1, in px. */
+export const JUMP_RAIL_LEVEL_INDENT_PX = 2;
+/** Narrowest a levelled tick gets, in px. */
+export const JUMP_RAIL_MIN_TICK_WIDTH_PX = 4;
+
+/** Rail height: one spacing step per gap, capped at `maxHeight`. */
+export function resolveJumpRailHeightStyle(
+  itemCount: number,
+  maxHeight: string = JUMP_RAIL_MAX_HEIGHT_CSS,
+): string {
+  const naturalHeight = Math.max(1, (itemCount - 1) * JUMP_RAIL_ITEM_SPACING_PX);
+  return `min(${naturalHeight}px, ${maxHeight})`;
+}
+
+/** Tick position down the rail, 0 to 100. */
+export function resolveJumpRailTopPercent(index: number, itemCount: number): number {
+  if (itemCount <= 1) return 0;
+  return (Math.max(0, Math.min(index, itemCount - 1)) / (itemCount - 1)) * 100;
+}
+
+/** The item under the pointer, or `null` when the rail has no size or no items. */
+export function resolveJumpRailIndexFromPointer(input: {
+  itemCount: number;
+  railTop: number;
+  railHeight: number;
+  pointerY: number;
+}): number | null {
+  if (input.itemCount <= 0 || input.railHeight <= 0) return null;
+  if (input.itemCount === 1) return 0;
+  const progress = Math.max(
+    0,
+    Math.min(1, (input.pointerY - input.railTop) / input.railHeight),
+  );
+  return Math.max(
+    0,
+    Math.min(input.itemCount - 1, Math.round(progress * (input.itemCount - 1))),
+  );
+}
+
+/** Preview card `translateY`: pinned to the rail ends, centred between. */
+export function resolveJumpRailTooltipTranslate(index: number, itemCount: number): string {
+  if (index === 0) return "0%";
+  if (index === itemCount - 1) return "-100%";
+  return "-50%";
+}
+
+/** Width in px of a tick at `distance` items from the hovered one (`null`: no hover). */
+export function resolveJumpRailTickWidthPx(distance: number | null): number {
+  if (distance === 0) return 24;
+  if (distance === 1) return 16;
+  if (distance === 2) return 10;
+  return 8;
+}
+
+/** Tailwind width class for a tick at `distance` from the hovered one (`null`: no hover). */
+export function resolveJumpRailTickWidthClass(distance: number | null): string {
+  if (distance === 0) return "w-6";
+  if (distance === 1) return "w-4";
+  if (distance === 2) return "w-2.5";
+  return "w-2";
+}
+
+/**
+ * Level-based inline layout for sub-heading ticks. Level 1 (or none) returns
+ * `undefined`, so the tick keeps its width class. Deeper levels indent by
+ * `JUMP_RAIL_LEVEL_INDENT_PX` per level and shrink by the same amount.
+ */
+export function resolveJumpRailTickLevelStyle(
+  distance: number | null,
+  level: number | undefined,
+): { left: number; width: number } | undefined {
+  if (level === undefined || !Number.isFinite(level) || level <= 1) return undefined;
+  const indent = (Math.floor(level) - 1) * JUMP_RAIL_LEVEL_INDENT_PX;
+  return {
+    left: indent,
+    width: Math.max(JUMP_RAIL_MIN_TICK_WIDTH_PX, resolveJumpRailTickWidthPx(distance) - indent),
+  };
+}

package/src/ai-elements/jump-rail.tsx

@@ -0,0 +1,307 @@
+"use client";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type RefObject,
+} from "react";
+import { AnimatePresence, domAnimation, LazyMotion, m } from "motion/react";
+import { tokenTransition } from "../motion/presets";
+import { cn } from "../utils/cn";
+import { useCn } from "../ui/ui-config";
+import {
+  JUMP_RAIL_MIN_VISIBLE_ITEMS,
+  resolveJumpRailHeightStyle,
+  resolveJumpRailIndexFromPointer,
+  resolveJumpRailTickLevelStyle,
+  resolveJumpRailTickWidthClass,
+  resolveJumpRailTooltipTranslate,
+  resolveJumpRailTopPercent,
+} from "./jump-rail-geometry";
+
+export interface JumpRailItem {
+  id: string;
+  /** First line of the preview card; also the button's accessible label. */
+  title: string;
+  /** Up to three lines under the title. */
+  preview?: string | null;
+  /** Heading level (1 is the longest tick). Deeper levels get shorter, indented ticks. */
+  level?: number;
+}
+
+export interface JumpRailProps {
+  items: readonly JumpRailItem[];
+  /** The scroll container. Read when the rail observes and scrolls. */
+  scrollRef?: RefObject<HTMLElement | null>;
+  /** Alternative to `scrollRef`: returns the scroll container. */
+  getScrollElement?: () => HTMLElement | null;
+  /** Attribute that holds an item id on its target. Default `data-message-id`. */
+  targetAttribute?: string;
+  /** Replaces the `[targetAttribute="id"]` lookup inside the scroll container. */
+  resolveTarget?: (root: HTMLElement, id: string) => HTMLElement | null;
+  /**
+   * Called when the target is not in the DOM (for example a windowed
+   * transcript). The consumer renders it and scrolls to it.
+   */
+  onReveal?: (id: string) => void;
+  /** Called just before `onReveal`, for example `stopScroll` from use-stick-to-bottom. */
+  onBeforeScroll?: () => void;
+  /**
+   * Called after the user picks an item by click or Enter/Space, once the
+   * scroll has started or `onReveal` has run. For example, to move focus to the
+   * target for keyboard users.
+   */
+  onSelect?: (id: string) => void;
+  /**
+   * Changing this re-observes the targets. Use it when rows render later or
+   * the window grows, for example the first rendered id.
+   */
+  observeKey?: string | number | null;
+  /** The rail renders nothing below this many items. Default 2. */
+  minVisibleItems?: number;
+  /** Merged into the wrapper classes, which place the rail. */
+  className?: string;
+  /** Wrapper `aria-label`. Default "Jump to message". */
+  ariaLabel?: string;
+  /** Start of the button label, followed by the active title. Default "Jump to message". */
+  buttonLabel?: string;
+  /** Button label subject while no item is active. Default "User message". */
+  fallbackLabel?: string;
+  /** Wrapper `data-testid`. Default `jump-rail`. */
+  testId?: string;
+}
+
+const DEFAULT_WRAPPER_CLASS =
+  "pointer-events-none absolute inset-y-0 left-0 z-30 hidden w-14 lg:pointer-fine:block";
+
+function escapeAttributeValue(value: string): string {
+  return value.replace(/["\\]/g, "\\$&");
+}
+
+function findTarget(
+  root: HTMLElement,
+  id: string,
+  attribute: string,
+  resolve: ((root: HTMLElement, id: string) => HTMLElement | null) | undefined,
+): HTMLElement | null {
+  if (resolve) return resolve(root, id);
+  return root.querySelector<HTMLElement>(`[${attribute}="${escapeAttributeValue(id)}"]`);
+}
+
+/**
+ * t3code-style timeline minimap: a short, vertically centred rail of ticks,
+ * one per item. Hover scrubbing shows a floating preview; click jumps to the
+ * item's target inside the scroll container. Ticks for targets in the top part
+ * of the viewport are highlighted. Place it in a `relative` parent.
+ */
+export function JumpRail({
+  items,
+  scrollRef,
+  getScrollElement,
+  targetAttribute = "data-message-id",
+  resolveTarget,
+  onReveal,
+  onBeforeScroll,
+  onSelect,
+  observeKey,
+  minVisibleItems = JUMP_RAIL_MIN_VISIBLE_ITEMS,
+  className,
+  ariaLabel = "Jump to message",
+  buttonLabel = "Jump to message",
+  fallbackLabel = "User message",
+  testId = "jump-rail",
+}: JumpRailProps) {
+  const merge = useCn();
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+  const [inViewIds, setInViewIds] = useState<ReadonlySet<string>>(() => new Set());
+
+  // Latest props for the effect and handlers, so an inline getter or resolver
+  // does not rebuild the observer on every render.
+  const latest = useRef({ scrollRef, getScrollElement, resolveTarget, targetAttribute });
+  latest.current = { scrollRef, getScrollElement, resolveTarget, targetAttribute };
+  const readRoot = () =>
+    latest.current.getScrollElement?.() ?? latest.current.scrollRef?.current ?? null;
+
+  const idsKey = JSON.stringify(items.map((item) => item.id));
+  const count = items.length;
+
+  useEffect(() => {
+    const root = readRoot();
+    if (!root || count < minVisibleItems) return;
+    const ids = JSON.parse(idsKey) as string[];
+
+    const idByTarget = new Map<Element, string>();
+    for (const id of ids) {
+      const target = findTarget(
+        root,
+        id,
+        latest.current.targetAttribute,
+        latest.current.resolveTarget,
+      );
+      if (target) idByTarget.set(target, id);
+    }
+    if (idByTarget.size === 0) return;
+
+    const visible = new Set<string>();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const id = idByTarget.get(entry.target);
+          if (id === undefined) continue;
+          if (entry.isIntersecting) visible.add(id);
+          else visible.delete(id);
+        }
+        setInViewIds(new Set(visible));
+      },
+      { root, rootMargin: "0px 0px -70% 0px", threshold: 0 },
+    );
+    for (const target of idByTarget.keys()) observer.observe(target);
+    return () => observer.disconnect();
+  }, [idsKey, count, minVisibleItems, observeKey, scrollRef]);
+
+  const scrollToItem = (id: string) => {
+    const root = readRoot();
+    const target = root
+      ? findTarget(root, id, targetAttribute, resolveTarget)
+      : null;
+    if (target) {
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
+      onSelect?.(id);
+      return;
+    }
+    // Rendering earlier rows grows the content; a reader stuck to the bottom
+    // would be pulled back down instead of reaching the item.
+    onBeforeScroll?.();
+    onReveal?.(id);
+    onSelect?.(id);
+  };
+
+  const indexFromPointer = (event: MouseEvent<HTMLElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return resolveJumpRailIndexFromPointer({
+      itemCount: count,
+      railTop: rect.top,
+      railHeight: rect.height,
+      pointerY: event.clientY,
+    });
+  };
+
+  const moveHoverIndex = (delta: number) => {
+    setHoverIndex((current) => Math.max(0, Math.min(count - 1, (current ?? 0) + delta)));
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveHoverIndex(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveHoverIndex(-1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setHoverIndex(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setHoverIndex(count - 1);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const active = hoverIndex !== null ? (items[hoverIndex] ?? null) : null;
+      if (active) scrollToItem(active.id);
+    }
+  };
+
+  if (count < minVisibleItems) return null;
+
+  const activeIndex = hoverIndex !== null && hoverIndex < count ? hoverIndex : null;
+  const activeItem = activeIndex === null ? null : (items[activeIndex] ?? null);
+  const activeTopPercent =
+    activeIndex === null ? 0 : resolveJumpRailTopPercent(activeIndex, count);
+  const activeTranslate =
+    activeIndex === null ? "-50%" : resolveJumpRailTooltipTranslate(activeIndex, count);
+
+  return (
+    <div
+      className={merge(DEFAULT_WRAPPER_CLASS, className)}
+      aria-label={ariaLabel}
+      data-testid={testId}
+    >
+      <div className="relative h-full w-full select-none">
+        <button
+          type="button"
+          aria-label={`${buttonLabel}: ${activeItem?.title ?? fallbackLabel}`}
+          className="pointer-events-auto absolute top-1/2 left-2 w-10 -translate-y-1/2 cursor-pointer bg-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/70"
+          style={{ height: resolveJumpRailHeightStyle(count) }}
+          onBlur={() => setHoverIndex(null)}
+          onFocus={() => setHoverIndex((current) => current ?? 0)}
+          onMouseLeave={() => setHoverIndex(null)}
+          onMouseMove={(event) => {
+            setHoverIndex(indexFromPointer(event));
+          }}
+          onMouseDown={(event) => {
+            event.preventDefault();
+          }}
+          onClick={(event) => {
+            const nextIndex = indexFromPointer(event);
+            const next = nextIndex === null ? null : (items[nextIndex] ?? null);
+            if (next) scrollToItem(next.id);
+            event.currentTarget.blur();
+          }}
+          onKeyDown={handleKeyDown}
+        >
+          <div className="absolute top-0 left-3 h-full w-px bg-border/15" />
+          {items.map((item, index) => {
+            const distance = activeIndex === null ? null : Math.abs(index - activeIndex);
+            const inView = inViewIds.has(item.id);
+            const levelStyle = resolveJumpRailTickLevelStyle(distance, item.level);
+            return (
+              <span
+                key={item.id}
+                aria-hidden="true"
+                data-in-view={inView ? "true" : "false"}
+                {...(item.level === undefined ? {} : { "data-level": item.level })}
+                className={cn(
+                  "pointer-events-none absolute left-0 h-0.5 -translate-y-1/2 rounded-full bg-muted-foreground/35 transition-colors data-[in-view=true]:bg-foreground/90",
+                  levelStyle === undefined ? resolveJumpRailTickWidthClass(distance) : undefined,
+                  distance === 0 && "bg-muted-foreground/75",
+                )}
+                style={{
+                  top: `${resolveJumpRailTopPercent(index, count)}%`,
+                  ...levelStyle,
+                }}
+              />
+            );
+          })}
+          <LazyMotion features={domAnimation}>
+            <AnimatePresence>
+              {activeItem ? (
+                <m.span
+                  key={activeItem.id}
+                  className="pointer-events-none absolute left-8 w-80 rounded-xl bg-popover/95 p-3 text-left text-popover-foreground smooth-shadow-ring-xl shadow-black/25 backdrop-blur-sm"
+                  style={{
+                    top: `${activeTopPercent}%`,
+                    transform: `translateY(${activeTranslate})`,
+                  }}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={tokenTransition.fast}
+                >
+                  <span className="block max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-5">
+                    {activeItem.title}
+                  </span>
+                  {activeItem.preview ? (
+                    <span className="mt-1 line-clamp-3 text-sm leading-5 text-muted-foreground">
+                      {activeItem.preview}
+                    </span>
+                  ) : null}
+                </m.span>
+              ) : null}
+            </AnimatePresence>
+          </LazyMotion>
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -127,6 +127,9 @@ export * from "./ai-elements/conversation";
 export * from "./ai-elements/file-chip";
 export * from "./ai-elements/image";
 export * from "./ai-elements/inline-citation";
+export * from "./ai-elements/jump-rail";
+export * from "./ai-elements/jump-rail-geometry";
+export * from "./ai-elements/chat-jump-rail";
 export * from "./ai-elements/message";
 export * from "./ai-elements/model-selector";
 export * from "./ai-elements/prompt-input";