@meshagent/meshagent-tailwind 0.39.5 → 0.39.7

package/dist/esm/ChatBotView.js

@@ -360,6 +360,8 @@ function ChatBotView({
   centerComposer = false,
   emptyStateTitle = "No threads yet",
   emptyStateDescription = "Start a new conversation to see it here.",
+  startNewThreadTitle = "Start a new thread",
+  startNewThreadDescription = "Connect with this agent and your team.",
   selectedThreadPath,
   onSelectedThreadPathChanged,
   onSelectedThreadResolved,
@@ -508,8 +510,6 @@ function ChatBotView({
       onSelectedThreadResolved: emitResolvedThread,
       newThreadResetVersion,
       centerComposer,
-      emptyStateTitle,
-      emptyStateDescription,
       builder: (threadPath) => /* @__PURE__ */ jsx(
         Chat,
         {
@@ -520,8 +520,8 @@ function ChatBotView({
           toolkit,
           tool,
           centerComposer,
-          emptyStateTitle,
-          emptyStateDescription
+          emptyStateTitle: startNewThreadTitle,
+          emptyStateDescription: startNewThreadDescription
         }
       )
     }

package/dist/esm/ChatInput.js

@@ -4,11 +4,12 @@ import { ArrowUp, LoaderCircle, X } from "lucide-react";
 import { v4 as uuidV4 } from "uuid";
 import { ChatMessage } from "./chat-message";
 import { Button } from "./components/ui/button";
-import { Textarea } from "./components/ui/textarea";
 import { FileUploader } from "./FileUploader";
 import { UploadPill } from "./UploadPill";
 import { UploadStatus } from "./file-attachment";
 import { cn } from "./lib/utils";
+const MIN_TEXTAREA_HEIGHT = 20;
+const MAX_TEXTAREA_HEIGHT = 160;
 function useAttachmentStatusVersion(attachments) {
   const [version, setVersion] = useState(0);
   useEffect(() => {
@@ -33,10 +34,13 @@ function useAutoResizingTextarea(textareaRef, value) {
       return;
     }
     if (value === "") {
-      element.style.height = "20px";
+      element.style.height = `${MIN_TEXTAREA_HEIGHT}px`;
     } else {
       element.style.height = "0px";
-      element.style.height = `${Math.max(20, Math.min(element.scrollHeight, 160))}px`;
+      element.style.height = `${Math.max(
+        MIN_TEXTAREA_HEIGHT,
+        Math.min(element.scrollHeight, MAX_TEXTAREA_HEIGHT)
+      )}px`;
     }
   }, [textareaRef, value]);
 }
@@ -162,12 +166,17 @@ function ChatInput({
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(FileUploader, { onFilesSelected, disabled }),
       /* @__PURE__ */ jsx(
-        Textarea,
+        "textarea",
         {
           ref: textareaRef,
           autoFocus,
           placeholder,
-          className: "min-h-5 max-h-40 flex-1 resize-none border-0 bg-transparent p-0 leading-5 shadow-none focus-visible:border-transparent focus-visible:ring-0",
+          className: cn(
+            "min-h-5 max-h-40",
+            "flex-1 resize-none border-0 bg-transparent p-0 leading-5",
+            "shadow-none outline-none ring-0 focus:ring-0 focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+            "md:text-sm"
+          ),
           readOnly: disabled,
           value,
           onChange: handleChange,

package/dist/esm/ChatThread.js

@@ -225,7 +225,47 @@ function MarkdownBlock({ text }) {
             children
           }
         ),
-        p: ({ children, ...props }) => /* @__PURE__ */ jsx("p", { ...props, className: "mb-2 last:mb-0", children })
+        p: ({ children, ...props }) => /* @__PURE__ */ jsx("p", { ...props, className: "mb-2 last:mb-0", children }),
+        table: ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-4 w-full overflow-x-auto", children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            ...props,
+            className: "w-full border-collapse border-spacing-0",
+            children
+          }
+        ) }),
+        th: ({ children, ...props }) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            ...props,
+            className: "border bg-muted/50 px-3 py-2 text-left text-sm font-semibold",
+            children
+          }
+        ),
+        td: ({ children, ...props }) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            ...props,
+            className: "border px-3 py-2 align-top text-sm bg-background",
+            children
+          }
+        ),
+        ul: ({ children, ...props }) => /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ...props,
+            className: "mb-2 ml-6 list-disc last:mb-0",
+            children
+          }
+        ),
+        ol: ({ children, ...props }) => /* @__PURE__ */ jsx(
+          "ol",
+          {
+            ...props,
+            className: "mb-2 ml-6 list-decimal last:mb-0",
+            children
+          }
+        )
       },
       children: text
     }

