@backmatter/studio 0.0.1

package/src/chat/ChatMessage.tsx

@@ -0,0 +1,478 @@
+// packages/studio/src/chat/ChatMessage.tsx
+import { useState, type ComponentPropsWithoutRef } from "react";
+import Markdown from "react-markdown";
+import * as stylex from "@stylexjs/stylex";
+import { getToolName, isToolUIPart, type UIMessage } from "ai";
+import type { ChatChangeSummary } from "../api";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { ChangeCard } from "./ChangeCard";
+import { DocListCard, type DocCardItem } from "./DocListCard";
+import { useChatSession, useChatUI } from "./ChatProvider";
+import {
+  bindDocsPlaceholders,
+  isCommitTool,
+  isWriteTool,
+  replaceEchoedDocList,
+  splitDocsPlaceholders,
+  toolLabel,
+  trimPartialPlaceholder,
+  type WriteToolOutput,
+} from "./chat-helpers";
+import { CheckIcon, EyeIcon, FileIcon, SearchIcon, UndoIcon } from "./icons";
+
+const hover = "@media (hover: hover)";
+
+type ToolPart = Extract<UIMessage["parts"][number], { toolCallId: string }>;
+
+type ListDocsOutput = { docs: DocCardItem[]; total?: number };
+type SearchDocsOutput = {
+  matches: Array<{
+    docRef: { locale: string; type: string; slug: string };
+    source?: string;
+    excerpt?: string;
+    title?: string | null;
+    path?: string | null;
+  }>;
+  total?: number;
+};
+
+function isDocListTool(name: string) {
+  return name === "listDocs" || name === "searchDocs";
+}
+
+/** Normalise listDocs / searchDocs output into card rows; null for other tools. */
+function docListFromTool(
+  name: string,
+  output: unknown,
+): { items: DocCardItem[]; total?: number } | null {
+  if (!output || typeof output !== "object") return null;
+  if (name === "listDocs" && Array.isArray((output as ListDocsOutput).docs)) {
+    const { docs, total } = output as ListDocsOutput;
+    return { items: docs, total };
+  }
+  if (name === "searchDocs" && Array.isArray((output as SearchDocsOutput).matches)) {
+    const { matches } = output as SearchDocsOutput;
+    return {
+      items: matches.map((m) => ({
+        ...m.docRef,
+        title: m.title,
+        path: m.path,
+        source: m.source,
+        excerpt: m.excerpt,
+      })),
+    };
+  }
+  return null;
+}
+
+function ToolIcon({ name }: { name: string }) {
+  if (name === "commit") return <CheckIcon size={12} />;
+  if (name === "searchDocs") return <SearchIcon size={12} />;
+  if (name === "readDoc" || name === "listDocs") return <EyeIcon size={12} />;
+  return <FileIcon size={12} />;
+}
+
+const md = {
+  p: (p: ComponentPropsWithoutRef<"p">) => <p {...p} {...stylex.props(mdStyles.p)} />,
+  ul: (p: ComponentPropsWithoutRef<"ul">) => <ul {...p} {...stylex.props(mdStyles.list)} />,
+  ol: (p: ComponentPropsWithoutRef<"ol">) => <ol {...p} {...stylex.props(mdStyles.list)} />,
+  li: (p: ComponentPropsWithoutRef<"li">) => <li {...p} {...stylex.props(mdStyles.li)} />,
+  h1: (p: ComponentPropsWithoutRef<"h1">) => <h3 {...p} {...stylex.props(mdStyles.h)} />,
+  h2: (p: ComponentPropsWithoutRef<"h2">) => <h3 {...p} {...stylex.props(mdStyles.h)} />,
+  h3: (p: ComponentPropsWithoutRef<"h3">) => <h4 {...p} {...stylex.props(mdStyles.h)} />,
+  a: (p: ComponentPropsWithoutRef<"a">) => (
+    <a {...p} target="_blank" rel="noreferrer" {...stylex.props(mdStyles.a)} />
+  ),
+  code: ({ className, ...p }: ComponentPropsWithoutRef<"code">) => {
+    const block = typeof className === "string" && className.includes("language-");
+    return <code {...p} {...stylex.props(block ? mdStyles.codeBlock : mdStyles.code)} />;
+  },
+  pre: (p: ComponentPropsWithoutRef<"pre">) => <pre {...p} {...stylex.props(mdStyles.pre)} />,
+  blockquote: (p: ComponentPropsWithoutRef<"blockquote">) => (
+    <blockquote {...p} {...stylex.props(mdStyles.quote)} />
+  ),
+  hr: () => <hr {...stylex.props(mdStyles.hr)} />,
+  table: (p: ComponentPropsWithoutRef<"table">) => (
+    <table {...p} {...stylex.props(mdStyles.table)} />
+  ),
+};
+
+export function ChatMessage({
+  message,
+  isLast,
+}: {
+  message: UIMessage;
+  isLast: boolean;
+}) {
+  const { workspaceId, tier } = useChatUI();
+  const session = useChatSession();
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const canAct = tier !== "ask";
+  const live = session.status === "streaming" || session.status === "submitted";
+  // Only the message being added animates in; history loads render in place.
+  const entering = isLast && live;
+
+  if (message.role === "user") {
+    const text = message.parts
+      .filter((p): p is { type: "text"; text: string } => p.type === "text")
+      .map((p) => p.text)
+      .join("\n");
+    return (
+      <div {...stylex.props(styles.userRow, entering && styles.enter)}>
+        <div {...stylex.props(styles.userBubble)}>{text}</div>
+      </div>
+    );
+  }
+
+  const changeIds = session.changeIdsForMessage(message);
+  const applied = changeIds
+    .map((id) => session.changes[id])
+    .filter((c): c is ChatChangeSummary => Boolean(c) && c!.status === "applied");
+  const streaming = isLast && live;
+
+  async function act(id: string, fn: () => Promise<void>) {
+    setBusyId(id);
+    try {
+      await fn();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  // Names of every listed document in this message, used to catch models that
+  // echo the card as a text list anyway.
+  const docNames: string[] = [];
+  for (const p of message.parts) {
+    if (!isToolUIPart(p) || p.state !== "output-available") continue;
+    const list = docListFromTool(getToolName(p), p.output);
+    for (const it of list?.items ?? []) {
+      docNames.push(it.slug);
+      if (it.title) docNames.push(it.title);
+      if (it.path) docNames.push(it.path);
+    }
+  }
+  const parts = message.parts.map((p) =>
+    p.type === "text" && docNames.length > 0
+      ? { ...p, text: replaceEchoedDocList(p.text, docNames, streaming) }
+      : p,
+  );
+  const { placeholderTarget, inlined } = bindDocsPlaceholders(parts, isDocListTool);
+
+  function renderDocCard(partIndex: number, key: string) {
+    const tp = parts[partIndex] as ToolPart | undefined;
+    if (!tp) return null;
+    const name = getToolName(tp);
+    if (tp.state !== "output-available") return null;
+    const list = docListFromTool(name, tp.output);
+    if (!list) return null;
+    return (
+      <DocListCard
+        key={key}
+        items={list.items}
+        total={list.total}
+        workspaceId={workspaceId}
+        emptyLabel={name === "searchDocs" ? "No matches" : "No documents"}
+      />
+    );
+  }
+
+  return (
+    <div {...stylex.props(styles.assistant, entering && styles.enter)}>
+      {parts.map((part, i) => {
+        if (part.type === "text") {
+          const text = streaming ? trimPartialPlaceholder(part.text) : part.text;
+          if (!text.trim()) return null;
+          const segments = splitDocsPlaceholders(text);
+          let n = 0;
+          return segments.map((seg, j) => {
+            if (seg.kind === "docs") {
+              const target = placeholderTarget.get(`${i}:${n++}`);
+              return target === undefined ? null : renderDocCard(target, `${i}-docs-${j}`);
+            }
+            return (
+              <div key={`${i}-${j}`} {...stylex.props(styles.markdown)}>
+                <Markdown components={md}>{seg.text}</Markdown>
+              </div>
+            );
+          });
+        }
+        if (part.type === "reasoning") return null;
+        if (isToolUIPart(part)) {
+          const tp = part as ToolPart;
+          if (tp.state !== "output-available" && tp.state !== "output-error") return null;
+          const name = getToolName(tp);
+          const label = toolLabel(
+            name,
+            tp.input,
+            tp.state === "output-available" ? tp.output : undefined,
+            tp.state,
+          );
+          const write = isWriteTool(name);
+          const commit = isCommitTool(name);
+          const out = tp.state === "output-available" ? (tp.output as WriteToolOutput) : null;
+          const failed =
+            tp.state === "output-error" ||
+            (out !== null && (write || commit) && !out.ok);
+          const outChange = write && out && out.ok ? out.change : null;
+          const change = outChange
+            ? {
+                ...(session.changes[outChange.id] ?? outChange),
+                summary: session.changes[outChange.id]?.summary ?? outChange.summary,
+              }
+            : null;
+          // Doc lists placed inline via [[docs]] are not repeated here. While
+          // streaming, the placeholder usually arrives a moment after the tool
+          // result, so hold the fallback back until the stream has ended;
+          // otherwise the card would jump from here to its inline position.
+          const docList =
+            tp.state === "output-available" && !inlined.has(i) && !streaming
+              ? docListFromTool(name, tp.output)
+              : null;
+          return (
+            <div key={tp.toolCallId} {...stylex.props(styles.toolBlock)}>
+              <div {...stylex.props(styles.toolRow, failed && styles.toolFailed)}>
+                <ToolIcon name={name} />
+                <span>{label}</span>
+                {failed ? (
+                  <span {...stylex.props(styles.toolError)}>
+                    {tp.state === "output-error"
+                      ? tp.errorText
+                      : (out as { message?: string } | null)?.message}
+                  </span>
+                ) : null}
+              </div>
+              {docList ? (
+                <DocListCard
+                  items={docList.items}
+                  total={docList.total}
+                  workspaceId={workspaceId}
+                  emptyLabel={name === "searchDocs" ? "No matches" : "No documents"}
+                />
+              ) : null}
+              {change ? (
+                <ChangeCard
+                  change={change}
+                  workspaceId={workspaceId}
+                  busy={busyId === change.id}
+                  canAct={canAct && !streaming}
+                  onKeep={() => void act(change.id, () => session.keep(change.id))}
+                  onUndo={() => void act(change.id, () => session.undo(change.id))}
+                />
+              ) : null}
+            </div>
+          );
+        }
+        return null;
+      })}
+      {applied.length > 1 && canAct && !streaming ? (
+        <div {...stylex.props(styles.bulk)}>
+          <span {...stylex.props(styles.bulkLabel)}>
+            {applied.length} files changed
+          </span>
+          <button
+            type="button"
+            disabled={busyId !== null}
+            onClick={() => void act("all", () => session.undoAll(message.id))}
+            {...stylex.props(styles.bulkBtn)}
+          >
+            <UndoIcon size={12} /> Undo all
+          </button>
+          <button
+            type="button"
+            disabled={busyId !== null}
+            onClick={() => void act("all", () => session.keepAll(message.id))}
+            {...stylex.props(styles.bulkBtn, styles.bulkKeep)}
+          >
+            <CheckIcon size={12} /> Keep all
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+const enter = stylex.keyframes({
+  from: { opacity: 0, transform: "translateY(10px)" },
+  to: { opacity: 1, transform: "translateY(0)" },
+});
+
+const styles = stylex.create({
+  enter: {
+    animationName: {
+      default: enter,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationDuration: "220ms",
+    animationTimingFunction: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    animationFillMode: "backwards",
+  },
+  userRow: {
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  userBubble: {
+    maxWidth: "85%",
+    paddingInline: space.lg,
+    paddingBlock: space.md,
+    borderRadius: 10,
+    backgroundColor: colors.bgActive,
+    color: colors.text,
+    fontSize: type.md,
+    lineHeight: 1.5,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+  },
+  assistant: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+    fontSize: type.md,
+    lineHeight: 1.55,
+    color: colors.text,
+  },
+  markdown: {
+    minWidth: 0,
+    wordBreak: "break-word",
+  },
+  toolBlock: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  toolRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  toolFailed: {
+    color: colors.danger,
+  },
+  toolError: {
+    fontSize: type.xs,
+    opacity: 0.85,
+  },
+  bulk: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    paddingTop: space.xs,
+  },
+  bulkLabel: {
+    marginRight: "auto",
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  bulkBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    height: 24,
+    paddingInline: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    fontSize: type.xs,
+    fontWeight: 500,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+    ":disabled": {
+      opacity: 0.5,
+      cursor: "default",
+    },
+  },
+  bulkKeep: {
+    borderColor: colors.text,
+    backgroundColor: colors.text,
+    color: colors.textInverse,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.text,
+        opacity: 0.9,
+      },
+    },
+  },
+});
+
+const mdStyles = stylex.create({
+  p: {
+    marginTop: 0,
+    marginBottom: space.md,
+    ":last-child": { marginBottom: 0 },
+  },
+  list: {
+    marginTop: 0,
+    marginBottom: space.md,
+    paddingLeft: 20,
+    ":last-child": { marginBottom: 0 },
+  },
+  li: {
+    marginBottom: 2,
+  },
+  h: {
+    marginTop: space.md,
+    marginBottom: space.sm,
+    fontSize: type.md,
+    fontWeight: 600,
+  },
+  a: {
+    color: colors.text,
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+  },
+  code: {
+    fontFamily: type.mono,
+    fontSize: "0.92em",
+    paddingInline: 4,
+    paddingBlock: 1,
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgActive,
+  },
+  codeBlock: {
+    fontFamily: type.mono,
+    fontSize: type.sm,
+  },
+  pre: {
+    marginTop: 0,
+    marginBottom: space.md,
+    padding: space.md,
+    overflowX: "auto",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgApp,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+  },
+  quote: {
+    marginInline: 0,
+    marginBlock: space.md,
+    paddingLeft: space.lg,
+    borderLeftWidth: 2,
+    borderLeftStyle: "solid",
+    borderLeftColor: colors.border,
+    color: colors.textMuted,
+  },
+  hr: {
+    borderWidth: 0,
+    borderTopWidth: 1,
+    borderTopStyle: "solid",
+    borderTopColor: colors.border,
+    marginBlock: space.lg,
+  },
+  table: {
+    borderCollapse: "collapse",
+    fontSize: type.sm,
+    marginBottom: space.md,
+  },
+});