Composer

npm install react-aria-components

"use client";

import type { ReactNode } from "react";
import {
  Button,
  ListBox,
  ListBoxItem,
  Popover,
  Select,
  SelectValue,
  TextArea,
  TextField,
  ToggleButton,
  type ButtonProps,
  type ListBoxItemProps,
  type SelectProps,
  type ToggleButtonProps,
} from "react-aria-components";

const join = (...classes: (string | undefined | false)[]) => classes.filter(Boolean).join(" ");

const control =
  "inline-flex h-(--tui-composer-control-size) cursor-default items-center justify-center gap-1.5 rounded-(--tui-composer-control-radius) font-(family-name:--tui-font) text-(length:--tui-composer-small-size) leading-none font-medium whitespace-nowrap outline-none transition-colors duration-(--tui-duration) data-disabled:opacity-40 data-focus-visible:[outline:2px_solid_var(--tui-composer-ring)] data-focus-visible:[outline-offset:1px] [&_svg]:size-4 [&_svg]:shrink-0";

export const composerStyles = {
  root: "flex w-full flex-col rounded-(--tui-composer-radius) border-solid border-(length:--tui-composer-border-width) border-(--tui-composer-border) bg-(--tui-composer-bg) font-(family-name:--tui-font) shadow-(--tui-composer-shadow) transition-[border-color,box-shadow] duration-(--tui-duration) focus-within:border-(--tui-composer-border-focus) focus-within:shadow-(--tui-composer-shadow-focus) has-[[data-field][data-disabled]]:opacity-(--tui-composer-disabled-opacity)",
  attachments: "flex flex-wrap gap-2 px-(--tui-composer-padding) pt-(--tui-composer-padding)",
  field: "flex px-(--tui-composer-padding) pt-(--tui-composer-padding)",
  input:
    "block max-h-(--tui-composer-max-height) min-h-(--tui-composer-min-height) w-full resize-none border-none bg-transparent p-0 font-(family-name:--tui-font) text-(length:--tui-composer-font-size) leading-normal text-(--tui-composer-fg) outline-none [field-sizing:content] placeholder:text-(--tui-composer-placeholder)",
  bar: "flex items-center gap-1 p-[calc(var(--tui-composer-padding)_*_0.6)]",
  spacer: "min-w-2 flex-1",
  send: "flex size-(--tui-composer-control-size) shrink-0 cursor-default items-center justify-center rounded-(--tui-composer-send-radius) border-none bg-(--tui-composer-send-bg) text-(--tui-composer-send-fg) outline-none transition-[background-color,opacity,scale] duration-(--tui-duration) data-disabled:opacity-(--tui-composer-send-disabled-opacity) data-focus-visible:[outline:2px_solid_var(--tui-composer-ring)] data-focus-visible:[outline-offset:2px] data-hovered:bg-(--tui-composer-send-bg-hover) data-pressed:scale-95",
  button: `${control} min-w-(--tui-composer-control-size) border-none bg-transparent px-2 text-(--tui-composer-tool-fg) data-hovered:bg-(--tui-composer-tool-bg-hover) data-hovered:text-(--tui-composer-fg)`,
  toggle: `${control} border-solid border-(length:--tui-composer-border-width) border-(--tui-composer-toggle-border) bg-transparent px-2.5 text-(--tui-composer-tool-fg) data-hovered:bg-(--tui-composer-tool-bg-hover) data-selected:border-(--tui-composer-toggle-on-border) data-selected:bg-(--tui-composer-toggle-on-bg)! data-selected:text-(--tui-composer-toggle-on-fg)!`,
  select: `${control} border-none bg-transparent pr-1.5 pl-2.5 text-(--tui-composer-tool-fg) data-hovered:bg-(--tui-composer-tool-bg-hover) data-hovered:text-(--tui-composer-fg) data-pressed:bg-(--tui-composer-tool-bg-hover)`,
  menu: "min-w-56 overflow-auto rounded-(--tui-composer-menu-radius) border-solid border-(length:--tui-composer-border-width) border-(--tui-composer-menu-border) bg-(--tui-composer-menu-bg) p-1 font-(family-name:--tui-font) shadow-(--tui-composer-menu-shadow) outline-none",
  option:
    "flex cursor-default flex-col gap-1 rounded-[calc(var(--tui-composer-menu-radius)_-_4px)] px-2.5 py-2 text-(length:--tui-composer-small-size) leading-none text-(--tui-composer-fg) outline-none data-focused:bg-(--tui-composer-tool-bg-hover) data-selected:font-semibold",
  optionNote: "text-[0.92em] leading-snug font-normal text-(--tui-composer-placeholder)",
  footer: "mt-2 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 px-1 font-(family-name:--tui-font) text-(length:--tui-composer-small-size) text-(--tui-composer-placeholder)",
};