package/dist/esm/chat-hooks.d.ts

@@ -9,11 +9,14 @@ export interface UseChatThreadProps {
     includeLocalParticipant?: boolean;
     initialMessage?: ChatMessage;
     agentName?: string;
+    useAgentMessages?: boolean;
+    messageType?: string;
+    turnId?: string;
 }
 export interface UseChatThreadResult {
     document: MeshDocument | null;
     messages: Element[];
-    sendMessage: (message: ChatMessage) => void;
+    sendMessage: (message: ChatMessage) => Promise<void>;
     selectAttachments: (files: File[]) => void;
     attachments: FileUpload[];
     setAttachments: (attachments: FileUpload[]) => void;
@@ -70,5 +73,5 @@ export interface UseThreadStatusProps {
     previous?: ChatThreadStatusState;
 }
 export declare function formatThreadStatusText(text: string, startedAt?: Date | null): string;
-export declare function useChatThread({ room, path, participants, participantNames, initialMessage, includeLocalParticipant, agentName, }: UseChatThreadProps): UseChatThreadResult;
+export declare function useChatThread({ room, path, participants, participantNames, initialMessage, includeLocalParticipant, agentName, useAgentMessages, messageType, turnId, }: UseChatThreadProps): UseChatThreadResult;
 export declare function useThreadStatus({ room, path, agentName }: UseThreadStatusProps): ThreadStatus;

package/dist/esm/chat-hooks.js

@@ -4,7 +4,15 @@ import {
 } from "@meshagent/meshagent";
 import { subscribe, useDocumentChanged, useRoomParticipants } from "@meshagent/meshagent-react";
 import { MeshagentFileUpload, fileToAsyncIterable } from "./file-attachment";
+const agentRoomMessageType = "agent-message";
+const agentTurnStartType = "meshagent.agent.turn.start";
 const agentTurnSteerType = "meshagent.agent.turn.steer";
+class ChatSendCancelledError extends Error {
+  constructor() {
+    super("chat send cancelled");
+    this.name = "ChatSendCancelledError";
+  }
+}
 class PendingAgentMessage {
   messageId;
   messageType;
@@ -177,6 +185,175 @@ function getOnlineParticipants(roomParticipants, participantNames) {
 function supportsAgentMessages(participant) {
   return participant.getAttribute("supports_agent_messages") === true;
 }
+function uniqueRemoteParticipantsById(participants) {
+  const seenParticipantIds = /* @__PURE__ */ new Set();
+  const uniqueParticipants = [];
+  for (const participant of participants) {
+    if (seenParticipantIds.has(participant.id)) {
+      continue;
+    }
+    seenParticipantIds.add(participant.id);
+    uniqueParticipants.push(participant);
+  }
+  return uniqueParticipants;
+}
+function getAgentParticipants({
+  room,
+  document,
+  participantName
+}) {
+  const normalizedParticipantName = participantName?.trim();
+  return uniqueRemoteParticipantsById(
+    getOnlineParticipants(room.messaging.remoteParticipants, getDocumentParticipantNames(document)).filter((participant) => {
+      if (normalizedParticipantName && getParticipantName(participant) !== normalizedParticipantName) {
+        return false;
+      }
+      return supportsAgentMessages(participant);
+    })
+  );
+}
+function matchingRecipients({
+  room,
+  document,
+  useAgentMessages,
+  participantName
+}) {
+  const normalizedParticipantName = participantName?.trim();
+  if (useAgentMessages) {
+    return getAgentParticipants({ room, document, participantName: normalizedParticipantName });
+  }
+  return uniqueRemoteParticipantsById(
+    getOnlineParticipants(room.messaging.remoteParticipants, getDocumentParticipantNames(document)).filter((participant) => {
+      if (!normalizedParticipantName) {
+        return true;
+      }
+      return getParticipantName(participant) === normalizedParticipantName;
+    })
+  );
+}
+function normalizeAgentAttachmentUrl(path) {
+  const trimmedPath = path.trim();
+  if (trimmedPath === "") {
+    return null;
+  }
+  try {
+    const url = new URL(trimmedPath);
+    if (url.protocol !== "") {
+      return trimmedPath;
+    }
+  } catch {
+  }
+  const roomPath = trimmedPath.startsWith("/") ? trimmedPath.slice(1) : trimmedPath;
+  return roomPath === "" ? null : `room:///${roomPath}`;
+}
+function agentInputContentFromMessage(message) {
+  const content = [];
+  if (message.text.trim() !== "") {
+    content.push({ type: "text", text: message.text });
+  }
+  for (const attachmentPath of message.attachments) {
+    const normalizedUrl = normalizeAgentAttachmentUrl(attachmentPath);
+    if (normalizedUrl !== null) {
+      content.push({ type: "file", url: normalizedUrl });
+    }
+  }
+  return content;
+}
+async function sendMessageToParticipant({
+  room,
+  participant,
+  path,
+  message,
+  messageType = "chat",
+  useAgentMessages = false,
+  turnId,
+  store = false
+}) {
+  if (message.text.trim() === "" && message.attachments.length === 0) {
+    return;
+  }
+  if (useAgentMessages) {
+    const isSteer = messageType === "steer";
+    const payload = {
+      type: isSteer ? agentTurnSteerType : agentTurnStartType,
+      thread_id: path,
+      message_id: message.id,
+      content: agentInputContentFromMessage(message)
+    };
+    if (isSteer && turnId?.trim()) {
+      payload.turn_id = turnId.trim();
+    }
+    await room.messaging.sendMessage({
+      to: participant,
+      type: agentRoomMessageType,
+      message: { payload }
+    });
+    return;
+  }
+  await room.messaging.sendMessage({
+    to: participant,
+    type: messageType,
+    message: {
+      path,
+      text: message.text,
+      attachments: message.attachments.map((attachmentPath) => ({ path: attachmentPath })),
+      store
+    }
+  });
+}
+function waitForRecipients({
+  room,
+  document,
+  messageId,
+  useAgentMessages,
+  participantName,
+  pendingRecipientWaits
+}) {
+  pendingRecipientWaits.get(messageId)?.();
+  return new Promise((resolve, reject) => {
+    let finished = false;
+    const eventNames = [
+      "participant_added",
+      "participant_removed",
+      "participant_attributes_updated",
+      "messaging_enabled"
+    ];
+    const finish = () => {
+      if (finished) {
+        return;
+      }
+      finished = true;
+      for (const eventName of eventNames) {
+        room.messaging.off(eventName, listener);
+      }
+      if (pendingRecipientWaits.get(messageId) === cancel) {
+        pendingRecipientWaits.delete(messageId);
+      }
+    };
+    const cancel = () => {
+      finish();
+      reject(new ChatSendCancelledError());
+    };
+    const listener = () => {
+      const recipients = matchingRecipients({
+        room,
+        document,
+        useAgentMessages,
+        participantName
+      });
+      if (recipients.length === 0) {
+        return;
+      }
+      finish();
+      resolve(recipients);
+    };
+    pendingRecipientWaits.set(messageId, cancel);
+    for (const eventName of eventNames) {
+      room.messaging.on(eventName, listener);
+    }
+    listener();
+  });
+}
 function threadStatusAttributeCandidates(path, prefix) {
   if (path.startsWith("/")) {
     return [`${prefix}.${path}`, `${prefix}.${path.slice(1)}`];
@@ -362,13 +539,17 @@ function useChatThread({
   participantNames,
   initialMessage,
   includeLocalParticipant,
-  agentName
+  agentName,
+  useAgentMessages = false,
+  messageType = "chat",
+  turnId
 }) {
   const [document, setDocument] = useState(null);
   const [messages, setMessages] = useState(() => document ? mapThreadElements(document) : []);
   const [attachments, setAttachments] = useState([]);
   const [documentParticipantNames, setDocumentParticipantNames] = useState(() => document ? getDocumentParticipantNames(document) : []);
   const initialMessageSentRef = useRef(false);
+  const pendingRecipientWaitsRef = useRef(/* @__PURE__ */ new Map());
   const syncDocumentState = useCallback((nextDocument) => {
     const nextMessages = mapThreadElements(nextDocument);
     const nextParticipantNames = getDocumentParticipantNames(nextDocument);
@@ -417,6 +598,14 @@ function useChatThread({
       }
     };
   }, [path, room, syncDocumentState]);
+  useEffect(() => {
+    return () => {
+      for (const cancel of pendingRecipientWaitsRef.current.values()) {
+        cancel();
+      }
+      pendingRecipientWaitsRef.current.clear();
+    };
+  }, []);
   useEffect(() => {
     if (!document || !room.localParticipant) {
       return;
@@ -451,38 +640,68 @@ function useChatThread({
     () => getOnlineParticipants(roomParticipants, documentParticipantNames),
     [roomParticipants, documentParticipantNames]
   );
-  const sendMessage = useCallback((message) => {
+  const sendMessage = useCallback(async (message) => {
+    if (message.text.trim() === "" && message.attachments.length === 0) {
+      return;
+    }
+    const normalizedParticipantName = agentName?.trim();
+    const storeLocally = !normalizedParticipantName && !useAgentMessages;
     const children = document?.root.getChildren() ?? [];
-    const thread = children.find((child) => child.tagName === "messages");
-    if (!thread) {
+    const messagesElement = children.find((child) => child.tagName === "messages");
+    if (!document || !messagesElement) {
       return;
     }
-    const authorName = getParticipantName(room.localParticipant);
-    const messageElement = thread.createChildElement("message", {
-      id: message.id,
-      text: message.text,
-      created_at: (/* @__PURE__ */ new Date()).toISOString(),
-      author_name: authorName,
-      author_ref: null
-    });
-    for (const attachmentPath of message.attachments) {
-      messageElement.createChildElement("file", { path: attachmentPath });
+    if (storeLocally) {
+      const authorName = getParticipantName(room.localParticipant);
+      const messageElement = messagesElement.createChildElement("message", {
+        id: message.id,
+        text: message.text,
+        created_at: (/* @__PURE__ */ new Date()).toISOString(),
+        author_name: authorName,
+        author_ref: null
+      });
+      for (const attachmentPath of message.attachments) {
+        messageElement.createChildElement("file", { path: attachmentPath });
+      }
     }
-    for (const participant of onlineParticipants) {
-      if (!matchesParticipantName(participant, agentName)) {
-        continue;
+    let recipients = matchingRecipients({
+      room,
+      document,
+      useAgentMessages,
+      participantName: normalizedParticipantName
+    });
+    if (recipients.length === 0) {
+      const shouldWaitForRecipient = useAgentMessages || Boolean(normalizedParticipantName);
+      if (!shouldWaitForRecipient) {
+        throw new Error(`no matching recipients are available for '${path}'`);
       }
-      room.messaging.sendMessage({
-        to: participant,
-        type: "chat",
-        message: {
-          path,
-          text: message.text,
-          attachments: message.attachments.map((attachmentPath) => ({ path: attachmentPath }))
+      try {
+        recipients = await waitForRecipients({
+          room,
+          document,
+          messageId: message.id,
+          useAgentMessages,
+          participantName: normalizedParticipantName,
+          pendingRecipientWaits: pendingRecipientWaitsRef.current
+        });
+      } catch (error) {
+        if (error instanceof ChatSendCancelledError) {
+          return;
         }
-      });
+        throw error;
+      }
     }
-  }, [agentName, document, onlineParticipants, path, room]);
+    await Promise.all(recipients.map((participant) => sendMessageToParticipant({
+      room,
+      participant,
+      path,
+      message,
+      messageType,
+      useAgentMessages,
+      turnId,
+      store: Boolean(normalizedParticipantName) && getParticipantName(participant) === normalizedParticipantName
+    })));
+  }, [agentName, document, messageType, path, room, turnId, useAgentMessages]);
   useEffect(() => {
     if (!document || !initialMessage || initialMessageSentRef.current) {
       return;

package/dist/esm/components/pane-example.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
+import { Button } from "./ui/button";
 import {
   Sheet,
   SheetContent,
@@ -9,8 +9,8 @@ import {
   SheetTitle,
   SheetDescription,
   SheetFooter
-} from "@/components/ui/sheet";
-import { registerPane, closePane } from "@/lib/pane-service";
+} from "./ui/sheet";
+import { registerPane, closePane } from "../lib/pane-service";
 function PaneExample() {
   const [open, setOpen] = useState(false);
   useEffect(() => {

package/dist/esm/components/ui/sonner.d.ts

@@ -1,3 +1,3 @@
-import { ToasterProps } from "sonner";
+import type { ToasterProps } from "sonner";
 declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
 export { Toaster };

package/dist/esm/index.d.ts

@@ -8,3 +8,4 @@ export * from './chat-message';
 export * from './conversation-descriptor';
 export * from './file-attachment';
 export * from './multi-thread-view';
+export * from './chat-hooks';

package/dist/esm/index.js

@@ -8,3 +8,4 @@ export * from "./chat-message";
 export * from "./conversation-descriptor";
 export * from "./file-attachment";
 export * from "./multi-thread-view";
+export * from "./chat-hooks";

package/dist/esm/multi-thread-view.js

@@ -16,8 +16,8 @@ function MultiThreadView({
   onSelectedThreadResolved,
   newThreadResetVersion = 0,
   centerComposer = true,
-  emptyStateTitle,
-  emptyStateDescription
+  emptyStateTitle = "Start a new thread",
+  emptyStateDescription = "Connect with this agent and your team"
 }) {
   const controlledSelectedThreadPath = selectedThreadPath !== void 0 ? normalizeSelectedThreadPath(selectedThreadPath) : void 0;
   const [internalSelectedThreadPath, setInternalSelectedThreadPath] = useState(() => controlledSelectedThreadPath ?? null);
@@ -49,8 +49,6 @@ function MultiThreadView({
       toolkit,
       tool,
       centerComposer,
-      emptyStateTitle,
-      emptyStateDescription,
       onThreadResolved: (path, displayName) => {
         const normalizedPath = normalizeSelectedThreadPath(path);
         if (controlledSelectedThreadPath === void 0) {
@@ -58,7 +56,9 @@ function MultiThreadView({
         }
         onSelectedThreadPathChanged?.(normalizedPath);
         onSelectedThreadResolved?.(normalizedPath, displayName);
-      }
+      },
+      emptyStateTitle,
+      emptyStateDescription
     },
     composerKey
   );