@meshagent/meshagent-tailwind 0.38.1 → 0.38.3

package/dist/esm/ChatThread.js

@@ -1,11 +1,38 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useEffect } from "react";
-import { Download } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useRef, useCallback } from "react";
+import { Download, FileText } from "lucide-react";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeSanitize from "rehype-sanitize";
 import rehypeHighlight from "rehype-highlight";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import { Button } from "./components/ui/button";
+import { Spinner } from "./components/ui/spinner";
+import { ChatTypingIndicator } from "./ChatTypingIndicator";
 import { cn } from "./lib/utils";
+const supportedEventKinds = /* @__PURE__ */ new Set([
+  "exec",
+  "tool",
+  "web",
+  "search",
+  "diff",
+  "image",
+  "approval",
+  "collab",
+  "plan",
+  "thread",
+  "file"
+]);
+const stickyBottomThresholdPx = 24;
+function getStringAttribute(element, name) {
+  const value = element.getAttribute(name);
+  return typeof value === "string" ? value : null;
+}
+function getTrimmedStringAttribute(element, name) {
+  return getStringAttribute(element, name)?.trim() ?? "";
+}
+function getElementChildren(element) {
+  return element.getChildren() ?? [];
+}
 function formatDateTime(iso) {
   const date = new Date(iso);
   return new Intl.DateTimeFormat(void 0, {
@@ -18,118 +45,647 @@ function formatDateTime(iso) {
     timeZoneName: "short"
   }).format(date);
 }
-function isImageFilename(filename) {
-  return /\.(jpe?g|png|gif|bmp|webp|avif|svg)$/i.test(filename);
-}
 function timeAgo(iso) {
-  const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
   const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  const relativeTime = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
   const now = /* @__PURE__ */ new Date();
-  if (isNaN(date.getTime())) return "";
   const seconds = Math.round((date.getTime() - now.getTime()) / 1e3);
   const minutes = Math.round(seconds / 60);
   const hours = Math.round(minutes / 60);
   const days = Math.round(hours / 24);
   const months = Math.round(days / 30);
-  if (Math.abs(months) >= 1) return formatDateTime(iso);
-  if (Math.abs(days) >= 1) return rtf.format(days, "day");
-  if (Math.abs(hours) >= 1) return rtf.format(hours, "hour");
-  if (Math.abs(minutes) >= 1) return rtf.format(minutes, "minute");
-  return rtf.format(seconds, "second");
-}
-function ChatThread({ room, messages, localParticipantName }) {
-  const bottomRef = React.useRef(null);
+  if (Math.abs(months) >= 1) {
+    return formatDateTime(iso);
+  }
+  if (Math.abs(days) >= 1) {
+    return relativeTime.format(days, "day");
+  }
+  if (Math.abs(hours) >= 1) {
+    return relativeTime.format(hours, "hour");
+  }
+  if (Math.abs(minutes) >= 1) {
+    return relativeTime.format(minutes, "minute");
+  }
+  return relativeTime.format(seconds, "second");
+}
+function displayParticipantName(name) {
+  return name.split("@")[0]?.trim() ?? name.trim();
+}
+function isImagePath(path) {
+  return /\.(avif|bmp|gif|jpe?g|png|svg|webp)$/i.test(path);
+}
+function isThreadAttachmentElement(element) {
+  return element.tagName === "file" || element.tagName === "image";
+}
+function isImageAttachmentElement(element) {
+  if (!isThreadAttachmentElement(element)) {
+    return false;
+  }
+  const path = getTrimmedStringAttribute(element, "path");
+  return element.tagName === "image" || path !== "" && isImagePath(path);
+}
+function getAttachmentTrackingId(attachment) {
+  const path = getTrimmedStringAttribute(attachment, "path");
+  return attachment.id || `${attachment.tagName}:${path}`;
+}
+function collectImageAttachmentIds(messages) {
+  const ids = [];
+  for (const message of messages) {
+    if (message.tagName !== "message") {
+      continue;
+    }
+    for (const attachment of getElementChildren(message)) {
+      if (!isImageAttachmentElement(attachment)) {
+        continue;
+      }
+      ids.push(getAttachmentTrackingId(attachment));
+    }
+  }
+  return ids;
+}
+function parseEventDetailLines(raw) {
+  const value = raw.trim();
+  if (value === "") {
+    return [];
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    try {
+      const decoded = JSON.parse(value);
+      if (Array.isArray(decoded)) {
+        return decoded.filter((item) => typeof item === "string").map((line) => line.trim()).filter((line) => line !== "");
+      }
+    } catch {
+    }
+  }
+  return value.split(/\r?\n/u).map((line) => line.trim()).filter((line) => line !== "");
+}
+function isCompletedToolCallEvent(message) {
+  if (message.tagName !== "event") {
+    return false;
+  }
+  const kind = getTrimmedStringAttribute(message, "kind").toLowerCase();
+  if (kind !== "tool") {
+    return false;
+  }
+  const state = (getTrimmedStringAttribute(message, "state") || "info").toLowerCase();
+  if (state !== "completed") {
+    return false;
+  }
+  const itemType = getTrimmedStringAttribute(message, "item_type").toLowerCase();
+  if (itemType === "tool_call") {
+    return true;
+  }
+  const method = getTrimmedStringAttribute(message, "method") || "agent/event";
+  const summary = getTrimmedStringAttribute(message, "summary") || method;
+  const headline = getTrimmedStringAttribute(message, "headline");
+  const detailLines = parseEventDetailLines(getTrimmedStringAttribute(message, "details"));
+  const filterHeadline = (headline !== "" ? headline : summary).trim().toLowerCase();
+  return filterHeadline === "called tool" && detailLines.length > 0 && detailLines.every((line) => line.trimStart().toLowerCase().startsWith("tool:"));
+}
+function shouldHideCompletedToolCallEvent(message, showCompletedToolCalls) {
+  return !showCompletedToolCalls && isCompletedToolCallEvent(message);
+}
+function hasRenderableStandardThreadMessageContent(message) {
+  if (message.tagName !== "message") {
+    return true;
+  }
+  const text = getTrimmedStringAttribute(message, "text");
+  if (text !== "") {
+    return true;
+  }
+  return getElementChildren(message).some(isThreadAttachmentElement);
+}
+function shouldRenderThreadElement(message, showCompletedToolCalls) {
+  if (message.tagName === "reasoning") {
+    return getTrimmedStringAttribute(message, "summary") !== "";
+  }
+  if (message.tagName === "message") {
+    return hasRenderableStandardThreadMessageContent(message);
+  }
+  if (message.tagName === "exec") {
+    return true;
+  }
+  if (message.tagName !== "event") {
+    return false;
+  }
+  const kind = getTrimmedStringAttribute(message, "kind").toLowerCase();
+  if (!supportedEventKinds.has(kind)) {
+    return false;
+  }
+  return !shouldHideCompletedToolCallEvent(message, showCompletedToolCalls);
+}
+function isCancellingThreadStatusText(statusText) {
+  const normalized = statusText?.trim().toLowerCase();
+  return normalized === "cancelling" || normalized === "canceling";
+}
+function distanceFromBottom(element) {
+  return Math.max(element.scrollHeight - element.clientHeight - element.scrollTop, 0);
+}
+function isNearBottom(element) {
+  return distanceFromBottom(element) <= stickyBottomThresholdPx;
+}
+function useDownloadUrl(room, path) {
+  const [url, setUrl] = useState(null);
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 flex-shrink-1 basis-0 overflow-y-auto overflow-x-hidden p-4 space-y-4", children: [
-    messages.map((message) => /* @__PURE__ */ jsx(
-      ChatMessage,
-      {
-        room,
-        message,
-        localParticipantName
+    let cancelled = false;
+    if (path.trim() === "") {
+      setUrl(null);
+      return;
+    }
+    void room.storage.downloadUrl(path).then((nextUrl) => {
+      if (!cancelled) {
+        setUrl(nextUrl);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setUrl(null);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [path, room]);
+  return url;
+}
+function MarkdownBlock({ text }) {
+  return /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeSanitize, rehypeHighlight],
+      components: {
+        pre: ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+          "pre",
+          {
+            ...props,
+            className: cn("overflow-x-auto rounded-md border bg-background/80 p-3", className),
+            children
+          }
+        ),
+        p: ({ children, ...props }) => /* @__PURE__ */ jsx("p", { ...props, className: "mb-2 last:mb-0", children })
       },
-      message.id
-    )),
-    /* @__PURE__ */ jsx("div", { ref: bottomRef })
-  ] });
+      children: text
+    }
+  );
 }
