@vvedantb/ui 0.3.2 → 0.4.0-rc.0

package/README.md

@@ -6,7 +6,7 @@ Shared React 19 web UI. Source-exported: no build step.
 | --- | --- |
 | `@vvedantb/ui` | Primitives (Radix-based), AI elements, `playChime` and `useReplyChime`. |
 | `@vvedantb/ui/sonner` | `SonnerToaster`, its helpers and `toast`. |
-| `@vvedantb/ui/composer` | `Composer`, `ComposerShell`, `ComposerGhostText`, `ComposerIconButton`, `useComposerPrediction` and the pure prediction helpers. |
+| `@vvedantb/ui/composer` | `InputArea` (recommended) and its building blocks. Also the deprecated 0.3 `Composer`, `ComposerShell`, `ComposerGhostText`, `ComposerIconButton`, `useComposerPrediction` and the pure prediction helpers. |
 | `@vvedantb/ui/audio` | `playChime`, `useReplyChime`, `playTone` and the shared audio floor. |
 | `@vvedantb/ui/cn` | `cn` class helper (clsx + tailwind-merge). |
 | `@vvedantb/ui/shell` | Router-free `SidebarHeader`, `PillTabs` and `SessionsHoverCard`. |
@@ -39,6 +39,57 @@ useReplyChime({ enabled: soundOn, isStreaming, threadId });
 
 ## Composer
 
+### InputArea (recommended)
+
+`InputArea` is the chat composer extracted from an app: a pill that grows into a card, a plus menu, dictate, stop and send, ghost text, a `/` menu, and slots for banners, a queue, attachments and chips. It is presentational. It makes no requests and reads no router, billing or storage. The app passes data in and handles callbacks. It adds its own `TooltipProvider` and `LazyMotion`, so it needs no app provider.
+
+```tsx
+import { InputArea, InputBanners, buildComposerSlashItems } from "@vvedantb/ui/composer";
+
+<InputArea
+  value={draft}
+  onChange={setDraft}
+  onSubmit={(text) => send(text)}
+  onStop={abort}
+  isStreaming={isStreaming}
+  fileCount={files.length}
+  chipCount={chips.length}
+  onFilesSelected={addFiles}
+  onRemoveLastChip={removeLastChip}
+  showDictate
+  slashItems={slashItems}
+  onSlashSelect={(item, { openFilePicker }) => run(item, openFilePicker)}
+  attachments={<AttachmentStrip />}
+  chips={<ChipRow />}
+  plusMenuExtra={<SkillPickerAndConnectionRows />}
+  getPrediction={complete}
+  className={composerClass}
+  borderClassName={borderClass}
+  submitButtonClassName={submitBg}
+  submitIconClassName={submitText}
+/>
+```
+
+| Prop | Default | Notes |
+| --- | --- | --- |
+| `value`, `onChange`, `defaultValue` | uncontrolled, `""` | `onSubmit` clears the draft through `onChange("")` first. Restore it yourself if sending fails. |
+| `onSubmit(text)` | none | Trimmed text. Not called while `isSending`, or when send is disabled. |
+| `onStop`, `isStreaming`, `isSending`, `isUploading` | off | While streaming, stop shows next to send, and send queues. Sending or uploading shows a spinner and disables send. |
+| `canSubmit` | text, or `fileCount` or `chipCount` above 0 | Overrides when send is enabled. |
+| `fileCount`, `chipCount` | `0` | Compact mode needs them: files or chips keep the card open. |
+| `showDictate`, `onDictateTranscription` | off, append to draft | |
+| `showFileUpload`, `onFilesSelected`, `onAttachFile`, `attachAccept` | on, none, click the hidden input, images and PDF | The hidden input and drop handling appear only with `onFilesSelected`. `onAttachFile` replaces the click. |
+| `banners`, `promoBanner`, `queue`, `attachments`, `chips`, `plusMenuExtra` | none | Slots. `plusMenuExtra` goes after the attach row: include your own `DropdownMenuSeparator`. |
+| `slashItems`, `onSlashSelect`, `renderSlashItem` | menu off | Build items with `buildComposerSlashItems`. `renderSlashItem(item, row)` wraps a row, for example in a hover card. |
+| `getPrediction`, `predictionEnabled` | off, `true` | Ghost text. Tab accepts, Esc dismisses. Paused while the `/` menu is open. |
+| `className`, `containerClassName`, `borderClassName`, `submitButtonClassName`, `submitIconClassName`, `placeholder` | none | The app passes its own class strings for an exact match. |
+
+Building blocks: `InputActions`, `ConnectionStatusMenuItem` (icon, label, description, `connected`, `onClick`, `title`), `InputBanners`, `PromoBanner` (`show`, `onUpgrade`, `onDismiss`, text as children), `FadePresence`, `ComposerSlashMenu`, `ComposerSlashRow`, and the hooks and helpers listed in the changelog. Parity against the original: `composer/examples/parity/PARITY.md`. App migration: `composer/MIGRATION.md`.
+
+### Composer (deprecated)
+
+> **Deprecated in 0.4.0.** Use `InputArea`. The 0.3 `Composer` was written from scratch and does not match the app composer. It stays exported and unchanged for existing consumers, and is not removed in 0.4.0.
+
 Chat composer with an autosizing textarea, a footer with a plus-menu slot, action slots and a send or stop button. It also shows optional ghost-text predictions. It makes no network calls: the app supplies `getPrediction`.
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.3.2",
+  "version": "0.4.0-rc.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: primitives, shell pieces, app helpers, design tokens, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/composer/Composer.tsx

