@meshagent/meshagent-tailwind 0.38.2 → 0.38.3

package/dist/esm/Chat.js

@@ -1,54 +1,192 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import { useChat, useClientToolkits, useRoomIndicators } from "@meshagent/meshagent-react";
-import { ChatThread } from "./ChatThread";
+import { useState, useRef, useMemo, useEffect, useCallback } from "react";
+import { JsonContent } from "@meshagent/meshagent";
+import { useRoomIndicators } from "@meshagent/meshagent-react";
+import { Plus } from "lucide-react";
 import { ChatInput } from "./ChatInput";
-import { ChatTypingIndicator } from "./ChatTypingIndicator";
-import { UIToolkit } from "./tools/ui-toolkit";
+import { ChatThread } from "./ChatThread";
+import { Button } from "./components/ui/button";
 import { Toaster } from "./components/ui/sonner";
+import { MeshagentFileUpload, fileToAsyncIterable } from "./file-attachment";
+import { useChatThread, useThreadStatus } from "./chat-hooks";
+class NewThreadCancelledError extends Error {
+  constructor() {
+    super("new thread creation cancelled");
+    this.name = "NewThreadCancelledError";
+  }
+}
+function normalizeThreadPath(path) {
+  const normalizedPath = path?.trim();
+  return normalizedPath ? normalizedPath : null;
+}
 function getParticipantName(participant) {
-  const name = participant?.getAttribute("name");
-  return typeof name === "string" ? name : "";
+  const name = participant.getAttribute("name");
+  return typeof name === "string" ? name.trim() : "";
+}
+function displayParticipantName(name) {
+  const normalizedName = name?.trim();
+  if (!normalizedName) {
+    return "agent";
+  }
+  return normalizedName.split("@")[0]?.trim() || normalizedName;
+}
+function isAgentParticipant(participant) {
+  return participant.role === "agent" || participant.getAttribute("supports_agent_messages") === true;
+}
+function findTargetAgent(room, agentName) {
+  const normalizedAgentName = agentName?.trim();
+  for (const participant of room.messaging.remoteParticipants) {
+    if (!isAgentParticipant(participant)) {
+      continue;
+    }
+    if (normalizedAgentName && getParticipantName(participant) !== normalizedAgentName) {
+      continue;
+    }
+    return participant;
+  }
+  return null;
+}
+function ensureOperationActive(operationId, activeOperationRef) {
+  if (activeOperationRef.current !== operationId) {
+    throw new NewThreadCancelledError();
+  }
+}
+function delay(milliseconds) {
+  return new Promise((resolve) => {
+    window.setTimeout(resolve, milliseconds);
+  });
 }