-function ChatImage({ room, path, alt }) {
-  const [url, setUrl] = React.useState("");
+function ChatImage({
+  room,
+  path,
+  alt,
+  onSettled
+}) {
+  const url = useDownloadUrl(room, path);
+  const imageRef = useRef(null);
+  const settledRef = useRef(false);
+  const markSettled = useCallback(() => {
+    if (settledRef.current) {
+      return;
+    }
+    settledRef.current = true;
+    onSettled?.();
+  }, [onSettled]);
   useEffect(() => {
-    room.storage.downloadUrl(path).then(setUrl);
-  }, [path]);
-  return url === "" ? null : /* @__PURE__ */ jsx("img", { src: url, alt, className: "max-h-48 max-w-full rounded-lg" });
-}
-function ChatMessage({ room, message, localParticipantName }) {
-  const mine = localParticipantName == message.getAttribute("author_name");
-  const attachments = (message.children ?? []).filter((child) => child.tagName === "file");
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col max-w-prose gap-1", { "items-end self-end": mine, "items-start self-start": !mine }), children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-0.5 text-xs text-muted-foreground", children: [
-      "By ",
-      message.getAttribute("author_name"),
-      " at ",
-      timeAgo(message.getAttribute("created_at"))
-    ] }),
-    /* @__PURE__ */ jsx(ChatBubble, { text: message.getAttribute("text"), mine }, message.id),
-    attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2 mt-2", { "text-right": mine }), children: attachments.map((attachment) => {
-      const path = attachment.getAttribute("path") || "";
-      const isImage = isImageFilename(path);
-      const filename = path.split("/").pop();
-      if (isImage) {
-        return /* @__PURE__ */ jsx(
-          ChatImage,
-          {
-            room,
-            path,
-            alt: filename || "Image Attachment"
+    settledRef.current = false;
+  }, [path, url]);
+  useEffect(() => {
+    if (!url) {
+      return;
+    }
+    if (imageRef.current?.complete) {
+      markSettled();
+    }
+  }, [markSettled, url]);
+  if (!url) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "block overflow-hidden rounded-md bg-muted/20 shadow-xs transition-opacity hover:opacity-95",
+      onClick: () => {
+        window.open(url, "_blank", "noopener,noreferrer");
+      },
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: imageRef,
+          src: url,
+          alt,
+          className: "max-h-[312px] w-auto max-w-full object-cover",
+          onLoad: () => {
+            markSettled();
           },
-          attachment.id
-        );
+          onError: () => {
+            markSettled();
+          }
+        }
+      )
+    }
+  );
+}
+function FileAttachment({ room, path }) {
+  const url = useDownloadUrl(room, path);
+  const filename = path.split("/").pop() ?? path;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "inline-flex max-w-full items-center gap-2 rounded-md bg-muted/60 px-3 py-2 text-left shadow-xs transition-colors hover:bg-muted/80",
+      onClick: () => {
+        if (url) {
+          window.open(url, "_blank", "noopener,noreferrer");
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: filename }),
+        /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 shrink-0 text-muted-foreground" })
+      ]
+    }
+  );
+}
+function ThreadAttachment({ room, attachment, onImageSettled }) {
+  const path = getTrimmedStringAttribute(attachment, "path");
+  if (path === "") {
+    return null;
+  }
+  const filename = path.split("/").pop() ?? "Attachment";
+  if (attachment.tagName === "image" || isImagePath(path)) {
+    const attachmentId = getAttachmentTrackingId(attachment);
+    return /* @__PURE__ */ jsx(
+      ChatImage,
+      {
+        room,
+        path,
+        alt: filename,
+        onSettled: () => {
+          onImageSettled?.(attachmentId);
+        }
       }
-      return /* @__PURE__ */ jsxs(
+    );
+  }
+  return /* @__PURE__ */ jsx(FileAttachment, { room, path });
+}
+function ChatBubble({
+  text,
+  mine
+}) {
+  if (text.trim() === "") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "w-fit max-w-[85%] rounded-md px-4 py-3 text-sm leading-6 shadow-xs sm:max-w-2xl",
+        mine ? "bg-secondary/85 text-foreground" : "bg-muted/70 text-foreground"
+      ),
+      children: /* @__PURE__ */ jsx(MarkdownBlock, { text })
+    }
+  );
+}
+function ThreadReasoning({ message }) {
+  const summary = getTrimmedStringAttribute(message, "summary");
+  if (summary === "") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "max-w-2xl border-l-2 border-primary/30 pl-4 text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(MarkdownBlock, { text: summary }) });
+}
+function ThreadExec({ message }) {
+  const command = getTrimmedStringAttribute(message, "command");
+  const result = getTrimmedStringAttribute(message, "result");
+  const stdout = getTrimmedStringAttribute(message, "stdout");
+  const stderr = getTrimmedStringAttribute(message, "stderr");
+  const sections = [
+    command !== "" ? { label: "Command", value: command } : null,
+    result !== "" ? { label: "Result", value: result } : null,
+    stdout !== "" ? { label: "Stdout", value: stdout } : null,
+    stderr !== "" ? { label: "Stderr", value: stderr } : null
+  ].filter((section) => section !== null);
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-3xl rounded-2xl border bg-background/70 p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: "Terminal" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3 font-mono text-xs leading-6 text-foreground", children: sections.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "No command output." }) : sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.16em] text-muted-foreground", children: section.label }),
+      /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded-xl border bg-muted/30 p-3", children: section.value })
+    ] }, section.label)) })
+  ] });
+}
+function defaultEventHeadline(kind, state, eventName) {
+  if (kind === "approval") {
+    return state === "completed" ? "Approval resolved" : "Approval required";
+  }
+  if (kind === "tool") {
+    if (state === "failed") {
+      return "Tool failed";
+    }
+    if (state === "completed") {
+      return "Tool completed";
+    }
+    return "Calling tool";
+  }
+  if (kind === "web") {
+    return "Opened webpage";
+  }
+  if (kind === "search") {
+    return "Ran search";
+  }
+  if (kind === "diff") {
+    return "Updated diff";
+  }
+  if (kind === "file") {
+    return "File event";
+  }
+  if (kind === "thread") {
+    return "Thread event";
+  }
+  if (kind === "plan") {
+    return "Updated plan";
+  }
+  if (kind === "exec") {
+    return "Ran command";
+  }
+  return eventName.replace(/[._]/gu, " ");
+}
+function EventRow({
+  room,
+  message
+}) {
+  const method = getTrimmedStringAttribute(message, "method") || "agent/event";
+  const eventName = getTrimmedStringAttribute(message, "name") || getTrimmedStringAttribute(message, "event_type") || method.replace(/\//gu, ".");
+  const kind = getTrimmedStringAttribute(message, "kind").toLowerCase();
+  const state = (getTrimmedStringAttribute(message, "state") || "info").toLowerCase();
+  const summary = getTrimmedStringAttribute(message, "summary");
+  const headline = getTrimmedStringAttribute(message, "headline") || (summary !== "" ? summary : defaultEventHeadline(kind, state, eventName));
+  const detailLines = parseEventDetailLines(getTrimmedStringAttribute(message, "details"));
+  const eventPath = getTrimmedStringAttribute(message, "path");
+  const inProgress = state === "in_progress" || state === "running" || state === "queued";
+  const textColorClass = state === "failed" ? "text-destructive" : state === "cancelled" ? "text-muted-foreground" : inProgress ? "text-primary" : "text-foreground";
+  if (headline === "") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "max-w-3xl rounded-2xl border bg-background/70 px-4 py-3 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-[0.16em] text-muted-foreground", children: kind }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("text-sm font-semibold leading-5", textColorClass), children: headline }),
+      summary !== "" && summary !== headline ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: summary }) : null,
+      detailLines.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1 text-muted-foreground", children: detailLines.map((line, index) => /* @__PURE__ */ jsx("div", { className: "leading-5", children: line }, `${line}-${index}`)) }) : null,
+      eventPath !== "" ? /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
+          className: "inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-left text-[11px] font-medium text-foreground transition-colors hover:bg-muted",
           onClick: () => {
-            room.storage.downloadUrl(path).then((url) => window.open(url, "_blank"));
+            void room.storage.downloadUrl(eventPath).then((url) => {
+              window.open(url, "_blank", "noopener,noreferrer");
+            });
           },