@@ -303,6 +303,7 @@ const ComposerGhostText = React.forwardRef<HTMLDivElement, ComposerGhostTextProp
  * Chat composer: autosizing textarea, plus-menu and action slots, send/stop
  * button and optional ghost-text predictions. The ref points at the textarea.
  */
+/** @deprecated Use `InputArea` from `@vvedantb/ui/composer`. Kept unchanged for existing consumers. */
 const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function Composer(
   {
     value: valueProp,

package/src/composer/index.ts

@@ -22,3 +22,4 @@ export {
   visibleComposerPrediction,
 } from "./prediction";
 export type { ComposerPredictionAction, ComposerPredictionState } from "./prediction";
+export * from "./input-area";

package/src/composer/input-area/ComposerSlashMenu.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { m } from "motion/react";
+import { motionFast } from "./motion";
+import type { ComposerSlashPlacement } from "./composerSlashPosition";
+import type { ComposerSlashItem } from "./composerSlashItems";
+import { filterAndGroupSlashItems } from "./composerSlashItems";
+import { optionId } from "./composerSlashOptionId";
+import { ComposerSlashRow } from "./ComposerSlashRow";
+
+interface ComposerSlashMenuProps {
+  listboxId: string;
+  placement: ComposerSlashPlacement;
+  items: ComposerSlashItem[];
+  query: string;
+  selectedIndex: number;
+  onHoverIndex: (index: number) => void;
+  onSelectItem: (item: ComposerSlashItem) => void;
+  /** Wrap the row, for example in a hover card. Return `row` to keep the default. */
+  renderItem?: (item: ComposerSlashItem, row: ReactNode) => ReactNode;
+}
+
+export function ComposerSlashMenu({
+  listboxId,
+  placement,
+  items,
+  query,
+  selectedIndex,
+  onHoverIndex,
+  onSelectItem,
+  renderItem,
+}: ComposerSlashMenuProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const groups = filterAndGroupSlashItems(items, query);
+  const flatItems = groups.flatMap((group) => group.items);
+  const indexById = new Map(flatItems.map((item, index) => [item.id, index]));
+  const isAbove = placement.placement === "above";
+
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const selected = list.querySelector<HTMLElement>(
+      '[data-slash-picker-item][data-selected="true"]',
+    );
+    selected?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex, flatItems.length]);
+
+  return (
+    <div
+      className="fixed z-50"
+      style={{
+        left: placement.left,
+        top: placement.top,
+        width: placement.width,
+        transform: isAbove ? "translateY(-100%)" : undefined,
+      }}
+    >
+      <m.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={motionFast}
+        style={{ maxHeight: placement.maxHeight }}
+        className={
+          "flex flex-col overflow-hidden rounded-surface " +
+          "bg-popover/95 text-popover-foreground backdrop-blur-md smooth-shadow-ring-lg " +
+          (isAbove ? "origin-bottom" : "origin-top")
+        }
+      >
+        {flatItems.length > 0 ? (
+          <div
+            ref={listRef}
+            id={listboxId}
+            role="listbox"
+            aria-label="Commands"
+            className="scrollbar scroll-fade min-h-0 flex-1 overflow-y-auto overscroll-contain py-1"
+          >
+            {groups.map((group) => (
+              <div key={group.group}>
+                <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                  {group.group}
+                </div>
+                {group.items.map((item) => {
+                  const index = indexById.get(item.id);
+                  if (index === undefined) return null;
+                  const row = (
+                    <ComposerSlashRow
+                      label={item.label}
+                      description={item.description}
+                      icon={item.icon}
+                      badge={item.badge}
+                      active={item.active}
+                    />
+                  );
+                  const isSelected = index === selectedIndex;
+                  return (
+                    <button
+                      key={item.id}
+                      id={optionId(listboxId, item.id)}
+                      type="button"
+                      role="option"
+                      aria-selected={isSelected}
+                      data-slash-picker-item
+                      data-selected={isSelected ? "true" : "false"}
+                      onMouseEnter={() => onHoverIndex(index)}
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        onSelectItem(item);
+                      }}
+                      className={
+                        "mx-1 flex w-[calc(100%-0.5rem)] min-w-0 items-center rounded-lg px-2 py-1.5 text-left text-sm max-sm:py-2.5 " +
+                        "transition-[background-color] active:scale-[0.99] active:duration-100 active:ease-out " +
+                        (isSelected
+                          ? "bg-primary/15 font-medium text-foreground dark:bg-primary/25"
+                          : "text-foreground/90 hover:bg-muted")
+                      }
+                    >
+                      {renderItem ? (
+                        renderItem(item, row)
+                      ) : (
+                        row
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="px-3 py-2.5 text-xs leading-relaxed text-muted-foreground">
+            No matches.
+          </div>
+        )}
+      </m.div>
+    </div>
+  );
+}

package/src/composer/input-area/ComposerSlashRow.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import {
+  IconBook2,
+  IconFile,
+  IconLock,
+  IconPaperclip,
+  IconPlus,
+} from "@tabler/icons-react";
+import type { SlashIconKey } from "./composerSlashItems";
+
+function previewOneLine(text: string, maxLength = 72): string {
+  const singleLine = text.replace(/\s+/g, " ").trim();
+  if (singleLine.length <= maxLength) return singleLine;
+  return `${singleLine.slice(0, maxLength - 1)}…`;
+}
+
+function SlashIcon({ icon }: { icon: SlashIconKey }): ReactNode {
+  const className = "size-4 shrink-0 text-muted-foreground";
+  switch (icon) {
+    case "plus":
+      return <IconPlus className={className} />;
+    case "paperclip":
+      return <IconPaperclip className={className} />;
+    case "lock":
+      return <IconLock className={className} />;
+    case "book":
+      return <IconBook2 className={className} />;
+    case "file":
+      return <IconFile className={className} />;
+  }
+}
+
+export function ComposerSlashRow({
+  label,
+  description,
+  icon,
+  badge,
+  active,
+}: {
+  label: string;
+  description?: string;
+  icon: SlashIconKey;
+  badge?: string;
+  active?: boolean;
+}): ReactNode {
+  const detail = description ? previewOneLine(description) : null;
+  return (
+    <span className="flex w-full min-w-0 items-center gap-2">
+      <SlashIcon icon={icon} />
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden">
+        <span className="flex min-w-0 items-center gap-1.5">
+          <span className="flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden">
+            <span className="shrink-0 text-muted-foreground">/</span>
+            <span className="truncate">{label}</span>
+          </span>
+          {badge ? (
+            <span className="flex shrink-0 items-center gap-1 rounded-md bg-surface-secondary px-1.5 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+              {badge}
+            </span>
+          ) : null}
+          {active ? (
+            <span className="shrink-0 text-[10px] font-medium text-muted-foreground">
+              On
+            </span>
+          ) : null}
+        </span>
+        {detail ? (
+          <span className="truncate text-xs text-muted-foreground">
+            {detail}
+          </span>
+        ) : null}
+      </span>
+    </span>
+  );
+}

package/src/composer/input-area/ConnectionStatusMenuItem.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { DropdownMenuItem } from "../../ui/dropdown-menu";
+
+export type ConnectionStatusMenuItemProps = {
+  /** Brand mark with its own status dot. The app owns it. */
+  icon: ReactNode;
+  label: ReactNode;
+  /** Shown under the label while `connected` is true. */
+  description?: ReactNode;
+  connected: boolean;
+  onClick?: () => void;
+  title?: string;
+};
+
+/** Menu row that shows a connection state, for example an external tool hub. */
+export function ConnectionStatusMenuItem({
+  icon,
+  label,
+  description,
+  connected,
+  onClick,
+  title,
+}: ConnectionStatusMenuItemProps) {
+  return (
+    <DropdownMenuItem
+      startContent={icon}
+      description={connected ? description : undefined}
+      title={title}
+      onClick={onClick}
+    >
+      {label}
+    </DropdownMenuItem>
+  );
+}

package/src/composer/input-area/FadePresence.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { AnimatePresence, domAnimation, LazyMotion, m } from "motion/react";
+import { motionFast } from "./motion";
+
+export type FadePresenceProps = {
+  show: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+/** Fades children in and out as `show` changes. Does not animate on first mount. Brings its own `LazyMotion`, so `m` components animate without an app provider. */
+export function FadePresence({ show, children, className }: FadePresenceProps) {
+  return (
+    <LazyMotion features={domAnimation}>
+    <AnimatePresence initial={false}>
+      {show ? (
+        <m.div
+          key="fade-presence"
+          className={className}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={motionFast}
+        >
+          {children}
+        </m.div>
+      ) : null}
+    </AnimatePresence>
+    </LazyMotion>
+  );
+}

package/src/composer/input-area/InputActions.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+import { IconPaperclip, IconPlus } from "@tabler/icons-react";
+import { Button } from "../../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
+
+export type InputActionsProps = {
+  showFileUpload?: boolean;
+  onAttachFile?: () => void;
+  compact?: boolean;
+  /** Extra menu rows after the attach row, such as a skill picker and a connection item. Include your own separators. */
+  extra?: ReactNode;
+  attachLabel?: ReactNode;
+};
+
+export function InputActions({
+  showFileUpload = false,
+  onAttachFile,
+  compact = false,
+  extra,
+  attachLabel = "Attach file",
+}: InputActionsProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className={`relative shrink-0 rounded-full max-sm:hit-target ${
+            compact
+              ? "size-8 bg-surface-tertiary text-foreground hover:bg-surface-tertiary/80 hover:text-foreground"
+              : ""
+          }`}
+          startContent={<IconPlus width={18} />}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        aria-label="Tool options"
+        side="top"
+        collisionPadding={12}
+        className="max-h-[min(24rem,calc(100dvh-6rem))] max-w-[min(20rem,calc(100vw-1.5rem))] overflow-y-auto"
+      >
+        {showFileUpload ? (
+          <>
+            <DropdownMenuItem
+              startContent={<IconPaperclip size={18} />}
+              onClick={onAttachFile}
+            >
+              {attachLabel}
+            </DropdownMenuItem>
+            {extra ? <DropdownMenuSeparator /> : null}
+          </>
+        ) : null}
+        {extra}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}