-function Chat({ room, path, participants }) {
+async function waitForTargetAgent(params) {
+  const { room, agentName, operationId, activeOperationRef } = params;
+  while (true) {
+    ensureOperationActive(operationId, activeOperationRef);
+    const targetAgent = findTargetAgent(room, agentName);
+    if (targetAgent) {
+      return targetAgent;
+    }
+    await delay(250);
+  }
+}
+async function waitForToolkitAvailable(params) {
   const {
+    room,
+    participantId,
+    toolkit,
+    operationId,
+    activeOperationRef
+  } = params;
+  while (true) {
+    ensureOperationActive(operationId, activeOperationRef);
+    try {
+      const toolkits = await room.agents.listToolkits({ participantId, timeout: 1e3 });
+      if (toolkits.some((toolkitDescription) => toolkitDescription.name === toolkit)) {
+        return;
+      }
+    } catch {
+    }
+    await delay(250);
+  }
+}
+function getStringField(record, key) {
+  const value = record[key];
+  return typeof value === "string" && value.trim() !== "" ? value.trim() : null;
+}
+function parseThreadToolResult(toolkit, tool, content) {
+  const path = getStringField(content.json, "path");
+  if (!path) {
+    throw new Error(`${toolkit}.${tool} response missing path`);
+  }
+  return {
+    path,
+    displayName: getStringField(content.json, "name")
+  };
+}
+function describeError(error) {
+  if (error instanceof Error && error.message.trim() !== "") {
+    return error.message;
+  }
+  return `${error}`;
+}
+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 ErrorBanner({ message }) {
+  return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[912px] whitespace-pre-wrap rounded-3xl border border-destructive/30 bg-destructive/5 px-6 py-5 text-sm text-destructive", children: message });
+}
+function ResolvedChatView({
+  room,
+  path,
+  participants,
+  agentName,
+  emptyStateTitle,
+  emptyStateDescription,
+  showNewThreadButton = false,
+  onStartNewThread
+}) {
+  const {
+    document,
     messages,
     sendMessage,
     selectAttachments,
     attachments,
     setAttachments,
-    schemaFileExists,
+    onlineParticipants,
+    localParticipantName,
     cancelRequest
-  } = useChat({ room, path, participants });
-  const { thinking } = useRoomIndicators({ room, path });
-  const toolkits = useMemo(() => [
-    new UIToolkit()
-  ], []);
-  useClientToolkits({ room, toolkits, public: false });
-  const onTextChange = useCallback((_) => {
-    const removeParticipant = room.messaging.remoteParticipants;
-    for (const part of removeParticipant) {
+  } = useChatThread({ room, path, participants, agentName });
+  const { typing, thinking } = useRoomIndicators({ room, path });
+  const threadStatus = useThreadStatus({ room, path, agentName });
+  const [showCompletedToolCalls, setShowCompletedToolCalls] = useState(false);
+  const onTextChange = useCallback(() => {
+    for (const participant of onlineParticipants) {
       room.messaging.sendMessage({
-        to: part,
+        to: participant,
         type: "typing",
         message: { path }
       });
     }
-  }, [room, path]);
-  const localParticipantName = getParticipantName(room?.localParticipant);
-  if (schemaFileExists === false) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-4", children: /* @__PURE__ */ jsx("p", { className: "text-red-500", children: 'No AI agent found in this room. Run `meshagent chatbot join --room [room-name] --agent-name "Chat Agent" --name "Chat Friend"` and try again.' }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-0", children: [
+  }, [onlineParticipants, path, room]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    showNewThreadButton && onStartNewThread ? /* @__PURE__ */ jsx("div", { className: "px-4 pt-3", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-[912px] justify-end", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "rounded-full shadow-xs",
+        onClick: onStartNewThread,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+          "New thread"
+        ]
+      }
+    ) }) }) : null,
     /* @__PURE__ */ jsx(
       ChatThread,
       {
         room,
+        path,
         messages,
-        localParticipantName
+        isLoading: document === null,
+        localParticipantName,
+        showCompletedToolCalls,
+        onShowCompletedToolCallsChanged: setShowCompletedToolCalls,
+        typing,
+        thinking,
+        threadStatusText: threadStatus.text,
+        threadStatusStartedAt: threadStatus.startedAt,
+        threadStatusMode: threadStatus.mode,
+        onCancelRequest: cancelRequest,
+        emptyStateTitle,
+        emptyStateDescription
       }
     ),