-          className: "relative inline-flex max-w-full items-center border bg-muted pl-3 pr-1 py-1 gap-2 cursor-pointer hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          rel: "noopener noreferrer",
           children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium leading-none", children: filename }),
-            /* @__PURE__ */ jsx(Download, { className: "inline-block mr-1" })
+            /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: eventPath })
           ]
-        },
-        attachment.id
-      );
-    }) })
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+function ThreadMessage({
+  room,
+  message,
+  previous,
+  localParticipantName,
+  onImageSettled
+}) {
+  const authorName = getTrimmedStringAttribute(message, "author_name");
+  const mine = authorName !== "" && authorName === localParticipantName.trim();
+  const createdAt = getTrimmedStringAttribute(message, "created_at");
+  const text = getStringAttribute(message, "text") ?? "";
+  const attachments = getElementChildren(message).filter(isThreadAttachmentElement);
+  const previousAuthor = previous ? getTrimmedStringAttribute(previous, "author_name") : "";
+  const shouldShowHeader = previousAuthor !== authorName;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    shouldShowHeader && (authorName !== "" || createdAt !== "") ? /* @__PURE__ */ jsx("div", { className: cn("flex w-full", mine ? "justify-end" : "justify-start"), children: /* @__PURE__ */ jsx("div", { className: cn("max-w-[85%] px-1 sm:max-w-2xl", mine ? "text-right" : "text-left"), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground",
+          mine ? "justify-end" : "justify-start"
+        ),
+        children: [
+          authorName !== "" ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: displayParticipantName(authorName) }) : null,
+          createdAt !== "" ? /* @__PURE__ */ jsx("span", { children: timeAgo(createdAt) }) : null
+        ]
+      }
+    ) }) }) : null,
+    text.trim() !== "" ? /* @__PURE__ */ jsx("div", { className: cn("flex w-full", mine ? "justify-end" : "justify-start"), children: /* @__PURE__ */ jsx(ChatBubble, { text, mine }) }) : null,
+    attachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn("flex w-full", mine ? "justify-end" : "justify-start"), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex max-w-[85%] flex-wrap gap-3 px-1 sm:max-w-2xl",
+          mine ? "justify-end" : "justify-start"
+        ),
+        children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+          ThreadAttachment,
+          {
+            room,
+            attachment,
+            onImageSettled
+          },
+          attachment.id
+        ))
+      }
+    ) }) : null
   ] });
 }
