@vvedantb/ui 0.3.1 → 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
@@ -59,8 +110,10 @@ import { Composer, ComposerIconButton } from "@vvedantb/ui"; // or "@vvedantb/ui
 | Prop | Default | Notes |
 | --- | --- | --- |
 | `value`, `defaultValue`, `onChange` | uncontrolled, `""` | Pass `value` to control it. When controlled, clear the value yourself after `onSubmit`. When uncontrolled, the composer clears after submit. |
-| `onSubmit(text)` | none | Called with the trimmed draft on Enter or the send button. Not called for an empty draft, or when `disabled` or `streaming`. If it returns a rejected promise, an uncontrolled composer restores the draft. |
-| `streaming`, `onStop` | `false` | The stop button replaces send and calls `onStop`. Typing stays on, Enter does not submit. |
+| `onSubmit(text)` | none | Called with the trimmed draft on Enter or the send button. By default it is not called for an empty draft, or when `disabled` or (with `stopMode="replace"`) `streaming`. A `canSend` override that allows an empty draft calls it with `""`. If it returns a rejected promise, an uncontrolled composer restores the draft. |
+| `streaming`, `onStop` | `false` | The stop button calls `onStop`. With `stopMode="replace"` it replaces send and Enter does not submit. Typing stays on. |
+| `stopMode` | `"replace"` | `"alongside"` shows stop and send together while streaming, in the order `trailingActions`, stop, send. Send stays usable to queue the next message: Enter and the send button submit while streaming when `canSend` allows. Not streaming, only send shows. Predictions stay off while streaming. |
+| `canSend` | trimmed draft is not empty | `boolean` or `(draft: string) => boolean`. Overrides whether send is enabled. The function gets the live draft (not trimmed). `disabled` and, in replace mode, `streaming` still block send. With attachments, use `canSend={(draft) => draft.trim() !== "" \|\| hasAttachments}`. `onSubmit` then gets `""` for an empty draft. |
 | `disabled` | `false` | Disables the textarea and send. |
 | `placeholder` | `"Message"` | Also the textarea `aria-label`. |
 | `layout` | `"stacked"` | `"stacked"`: input above, footer bar with `plusMenu` left and `trailingActions` plus send or stop right. `"inline"`: one row with `plusMenu`, the input and the actions. Attachments stay above the row. |
