@vvedantb/ui 0.38.0 → 0.39.0

package/README.md

@@ -1633,6 +1633,33 @@ const config = {
 
   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.
+- Quoted replies (0.39.0): `Message` takes `actions` (right-click menu plus hover toolbar) and `highlighted`; `MessageQuote` goes in `MessageContent` above the text; `ReplyQuoteChip` goes in `PromptInputHeader`.
+
+  ```tsx
+  <Message
+    from="user"
+    id={`msg-${m.id}`}
+    highlighted={highlightId === m.id}
+    actions={[
+      { key: "reply", label: "Reply", icon: <IconArrowBackUp size={14} />, onSelect: () => setReply(m) },
+      { key: "copy", label: "Copy", icon: <IconCopy size={14} />, onSelect: () => copy(m.text) },
+    ]}
+  >
+    <MessageContent>
+      {m.quoted && <MessageQuote author={m.quoted.author} text={m.quoted.text} onPress={() => jumpTo(m.quoted.id)} />}
+      {m.text}
+    </MessageContent>
+  </Message>
+
+  <PromptInput onSubmit={send}>
+    <PromptInputHeader>
+      {reply && <ReplyQuoteChip author={reply.author} text={reply.text} onDismiss={() => setReply(null)} />}
+    </PromptInputHeader>
+    {/* textarea, footer */}
+  </PromptInput>
+  ```
+
+  The app owns the reply state and the scroll. `MessageHoverActions` needs a `relative` `Message` (the `actions` prop sets it).
 - `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` (default `true`: `PromptInputActionMenuTrigger` is the Radix trigger; `false` nests 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.
 - `PromptInputSubmit`: new prop `queued` (0.30.0). Set it when a send would join a queue (the agent is still working). The send icon becomes `SendQueueIcon`, an up arrow that morphs into a stack of bars while `queued` is `true`. Leave it unset to keep `submitIcons.send`. `SendQueueIcon` (`queued`, `className` default `size-4`) is exported for other send buttons. It uses `m`, so `queued` needs the app's `LazyMotion`.
 - `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.38.0",
+  "version": "0.39.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main 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), third-party brand logos (also @vvedantb/ui/logos), motion-driven animated SVG icons (@vvedantb/ui/icons/animated), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/src/ai-elements/message.tsx

@@ -1,8 +1,14 @@
 "use client";
 import type { UIMessage } from "ai";
-import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import type { ComponentProps, HTMLAttributes, ReactElement, ReactNode } from "react";
 import { Button } from "../ui/button";
 import { ButtonGroup, ButtonGroupText } from "../ui/button-group";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
 import {
   Tooltip,
   TooltipContent,
@@ -30,23 +36,233 @@ export interface MessageConfig {
     branchIcon?: string;
   };
 }
+/**
+ * One action of a message: a row in the right-click menu and, with an `icon`,
+ * a button in the hover toolbar. Start with Reply.
+ */
+export type MessageMenuAction = {
+  key: string;
+  label: string;
+  /** Shows the action in the hover toolbar (an icon button). Without it: menu only. */
+  icon?: ReactNode;
+  destructive?: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+  /** Force the hover toolbar on (`true`) or off (`false`). Default: on when there is an `icon`. */
+  hover?: boolean;
+};
 export type MessageProps = HTMLAttributes<HTMLDivElement> & {
   from: UIMessage["role"];
+  /**
+   * Right-click menu and hover toolbar actions, such as Reply. Without it (or
+   * empty) `Message` renders the same `div` as before. With it a right click
+   * opens the menu and a hover toolbar shows beside the bubble. The toolbar is
+   * absolutely positioned and takes no layout space.
+   */
+  actions?: MessageMenuAction[];
+  /**
+   * The target of a quote click: a soft primary wash and ring. Set it back to
+   * `false` about 1.5 seconds later and it fades out (`duration-1000`). Sets
+   * `data-highlighted`.
+   */
+  highlighted?: boolean;
 };
-export const Message = ({ className, from, ...props }: MessageProps) => {
+export const Message = ({
+  className,
+  from,
+  actions,
+  highlighted,
+  children,
+  ...props
+}: MessageProps) => {
   const classes = useUiConfig("Message")?.classes;
   const merge = useCn();
-  return (
+  const hasActions = actions !== undefined && actions.length > 0;
+  const root = (
     <div
       className={merge(
         classes?.root ?? "group flex w-full max-w-[95%] flex-col gap-2",
         from === "user"
           ? (classes?.user ?? "is-user ml-auto justify-end")
           : (classes?.assistant ?? "is-assistant"),
+                highlighted !== undefined &&
+          "rounded-xl transition-[background-color,box-shadow] duration-1000",
+        highlighted && "bg-primary/10 ring-2 ring-primary/30",
         className,
       )}
+      data-highlighted={highlighted ? "" : undefined}
       {...props}
-    />
+    >
+      {hasActions ? (
+        <div
+          className={
+            from === "user"
+              ? "relative ml-auto w-fit max-w-full"
+              : "relative w-fit max-w-full"
+          }
+        >
+          {children}
+          <MessageHoverActions actions={actions} from={from} />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+  return hasActions ? (
+    <MessageContextMenu actions={actions}>{root}</MessageContextMenu>
+  ) : (
+    root
+  );
+};
+export type MessageContextMenuProps = {
+  actions: MessageMenuAction[];
+  /** One element, which becomes the right-click target (Radix `asChild`). */
+  children: ReactElement;
+};
+/**
+ * The right-click menu of a message: `actions` as `ContextMenuItem`s,
+ * destructive ones in the danger colour. With no actions it returns `children`.
+ */
+export const MessageContextMenu = ({
+  actions,
+  children,
+}: MessageContextMenuProps) => {
+  if (actions.length === 0) return children;
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent aria-label="Message actions">
+        {actions.map((action) => (
+          <ContextMenuItem
+            key={action.key}
+            disabled={action.disabled}
+            startContent={action.icon}
+            className={action.destructive ? "text-danger" : undefined}
+            onSelect={action.onSelect}
+          >
+            {action.label}
+          </ContextMenuItem>
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+export type MessageHoverActionsProps = Omit<
+  ComponentProps<"div">,
+  "children"
+> & {
+  actions: MessageMenuAction[];
+  /** Role of the message: user toolbars sit left of the bubble, others right. Default `assistant`. */
+  from?: UIMessage["role"];
+};
+/**
+ * A small toolbar of icon buttons that shows on hover or focus of the
+ * enclosing `Message` (the `group` class, `reveal-on-hover`; always visible on
+ * touch). It is absolutely positioned, so it takes no layout space: beside the
+ * bubble, top-aligned (left of a user bubble, right of an assistant message).
+ * On narrow screens it moves to the bubble's top edge. Draws the actions that
+ * have an `icon`. Place it inside a `relative w-fit` wrapper around the
+ * bubble; the `actions` prop on `Message` does this.
+ */
+export const MessageHoverActions = ({
+  actions,
+  from = "assistant",
+  className,
+  ...props
+}: MessageHoverActionsProps) => {
+  const merge = useCn();
+  const shown = actions.filter((action) =>
+    action.hover === undefined ? action.icon !== undefined : action.hover,
+  );
+  if (shown.length === 0) return null;
+  return (
+    <div
+      role="toolbar"
+      aria-label="Message actions"
+      className={merge(
+        "reveal-on-hover absolute top-0 z-10 flex w-fit items-center gap-0.5 rounded-lg border border-border bg-surface p-0.5 shadow-sm transition-opacity",
+        from === "user"
+          ? "right-full mr-1 max-sm:right-2 max-sm:mr-0 max-sm:-translate-y-[62%] max-sm:[&>button]:size-6"
+          : "left-full ml-1 max-sm:left-auto max-sm:right-0 max-sm:ml-0 max-sm:-translate-y-full max-sm:[&>button]:size-6",
+        className,
+      )}
+      {...props}
+    >
+      {shown.map((action) => (
+        <MessageAction
+          key={action.key}
+          label={action.label}
+          tooltip={action.label}
+          tooltipSide="bottom"
+          // Narrow: the toolbar sits on the bubble corner and a tooltip below it would cover the text.
+          tooltipClassName="max-sm:hidden"
+          disabled={action.disabled}
+          className={action.destructive ? "text-danger" : undefined}
+          onClick={action.onSelect}
+        >
+          {action.icon}
+        </MessageAction>
+      ))}
+    </div>
+  );
+};
+export type MessageQuoteProps = Omit<ComponentProps<"div">, "onClick"> & {
+  /** Who wrote the quoted message. */
+  author: string;
+  /** The quoted text, cut to two lines. */
+  text: string;
+  /** Makes the quote a button, so the app can scroll to and highlight the original. */
+  onPress?: () => void;
+};
+/**
+ * A compact quote inside a message bubble, above its text: a left border, the
+ * author and two lines of the text. It reads on the primary user bubble, the
+ * border and text take the bubble colour. With `onPress` it is a button.
+ */
+export const MessageQuote = ({
+  author,
+  text,
+  onPress,
+  className,
+  ...props
+}: MessageQuoteProps) => {
+  const merge = useCn();
+  const body = (
+    <>
+      <span className="block truncate text-xs font-semibold opacity-70">
+        {author}
+      </span>
+      <span className="line-clamp-2 block text-sm opacity-90">{text}</span>
+    </>
+  );
+  const base = "block min-w-0 border-l-2 border-current/40 pl-2.5 text-left";
+  if (onPress === undefined) {
+    return (
+      <div
+        role="group"
+        aria-label={`Quoted message from ${author}`}
+        className={merge(base, className)}
+        {...props}
+      >
+        {body}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={merge(base, className)}
+      {...props}
+    >
+      <button
+        type="button"
+        aria-label={`Go to quoted message from ${author}`}
+        onClick={onPress}
+        className="block w-full min-w-0 cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      >
+        {body}
+      </button>
+    </div>
   );
 };
 export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
@@ -88,6 +304,10 @@ export const MessageActionsBar = ({
 };
 export type MessageActionProps = ComponentProps<typeof Button> & {
   tooltip?: string;
+  /** Side of the tooltip. Default: the Radix default (`top`). */
+  tooltipSide?: "top" | "right" | "bottom" | "left";
+  /** Extra classes for the tooltip content. */
+  tooltipClassName?: string;
   label?: string;
 };
 export const MessageAction = (props: MessageActionProps) => {
@@ -96,6 +316,8 @@ export const MessageAction = (props: MessageActionProps) => {
 };
 function EagerMessageAction({
   tooltip,
+  tooltipSide,
+  tooltipClassName,
   children,
   label,
   variant = "ghost",
@@ -113,7 +335,7 @@ function EagerMessageAction({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent side={tooltipSide} className={tooltipClassName}>
             <p>{tooltip}</p>
           </TooltipContent>
         </Tooltip>
@@ -129,6 +351,8 @@ function EagerMessageAction({
  */
 function LazyMessageAction({
   tooltip,
+  tooltipSide,
+  tooltipClassName,
   children,
   label,
   variant = "ghost",
@@ -166,7 +390,7 @@ function LazyMessageAction({
         {/* The focus that armed it landed before the tooltip existed. */}
         <Tooltip defaultOpen={armedBy === "focus"}>
           <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent side={tooltipSide} className={tooltipClassName}>
             <p>{tooltip}</p>
           </TooltipContent>
         </Tooltip>

package/src/ai-elements/prompt-input.tsx

@@ -47,6 +47,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/radix-select";
+import { Button } from "../ui/button";
 import { CrossfadeIconSlot } from "../ui/crossfade-icon";
 import { SendQueueIcon } from "../ui/send-queue-icon";
 import { Spinner } from "../ui/spinner";
@@ -811,6 +812,67 @@ export const PromptInputHeader = ({
     />
   );
 };
+export type ReplyQuoteChipProps = Omit<ComponentProps<"div">, "children"> & {
+  /** Who wrote the message being replied to. */
+  author: string;
+  /** Its text, cut to two lines. */
+  text: string;
+  /** Called by the X button. Clear the reply in the app. */
+  onDismiss?: () => void;
+  /** Default "Dismiss reply quote". */
+  dismissLabel?: string;
+};
+/**
+ * The chip above the composer while a reply is pending: an accent bar, the
+ * author, two lines of the message and an X. Put it in `PromptInputHeader`:
+ *
+ * ```tsx
+ * <PromptInputHeader>
+ *   {reply && <ReplyQuoteChip author={reply.author} text={reply.text} onDismiss={() => setReply(null)} />}
+ * </PromptInputHeader>
+ * ```
+ */
+export const ReplyQuoteChip = ({
+  author,
+  text,
+  onDismiss,
+  dismissLabel = "Dismiss reply quote",
+  className,
+  ...props
+}: ReplyQuoteChipProps) => {
+  const merge = useCn();
+  return (
+    <div
+      role="group"
+      aria-label={`Replying to ${author}`}
+      className={merge(
+        "flex w-full min-w-0 items-start gap-2 rounded-field border border-border bg-surface-secondary/60 py-1.5 pr-1 pl-3 text-sm",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className="w-0.5 shrink-0 self-stretch rounded-full bg-primary"
+      />
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-xs font-semibold text-muted-foreground">
+          {author}
+        </span>
+        <span className="line-clamp-2 block text-foreground">{text}</span>
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label={dismissLabel}
+        onClick={onDismiss}
+      >
+        <IconX size={14} />
+      </Button>
+    </div>
+  );
+};
 export type PromptInputFooterProps = Omit<
   ComponentProps<typeof InputGroupAddon>,
   "align"