@backmatter/studio 0.0.1

package/src/chat/ChatPanel.tsx

@@ -0,0 +1,406 @@
+// packages/studio/src/chat/ChatPanel.tsx
+//
+// Floating chat window anchored bottom-right above the ChatBar. Supports
+// minimize (collapses into the bar), fullscreen, and a history view.
+import { useEffect } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Tooltip } from "../ui/Tooltip";
+import { ChatMessage } from "./ChatMessage";
+import { useChatSession, useChatUI } from "./ChatProvider";
+import { CONTEXT_BAR_PADDING, CONTEXT_ROW_HEIGHT, Composer } from "./Composer";
+import { LiveStatus } from "./LiveStatus";
+import { Shimmer } from "./Shimmer";
+import { ThreadHistory } from "./ThreadHistory";
+import { useStickToBottom } from "./useStickToBottom";
+import {
+  CloseIcon,
+  CollapseIcon,
+  ExpandIcon,
+  HistoryIcon,
+  MinimizeIcon,
+  PlusIcon,
+  SparkIcon,
+} from "./icons";
+import { isPanelVisible } from "./chat-state";
+
+const hover = "@media (hover: hover)";
+
+export function ChatPanel({ fill = false }: { fill?: boolean } = {}) {
+  const ui = useChatUI();
+  const session = useChatSession();
+  const visible = isPanelVisible(ui.panel.mode);
+  const fullscreen = ui.panel.mode === "fullscreen";
+  // Ease to the bottom on new messages and while streaming, unless the user scrolled up.
+  const scroller = useStickToBottom<HTMLDivElement>({
+    active: visible && ui.panel.view === "chat" && !session.loading,
+    resetKey: session.thread?.id ?? null,
+    deps: [session.messages, session.status],
+  });
+
+  useEffect(() => {
+    if (!visible) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape" && fullscreen) {
+        ui.dispatch({ type: "toggleFullscreen" });
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [visible, fullscreen, ui]);
+
+  if (!visible) return null;
+
+  // Space under the messages for the floating context bar. Always reserve at least
+  // one row so toggling the open document doesn't shift the content.
+  const contextRows = Math.max(
+    1,
+    (ui.focus && ui.includeFocus ? 1 : 0) + ui.mentions.length,
+  );
+  const contextReserve = contextRows * CONTEXT_ROW_HEIGHT + CONTEXT_BAR_PADDING + 12;
+
+  const title =
+    ui.panel.view === "history"
+      ? "Chat history"
+      : session.thread?.title || (session.messages.length ? "Chat" : "New chat");
+  const lastMessage = session.messages[session.messages.length - 1];
+  const liveParts = lastMessage?.role === "assistant" ? lastMessage.parts : undefined;
+
+  return (
+    <section
+      role="dialog"
+      aria-label="AI chat"
+      {...stylex.props(fill ? styles.panelFill : styles.panel, !fill && fullscreen && styles.panelFull)}
+    >
+      <header {...stylex.props(styles.header)}>
+        <h2 {...stylex.props(styles.title)}>{title}</h2>
+        <div {...stylex.props(styles.headerActions)}>
+          {ui.panel.view === "chat" ? (
+            <>
+              <Tooltip label="New chat">
+                <button
+                  type="button"
+                  aria-label="New chat"
+                  onClick={() => ui.newThread()}
+                  {...stylex.props(styles.iconBtn)}
+                >
+                  <PlusIcon />
+                </button>
+              </Tooltip>
+              <Tooltip label="Chat history">
+                <button
+                  type="button"
+                  aria-label="Chat history"
+                  onClick={() => ui.dispatch({ type: "showHistory" })}
+                  {...stylex.props(styles.iconBtn)}
+                >
+                  <HistoryIcon />
+                </button>
+              </Tooltip>
+            </>
+          ) : (
+            <button
+              type="button"
+              onClick={() => ui.dispatch({ type: "showChat" })}
+              {...stylex.props(styles.textBtn)}
+            >
+              Back to chat
+            </button>
+          )}
+          <span {...stylex.props(styles.divider)} />
+          <Tooltip label="Minimize (Esc)">
+            <button
+              type="button"
+              aria-label="Minimize"
+              onClick={() => ui.dispatch({ type: "minimize" })}
+              {...stylex.props(styles.iconBtn)}
+            >
+              <MinimizeIcon />
+            </button>
+          </Tooltip>
+          <Tooltip label={fullscreen ? "Exit fullscreen" : "Fullscreen"}>
+            <button
+              type="button"
+              aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
+              onClick={() => ui.dispatch({ type: "toggleFullscreen" })}
+              {...stylex.props(styles.iconBtn)}
+            >
+              {fullscreen ? <CollapseIcon /> : <ExpandIcon />}
+            </button>
+          </Tooltip>
+          <Tooltip label="Close">
+            <button
+              type="button"
+              aria-label="Close"
+              onClick={() => ui.dispatch({ type: "close" })}
+              {...stylex.props(styles.iconBtn)}
+            >
+              <CloseIcon />
+            </button>
+          </Tooltip>
+        </div>
+      </header>
+
+      {ui.panel.view === "history" ? (
+        <ThreadHistory />
+      ) : (
+        <>
+          <div
+            ref={scroller.ref}
+            onScroll={scroller.onScroll}
+            onWheel={scroller.onWheel}
+            onTouchMove={scroller.onTouchMove}
+            {...stylex.props(
+              styles.messages,
+              styles.messagesReserve(contextReserve),
+              fullscreen && styles.messagesFull,
+            )}
+          >
+            {session.loading ? (
+              <p {...stylex.props(styles.muted)}>
+                <Shimmer>Loading chat…</Shimmer>
+              </p>
+            ) : session.messages.length === 0 ? (
+              session.status === "submitted" || session.status === "streaming" ? (
+                <LiveStatus parts={undefined} status={session.status} />
+              ) : (
+                <EmptyState />
+              )
+            ) : (
+              <div {...stylex.props(styles.messageList, fullscreen && styles.messageListFull)}>
+                {session.messages.map((m, i) => (
+                  <ChatMessage
+                    key={m.id}
+                    message={m}
+                    isLast={i === session.messages.length - 1}
+                  />
+                ))}
+                <LiveStatus parts={liveParts} status={session.status} />
+              </div>
+            )}
+            {session.error ? (
+              <div {...stylex.props(styles.error)} role="alert">
+                <span>{session.error.message || "Something went wrong."}</span>
+                <button
+                  type="button"
+                  onClick={() => session.clearError()}
+                  {...stylex.props(styles.textBtn)}
+                >
+                  Dismiss
+                </button>
+              </div>
+            ) : null}
+          </div>
+          <div {...stylex.props(fullscreen && styles.composerFull)}>
+            <Composer autoFocus={visible} />
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+function EmptyState() {
+  const ui = useChatUI();
+  const focus = ui.focus;
+  return (
+    <div {...stylex.props(styles.empty)}>
+      <span {...stylex.props(styles.emptyIcon)}>
+        <SparkIcon size={18} />
+      </span>
+      <p {...stylex.props(styles.emptyTitle)}>
+        {ui.tier === "ask" ? "Ask about your content" : "What should we change?"}
+      </p>
+      <p {...stylex.props(styles.muted)}>
+        {focus
+          ? `I can see ${focus.docRef.type}/${focus.docRef.slug}. Ask me to rewrite, extend, or fix it — or @mention other documents.`
+          : "I know every document on this branch. Open a page to edit it, or @mention documents to bring them into the conversation."}
+      </p>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  panel: {
+    position: "fixed",
+    right: space.lg,
+    // ChatBar height (36px) + gap. StyleX cannot read constants from other modules.
+    bottom: 44,
+    zIndex: z.dropdown,
+    display: "flex",
+    flexDirection: "column",
+    width: "min(440px, calc(100vw - 24px))",
+    height: "min(640px, calc(100vh - 120px))",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: 14,
+    backgroundColor: colors.bgPanel,
+    boxShadow: "0 16px 48px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08)",
+    overflow: "hidden",
+  },
+  panelFull: {
+    left: space.lg,
+    top: space.lg,
+    width: "auto",
+    height: "auto",
+  },
+  panelFill: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: z.dropdown,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    backgroundColor: colors.bgPanel,
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    height: 48,
+    paddingLeft: space.lg,
+    paddingRight: space.md,
+    flexShrink: 0,
+  },
+  title: {
+    margin: 0,
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: type.lg,
+    fontWeight: 500,
+    color: colors.text,
+  },
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+  },
+  divider: {
+    width: 1,
+    height: 16,
+    marginInline: space.xs,
+    backgroundColor: colors.border,
+  },
+  iconBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 26,
+    height: 26,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover, color: colors.text },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  textBtn: {
+    height: 24,
+    paddingInline: space.md,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontWeight: 500,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover, color: colors.text },
+    },
+  },
+  messages: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto",
+    padding: space.lg,
+  },
+  messagesReserve: (px: number) => ({
+    paddingBottom: px,
+  }),
+  messagesFull: {
+    alignItems: "center",
+  },
+  messageList: {
+    display: "flex",
+    flexDirection: "column",
+    flexShrink: 0,
+    width: "100%",
+    gap: space.xl,
+    // Breathing room between the last (possibly streaming) message and the context bar.
+    paddingBottom: space.md,
+  },
+  messageListFull: {
+    width: "min(760px, 100%)",
+  },
+  composerFull: {
+    display: "flex",
+    justifyContent: "center",
+    width: "100%",
+  },
+  muted: {
+    margin: 0,
+    fontSize: type.sm,
+    lineHeight: 1.5,
+    color: colors.textMuted,
+  },
+  error: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+    marginTop: space.lg,
+    padding: space.md,
+    borderRadius: radius.md,
+    backgroundColor: "rgba(220, 38, 38, 0.08)",
+    color: colors.danger,
+    fontSize: type.sm,
+  },
+  empty: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: space.sm,
+    width: "100%",
+    maxWidth: 360,
+    marginInline: "auto",
+    paddingBlock: space.xl,
+    textAlign: "center",
+  },
+  emptyIcon: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 36,
+    height: 36,
+    marginBottom: space.xs,
+    borderRadius: 999,
+    backgroundColor: colors.bgHover,
+    color: colors.textMuted,
+  },
+  emptyTitle: {
+    margin: 0,
+    fontSize: type.lg,
+    fontWeight: 500,
+    color: colors.text,
+  },
+});