@meshagent/meshagent-tailwind 0.39.9 → 0.40.0

package/dist/cjs/{FileUploader.js → chat/file-uploader.js}

@@ -26,15 +26,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FileUploader_exports = {};
-__export(FileUploader_exports, {
+var file_uploader_exports = {};
+__export(file_uploader_exports, {
   FileUploader: () => FileUploader
 });
-module.exports = __toCommonJS(FileUploader_exports);
+module.exports = __toCommonJS(file_uploader_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_lucide_react = require("lucide-react");
-var import_button = require("./components/ui/button");
+var import_button = require("../components/ui/button");
 function FileUploader({
   onFilesSelected,
   accept = "",

package/dist/cjs/{multi-thread-view.js → chat/multi-thread-view.js}

@@ -23,7 +23,7 @@ __export(multi_thread_view_exports, {
 module.exports = __toCommonJS(multi_thread_view_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_Chat = require("./Chat");
+var import_new_chat_thread = require("./new-chat-thread");
 function normalizeSelectedThreadPath(path) {
   const normalized = path?.trim();
   return normalized ? normalized : null;
@@ -65,19 +65,24 @@ function MultiThreadView({
     return builder(activeSelectedThreadPath);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Chat.Chat,
+    import_new_chat_thread.NewChatThread,
     {
       room,
       agentName,
+      builder,
       toolkit,
       tool,
+      selectedThreadPath: activeSelectedThreadPath,
       centerComposer,
-      onThreadResolved: (path, displayName) => {
+      onThreadPathChanged: (path) => {
         const normalizedPath = normalizeSelectedThreadPath(path);
         if (controlledSelectedThreadPath === void 0) {
           setInternalSelectedThreadPath(normalizedPath);
         }
         onSelectedThreadPathChanged?.(normalizedPath);
+      },
+      onThreadResolved: (path, displayName) => {
+        const normalizedPath = normalizeSelectedThreadPath(path);
         onSelectedThreadResolved?.(normalizedPath, displayName);
       },
       emptyStateTitle,

package/dist/cjs/chat/new-chat-thread.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { RoomClient } from "@meshagent/meshagent";
+export type NewChatThreadBuilder = (threadPath: string) => ReactElement;
+export interface NewChatThreadProps {
+    room: RoomClient;
+    agentName: string;
+    builder: NewChatThreadBuilder;
+    toolkit?: string;
+    tool?: string;
+    selectedThreadPath?: string | null;
+    onThreadPathChanged?: (path: string | null) => void;
+    onThreadResolved?: (path: string | null, displayName: string | null) => void;
+    centerComposer?: boolean;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+}
+export declare function NewChatThread({ room, agentName, builder, toolkit, tool, selectedThreadPath, onThreadPathChanged, onThreadResolved, centerComposer, emptyStateTitle, emptyStateDescription, }: NewChatThreadProps): ReactElement;

package/dist/cjs/{Chat.js → chat/new-chat-thread.js}

@@ -16,22 +16,17 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Chat_exports = {};
-__export(Chat_exports, {
-  Chat: () => Chat
+var new_chat_thread_exports = {};
+__export(new_chat_thread_exports, {
+  NewChatThread: () => NewChatThread
 });
-module.exports = __toCommonJS(Chat_exports);
+module.exports = __toCommonJS(new_chat_thread_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_meshagent = require("@meshagent/meshagent");
-var import_meshagent_react = require("@meshagent/meshagent-react");
-var import_lucide_react = require("lucide-react");
-var import_ChatInput = require("./ChatInput");
-var import_ChatThread = require("./ChatThread");
-var import_button = require("./components/ui/button");
-var import_sonner = require("./components/ui/sonner");
+var import_chat_input = require("./chat-input");
 var import_file_attachment = require("./file-attachment");
-var import_chat_hooks = require("./chat-hooks");
+var import_sonner = require("../components/ui/sonner");
 class NewThreadCancelledError extends Error {
   constructor() {
     super("new thread creation cancelled");
@@ -119,10 +114,7 @@ function parseThreadToolResult(toolkit, tool, content) {
   if (!path) {
     throw new Error(`${toolkit}.${tool} response missing path`);
   }
-  return {
-    path,
-    displayName: getStringField(content.json, "name")
-  };
+  return [path, getStringField(content.json, "name")];
 }
 function describeError(error) {
   if (error instanceof Error && error.message.trim() !== "") {
@@ -134,115 +126,26 @@ function EmptyState({
   title,
   description
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "h-full flex flex-col items-center justify-center px-6 py-20 text-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-4xl font-bold tracking-tight text-foreground", children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-4xl font-semibold tracking-tight text-foreground sm:text-5xl", children: title }),
     description?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto w-full max-w-[912px] whitespace-pre-wrap rounded-md border border-destructive/30 bg-destructive/5 px-6 py-5 text-sm text-destructive", children: message });
 }
-function ResolvedChatView({
+function NewChatThread({
   room,
-  path,
-  participants,
-  agentName,
-  emptyStateTitle,
-  emptyStateDescription,
-  showNewThreadButton = false,
-  onStartNewThread
-}) {
-  const threadStatus = (0, import_chat_hooks.useThreadStatus)({ room, path, agentName });
-  const useAgentMessages = threadStatus.supportsAgentMessages;
-  const messageType = useAgentMessages && threadStatus.mode === "steerable" && threadStatus.turnId ? "steer" : "chat";
-  const {
-    document,
-    messages,
-    sendMessage,
-    selectAttachments,
-    attachments,
-    setAttachments,
-    onlineParticipants,
-    localParticipantName,
-    cancelRequest
-  } = (0, import_chat_hooks.useChatThread)({
-    room,
-    path,
-    participants,
-    agentName,
-    useAgentMessages,
-    messageType,
-    turnId: threadStatus.turnId
-  });
-  const { typing, thinking } = (0, import_meshagent_react.useRoomIndicators)({ room, path });
-  const [showCompletedToolCalls, setShowCompletedToolCalls] = (0, import_react.useState)(false);
-  const onTextChange = (0, import_react.useCallback)(() => {
-    for (const participant of onlineParticipants) {
-      room.messaging.sendMessage({
-        to: participant,
-        type: "typing",
-        message: { path }
-      });
-    }
-  }, [onlineParticipants, path, room]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    showNewThreadButton && onStartNewThread ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto flex w-full max-w-[912px] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_button.Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        className: "rounded-full shadow-xs",
-        onClick: onStartNewThread,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: "mr-2 h-4 w-4" }),
-          "New thread"
-        ]
-      }
-    ) }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ChatThread.ChatThread,
-      {
-        room,
-        path,
-        messages,
-        isLoading: document === null,
-        localParticipantName,
-        showCompletedToolCalls,
-        onShowCompletedToolCallsChanged: setShowCompletedToolCalls,
-        typing,
-        thinking,
-        threadStatusText: threadStatus.text,
-        threadStatusStartedAt: threadStatus.startedAt,
-        threadStatusMode: threadStatus.mode,
-        onCancelRequest: cancelRequest,
-        emptyStateTitle,
-        emptyStateDescription
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ChatInput.ChatInput,
-      {
-        onSubmit: sendMessage,
-        attachments,
-        onFilesSelected: selectAttachments,
-        setAttachments,
-        onTextChange
-      }
-    )
-  ] });
-}
-function Chat({
-  room,
-  path,
-  participants,
   agentName,
+  builder,
   toolkit = "chat",
   tool = "new_thread",
+  selectedThreadPath,
+  onThreadPathChanged,
+  onThreadResolved,
   centerComposer = true,
   emptyStateTitle,
-  emptyStateDescription,
-  onThreadResolved
+  emptyStateDescription
 }) {
   const [internalThreadPath, setInternalThreadPath] = (0, import_react.useState)(null);
   const [newThreadDraft, setNewThreadDraft] = (0, import_react.useState)("");
@@ -251,20 +154,23 @@ function Chat({
   const [creatingNewThread, setCreatingNewThread] = (0, import_react.useState)(false);
   const [waitingForAgent, setWaitingForAgent] = (0, import_react.useState)(false);
   const activeOperationRef = (0, import_react.useRef)(0);
-  const controlledPath = (0, import_react.useMemo)(() => normalizeThreadPath(path), [path]);
-  const managesOwnThread = controlledPath === null;
-  const activePath = controlledPath ?? internalThreadPath;
+  const controlledThreadPath = selectedThreadPath !== void 0 ? normalizeThreadPath(selectedThreadPath) : void 0;
+  const activePath = controlledThreadPath ?? internalThreadPath;
   (0, import_react.useEffect)(() => {
     return () => {
       activeOperationRef.current += 1;
     };
   }, []);
   (0, import_react.useEffect)(() => {
-    if (controlledPath !== null) {
-      setInternalThreadPath(null);
+    if (controlledThreadPath === void 0) {
+      return;
     }
-  }, [controlledPath]);
+    setInternalThreadPath(controlledThreadPath);
+  }, [controlledThreadPath]);
   (0, import_react.useEffect)(() => {
+    if (controlledThreadPath !== void 0) {
+      return;
+    }
     activeOperationRef.current += 1;
     setInternalThreadPath(null);
     setNewThreadDraft("");
@@ -272,7 +178,7 @@ function Chat({
     setNewThreadError(null);
     setCreatingNewThread(false);
     setWaitingForAgent(false);
-  }, [agentName, managesOwnThread, room]);
+  }, [agentName, controlledThreadPath, room]);
   const selectNewThreadAttachments = (0, import_react.useCallback)((files) => {
     const nextAttachments = files.map((file) => new import_file_attachment.MeshagentFileUpload(
       room,
@@ -288,15 +194,6 @@ function Chat({
     setWaitingForAgent(false);
     setNewThreadError(null);
   }, []);
-  const openNewThreadComposer = (0, import_react.useCallback)(() => {
-    activeOperationRef.current += 1;
-    setInternalThreadPath(null);
-    setNewThreadDraft("");
-    setNewThreadAttachments([]);
-    setNewThreadError(null);
-    setCreatingNewThread(false);
-    setWaitingForAgent(false);
-  }, []);
   const handleCreateThread = (0, import_react.useCallback)(async () => {
     const text = newThreadDraft.trim();
     const hasDraft = text !== "" || newThreadAttachments.length > 0;
@@ -329,7 +226,8 @@ function Chat({
         activeOperationRef
       });
       ensureOperationActive(operationId, activeOperationRef);
-      const response = await room.agents.invokeTool({
+      const response = await room.invoke({
+        participantId: targetAgent.id,
         toolkit,
         tool,
         arguments: {
@@ -343,16 +241,18 @@ function Chat({
       if (!(response instanceof import_meshagent.JsonContent)) {
         throw new Error(`${toolkit}.${tool} returned non-JSON content`);
       }
-      const result = parseThreadToolResult(toolkit, tool, response);
-      if (controlledPath === null) {
-        setInternalThreadPath(result.path);
+      const [threadPath, displayName] = parseThreadToolResult(toolkit, tool, response);
+      const normalizedPath = normalizeThreadPath(threadPath);
+      if (controlledThreadPath === void 0) {
+        setInternalThreadPath(normalizedPath);
       }
       setNewThreadDraft("");
       setNewThreadAttachments([]);
       setNewThreadError(null);
       setCreatingNewThread(false);
       setWaitingForAgent(false);
-      onThreadResolved?.(result.path, result.displayName);
+      onThreadPathChanged?.(normalizedPath);
+      onThreadResolved?.(normalizedPath, displayName);
     } catch (error) {
       if (error instanceof NewThreadCancelledError) {
         return;
@@ -363,34 +263,19 @@ function Chat({
     }
   }, [
     agentName,
-    controlledPath,
+    controlledThreadPath,
     creatingNewThread,
     newThreadAttachments,
     newThreadDraft,
+    onThreadPathChanged,
     onThreadResolved,
     room,
     toolkit,
     tool,
     waitingForAgent
   ]);
-  (0, import_react.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 = (0, import_react.useMemo)(() => {
-    const knownAgentName = agentName?.trim();
+    const knownAgentName = agentName.trim();
     if (knownAgentName) {
       return displayParticipantName(knownAgentName);
     }
@@ -398,8 +283,11 @@ function Chat({
     return displayParticipantName(targetAgent ? getParticipantName(targetAgent) : null);
   }, [agentName, room]);
   const pendingStatusText = waitingForAgent ? `Waiting for ${targetAgentLabel} to be ready.` : creatingNewThread ? `Starting a thread with ${targetAgentLabel}.` : null;
+  if (activePath !== null) {
+    return builder(activePath);
+  }
   const composer = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ChatInput.ChatInput,
+    import_chat_input.ChatInput,
     {
       onSubmit: handleCreateThread,
       attachments: newThreadAttachments,
@@ -411,24 +299,11 @@ function Chat({
       showCancelButton: creatingNewThread || waitingForAgent,
       onCancelRequest: cancelPendingNewThread,
       disabled: creatingNewThread || waitingForAgent,
-      placeholder: agentName?.trim() ? `Type a message or @${displayParticipantName(agentName)}` : "Type a message"
+      placeholder: agentName.trim() ? `Type a message or @${displayParticipantName(agentName)}` : "Type a message"
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "h-full flex flex-1 flex-col", children: [
-    activePath ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ResolvedChatView,
-      {
-        room,
-        path: activePath,
-        participants,
-        agentName,
-        emptyStateTitle,
-        emptyStateDescription,
-        showNewThreadButton: managesOwnThread,
-        onStartNewThread: openNewThreadComposer
-      },
-      activePath
-    ) : centerComposer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex min-h-0 flex-1 items-center justify-center px-4 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full max-w-[912px] space-y-5", children: [
+    centerComposer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex min-h-0 flex-1 items-center justify-center px-4 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full max-w-[912px] space-y-5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2 text-center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-4xl font-semibold tracking-tight text-foreground sm:text-5xl", children: "Start a new thread" }),
         pendingStatusText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground sm:text-base", children: pendingStatusText }) : null

package/dist/cjs/{UploadPill.js → chat/upload-pill.js}

@@ -26,17 +26,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var UploadPill_exports = {};
-__export(UploadPill_exports, {
+var upload_pill_exports = {};
+__export(upload_pill_exports, {
   UploadPill: () => UploadPill
 });
-module.exports = __toCommonJS(UploadPill_exports);
+module.exports = __toCommonJS(upload_pill_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_lucide_react = require("lucide-react");
-var import_progress = require("./components/ui/progress");
+var import_progress = require("../components/ui/progress");
 var import_file_attachment = require("./file-attachment");
-var import_utils = require("./lib/utils");
+var import_utils = require("../lib/utils");
 function measureUploadProgress(attachment) {
   if (attachment.size <= 0) {
     return attachment.status === import_file_attachment.UploadStatus.Completed ? 100 : 0;

package/dist/cjs/file-preview/file-preview.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement, ReactNode } from "react";
+import { RoomClient } from "@meshagent/meshagent";
+export declare enum FileKind {
+    Image = "image",
+    Video = "video",
+    Pdf = "pdf",
+    Unknown = "unknown"
+}
+export declare function filePreviewName(path: string): string;
+export declare function classifyFile(path: string): FileKind;
+export declare function isImagePath(path: string): boolean;
+export declare function ImagePreview({ room, path, alt, }: {
+    room: RoomClient;
+    path: string;
+    alt?: string;
+}): ReactElement;
+export declare function VideoPreview({ room, path }: {
+    room: RoomClient;
+    path: string;
+}): ReactElement;
+export declare function PdfPreview({ room, path }: {
+    room: RoomClient;
+    path: string;
+}): ReactElement;
+export declare function FilePreview({ room, path }: {
+    room: RoomClient;
+    path: string;
+}): ReactElement;
+export declare function FilePreviewDialog({ room, path, children, className, }: {
+    room: RoomClient;
+    path: string;
+    children: ReactNode;
+    className?: string;
+}): ReactElement;