makersclaw 0.2.0 → 0.3.0

package/registry/blocks/chat/composer.jsx

@@ -0,0 +1,364 @@
+"use client";
+
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Button, FileInput, Icon, IconButton, InputGroup, Kbd, Menu, cx } from "../../ui";
+import { Attachment } from "./attachment";
+
+// Composer — where a message is written. One row that grows with the text
+// (to `maxRows`, then it scrolls), Enter sends and Shift+Enter starts a
+// new line (never while an input method is composing a word), files come
+// in through the paperclip, a paste or a drop and wait in a row above the
+// text, and while a reply streams the send button is Stop. The field is
+// the kit's multi-line InputGroup: the files above the text, the
+// paperclip and the hint in its bar, send at the end.
+//
+// shape="pill" is the "ask anything" box: one round row with the "+" menu
+// and the paperclip before the text and the tools and Send after it,
+// which opens into a rounded box (text on top, the bar under it) once the
+// text runs past one line. `suggestions` are prompt chips (or cards) that
+// fill the field, or send at once.
+
+// useLayoutEffect warns on the server; the sizing only matters in a browser.
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+const LINE_PX = 24; // the pill's text is text-base leading-6
+
+/** Prompt chips or starter cards. Each is a kit Button. */
+function Suggestions({ items, look, onPick, disabled, label }) {
+  const list = (items ?? []).filter(Boolean);
+  if (!list.length) return null;
+  const cards = look === "cards";
+  return (
+    <ul aria-label={label} className={cards ? "grid grid-cols-1 gap-2 sm:grid-cols-2" : "flex flex-wrap justify-center gap-2"}>
+      {list.map((s, i) => (
+        <li key={s.id ?? `${s.label}-${i}`} className={cards ? "min-w-0" : "min-w-0 max-w-full"}>
+          <Button
+            variant="secondary"
+            size={cards ? "md" : "sm"}
+            align={cards ? "start" : "center"}
+            icon={s.icon}
+            disabled={disabled || s.disabled}
+            onClick={() => onPick(s)}
+            className={cards ? "h-auto w-full py-2" : "max-w-full rounded-full font-normal"}
+          >
+            {cards ? (
+              <span className="grid min-w-0 text-left">
+                <span className="truncate">{s.label}</span>
+                {s.description ? <span className="truncate text-xs font-normal text-muted-foreground">{s.description}</span> : null}
+              </span>
+            ) : (
+              <span className="min-w-0 truncate">{s.label}</span>
+            )}
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function Composer({
+  onSend,
+  onStop,
+  streaming = false,
+  disabled = false,
+  value: controlled,
+  onValueChange,
+  placeholder = "Write a message…",
+  disabledPlaceholder,
+  attachments,
+  onAttach,
+  onRemoveAttachment,
+  accept,
+  maxRows = 8,
+  canSendEmpty = false,
+  label = "Message",
+  hint = true,
+  autoFocus = false,
+  shape = "box",
+  tools: extraTools,
+  menu,
+  menuLabel = "Add to the message",
+  suggestions,
+  suggestionsLook = "chips",
+  suggestionsPlacement = "below",
+  suggestionMode = "fill",
+  suggestionsLabel = "Suggested prompts",
+  onEditLast,
+  className,
+}) {
+  const id = useId();
+  const area = useRef(null);
+  const [own, setOwn] = useState("");
+  const [error, setError] = useState(null);
+  const [dragging, setDragging] = useState(false);
+  const [wide, setWide] = useState(false);
+  const value = controlled ?? own;
+  const setValue = (v) => {
+    if (controlled === undefined) setOwn(v);
+    onValueChange?.(v);
+  };
+
+  const pill = shape === "pill";
+  const files = (attachments ?? []).filter(Boolean);
+  const uploading = files.some((f) => typeof f.progress === "number" && f.progress < 100 && !f.error);
+  const ready = files.filter((f) => !f.error);
+  const hasContent = value.trim().length > 0 || ready.length > 0 || canSendEmpty;
+  const canSend = !disabled && !streaming && !uploading && hasContent && Boolean(onSend);
+  // The pill opens into a box past one line, on a new line, or with files.
+  const open = pill && (wide || value.includes("\n") || files.length > 0);
+
+  // The pill's own textarea grows with its text (the box's is the kit's).
+  useIsoLayoutEffect(() => {
+    if (!pill) return;
+    const el = area.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const h = el.scrollHeight;
+    const max = maxRows * LINE_PX;
+    el.style.height = `${Math.min(h, max)}px`;
+    el.style.overflowY = h > max ? "auto" : "hidden";
+    if (value === "") setWide(false);
+    else if (!open && h > LINE_PX * 1.5) setWide(true);
+  }, [pill, value, open, maxRows]);
+
+  async function send(override) {
+    const text = override ?? value;
+    const content = text.trim().length > 0 || ready.length > 0 || canSendEmpty;
+    if (disabled || streaming || uploading || !onSend || !content) return;
+    setError(null);
+    setValue("");
+    let result;
+    try {
+      result = await onSend(text.trim(), ready);
+    } catch (e) {
+      result = { ok: false, error: e?.message ?? String(e) };
+    }
+    if (result && result.ok === false) {
+      // Nothing typed is lost: the words come back to the field.
+      setValue(text);
+      setError(result.error ?? "The message was not sent");
+    }
+    area.current?.focus();
+  }
+
+  function pick(s) {
+    if (s.onSelect) return s.onSelect(s);
+    const text = s.prompt ?? s.label ?? "";
+    if (suggestionMode === "send") return send(text);
+    setValue(text);
+    setError(null);
+    requestAnimationFrame(() => {
+      const el = area.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange?.(text.length, text.length);
+    });
+  }
+
+  function take(list) {
+    const picked = Array.from(list ?? []).filter(Boolean);
+    if (picked.length && onAttach && !disabled) onAttach(picked);
+  }
+
+  function onKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      send();
+    } else if (e.key === "Escape" && streaming && onStop) {
+      e.preventDefault();
+      onStop();
+    } else if (e.key === "ArrowUp" && onEditLast && value === "" && !e.nativeEvent.isComposing) {
+      // Up in an empty field edits the last thing you sent.
+      e.preventDefault();
+      onEditLast();
+    }
+  }
+
+  function onPaste(e) {
+    if (!onAttach || !e.clipboardData?.files?.length) return;
+    e.preventDefault();
+    take(e.clipboardData.files);
+  }
+
+  const placeholderText = disabled ? disabledPlaceholder ?? placeholder : placeholder;
+
+  const above = files.length ? (
+    <ul aria-label="Attached files" className={cx("flex gap-2 overflow-x-auto", pill ? "px-1 pb-1" : "p-2 pb-0")}>
+      {files.map((f, i) => (
+        <li key={f.id ?? `${f.name}-${i}`} className="shrink-0">
+          <Attachment
+            name={f.name}
+            size={f.size}
+            type={f.type}
+            url={f.url}
+            progress={f.progress}
+            error={f.error}
+            onRemove={onRemoveAttachment ? () => onRemoveAttachment(f) : undefined}
+            className="w-56"
+          />
+        </li>
+      ))}
+    </ul>
+  ) : null;
+
+  const plus =
+    menu && menu.length ? (
+      <Menu
+        items={menu}
+        label={menuLabel}
+        trigger={<Icon name="plus" size={18} />}
+        align="start"
+        side="top"
+        size="md"
+        className="rounded-full text-muted-foreground"
+      />
+    ) : null;
+
+  const clip = onAttach ? <FileInput icon="paperclip" label="Attach files" multiple accept={accept} disabled={disabled} onFiles={take} /> : null;
+
+  const tools = (
+    <>
+      {plus}
+      {clip}
+      {extraTools}
+      {hint && !disabled ? (
+        <p aria-hidden="true" className="hidden min-w-0 items-center gap-1 truncate text-xs text-muted-foreground md:flex">
+          {streaming ? (
+            <>
+              <Kbd>Esc</Kbd> to stop
+            </>
+          ) : (
+            <>
+              <Kbd>Enter</Kbd> to send · <Kbd>Shift</Kbd>+<Kbd>Enter</Kbd> for a new line
+            </>
+          )}
+        </p>
+      ) : null}
+    </>
+  );
+
+  const action =
+    streaming && onStop ? (
+      <IconButton icon="stop" label="Stop the reply" variant="secondary" onClick={onStop} className="rounded-full" />
+    ) : (
+      <IconButton
+        icon="send"
+        label={uploading ? "Waiting for files to upload" : "Send"}
+        variant="primary"
+        disabled={!canSend}
+        onClick={() => send()}
+        className="rounded-full"
+      />
+    );
+
+  const chips =
+    suggestions && suggestions.length ? (
+      <Suggestions items={suggestions} look={suggestionsLook} onPick={pick} disabled={disabled || streaming} label={suggestionsLabel} />
+    ) : null;
+
+  const field = pill ? (
+    // A press anywhere in the pill that is not a control puts the caret in the text.
+    <div
+      onMouseDown={(e) => {
+        if (e.target.closest("button, a, input, select, textarea, [role=button]")) return;
+        e.preventDefault();
+        area.current?.focus();
+      }}
+      className={cx(
+        "grid w-full cursor-text border border-input bg-background text-foreground shadow-sm",
+        "has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring",
+        "has-[textarea[aria-invalid=true]]:border-destructive",
+        "has-[textarea:disabled]:cursor-not-allowed has-[textarea:disabled]:opacity-50",
+        open ? "grid-cols-[minmax(0,1fr)_auto] gap-y-1 rounded-3xl p-2" : "grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 rounded-full p-1.5",
+      )}
+    >
+      {above ? <div className="col-span-2 row-start-1 min-w-0 cursor-default">{above}</div> : null}
+      <div className={cx("flex min-w-0 items-center gap-1", open && cx("col-start-1", above ? "row-start-3" : "row-start-2"))}>
+        {plus}
+        {clip}
+      </div>
+      <div className={cx("min-w-0", open ? cx("col-span-2 px-2 pt-1", above ? "row-start-2" : "row-start-1") : "px-1.5")}>
+        {/* InputGroup's multi-line field always sets its bar under the text;
+            the pill needs the addons on the text's own row, moving under it
+            as the text grows. raw: kit gap, an inline InputGroup layout. */}
+        <textarea
+          ref={area}
+          id={id}
+          rows={1}
+          value={value}
+          disabled={disabled}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={error ? `${id}-error` : undefined}
+          autoFocus={autoFocus}
+          placeholder={placeholderText}
+          onChange={(e) => setValue(e.target.value)}
+          onPaste={onPaste}
+          onKeyDown={onKeyDown}
+          className="block w-full resize-none border-0 bg-transparent p-0 text-base leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+        />
+      </div>
+      <div className={cx("flex items-center gap-1 justify-self-end", open && cx("col-start-2", above ? "row-start-3" : "row-start-2"))}>
+        {extraTools}
+        {action}
+      </div>
+    </div>
+  ) : (
+    <InputGroup
+      multiline
+      ref={area}
+      id={id}
+      minRows={1}
+      maxRows={maxRows}
+      value={value}
+      disabled={disabled}
+      invalid={Boolean(error)}
+      autoFocus={autoFocus}
+      placeholder={placeholderText}
+      aria-describedby={error ? `${id}-error` : undefined}
+      above={above}
+      tools={tools}
+      action={action}
+      onChange={(e) => setValue(e.target.value)}
+      onPaste={onPaste}
+      onKeyDown={onKeyDown}
+      className="shadow-sm"
+    />
+  );
+
+  return (
+    <div className={cx("grid gap-1.5", chips && "gap-3", className)}>
+      {chips && suggestionsPlacement === "above" ? chips : null}
+      <div className="grid gap-1.5">
+        <label htmlFor={id} className="sr-only">
+          {label}
+        </label>
+        {/* The drop target is the whole field, files and bar included. */}
+        <div
+          onDragOver={(e) => {
+            if (!onAttach || disabled || !e.dataTransfer?.types?.includes("Files")) return;
+            e.preventDefault();
+            setDragging(true);
+          }}
+          onDragLeave={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+          }}
+          onDrop={(e) => {
+            if (!onAttach || disabled) return;
+            e.preventDefault();
+            setDragging(false);
+            take(e.dataTransfer?.files);
+          }}
+          className={cx(pill ? (open ? "rounded-3xl" : "rounded-full") : "rounded-md", dragging && "ring-2 ring-ring")}
+        >
+          {field}
+        </div>
+        {error ? (
+          <p id={`${id}-error`} role="alert" className="px-1 text-xs text-destructive">
+            {error}
+          </p>
+        ) : null}
+      </div>
+      {chips && suggestionsPlacement !== "above" ? chips : null}
+    </div>
+  );
+}