@meshagent/meshagent-tailwind 0.39.9 → 0.40.0

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Paperclip } from "lucide-react";
-import { Button } from "./components/ui/button";
+import { Button } from "../components/ui/button";
 function FileUploader({
   onFilesSelected,
   accept = "",

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { Chat } from "./Chat";
+import { NewChatThread } from "./new-chat-thread";
 function normalizeSelectedThreadPath(path) {
   const normalized = path?.trim();
   return normalized ? normalized : null;
@@ -42,19 +42,24 @@ function MultiThreadView({
     return builder(activeSelectedThreadPath);
   }
   return /* @__PURE__ */ jsx(
-    Chat,
+    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/esm/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/esm/{Chat.js → chat/new-chat-thread.js}

@@ -1,14 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useMemo, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { JsonContent } from "@meshagent/meshagent";
-import { useRoomIndicators } from "@meshagent/meshagent-react";
-import { Plus } from "lucide-react";
-import { ChatInput } from "./ChatInput";
-import { ChatThread } from "./ChatThread";
-import { Button } from "./components/ui/button";
-import { Toaster } from "./components/ui/sonner";
+import { ChatInput } from "./chat-input";
 import { MeshagentFileUpload, fileToAsyncIterable } from "./file-attachment";
-import { useChatThread, useThreadStatus } from "./chat-hooks";
+import { Toaster } from "../components/ui/sonner";
 class NewThreadCancelledError extends Error {
   constructor() {
     super("new thread creation cancelled");
@@ -96,10 +91,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() !== "") {
@@ -111,115 +103,26 @@ function EmptyState({
   title,
   description
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center px-6 py-20 text-center", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-4xl font-bold tracking-tight text-foreground", children: title }),
+  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
   ] });
 }
 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 });
+  return /* @__PURE__ */ 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 = 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
-  } = useChatThread({
-    room,
-    path,
-    participants,
-    agentName,
-    useAgentMessages,
-    messageType,
-    turnId: threadStatus.turnId
-  });
-  const { typing, thinking } = useRoomIndicators({ room, path });
-  const [showCompletedToolCalls, setShowCompletedToolCalls] = useState(false);
-  const onTextChange = useCallback(() => {
-    for (const participant of onlineParticipants) {
-      room.messaging.sendMessage({
-        to: participant,
-        type: "typing",
-        message: { path }
-      });
-    }
-  }, [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,
-        isLoading: document === null,
-        localParticipantName,
-        showCompletedToolCalls,
-        onShowCompletedToolCallsChanged: setShowCompletedToolCalls,
-        typing,
-        thinking,
-        threadStatusText: threadStatus.text,
-        threadStatusStartedAt: threadStatus.startedAt,
-        threadStatusMode: threadStatus.mode,
-        onCancelRequest: cancelRequest,
-        emptyStateTitle,
-        emptyStateDescription
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      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] = useState(null);
   const [newThreadDraft, setNewThreadDraft] = useState("");
@@ -228,20 +131,23 @@ function Chat({
   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;
+  const controlledThreadPath = selectedThreadPath !== void 0 ? normalizeThreadPath(selectedThreadPath) : void 0;
+  const activePath = controlledThreadPath ?? internalThreadPath;
   useEffect(() => {
     return () => {
       activeOperationRef.current += 1;
     };
   }, []);
   useEffect(() => {
-    if (controlledPath !== null) {
-      setInternalThreadPath(null);
+    if (controlledThreadPath === void 0) {
+      return;
     }
-  }, [controlledPath]);
+    setInternalThreadPath(controlledThreadPath);
+  }, [controlledThreadPath]);
   useEffect(() => {
+    if (controlledThreadPath !== void 0) {
+      return;
+    }
     activeOperationRef.current += 1;
     setInternalThreadPath(null);
     setNewThreadDraft("");
@@ -249,7 +155,7 @@ function Chat({
     setNewThreadError(null);
     setCreatingNewThread(false);
     setWaitingForAgent(false);
-  }, [agentName, managesOwnThread, room]);
+  }, [agentName, controlledThreadPath, room]);
   const selectNewThreadAttachments = useCallback((files) => {
     const nextAttachments = files.map((file) => new MeshagentFileUpload(
       room,
@@ -265,15 +171,6 @@ function Chat({
     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;
@@ -306,7 +203,8 @@ function Chat({
         activeOperationRef
       });
       ensureOperationActive(operationId, activeOperationRef);
-      const response = await room.agents.invokeTool({
+      const response = await room.invoke({
+        participantId: targetAgent.id,
         toolkit,
         tool,
         arguments: {
@@ -320,16 +218,18 @@ function Chat({
       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);
+      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;
@@ -340,34 +240,19 @@ function Chat({
     }
   }, [
     agentName,
-    controlledPath,
+    controlledThreadPath,
     creatingNewThread,
     newThreadAttachments,
     newThreadDraft,
+    onThreadPathChanged,
     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();
+    const knownAgentName = agentName.trim();
     if (knownAgentName) {
       return displayParticipantName(knownAgentName);
     }
@@ -375,6 +260,9 @@ 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__ */ jsx(
     ChatInput,
     {
@@ -388,24 +276,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__ */ jsxs("div", { className: "h-full flex 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: [
+    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
@@ -422,5 +297,5 @@ function Chat({
   ] });
 }
 export {
-  Chat
+  NewChatThread
 };

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FileUp, LoaderCircle, TriangleAlert, X } from "lucide-react";
-import { Progress } from "./components/ui/progress";
+import { Progress } from "../components/ui/progress";
 import { UploadStatus } from "./file-attachment";
-import { cn } from "./lib/utils";
+import { cn } from "../lib/utils";
 function measureUploadProgress(attachment) {
   if (attachment.size <= 0) {
     return attachment.status === UploadStatus.Completed ? 100 : 0;

package/dist/esm/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;