@@ -124,7 +177,7 @@ function MentionComposer({ draft, setDraft, send }: Props) {
 }
 ```
 
-`ComposerShell` props: `layout`, `disabled`, `streaming`, `canSend`, `onSend`, `onStop`, `plusMenu`, `trailingActions`, `attachments`, `className` and `children` (the input region). In the shell the Enter, Tab and Esc keys are yours to wire when you do not use `Composer`.
+`ComposerShell` props: `layout`, `disabled`, `streaming`, `canSend` (always a boolean: `Composer` resolves the function form), `stopMode` (`"replace"` or `"alongside"`, where the buttons render), `onSend`, `onStop`, `plusMenu`, `trailingActions`, `attachments`, `className` and `children` (the input region). In the shell the Enter, Tab and Esc keys are yours to wire when you do not use `Composer`.
 
 Fixture: `composer/examples/` (see its README). It has a `tokens.css` page and a `compat-shadcn-rgb.css` page, each with light and dark.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.3.1",
+  "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

@@ -15,6 +15,12 @@ import { useComposerPrediction } from "./useComposerPrediction";
 export type ComposerSlotContext = { disabled: boolean };
 export type ComposerTrailingContext = { disabled: boolean; streaming: boolean };
 export type ComposerLayout = "stacked" | "inline";
+/**
+ * How stop behaves while `streaming`. `"replace"` (default): stop takes the
+ * place of send. `"alongside"`: stop and send show together, in the order
+ * trailing actions, stop, send.
+ */
+export type ComposerStopMode = "replace" | "alongside";
 
 export type ComposerInputRenderContext = {
   value: string;
@@ -44,13 +50,30 @@ export type ComposerProps = {
   defaultValue?: string;
   onChange?: (value: string) => void;
 
-  /** Called with the trimmed draft on Enter or the send button. Never called for an empty draft. */
+  /**
+   * Called with the trimmed draft on Enter or the send button. By default it
+   * is not called for an empty draft. A `canSend` override that allows an
+   * empty draft calls it with `""`.
+   */
   onSubmit?: (value: string) => void | Promise<void>;
   onStop?: () => void;
-  /** Shows the stop button in place of send. Typing stays enabled. Enter does not submit. */
+  /**
+   * Shows the stop button. With `stopMode="replace"` (default) it takes the
+   * place of send and Enter does not submit. Typing stays enabled.
+   */
   streaming?: boolean;
-  /** Disables the textarea and the send button. */
+  /** Disables the textarea and the send button. `canSend` cannot override it. */
   disabled?: boolean;
+  /**
+   * Overrides whether send is enabled. Default: the trimmed draft is not
+   * empty. `disabled` and, with `stopMode="replace"`, `streaming` still block
+   * send. A function receives the live draft (not trimmed), so check
+   * `draft.trim()` yourself. Use it to allow an empty draft when attachments
+   * exist: `canSend={(draft) => draft.trim() !== "" || hasAttachments}`.
+   */
+  canSend?: boolean | ((draft: string) => boolean);
+  /** `"replace"` (default) or `"alongside"`. See `ComposerStopMode`. */
+  stopMode?: ComposerStopMode;
 
   placeholder?: string;
   /** Maximum textarea height in px. The textarea scrolls after it. Default 200. */
@@ -124,8 +147,10 @@ export type ComposerShellProps = {
   layout?: ComposerLayout;
   disabled?: boolean;
   streaming?: boolean;
-  /** Enables the send button. */
+  /** Enables the send button. Always a boolean: `Composer` resolves its function form. */
   canSend?: boolean;
+  /** `"replace"` (default) or `"alongside"`. Alongside while streaming: trailing actions, stop, send. */
+  stopMode?: ComposerStopMode;
   onSend?: () => void;
   onStop?: () => void;
   plusMenu?: SlotNode<ComposerSlotContext>;
@@ -147,6 +172,7 @@ function ComposerShell({
   disabled = false,
   streaming = false,
   canSend = false,
+  stopMode = "replace",
   onSend,
   onStop,
   plusMenu,
@@ -162,7 +188,7 @@ function ComposerShell({
       : trailingActions;
   const inline = layout === "inline";
 
-  const action = streaming ? (
+  const stopButton = (
     <ComposerIconButton
       variant="default"
       aria-label="Stop generating"
@@ -171,7 +197,8 @@ function ComposerShell({
     >
       <IconPlayerStop className="size-4" aria-hidden="true" />
     </ComposerIconButton>
-  ) : (
+  );
+  const sendButton = (
     <ComposerIconButton
       variant="default"
       aria-label="Send message"
@@ -182,6 +209,16 @@ function ComposerShell({
       <IconArrowUp className="size-4" aria-hidden="true" />
     </ComposerIconButton>
   );
+  const action = !streaming ? (
+    sendButton
+  ) : stopMode === "alongside" ? (
+    <>
+      {stopButton}
+      {sendButton}
+    </>
+  ) : (
+    stopButton
+  );
 
   return (
     <div
@@ -189,6 +226,7 @@ function ComposerShell({
       data-layout={layout}
       data-disabled={disabled || undefined}
       data-streaming={streaming || undefined}
+      data-stop-mode={stopMode}
       className={cn(
         "group/composer relative flex w-full min-w-0 flex-col rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth",
         "has-[[data-composer-input]:focus-visible]:border-focus-border has-[[data-composer-input]:focus-visible]:ring-2 has-[[data-composer-input]:focus-visible]:ring-focus-ring",
@@ -265,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,
@@ -274,6 +313,8 @@ const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function C
     onStop,
     streaming = false,
     disabled = false,
+    canSend: canSendProp,
+    stopMode = "replace",
     placeholder = "Message",
     maxHeight = DEFAULT_MAX_HEIGHT,
     autoFocus,
@@ -343,7 +384,11 @@ const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function C
   };
   React.useLayoutEffect(syncScroll, [value, ghost]);
 
-  const canSend = !disabled && !streaming && value.trim() !== "";
+  const override = typeof canSendProp === "function" ? canSendProp(value) : canSendProp;
+  const canSend =
+    !disabled &&
+    (stopMode === "alongside" || !streaming) &&
+    (override ?? value.trim() !== "");
 
   const submit = () => {
     if (!canSend) return;
@@ -454,6 +499,7 @@ const Composer = React.forwardRef<HTMLTextAreaElement, ComposerProps>(function C
       disabled={disabled}
       streaming={streaming}
       canSend={canSend}
+      stopMode={stopMode}
       onSend={submit}
       onStop={onStop}
       plusMenu={plusMenu}

package/src/composer/index.ts

@@ -6,6 +6,7 @@ export type {
   ComposerProps,
   ComposerShellProps,
   ComposerSlotContext,
+  ComposerStopMode,
   ComposerTrailingContext,
 } from "./Composer";
 export { useComposerPrediction } from "./useComposerPrediction";
@@ -21,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>
+  );
+}