@backmatter/studio 0.0.1

package/src/chat/Composer.tsx

@@ -0,0 +1,461 @@
+// packages/studio/src/chat/Composer.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { docKey, type DocRef } from "../chrome/EditorFocusContext";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { Tooltip } from "../ui/Tooltip";
+import { useChatSession, useChatUI } from "./ChatProvider";
+import { MentionPopover, type MentionKey } from "./MentionPopover";
+import { ModelPicker } from "./ModelPicker";
+import { AtIcon, CloseIcon, FileIcon, FocusIcon, SendIcon, StopIcon } from "./icons";
+import { mentionQueryAt } from "./chat-helpers";
+
+const hover = "@media (hover: hover)";
+
+/** Height of one row in the context bar; the bar adds 8px of vertical padding. */
+export const CONTEXT_ROW_HEIGHT = 30;
+export const CONTEXT_BAR_PADDING = 8;
+
+const MENTION_KEYS: ReadonlySet<string> = new Set(["ArrowDown", "ArrowUp", "Enter", "Tab", "Escape"]);
+
+function isMentionKey(key: string): key is MentionKey {
+  return MENTION_KEYS.has(key);
+}
+
+export function Composer({ autoFocus }: { autoFocus: boolean }) {
+  const ui = useChatUI();
+  const session = useChatSession();
+  const [text, setText] = useState("");
+  const [mention, setMention] = useState<{ start: number; query: string } | null>(null);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const boxRef = useRef<HTMLDivElement>(null);
+  const mentionKeys = useRef<((key: MentionKey) => void) | null>(null);
+  const busy = session.status === "streaming" || session.status === "submitted";
+  const canSend = text.trim().length > 0 && !busy && ui.aiAvailable === true;
+
+  // Auto-grow.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "0px";
+    el.style.height = `${Math.min(el.scrollHeight, 180)}px`;
+  }, [text]);
+
+  useEffect(() => {
+    if (!autoFocus) return;
+    const id = requestAnimationFrame(() => ref.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [autoFocus, session.threadId]);
+
+  useEffect(() => {
+    function onFocus() {
+      ref.current?.focus();
+    }
+    window.addEventListener("backmatter:chat-focus", onFocus);
+    return () => window.removeEventListener("backmatter:chat-focus", onFocus);
+  }, []);
+
+  // Suggestion chips ending with "…" prefill the composer.
+  useEffect(() => {
+    function onPrefill(e: Event) {
+      const detail = (e as CustomEvent<{ text: string }>).detail;
+      setText(detail.text);
+      requestAnimationFrame(() => {
+        const el = ref.current;
+        if (!el) return;
+        el.focus();
+        el.setSelectionRange(el.value.length, el.value.length);
+      });
+    }
+    window.addEventListener("backmatter:chat-prefill", onPrefill);
+    return () => window.removeEventListener("backmatter:chat-prefill", onPrefill);
+  }, []);
+
+  const submit = useCallback(() => {
+    const value = text.trim();
+    if (!value || busy) return;
+    setText("");
+    setMention(null);
+    void session.send(value);
+  }, [text, busy, session]);
+
+  function updateMention(el: HTMLTextAreaElement) {
+    setMention(mentionQueryAt(el.value, el.selectionStart ?? el.value.length));
+  }
+
+  function pickMention(refDoc: DocRef) {
+    ui.addMention(refDoc);
+    if (mention) {
+      const el = ref.current;
+      const caret = el?.selectionStart ?? text.length;
+      const next = `${text.slice(0, mention.start)}${text.slice(caret)}`;
+      setText(next);
+      requestAnimationFrame(() => {
+        el?.focus();
+        el?.setSelectionRange(mention.start, mention.start);
+      });
+    }
+    setMention(null);
+  }
+
+  const focusChip = ui.focus && ui.includeFocus ? ui.focus.docRef : null;
+  const selectionActive =
+    ui.focus?.selection && ui.focus.selection.end > ui.focus.selection.start;
+  const hasContext = Boolean(focusChip || ui.mentions.length > 0);
+
+  return (
+    <div {...stylex.props(styles.wrap)}>
+      {mention ? (
+        <MentionPopover
+          workspaceId={ui.workspaceId}
+          anchor={boxRef}
+          query={mention.query}
+          exclude={[...ui.mentions, ...(ui.focus ? [ui.focus.docRef] : [])]}
+          keyHandlerRef={mentionKeys}
+          onSelect={pickMention}
+          onClose={() => setMention(null)}
+        />
+      ) : null}
+      {hasContext ? (
+          <div {...stylex.props(styles.context)} aria-label="Context">
+            {focusChip ? (
+              <ContextRow
+                icon={<FileIcon size={13} />}
+                type={focusChip.type}
+                slug={focusChip.slug}
+                meta={selectionActive ? "selection" : "open in editor"}
+                removeLabel="Remove open document from context"
+                onRemove={() => ui.setIncludeFocus(false)}
+              />
+            ) : null}
+            {ui.mentions.map((m) => (
+              <ContextRow
+                key={docKey(m)}
+                icon={<AtIcon size={13} />}
+                type={m.type}
+                slug={m.slug}
+                removeLabel={`Remove ${m.type}/${m.slug}`}
+                onRemove={() => ui.removeMention(m)}
+              />
+            ))}
+          </div>
+      ) : null}
+      <div ref={boxRef} {...stylex.props(styles.box)}>
+        <textarea
+          ref={ref}
+          value={text}
+          rows={1}
+          placeholder={
+            ui.aiAvailable === false
+              ? "AI is not configured on this server"
+              : ui.tier === "ask"
+                ? "Ask about your content…"
+                : "Ask or describe a change…"
+          }
+          aria-label="Message the AI assistant"
+          data-no-ring=""
+          disabled={ui.aiAvailable !== true}
+          onChange={(e) => {
+            setText(e.target.value);
+            updateMention(e.target);
+          }}
+          onClick={(e) => updateMention(e.currentTarget)}
+          onKeyDown={(e) => {
+            if (mention && isMentionKey(e.key)) {
+              e.preventDefault();
+              mentionKeys.current?.(e.key);
+              return;
+            }
+            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+              e.preventDefault();
+              submit();
+            } else if (e.key === "Escape") {
+              ui.dispatch({ type: "minimize" });
+            }
+          }}
+          {...stylex.props(styles.textarea)}
+        />
+        <div {...stylex.props(styles.footer)}>
+          <Tooltip label="Mention a document (@)">
+            <button
+              type="button"
+              aria-label="Mention a document"
+              disabled={ui.aiAvailable !== true}
+              onClick={() => {
+                const el = ref.current;
+                if (!el) return;
+                const caret = el.selectionStart ?? text.length;
+                const needsSpace = caret > 0 && !/\s/.test(text[caret - 1] ?? " ");
+                const insert = `${needsSpace ? " " : ""}@`;
+                const next = `${text.slice(0, caret)}${insert}${text.slice(caret)}`;
+                setText(next);
+                const pos = caret + insert.length;
+                requestAnimationFrame(() => {
+                  el.focus();
+                  el.setSelectionRange(pos, pos);
+                  setMention({ start: pos - 1, query: "" });
+                });
+              }}
+              {...stylex.props(styles.iconBtn)}
+            >
+              <AtIcon />
+            </button>
+          </Tooltip>
+          <span {...stylex.props(styles.spacer)} />
+          {ui.focus ? (
+            <Tooltip
+              label={
+                ui.includeFocus
+                  ? "Stop including the open document"
+                  : `Include ${ui.focus.docRef.type}/${ui.focus.docRef.slug}`
+              }
+            >
+              <button
+                type="button"
+                aria-label="Include the open document in context"
+                aria-pressed={ui.includeFocus}
+                disabled={ui.aiAvailable !== true}
+                onClick={() => ui.setIncludeFocus(!ui.includeFocus)}
+                {...stylex.props(styles.iconBtn, ui.includeFocus && styles.iconBtnActive)}
+              >
+                <FocusIcon />
+              </button>
+            </Tooltip>
+          ) : null}
+          <ModelPicker />
+          {busy ? (
+            <Tooltip label="Stop generating">
+              <button
+                type="button"
+                aria-label="Stop generating"
+                onClick={() => session.stop()}
+                {...stylex.props(styles.sendBtn, styles.stopBtn)}
+              >
+                <StopIcon />
+              </button>
+            </Tooltip>
+          ) : (
+            <Tooltip label="Send (Enter)">
+              <button
+                type="button"
+                aria-label="Send message"
+                disabled={!canSend}
+                onClick={submit}
+                {...stylex.props(styles.sendBtn)}
+              >
+                <SendIcon />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ContextRow({
+  icon,
+  type,
+  slug,
+  meta,
+  removeLabel,
+  onRemove,
+}: {
+  icon: React.ReactNode;
+  type: string;
+  slug: string;
+  meta?: string;
+  removeLabel: string;
+  onRemove: () => void;
+}) {
+  return (
+    <div {...stylex.props(styles.row)}>
+      <span {...stylex.props(styles.rowIcon)}>{icon}</span>
+      <span {...stylex.props(styles.rowText)}>
+        <span {...stylex.props(styles.rowType)}>{type}/</span>
+        <span {...stylex.props(styles.rowSlug)}>{slug}</span>
+      </span>
+      {meta ? <span {...stylex.props(styles.rowMeta)}>{meta}</span> : null}
+      <button
+        type="button"
+        aria-label={removeLabel}
+        onClick={onRemove}
+        {...stylex.props(styles.rowRemove)}
+      >
+        <CloseIcon size={11} />
+      </button>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  wrap: {
+    position: "relative",
+    padding: space.md,
+    paddingTop: 0,
+  },
+  // Floats above the input box (its bottom tucked behind it) so toggling it never
+  // reflows the message area; ChatPanel reserves matching space (CONTEXT_ROW_HEIGHT).
+  context: {
+    position: "absolute",
+    left: space.md,
+    right: space.md,
+    bottom: "calc(100% - 12px)",
+    zIndex: 1,
+    display: "flex",
+    flexDirection: "column",
+    paddingInline: space.sm,
+    paddingTop: space.xs,
+    paddingBottom: `calc(${space.xs} + 12px)`,
+    borderRadius: 12,
+    backgroundColor: colors.bgPanelInset,
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    height: CONTEXT_ROW_HEIGHT,
+    paddingInline: space.sm,
+    borderRadius: radius.md,
+    color: colors.text,
+    fontSize: type.sm,
+  },
+  rowIcon: {
+    display: "inline-flex",
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  rowText: {
+    display: "inline-flex",
+    minWidth: 0,
+    flex: 1,
+    gap: 0,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+  },
+  rowType: {
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  rowSlug: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    fontWeight: 500,
+  },
+  rowMeta: {
+    flexShrink: 0,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  rowRemove: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: 20,
+    height: 20,
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover, color: colors.text },
+    },
+  },
+  box: {
+    position: "relative",
+    zIndex: 2,
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+    padding: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: 12,
+    backgroundColor: colors.bgSurface,
+    transitionProperty: "border-color",
+    transitionDuration: "120ms",
+    ":focus-within": {
+      borderColor: `color-mix(in srgb, ${colors.textMuted} 45%, ${colors.border})`,
+    },
+  },
+  textarea: {
+    display: "block",
+    width: "100%",
+    minHeight: 24,
+    maxHeight: 180,
+    resize: "none",
+    borderWidth: 0,
+    padding: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontFamily: type.sans,
+    fontSize: type.md,
+    lineHeight: 1.5,
+    outline: "none",
+    "::placeholder": {
+      color: colors.textMuted,
+    },
+    ":disabled": {
+      cursor: "not-allowed",
+    },
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.xs,
+  },
+  spacer: {
+    flex: 1,
+  },
+  iconBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 28,
+    height: 28,
+    borderWidth: 0,
+    borderRadius: 999,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover, color: colors.text },
+    },
+    ":disabled": { opacity: 0.5, cursor: "default" },
+  },
+  iconBtnActive: {
+    backgroundColor: colors.bgActive,
+    color: colors.text,
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgActive },
+    },
+  },
+  sendBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 28,
+    height: 28,
+    borderWidth: 0,
+    borderRadius: 999,
+    backgroundColor: colors.text,
+    color: colors.textInverse,
+    cursor: "pointer",
+    transitionProperty: "opacity",
+    transitionDuration: "120ms",
+    ":disabled": { opacity: 0.35, cursor: "default" },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  stopBtn: {
+    backgroundColor: colors.danger,
+  },
+});