@data-club/ai-hub 0.0.1

package/src/components/MessageInput/index.tsx

@@ -0,0 +1,283 @@
+/**
+ * `<MessageInput />` — auto-growing textarea + send/stop buttons + toolbar
+ * (effort dropdown + slot for custom toolbar items).
+ *
+ * Step 9 shipped the structural input (Enter to send, Shift+Enter for
+ * newline, auto-grow, send ↔ stop toggle). Step 10 layers in:
+ *
+ * - **Phase-aware stop label** — "Stop generation" during model phases,
+ *   "Cancel tool" during `tool_executing` (§10.4 stop-button row notes
+ *   the label change; the i18n keys are `stopGenerationButton` /
+ *   `cancelToolButton`).
+ * - **Effort dropdown** — `<EffortControl />` in the toolbar, gated by
+ *   the resolved `effortControlVisible` flag.
+ * - **Custom toolbar items slot** — `customInputToolbarItems` from the
+ *   monolith (Tier 2) and `toolbar` from primitive composition (Tier 3).
+ *   Rendered after the effort dropdown.
+ *
+ * Exported under `AIHub.Input`.
+ *
+ * @see SPECIFICATIONS.md §7.1 — exports
+ * @see SPECIFICATIONS.md §7.4 — reasoning effort
+ * @see SPECIFICATIONS.md §10.4 — predicate table
+ * @see ui-sketches/03-chat.md — input_area
+ */
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import {
+  resolveAIHubTexts,
+  type AIHubTexts,
+  type DeepPartial,
+} from "../../auth/texts.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import { chatAffordances } from "../../state/affordances.js";
+
+import { EffortControl } from "../EffortControl/index.js";
+
+/**
+ * BEM class names emitted by `<MessageInput />`.
+ */
+export interface MessageInputClassNames {
+  /** Outer wrapper. */
+  root: string;
+  /** Form element. */
+  form: string;
+  /** Wrapper around the textarea + buttons. */
+  inputRow: string;
+  /** The textarea itself. */
+  textarea: string;
+  /** Toolbar row beneath the textarea (effort + custom items). */
+  toolbar: string;
+  /** Send button. */
+  sendButton: string;
+  /** Stop button (replaces send while streaming). */
+  stopButton: string;
+}
+
+const DEFAULT_CLASS_NAMES: MessageInputClassNames = Object.freeze({
+  root: "data-club-ai-hub__input-area",
+  form: "data-club-ai-hub__input-area__form",
+  inputRow: "data-club-ai-hub__input-area__row",
+  textarea: "data-club-ai-hub__input-area__textarea",
+  toolbar: "data-club-ai-hub__input-area__toolbar",
+  sendButton: "data-club-ai-hub__input-area__send",
+  stopButton: "data-club-ai-hub__input-area__stop",
+}) as MessageInputClassNames;
+
+/** Cap the textarea growth — past this many pixels it scrolls internally. */
+const MAX_TEXTAREA_HEIGHT = 240;
+
+/**
+ * Props for `<MessageInput />`.
+ */
+export interface MessageInputProps {
+  /** Show the toolbar row. Defaults to true. */
+  showToolbar?: boolean;
+  /**
+   * Whether the effort dropdown renders inside the toolbar. Defaults to
+   * true. Set false to suppress (overridden upstream by the §8.4
+   * `effort_control_visible` toggle).
+   */
+  showEffortControl?: boolean;
+  /**
+   * Stop-button visibility flag from the §8.4 resolved stack. When
+   * false, the stop button is hidden during streaming and the input
+   * stays disabled until the server emits the terminal event. Default
+   * true.
+   */
+  stopButtonEnabled?: boolean;
+  /**
+   * Slot rendered after the effort dropdown — used by the monolith's
+   * `customInputToolbarItems` slot prop and by Tier-3 wrappers that
+   * pass a `toolbar` to `<AIHub.Input />` directly.
+   */
+  toolbar?: ReactNode;
+  /** Extra class merged onto the root. */
+  className?: string;
+  /** Per-element class overrides. */
+  classNames?: Partial<MessageInputClassNames>;
+  /** Wrapper-supplied i18n. */
+  texts?: DeepPartial<AIHubTexts>;
+}
+
+/**
+ * Renders the input area.
+ *
+ * @param props - see `MessageInputProps`.
+ * @returns the rendered input.
+ */
+export function MessageInput(props: MessageInputProps): ReactNode {
+  const {
+    sendMessage,
+    stop,
+    state,
+    activeSessionId,
+    messagesLoading,
+    isStoppingTurn,
+    pendingDraft,
+    consumePendingDraft,
+  } = useAIHub();
+  const texts = resolveAIHubTexts(props.texts);
+  const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+  const showToolbar = props.showToolbar ?? true;
+  const showEffortControl = props.showEffortControl ?? true;
+  const stopButtonEnabled = props.stopButtonEnabled ?? true;
+
+  const [text, setText] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // Consume `pendingDraft` when it appears, and never twice for the
+  // same value. The functional `setText` callback reads React's truly
+  // current state at flush time, so this is robust against:
+  //
+  // 1. Provider re-rendering between the moment pendingDraft is set
+  //    and the moment this effect runs (`consumePendingDraft` changes
+  //    identity on every provider render, which forces the effect to
+  //    re-fire — the functional update tolerates that).
+  // 2. A stale `textRef` (the previous implementation relied on a
+  //    render-time `textRef.current = text` assignment, which was
+  //    correct in theory but proved fragile in practice — the
+  //    functional form removes the read-side step entirely).
+  //
+  // We also always call `consumePendingDraft()` once we've seen a
+  // non-null draft, even if the user has typed something — that way
+  // the draft doesn't loop back the next time the user clears the
+  // input (the contract is "one-shot push from the provider; consume
+  // exactly once").
+  useEffect(() => {
+    if (pendingDraft === null) return;
+    setText((current) => (current.length === 0 ? pendingDraft : current));
+    consumePendingDraft();
+  }, [pendingDraft, consumePendingDraft]);
+
+  const affordances = chatAffordances(state);
+  const isStreaming = state.status === "running";
+  const disabled =
+    !activeSessionId ||
+    affordances.inputDisabled ||
+    messagesLoading ||
+    isStoppingTurn;
+  const canSend =
+    !isStreaming &&
+    text.trim().length > 0 &&
+    !!activeSessionId &&
+    !messagesLoading &&
+    !isStoppingTurn;
+
+  // Auto-grow the textarea up to MAX_TEXTAREA_HEIGHT.
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, MAX_TEXTAREA_HEIGHT)}px`;
+  }, [text]);
+
+  // Focus the stop button when a turn starts so keyboard users can cancel
+  // without finding it. (§7.7.)
+  const stopButtonRef = useRef<HTMLButtonElement | null>(null);
+  useEffect(() => {
+    if (isStreaming && stopButtonEnabled) {
+      stopButtonRef.current?.focus();
+    }
+  }, [isStreaming, stopButtonEnabled]);
+
+  function handleSubmit(): void {
+    const trimmed = text.trim();
+    if (!canSend || trimmed.length === 0) return;
+    setText("");
+    void sendMessage(trimmed);
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>): void {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  }
+
+  const rootClass = props.className
+    ? `${cls.root} ${props.className}`
+    : cls.root;
+
+  // Phase-aware stop label per §10.4: "Stop generation" during the
+  // model_* phases; "Cancel tool" during `tool_executing`. The label
+  // is the visible text AND the `aria-label`.
+  const stopLabel =
+    state.phase === "tool_executing"
+      ? texts.chat.cancelToolButton
+      : texts.chat.stopGenerationButton;
+
+  return (
+    <div className={rootClass} data-testid="message-input">
+      <form
+        className={cls.form}
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit();
+        }}
+      >
+        <div className={cls.inputRow}>
+          <textarea
+            ref={textareaRef}
+            className={cls.textarea}
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={texts.chat.inputPlaceholder}
+            disabled={disabled}
+            rows={1}
+            data-testid="message-input-textarea"
+            aria-label={texts.chat.inputPlaceholder}
+          />
+          {isStreaming && stopButtonEnabled ? (
+            <button
+              ref={stopButtonRef}
+              type="button"
+              className={cls.stopButton}
+              onClick={() => {
+                if (isStoppingTurn) return;
+                void stop();
+              }}
+              disabled={isStoppingTurn}
+              aria-label={isStoppingTurn ? texts.chat.stoppingButton : stopLabel}
+              aria-busy={isStoppingTurn}
+              data-testid="message-input-stop"
+              data-stopping={isStoppingTurn ? "true" : "false"}
+              data-phase={state.phase ?? "none"}
+            >
+              {isStoppingTurn ? texts.chat.stoppingButton : stopLabel}
+            </button>
+          ) : !isStreaming ? (
+            <button
+              type="submit"
+              className={cls.sendButton}
+              disabled={!canSend}
+              aria-label={texts.chat.sendButtonAriaLabel}
+              data-testid="message-input-send"
+            >
+              {texts.chat.sendButton}
+            </button>
+          ) : null}
+        </div>
+        {showToolbar && (showEffortControl || props.toolbar) ? (
+          <div className={cls.toolbar} data-testid="message-input-toolbar">
+            {showEffortControl ? (
+              <EffortControl
+                disabled={disabled}
+                {...(props.texts !== undefined ? { texts: props.texts } : {})}
+              />
+            ) : null}
+            {props.toolbar}
+          </div>
+        ) : null}
+      </form>
+    </div>
+  );
+}