-    /* @__PURE__ */ jsx(ChatTypingIndicator, { room, path }),
     /* @__PURE__ */ jsx(
       ChatInput,
       {
@@ -56,11 +194,220 @@ function Chat({ room, path, participants }) {
         attachments,
         onFilesSelected: selectAttachments,
         setAttachments,
-        onTextChange,
-        onCancelRequest: cancelRequest,
-        showCancelButton: thinking
+        onTextChange
       }
-    ),
+    )
+  ] });
+}
+function Chat({
+  room,
+  path,
+  participants,
+  agentName,
+  toolkit = "chat",
+  tool = "new_thread",
+  centerComposer = true,
+  emptyStateTitle,
+  emptyStateDescription,
+  onThreadResolved
+}) {
+  const [internalThreadPath, setInternalThreadPath] = useState(null);
+  const [newThreadDraft, setNewThreadDraft] = useState("");
+  const [newThreadAttachments, setNewThreadAttachments] = useState([]);
+  const [newThreadError, setNewThreadError] = useState(null);
+  const [creatingNewThread, setCreatingNewThread] = useState(false);
+  const [waitingForAgent, setWaitingForAgent] = useState(false);
+  const activeOperationRef = useRef(0);
+  const controlledPath = useMemo(() => normalizeThreadPath(path), [path]);
+  const managesOwnThread = controlledPath === null;
+  const activePath = controlledPath ?? internalThreadPath;
+  useEffect(() => {
+    return () => {
+      activeOperationRef.current += 1;
+    };
+  }, []);
+  useEffect(() => {
+    if (controlledPath !== null) {
+      setInternalThreadPath(null);
+    }
+  }, [controlledPath]);
+  useEffect(() => {
+    activeOperationRef.current += 1;
+    setInternalThreadPath(null);
+    setNewThreadDraft("");
+    setNewThreadAttachments([]);
+    setNewThreadError(null);
+    setCreatingNewThread(false);
+    setWaitingForAgent(false);
+  }, [agentName, managesOwnThread, room]);
+  const selectNewThreadAttachments = useCallback((files) => {
+    const nextAttachments = files.map((file) => new MeshagentFileUpload(
+      room,
+      `uploaded-files/${file.name}`,
+      fileToAsyncIterable(file),
+      file.size
+    ));
+    setNewThreadAttachments((currentAttachments) => [...currentAttachments, ...nextAttachments]);
+  }, [room]);
+  const cancelPendingNewThread = useCallback(() => {
+    activeOperationRef.current += 1;
+    setCreatingNewThread(false);
+    setWaitingForAgent(false);
+    setNewThreadError(null);
+  }, []);
+  const openNewThreadComposer = useCallback(() => {
+    activeOperationRef.current += 1;
+    setInternalThreadPath(null);
+    setNewThreadDraft("");
+    setNewThreadAttachments([]);
+    setNewThreadError(null);
+    setCreatingNewThread(false);
+    setWaitingForAgent(false);
+  }, []);
+  const handleCreateThread = useCallback(async () => {
+    const text = newThreadDraft.trim();
+    const hasDraft = text !== "" || newThreadAttachments.length > 0;
+    if (!hasDraft || creatingNewThread || waitingForAgent) {
+      return;
+    }
+    const operationId = activeOperationRef.current + 1;
+    activeOperationRef.current = operationId;
+    const initialTargetAgent = findTargetAgent(room, agentName);
+    setWaitingForAgent(initialTargetAgent === null);
+    setCreatingNewThread(initialTargetAgent !== null);
+    setNewThreadError(null);
+    try {
+      const targetAgent = initialTargetAgent ?? await waitForTargetAgent({
+        room,
+        agentName,
+        operationId,
+        activeOperationRef
+      });
+      ensureOperationActive(operationId, activeOperationRef);
+      if (initialTargetAgent === null) {
+        setWaitingForAgent(false);
+        setCreatingNewThread(true);
+      }
+      await waitForToolkitAvailable({
+        room,
+        participantId: targetAgent.id,
+        toolkit,
+        operationId,
+        activeOperationRef
+      });
+      ensureOperationActive(operationId, activeOperationRef);
+      const response = await room.agents.invokeTool({
+        toolkit,
+        tool,
+        arguments: {
+          message: {
+            text,
+            attachments: newThreadAttachments.map((attachment) => ({ path: attachment.path }))
+          }
+        }
+      });
+      ensureOperationActive(operationId, activeOperationRef);
+      if (!(response instanceof JsonContent)) {
+        throw new Error(`${toolkit}.${tool} returned non-JSON content`);
+      }
+      const result = parseThreadToolResult(toolkit, tool, response);
+      if (controlledPath === null) {
+        setInternalThreadPath(result.path);
+      }
+      setNewThreadDraft("");
+      setNewThreadAttachments([]);
+      setNewThreadError(null);
+      setCreatingNewThread(false);
+      setWaitingForAgent(false);
+      onThreadResolved?.(result.path, result.displayName);
+    } catch (error) {
+      if (error instanceof NewThreadCancelledError) {
+        return;
+      }
+      setCreatingNewThread(false);
+      setWaitingForAgent(false);
+      setNewThreadError(describeError(error));
+    }
+  }, [
+    agentName,
+    controlledPath,
+    creatingNewThread,
+    newThreadAttachments,
+    newThreadDraft,
+    onThreadResolved,
+    room,
+    toolkit,
+    tool,
+    waitingForAgent
+  ]);
+  useEffect(() => {
+    if (!managesOwnThread) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "n") {
+        return;
+      }
+      event.preventDefault();
+      openNewThreadComposer();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [managesOwnThread, openNewThreadComposer]);
+  const targetAgentLabel = useMemo(() => {
+    const knownAgentName = agentName?.trim();
+    if (knownAgentName) {
+      return displayParticipantName(knownAgentName);
+    }
+    const targetAgent = findTargetAgent(room);
+    return displayParticipantName(targetAgent ? getParticipantName(targetAgent) : null);
+  }, [agentName, room]);
+  const pendingStatusText = waitingForAgent ? `Waiting for ${targetAgentLabel} to be ready.` : creatingNewThread ? `Starting a thread with ${targetAgentLabel}.` : null;
+  const composer = /* @__PURE__ */ jsx(
+    ChatInput,
+    {
+      onSubmit: handleCreateThread,
+      attachments: newThreadAttachments,
+      onFilesSelected: selectNewThreadAttachments,
+      setAttachments: setNewThreadAttachments,
+      value: newThreadDraft,
+      onValueChange: setNewThreadDraft,
+      clearOnSubmit: false,
+      showCancelButton: creatingNewThread || waitingForAgent,
+      onCancelRequest: cancelPendingNewThread,
+      disabled: creatingNewThread || waitingForAgent,
+      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: [
+    activePath ? /* @__PURE__ */ jsx(
+      ResolvedChatView,
+      {
+        room,
+        path: activePath,
+        participants,
+        agentName,
+        emptyStateTitle,
+        emptyStateDescription,
+        showNewThreadButton: managesOwnThread,
+        onStartNewThread: openNewThreadComposer
+      },
+      activePath
+    ) : centerComposer ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center px-4 py-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[912px] space-y-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-4xl font-semibold tracking-tight text-foreground sm:text-5xl", children: "Start a new thread" }),
+        pendingStatusText ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground sm:text-base", children: pendingStatusText }) : null
+      ] }),
+      composer,
+      newThreadError ? /* @__PURE__ */ jsx(ErrorBanner, { message: newThreadError }) : null
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 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,
+      composer
+    ] }),
     /* @__PURE__ */ jsx(Toaster, {})
   ] });
 }

