@vvedantb/ui 0.3.1 → 0.3.2

package/README.md

@@ -59,8 +59,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 +126,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.3.2",
   "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",
@@ -274,6 +312,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 +383,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 +498,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";