@meshagent/meshagent-tailwind 0.38.4 → 0.39.1

package/dist/cjs/chat-hooks.js

@@ -18,6 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var chat_hooks_exports = {};
 __export(chat_hooks_exports, {
+  ChatThreadStatusState: () => ChatThreadStatusState,
+  PendingAgentMessage: () => PendingAgentMessage,
   formatThreadStatusText: () => formatThreadStatusText,
   useChatThread: () => useChatThread,
   useThreadStatus: () => useThreadStatus
@@ -27,6 +29,103 @@ var import_react = require("react");
 var import_meshagent = require("@meshagent/meshagent");
 var import_meshagent_react = require("@meshagent/meshagent-react");
 var import_file_attachment = require("./file-attachment");
+const agentTurnSteerType = "meshagent.agent.turn.steer";
+class PendingAgentMessage {
+  messageId;
+  messageType;
+  threadPath;
+  text;
+  attachments;
+  senderName;
+  awaitingAcceptance;
+  awaitingOnline;
+  constructor({
+    messageId,
+    messageType,
+    threadPath,
+    text,
+    attachments,
+    senderName,
+    awaitingAcceptance = false,
+    awaitingOnline = false
+  }) {
+    this.messageId = messageId;
+    this.messageType = messageType;
+    this.threadPath = threadPath;
+    this.text = text;
+    this.attachments = attachments;
+    this.senderName = senderName;
+    this.awaitingAcceptance = awaitingAcceptance;
+    this.awaitingOnline = awaitingOnline;
+  }
+  static fromQueueJson(json) {
+    const content = json["content"];
+    const textParts = [];
+    const attachments = [];
+    if (Array.isArray(content)) {
+      for (const item of content) {
+        if (item == null || typeof item !== "object") {
+          continue;
+        }
+        const obj = item;
+        const type = obj["type"];
+        if (type === "text") {
+          const text = obj["text"];
+          if (typeof text === "string" && text.trim().length > 0) {
+            textParts.push(text);
+          }
+        } else if (type === "file") {
+          const url = obj["url"];
+          if (typeof url === "string" && url.trim().length > 0) {
+            attachments.push(url);
+          }
+        }
+      }
+    }
+    const senderName = json["sender_name"];
+    const messageType = json["message_type"];
+    const messageId = json["message_id"];
+    const threadPath = json["thread_id"];
+    return new PendingAgentMessage({
+      messageId: typeof messageId === "string" ? messageId : crypto.randomUUID(),
+      messageType: typeof messageType === "string" ? messageType : agentTurnSteerType,
+      threadPath: typeof threadPath === "string" ? threadPath : "",
+      text: textParts.join("\n\n"),
+      attachments,
+      senderName: typeof senderName === "string" && senderName.trim().length > 0 ? senderName.trim() : void 0,
+      awaitingOnline: false
+    });
+  }
+}
+class ChatThreadStatusState {
+  text;
+  startedAt;
+  mode;
+  turnId;
+  pendingMessages;
+  pendingItemId;
+  supportsAgentMessages;
+  constructor({
+    text,
+    startedAt,
+    mode,
+    turnId,
+    pendingMessages = [],
+    pendingItemId,
+    supportsAgentMessages: supportsAgentMessages2 = false
+  }) {
+    this.text = text;
+    this.startedAt = startedAt;
+    this.mode = mode;
+    this.turnId = turnId;
+    this.pendingMessages = pendingMessages;
+    this.pendingItemId = pendingItemId;
+    this.supportsAgentMessages = supportsAgentMessages2;
+  }
+  get hasStatus() {
+    return this.text != null && this.text.trim().length > 0;
+  }
+}
 function getParticipantName(participant) {
   const name = participant.getAttribute("name");
   return typeof name === "string" ? name.trim() : "";
@@ -109,73 +208,161 @@ function threadStatusAttributeCandidates(path, prefix) {
   }
   return [`${prefix}.${path}`, `${prefix}./${path}`];
 }
-function resolveThreadStatus({ room, path, agentName }) {
-  const normalizedAgentName = agentName?.trim();
-  const remoteParticipants = room.messaging.remoteParticipants;
-  const candidates = normalizedAgentName && normalizedAgentName !== "" ? remoteParticipants.filter((participant) => getParticipantName(participant) === normalizedAgentName) : remoteParticipants.filter((participant) => participant.role === "agent" || supportsAgentMessages(participant));
-  const textKeys = threadStatusAttributeCandidates(path, "thread.status.text");
-  const legacyKeys = threadStatusAttributeCandidates(path, "thread.status");
-  const modeKeys = threadStatusAttributeCandidates(path, "thread.status.mode");
-  const startedAtKeys = threadStatusAttributeCandidates(path, "thread.status.started_at");
-  let text = null;
-  let mode = null;
-  let startedAt = null;
-  let hasAgentMessageSupport = false;
+function parsePendingMessagesStatus(participant, path) {
+  for (const key of threadStatusAttributeCandidates(
+    path,
+    "thread.status.pending_messages"
+  )) {
+    const value = participant.getAttribute(key);
+    if (typeof value !== "string" || value.trim().length === 0) {
+      continue;
+    }
+    try {
+      const decoded = JSON.parse(value.trim());
+      if (decoded != null && typeof decoded === "object" && !Array.isArray(decoded)) {
+        return decoded;
+      }
+    } catch (_) {
+    }
+  }
+  return void 0;
+}
+function resolveThreadStatus({
+  room,
+  path,
+  agentName,
+  previous
+}) {
+  const keyCandidates = threadStatusAttributeCandidates(path, "thread.status");
+  const textKeyCandidates = threadStatusAttributeCandidates(path, "thread.status.text");
+  const modeKeyCandidates = threadStatusAttributeCandidates(path, "thread.status.mode");
+  const startedAtKeyCandidates = threadStatusAttributeCandidates(path, "thread.status.started_at");
+  const pendingItemIdKeyCandidates = threadStatusAttributeCandidates(path, "thread.status.pending_item_id");
+  const candidates = agentName != null ? room.messaging.remoteParticipants.filter(
+    (participant) => participant.getAttribute("name") === agentName
+  ) : room.messaging.remoteParticipants.filter(
+    (participant) => participant.role === "agent" || supportsAgentMessages(participant)
+  );
+  let nextStatus;
+  let nextMode;
+  let nextStartedAt;
+  let nextTurnId;
+  let nextPendingMessages = [];
+  let nextPendingItemId;
+  let nextSupportsAgentMessages = false;
   for (const participant of candidates) {
-    hasAgentMessageSupport = hasAgentMessageSupport || supportsAgentMessages(participant);
-    if (text === null) {
-      for (const key of [...textKeys, ...legacyKeys]) {
+    if (supportsAgentMessages(participant)) {
+      nextSupportsAgentMessages = true;
+    }
+    if (nextStatus == null) {
+      for (const key of textKeyCandidates) {
         const value = participant.getAttribute(key);
-        if (typeof value === "string" && value.trim() !== "") {
-          text = value.trim();
+        if (typeof value === "string" && value.trim().length > 0) {
+          nextStatus = value.trim();
           break;
         }
       }
     }
-    if (mode === null) {
-      for (const key of modeKeys) {
+    if (nextStatus == null) {
+      for (const key of keyCandidates) {
         const value = participant.getAttribute(key);
-        if (typeof value !== "string") {
-          continue;
-        }
-        const normalized = value.trim().toLowerCase();
-        if (normalized === "busy" || normalized === "steerable") {
-          mode = normalized;
+        if (typeof value === "string" && value.trim().length > 0) {
+          nextStatus = value.trim();
           break;
         }
       }
     }
-    if (startedAt === null) {
-      for (const key of startedAtKeys) {
+    const pendingStatus = parsePendingMessagesStatus(participant, path);
+    if (pendingStatus != null && typeof pendingStatus === "object") {
+      if (nextTurnId == null) {
+        const turnId = pendingStatus["turn_id"];
+        if (typeof turnId === "string" && turnId.trim().length > 0) {
+          nextTurnId = turnId.trim();
+        }
+      }
+      if (nextPendingMessages.length === 0) {
+        const messages = pendingStatus["messages"];
+        if (Array.isArray(messages)) {
+          nextPendingMessages = messages.flatMap((item) => {
+            if (item != null && typeof item === "object") {
+              return [
+                PendingAgentMessage.fromQueueJson(
+                  item
+                )
+              ];
+            }
+            return [];
+          });
+        }
+      }
+    }
+    if (nextMode == null) {
+      for (const key of modeKeyCandidates) {
+        const value = participant.getAttribute(key);
+        if (typeof value === "string") {
+          const normalized = value.trim().toLowerCase();
+          if (normalized === "busy" || normalized === "steerable") {
+            nextMode = normalized;
+            break;
+          }
+        }
+      }
+    }
+    if (nextStartedAt == null) {
+      for (const key of startedAtKeyCandidates) {
         const value = participant.getAttribute(key);
-        if (typeof value !== "string" || value.trim() === "") {
+        if (typeof value !== "string") {
           continue;
         }
-        const parsed = new Date(value);
+        const normalized = value.trim();
+        if (normalized.length === 0) {
+          continue;
+        }
+        const parsed = new Date(normalized);
         if (!Number.isNaN(parsed.getTime())) {
-          startedAt = parsed;
+          nextStartedAt = parsed;
+          break;
+        }
+      }
+    }
+    if (nextPendingItemId == null) {
+      for (const key of pendingItemIdKeyCandidates) {
+        const value = participant.getAttribute(key);
+        if (typeof value === "string" && value.trim().length > 0) {
+          nextPendingItemId = value.trim();
           break;
         }
       }
     }
+    if (nextStatus != null && nextMode != null && nextStartedAt != null && nextTurnId != null && nextPendingItemId != null) {
+      break;
+    }
   }
-  if (text === null) {
-    return {
-      text: null,
-      mode: null,
-      startedAt: null,
-      supportsAgentMessages: hasAgentMessageSupport
-    };
+  if (nextStatus == null) {
+    return new ChatThreadStatusState({
+      supportsAgentMessages: nextSupportsAgentMessages
+    });
   }
-  return {
-    text,
-    mode: mode ?? "busy",
-    startedAt,
-    supportsAgentMessages: hasAgentMessageSupport
-  };
+  nextMode ??= "busy";
+  nextStartedAt ??= previous?.hasStatus === true ? previous.startedAt : /* @__PURE__ */ new Date();
+  return new ChatThreadStatusState({
+    text: nextStatus,
+    startedAt: nextStartedAt,
+    mode: nextMode,
+    turnId: nextTurnId,
+    pendingMessages: nextPendingMessages,
+    pendingItemId: nextPendingItemId,
+    supportsAgentMessages: nextSupportsAgentMessages
+  });
+}
+function pendingMessagesEqual(left, right) {
+  return left.length === right.length && left.every((message, index) => {
+    const other = right[index];
+    return message.messageId === other.messageId && message.messageType === other.messageType && message.text === other.text && stringArraysEqual(message.attachments, other.attachments) && message.senderName === other.senderName;
+  });
 }
 function threadStatusEquals(left, right) {
-  return left.text === right.text && left.mode === right.mode && left.startedAt?.getTime() === right.startedAt?.getTime() && left.supportsAgentMessages === right.supportsAgentMessages;
+  return left.text === right.text && left.mode === right.mode && left.startedAt?.getTime() === right.startedAt?.getTime() && left.turnId === right.turnId && left.pendingItemId === right.pendingItemId && pendingMessagesEqual(left.pendingMessages, right.pendingMessages) && left.supportsAgentMessages === right.supportsAgentMessages;
 }
 function formatThreadStatusText(text, startedAt) {
   if (!(startedAt instanceof Date) || Number.isNaN(startedAt.getTime())) {
@@ -360,8 +547,15 @@ function useThreadStatus({ room, path, agentName }) {
   const [status, setStatus] = (0, import_react.useState)(() => resolveThreadStatus({ room, path, agentName }));
   (0, import_react.useEffect)(() => {
     const updateStatus = () => {
-      const nextStatus = resolveThreadStatus({ room, path, agentName });
-      setStatus((currentStatus) => threadStatusEquals(currentStatus, nextStatus) ? currentStatus : nextStatus);
+      setStatus((currentStatus) => {
+        const nextStatus = resolveThreadStatus({
+          room,
+          path,
+          agentName,
+          previous: currentStatus
+        });
+        return threadStatusEquals(currentStatus, nextStatus) ? currentStatus : nextStatus;
+      });
     };
     const roomSubscription = (0, import_meshagent_react.subscribe)(room.listen(), {
       next: (event) => {
@@ -372,18 +566,15 @@ function useThreadStatus({ room, path, agentName }) {
         updateStatus();
       }
     });
-    const handleParticipantsChanged = () => {
-      updateStatus();
-    };
-    room.messaging.on("participant_added", handleParticipantsChanged);
-    room.messaging.on("participant_removed", handleParticipantsChanged);
-    room.messaging.on("messaging_enabled", handleParticipantsChanged);
+    room.messaging.on("participant_added", updateStatus);
+    room.messaging.on("participant_removed", updateStatus);
+    room.messaging.on("messaging_enabled", updateStatus);
     updateStatus();
     return () => {
       roomSubscription.unsubscribe();
-      room.messaging.off("participant_added", handleParticipantsChanged);
-      room.messaging.off("participant_removed", handleParticipantsChanged);
-      room.messaging.off("messaging_enabled", handleParticipantsChanged);
+      room.messaging.off("participant_added", updateStatus);
+      room.messaging.off("participant_removed", updateStatus);
+      room.messaging.off("messaging_enabled", updateStatus);
     };
   }, [agentName, path, room]);
   return status;

package/dist/esm/Chat.js

@@ -111,7 +111,7 @@ 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: [
+  return /* @__PURE__ */ jsxs("div", { className: "h-full max-w-2xl flex 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
   ] });
@@ -381,7 +381,7 @@ function Chat({
       placeholder: agentName?.trim() ? `Type a message or @${displayParticipantName(agentName)}` : "Type a message"
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-1 flex-col", children: [
     activePath ? /* @__PURE__ */ jsx(
       ResolvedChatView,
       {
@@ -402,7 +402,7 @@ function Chat({
       ] }),
       composer,
       newThreadError ? /* @__PURE__ */ jsx(ErrorBanner, { message: newThreadError }) : null
-    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-1 flex-col", children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1", children: emptyStateTitle ? /* @__PURE__ */ jsx(EmptyState, { title: emptyStateTitle, description: emptyStateDescription }) : null }),
       pendingStatusText ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[912px] text-sm text-muted-foreground", children: pendingStatusText }) }) : null,
       newThreadError ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx(ErrorBanner, { message: newThreadError }) }) : null,

package/dist/esm/ChatBotView.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useDocumentChanged } from "@meshagent/meshagent-react";
 import {
   AlertTriangle,
@@ -11,6 +11,17 @@ import {
 import { useThreadStatus } from "./chat-hooks";
 import { Chat } from "./Chat";
 import { Button } from "./components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./components/ui/dialog";
+import { Input } from "./components/ui/input";
+import { Label } from "./components/ui/label";
 import { Spinner } from "./components/ui/spinner";
 import {
   ChatThreadDisplayMode,
@@ -110,10 +121,7 @@ function useIsWideLayout(minWidth) {
   }, [minWidth]);
   return matches;
 }
-function useThreadListDocument({
-  room,
-  path
-}) {
+function useThreadListDocument({ room, path }) {
   const [document, setDocument] = useState(null);
   const [entries, setEntries] = useState([]);
   const [loading, setLoading] = useState(path !== null);
@@ -180,7 +188,7 @@ function ThreadListRow({
   icon,
   trailing
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "px-2 py-1 cursor-pointer", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
@@ -224,14 +232,13 @@ function ThreadListEntryRow({
 }) {
   const status = useThreadStatus({ room, path: entry.path, agentName });
   const iconClassName = selected ? "text-accent-foreground" : "text-muted-foreground";
-  const hasStatus = status.text?.trim() !== "";
   return /* @__PURE__ */ jsx(
     ThreadListRow,
     {
       title: entry.name,
       selected,
       onClick: () => onSelect(entry),
-      icon: hasStatus ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: iconClassName }) : selected ? /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4", iconClassName) }) : /* @__PURE__ */ jsx(MessageSquare, { className: cn("h-4 w-4", iconClassName) }),
+      icon: status.hasStatus ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: iconClassName }) : selected ? /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4", iconClassName) }) : /* @__PURE__ */ jsx(MessageSquare, { className: cn("h-4 w-4", iconClassName) }),
       trailing: /* @__PURE__ */ jsx(
         Button,
         {
@@ -259,7 +266,7 @@ function ThreadListPanel({
   const { entries, error, loading } = threadList;
   const hasSelectedEntry = selectedThreadPath !== null && entries.some((entry) => entry.path === selectedThreadPath);
   const showPendingNewThreadSelection = selectedThreadPath === null || !hasSelectedEntry;
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border bg-background", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "text-muted-foreground" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6 text-center text-sm text-muted-foreground", children: `Unable to load threads: ${describeError(error)}` }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto py-1", children: [
+  return /* @__PURE__ */ jsx("div", { className: "h-full flex flex-col rounded-md border", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "text-muted-foreground" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6 text-center text-sm text-muted-foreground", children: `Unable to load threads: ${describeError(error)}` }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-1 flex-col overflow-y-auto py-1", children: [
     /* @__PURE__ */ jsx(
       ThreadListRow,
       {
@@ -284,6 +291,52 @@ function ThreadListPanel({
     ))
   ] }) });
 }
+function RenameThreadDialog({
+  dialogState,
+  onNameChange,
+  onOpenChange,
+  onSubmit
+}) {
+  const inputId = useId();
+  const inputRef = useRef(null);
+  const trimmedName = dialogState?.value.trim() ?? "";
+  const saveDisabled = dialogState === null || trimmedName === "" || trimmedName === dialogState.entry.name;
+  return /* @__PURE__ */ jsx(Dialog, { open: dialogState !== null, onOpenChange, children: /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: "sm:max-w-[425px]",
+      onOpenAutoFocus: (event) => {
+        event.preventDefault();
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      },
+      children: /* @__PURE__ */ jsxs("form", { className: "space-y-4", onSubmit, children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Rename thread" }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: "Use a short and descriptive name" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: "Name" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              id: inputId,
+              value: dialogState?.value ?? "",
+              autoComplete: "off",
+              onChange: onNameChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: saveDisabled, children: "Save" })
+        ] })
+      ] })
+    }
+  ) });
+}
 function MultiThreadUnavailable() {
   return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center px-4 py-8", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-[912px] rounded-3xl border border-destructive/30 bg-destructive/5 p-6 text-destructive", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
     /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0" }),
@@ -330,6 +383,7 @@ function ChatBotView({
   const [internalSelectedThreadPath, setInternalSelectedThreadPath] = useState(() => explicitSelectedThreadPath ?? legacySelectedThreadPath ?? null);
   const previousLegacySelectedThreadPathRef = useRef(legacySelectedThreadPath);
   const previousNewThreadResetVersionRef = useRef(newThreadResetVersion);
+  const [renameThreadDialog, setRenameThreadDialog] = useState(null);
   const activeSelectedThreadPath = explicitSelectedThreadPath ?? internalSelectedThreadPath;
   const resolvedThreadListDocumentPath = useMemo(
     () => resolvedThreadListPath(threadListPath, { threadDir, agentName }),
@@ -371,6 +425,9 @@ function ChatBotView({
     handleSelectedThreadPathChanged(normalizedNextPath);
     emitResolvedThread(normalizedNextPath, displayName);
   }, [emitResolvedThread, handleSelectedThreadPathChanged]);
+  const closeRenameThreadDialog = useCallback(() => {
+    setRenameThreadDialog(null);
+  }, []);
   useEffect(() => {
     if (threadDisplayMode !== ChatThreadDisplayMode.MultiThreadComposer) {
       previousNewThreadResetVersionRef.current = newThreadResetVersion;
@@ -382,22 +439,43 @@ function ChatBotView({
     previousNewThreadResetVersionRef.current = newThreadResetVersion;
   }, [activeSelectedThreadPath, newThreadResetVersion, setSelectedThread, threadDisplayMode]);
   const handleRenameThread = useCallback((entry) => {
-    if (typeof window === "undefined") {
-      return;
+    setRenameThreadDialog({
+      entry,
+      value: entry.name
+    });
+  }, []);
+  const handleRenameThreadNameChanged = useCallback((event) => {
+    const nextValue = event.target.value;
+    setRenameThreadDialog((currentDialogState) => {
+      if (currentDialogState === null) {
+        return currentDialogState;
+      }
+      return {
+        ...currentDialogState,
+        value: nextValue
+      };
+    });
+  }, []);
+  const handleRenameThreadDialogOpenChange = useCallback((open) => {
+    if (!open) {
+      closeRenameThreadDialog();
     }
-    const nextName = window.prompt("Rename thread", entry.name);
-    if (nextName === null) {
+  }, [closeRenameThreadDialog]);
+  const handleRenameThreadSubmit = useCallback((event) => {
+    event.preventDefault();
+    if (renameThreadDialog === null) {
       return;
     }
-    const trimmedName = nextName.trim();
-    if (trimmedName === "" || trimmedName === entry.name) {
+    const trimmedName = renameThreadDialog.value.trim();
+    if (trimmedName === "" || trimmedName === renameThreadDialog.entry.name) {
       return;
     }
-    entry.element.setAttribute("name", trimmedName);
-    if (entry.path === activeSelectedThreadPath) {
-      emitResolvedThread(entry.path, trimmedName);
+    renameThreadDialog.entry.element.setAttribute("name", trimmedName);
+    if (renameThreadDialog.entry.path === activeSelectedThreadPath) {
+      emitResolvedThread(renameThreadDialog.entry.path, trimmedName);
     }
-  }, [activeSelectedThreadPath, emitResolvedThread]);
+    closeRenameThreadDialog();
+  }, [activeSelectedThreadPath, closeRenameThreadDialog, emitResolvedThread, renameThreadDialog]);
   if (threadDisplayMode !== ChatThreadDisplayMode.MultiThreadComposer) {
     return /* @__PURE__ */ jsx(
       Chat,
@@ -449,31 +527,53 @@ function ChatBotView({
     }
   );
   if (!showThreadList || resolvedThreadListDocumentPath === null) {
-    return content;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      content,
+      /* @__PURE__ */ jsx(
+        RenameThreadDialog,
+        {
+          dialogState: renameThreadDialog,
+          onNameChange: handleRenameThreadNameChanged,
+          onOpenChange: handleRenameThreadDialogOpenChange,
+          onSubmit: handleRenameThreadSubmit
+        }
+      )
+    ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1 h-full", isWideLayout ? "flex-row items-stretch" : "flex-col"), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full min-h-0 min-w-0 flex-1", children: content }),
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1 h-full", isWideLayout ? "flex-row items-stretch" : "flex-col"), children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full min-h-0 min-w-0 flex-1", children: content }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("shrink-0 mr-4", isWideLayout ? "ml-3" : "mt-3"),
+          style: isWideLayout ? { width: threadListWidth } : { height: threadListCollapsedHeight },
+          children: /* @__PURE__ */ jsx(
+            ThreadListPanel,
+            {
+              room,
+              threadList,
+              selectedThreadPath: activeSelectedThreadPath,
+              agentName,
+              onSelectThread: (entry) => {
+                setSelectedThread(entry.path, entry.name);
+              },
+              onClearSelection: () => {
+                setSelectedThread(null, null);
+              },
+              onRenameThread: handleRenameThread
+            }
+          )
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
-      "div",
+      RenameThreadDialog,
       {
-        className: cn("shrink-0 mr-4", isWideLayout ? "ml-3" : "mt-3"),
-        style: isWideLayout ? { width: threadListWidth } : { height: threadListCollapsedHeight },
-        children: /* @__PURE__ */ jsx(
-          ThreadListPanel,
-          {
-            room,
-            threadList,
-            selectedThreadPath: activeSelectedThreadPath,
-            agentName,
-            onSelectThread: (entry) => {
-              setSelectedThread(entry.path, entry.name);
-            },
-            onClearSelection: () => {
-              setSelectedThread(null, null);
-            },
-            onRenameThread: handleRenameThread
-          }
-        )
+        dialogState: renameThreadDialog,
+        onNameChange: handleRenameThreadNameChanged,
+        onOpenChange: handleRenameThreadDialogOpenChange,
+        onSubmit: handleRenameThreadSubmit
       }
     )
   ] });

package/dist/esm/ChatThread.js

@@ -505,7 +505,7 @@ 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: [
+  return /* @__PURE__ */ jsxs("div", { className: "h-full 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
   ] });