const s = composerStyles;

export interface ComposerProps {
  value: string;
  onChange: (value: string) => void;
  /** Called with the text on Enter or the send button. Shift and Enter makes a new line. */
  onSubmit: (value: string) => void;
  placeholder?: string;
  /** Names the field for screen readers. */
  label?: string;
  /** A reply is being written: the send button becomes a stop button. */
  isStreaming?: boolean;
  onStop?: () => void;
  isDisabled?: boolean;
  /** Files added to the prompt, shown above the text. Use Attachment. */
  attachments?: ReactNode;
  /** The left of the bar: attach, modes, the model. Use ComposerButton, ComposerToggle and ComposerSelect. */
  tools?: ReactNode;
  /** The right of the bar, before the send button: dictate, a counter. */
  actions?: ReactNode;
  /** A line under the box: shortcuts, a notice. */
  footer?: ReactNode;
  className?: string;
}

/**
 * Where a prompt is written and sent. The text grows with what is typed, up
 * to a limit; files sit above it and the controls below. With nothing to
 * send the button is disabled, and while a reply streams it stops it.
 */
export function Composer({ value, onChange, onSubmit, placeholder = "Ask anything", label = "Message", isStreaming, onStop, isDisabled, attachments, tools, actions, footer, className }: ComposerProps) {
  const empty = value.trim().length === 0;
  const submit = () => {
    if (!empty && !isStreaming) onSubmit(value);
  };

  return (
    <div className={join("flex w-full flex-col", className)}>
      <div data-slot="composer" className={s.root}>
        {attachments && <div className={s.attachments}>{attachments}</div>}
        {/* The box dims when the field itself is disabled. The send button is disabled whenever there is nothing to send, and that must not dim it. */}
        <TextField data-field="" aria-label={label} value={value} onChange={onChange} isDisabled={isDisabled} className={s.field}>
          <TextArea
            rows={1}
            placeholder={placeholder}
            className={s.input}
            onKeyDown={(event) => {
              if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
              event.preventDefault();
              submit();
            }}
          />
        </TextField>
        <div className={s.bar}>
          {tools}
          <span className={s.spacer} />
          {actions}
          <Button data-slot="composer-send" aria-label={isStreaming ? "Stop" : "Send"} isDisabled={isDisabled || (!isStreaming && empty)} onPress={isStreaming ? onStop : submit} className={s.send}>
            {isStreaming ? (
              <svg aria-hidden viewBox="0 0 16 16" fill="currentColor" className="size-[38%]">
                <rect x="3" y="3" width="10" height="10" rx="2" />
              </svg>
            ) : (
              <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-[50%]">
                <path d="M8 13V3M3.5 7.5L8 3l4.5 4.5" />
              </svg>
            )}
          </Button>
        </div>
      </div>
      {footer && <div className={s.footer}>{footer}</div>}
    </div>
  );
}

type WithClass<T> = Omit<T, "className"> & { className?: string };

/** A quiet button for the composer's bar: attach, dictate. */
export function ComposerButton({ className, ...props }: WithClass<ButtonProps>) {
  return <Button {...props} className={join(s.button, className)} />;
}