package/dist/esm/ChatBotView.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from "react";
+import { Participant, RoomClient } from "@meshagent/meshagent";
+import { ChatThreadDisplayMode } from "./conversation-descriptor";
+export { ChatThreadDisplayMode, chatDocumentPath, resolvedThreadListPath, } from "./conversation-descriptor";
+export interface ChatBotViewProps {
+    room: RoomClient;
+    path?: string;
+    documentPath?: string;
+    participants?: Participant[];
+    agentName?: string;
+    threadDisplayMode?: ChatThreadDisplayMode;
+    threadDir?: string;
+    threadListPath?: string;
+    toolkit?: string;
+    tool?: string;
+    centerComposer?: boolean;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    selectedThreadPath?: string | null;
+    selectedThreadDisplayName?: string | null;
+    onSelectedThreadPathChanged?: (path: string | null) => void;
+    onSelectedThreadResolved?: (path: string | null, displayName: string | null) => void;
+    onThreadResolved?: (path: string | null, displayName: string | null) => void;
+    newThreadResetVersion?: number;
+    showThreadList?: boolean;
+    threadListWidth?: number;
+    threadListCollapsedHeight?: number;
+}
+export declare function ChatBotView({ room, path, documentPath, participants, agentName, threadDisplayMode, threadDir, threadListPath, toolkit, tool, centerComposer, emptyStateTitle, emptyStateDescription, selectedThreadPath, onSelectedThreadPathChanged, onSelectedThreadResolved, onThreadResolved, newThreadResetVersion, showThreadList, threadListWidth, threadListCollapsedHeight, }: ChatBotViewProps): ReactElement;