-function ChatBubble({ text, mine }) {
-  if (!text || text.trim() === "") {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn(
-    "rounded-lg px-4 py-2 text-sm max-w-prose whitespace-pre-wrap",
-    {
-      "bg-primary text-primary-foreground": mine,
-      "bg-muted": !mine
+function EmptyState({
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-2xl flex-col items-center justify-center px-6 py-20 text-center", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-4xl font-semibold tracking-tight text-foreground sm:text-5xl", children: title }),
+    description?.trim() ? /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-xl text-sm leading-6 text-muted-foreground sm:text-base", children: description }) : null
+  ] });
+}
+function ChatThread({
+  room,
+  messages,
+  isLoading = false,
+  localParticipantName,
+  path,
+  showCompletedToolCalls = false,
+  onShowCompletedToolCallsChanged,
+  typing = false,
+  thinking = false,
+  threadStatusText,
+  threadStatusStartedAt,
+  threadStatusMode,
+  onCancelRequest,
+  emptyStateTitle,
+  emptyStateDescription
+}) {
+  const visibleMessages = useMemo(
+    () => messages.filter((message) => shouldRenderThreadElement(message, showCompletedToolCalls)),
+    [messages, showCompletedToolCalls]
+  );
+  const hiddenCompletedToolCallCount = useMemo(
+    () => messages.filter(isCompletedToolCallEvent).length,
+    [messages]
+  );
+  const [trackedInitialImageThreadKey, setTrackedInitialImageThreadKey] = useState(null);
+  const [pendingInitialImageIds, setPendingInitialImageIds] = useState([]);
+  const scrollContainerRef = useRef(null);
+  const contentRef = useRef(null);
+  const stickToBottomRef = useRef(true);
+  const forceBottomRef = useRef(false);
+  const lastVisibleMessageId = visibleMessages.length > 0 ? visibleMessages[visibleMessages.length - 1]?.id : null;
+  const threadKey = path?.trim() || "__default__";
+  const hasOverlay = threadStatusText?.trim() || thinking || typing;
+  const waitingForInitialImages = trackedInitialImageThreadKey === threadKey && pendingInitialImageIds.length > 0;
+  useEffect(() => {
+    forceBottomRef.current = waitingForInitialImages;
+  }, [waitingForInitialImages]);
+  useEffect(() => {
+    setTrackedInitialImageThreadKey(null);
+    setPendingInitialImageIds([]);
+  }, [threadKey]);
+  useEffect(() => {
+    if (trackedInitialImageThreadKey === threadKey || visibleMessages.length === 0) {
+      return;
     }
-  ), children: /* @__PURE__ */ jsx(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [rehypeSanitize, rehypeHighlight],
-      components: {
-        pre: ({ node, className, children, ...props }) => /* @__PURE__ */ jsx("pre", { ...props, className: cn("overflow-x-auto rounded-lg", className), children }),
-        p: ({ node, children, ...props }) => /* @__PURE__ */ jsx("p", { ...props, className: "mb-2 last:mb-0", children }),
-        code: ({ className, children, ...props }) => /* @__PURE__ */ jsx("code", { ...props, className, children })
-      },
-      children: text
+    setTrackedInitialImageThreadKey(threadKey);
+    setPendingInitialImageIds(collectImageAttachmentIds(visibleMessages));
+  }, [threadKey, trackedInitialImageThreadKey, visibleMessages]);
+  const handleImageSettled = useCallback((attachmentId) => {
+    setPendingInitialImageIds((currentIds) => {
+      if (!currentIds.includes(attachmentId)) {
+        return currentIds;
+      }
+      return currentIds.filter((currentId) => currentId !== attachmentId);
+    });
+  }, []);
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
     }