/** A mode that is on or off for the next prompt: search the web, think longer. */
export function ComposerToggle({ className, ...props }: WithClass<ToggleButtonProps>) {
  return <ToggleButton data-slot="composer-toggle" {...props} className={join(s.toggle, className)} />;
}

export interface ComposerSelectProps<T extends object> extends Omit<SelectProps<T>, "className" | "children"> {
  /** Names the choice for screen readers, e.g. Model. */
  label: string;
  children: ReactNode;
  className?: string;
}

/** A choice made in the bar, usually the model. It opens upward when the composer is at the bottom of the screen. */
export function ComposerSelect<T extends object>({ label, children, className, ...props }: ComposerSelectProps<T>) {
  return (
    <Select aria-label={label} {...props} className="flex">
      <Button className={join(s.select, className)}>
        <SelectValue className="truncate" />
        <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="size-3! opacity-70">
          <path d="M4 6l4 4 4-4" />
        </svg>
      </Button>
      <Popover data-slot="menu" placement="top start" offset={6} className={s.menu}>
        <ListBox className="outline-none">{children}</ListBox>
      </Popover>
    </Select>
  );
}

export interface ComposerOptionProps extends Omit<ListBoxItemProps, "className" | "children"> {
  /** What shows in the bar when it is chosen. */
  children: string;
  /** A line under it in the menu: what it is good for. */
  note?: ReactNode;
  className?: string;
}

export function ComposerOption({ children, note, className, ...props }: ComposerOptionProps) {
  return (
    <ListBoxItem textValue={children} {...props} className={join(s.option, className)}>
      {({ isSelected }) => (
        <>
          <span className="flex items-center justify-between gap-3">
            {children}
            {isSelected && (
              <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-3.5">
                <path d="M3.5 8.5l3 3 6-7" />
              </svg>
            )}
          </span>
          {note && <span className={s.optionNote}>{note}</span>}
        </>
      )}
    </ListBoxItem>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Composer */
  --tui-composer-padding: calc(var(--tui-space) * 3.5);
  --tui-composer-min-height: calc(var(--tui-space) * 12);
  --tui-composer-max-height: 220px;
  --tui-composer-control-size: calc(var(--tui-space) * 8);
  --tui-composer-radius: calc(var(--tui-radius) * 2.25);
  --tui-composer-control-radius: 999px;
  --tui-composer-send-radius: 999px;
  --tui-composer-menu-radius: calc(var(--tui-radius) * 1.5);
  --tui-composer-border-width: var(--tui-border-width);
  --tui-composer-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  --tui-composer-menu-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
  --tui-composer-font-size: calc(var(--tui-text) + 1px);
  --tui-composer-small-size: 13px;
  --tui-composer-bg: var(--tui-bg);
  --tui-composer-fg: var(--tui-fg);
  --tui-composer-border: var(--tui-border);
  --tui-composer-placeholder: var(--tui-muted-fg);
  --tui-composer-tool-fg: var(--tui-muted-fg);
  --tui-composer-toggle-border: var(--tui-border);
  --tui-composer-send-bg: var(--tui-primary);
  --tui-composer-send-fg: var(--tui-primary-fg);
  --tui-composer-menu-bg: var(--tui-bg);
  --tui-composer-menu-border: var(--tui-border);
  --tui-composer-tool-bg-hover: var(--tui-muted);
  --tui-composer-send-bg-hover: color-mix(in oklab, var(--tui-primary) 86%, var(--tui-bg));
  --tui-composer-toggle-on-bg: color-mix(in oklab, var(--tui-primary) 10%, var(--tui-bg));
  --tui-composer-toggle-on-fg: var(--tui-fg);
  --tui-composer-toggle-on-border: color-mix(in oklab, var(--tui-primary) 45%, var(--tui-bg));
  --tui-composer-border-focus: color-mix(in oklab, var(--tui-border) 40%, var(--tui-fg));
  --tui-composer-shadow-focus: 0 12px 32px rgb(0 0 0 / 0.14);
  --tui-composer-ring: var(--tui-ring);
  --tui-composer-send-disabled-opacity: 0.3;
  --tui-composer-disabled-opacity: 0.5;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}