-  ) });
+    stickToBottomRef.current = true;
+    container.scrollTop = container.scrollHeight;
+  }, [path]);
+  useEffect(() => {
+    if (!waitingForInitialImages) {
+      return;
+    }
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+    container.scrollTop = container.scrollHeight;
+  }, [pendingInitialImageIds, waitingForInitialImages]);
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container || !stickToBottomRef.current) {
+      return;
+    }
+    container.scrollTop = container.scrollHeight;
+  }, [hasOverlay, lastVisibleMessageId, threadStatusText, thinking, typing]);
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    const content = contentRef.current;
+    if (!container || !content || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      if (!stickToBottomRef.current && !forceBottomRef.current) {
+        return;
+      }
+      container.scrollTop = container.scrollHeight;
+    });
+    observer.observe(content);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    onShowCompletedToolCallsChanged && hiddenCompletedToolCallCount > 0 ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-10 flex justify-center px-4 pt-3", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto flex w-full max-w-[912px] justify-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "rounded-full border bg-background/90 backdrop-blur",
+        onClick: () => {
+          onShowCompletedToolCallsChanged(!showCompletedToolCalls);
+        },
+        children: showCompletedToolCalls ? "Hide tool calls" : "Show tool calls"
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollContainerRef,
+        className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden [overflow-anchor:none]",
+        onScroll: (event) => {
+          stickToBottomRef.current = isNearBottom(event.currentTarget);
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: contentRef,
+            className: cn(
+              "mx-auto flex min-h-full w-full max-w-[912px] flex-col gap-8 px-4 pt-6",
+              visibleMessages.length > 0 ? "justify-end" : null,
+              hasOverlay ? "pb-24" : "pb-6"
+            ),
+            children: [
+              isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center py-20", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "text-muted-foreground" }) }) : visibleMessages.length === 0 && emptyStateTitle ? /* @__PURE__ */ jsx(EmptyState, { title: emptyStateTitle, description: emptyStateDescription }) : null,
+              visibleMessages.map((message, index) => {
+                const previous = index > 0 ? visibleMessages[index - 1] : null;
+                if (message.tagName === "message") {
+                  return /* @__PURE__ */ jsx(
+                    ThreadMessage,
+                    {
+                      room,
+                      message,
+                      previous,
+                      localParticipantName,
+                      onImageSettled: handleImageSettled
+                    },
+                    message.id
+                  );
+                }
+                if (message.tagName === "reasoning") {
+                  return /* @__PURE__ */ jsx(ThreadReasoning, { message }, message.id);
+                }
+                if (message.tagName === "exec") {
+                  return /* @__PURE__ */ jsx(ThreadExec, { message }, message.id);
+                }
+                if (message.tagName === "event") {
+                  return /* @__PURE__ */ jsx(EventRow, { room, message }, message.id);
+                }
+                return null;
+              })
+            ]
+          }
+        )
+      }
+    ),
+    hasOverlay ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center px-4 pb-4", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto w-full max-w-[912px]", children: /* @__PURE__ */ jsx(
+      ChatTypingIndicator,
+      {
+        typing,
+        thinking,
+        statusText: threadStatusText,
+        startedAt: threadStatusStartedAt,
+        onCancel: onCancelRequest,
+        showCancelButton: threadStatusMode != null,
+        cancelEnabled: !isCancellingThreadStatusText(threadStatusText)
+      }
+    ) }) }) : null
+  ] });
 }
 export {
   ChatThread,