@meshagent/meshagent-tailwind 0.41.4 → 0.41.6

package/dist/esm/chat/chat-thread.js

@@ -225,7 +225,7 @@ 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 overflow-hidden max-w-full", children }),
         table: ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-4 w-full overflow-x-auto", children: /* @__PURE__ */ jsx(
           "table",
           {
@@ -265,6 +265,17 @@ function MarkdownBlock({ text }) {
             className: "mb-2 ml-6 list-decimal last:mb-0",
             children
           }
+        ),
+        a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...props,
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-primary underline overflow-ellipsis inline-block max-w-full overflow-x-hidden",
+            children
+          }
         )
       },
       children: text
@@ -360,10 +371,7 @@ function ThreadAttachment({ room, attachment, onImageSettled }) {
   }
   return /* @__PURE__ */ jsx(FileAttachment, { room, path });
 }
-function ChatBubble({
-  text,
-  mine
-}) {
+function ChatBubble({ text, mine }) {
   if (text.trim() === "") {
     return null;
   }
@@ -371,7 +379,7 @@ function ChatBubble({
     "div",
     {
       className: cn(
-        "w-fit max-w-[85%] rounded-md px-4 py-3 text-sm leading-6 shadow-xs sm:max-w-2xl",
+        "w-fit max-w-[85%] rounded-md px-4 py-3 text-sm leading-6 shadow-xs sm:w-2xl",
         mine ? "bg-secondary/85 text-foreground" : "bg-muted/70 text-foreground"
       ),
       children: /* @__PURE__ */ jsx(MarkdownBlock, { text })
@@ -440,10 +448,7 @@ function defaultEventHeadline(kind, state, eventName) {
   }
   return eventName.replace(/[._]/gu, " ");
 }
-function EventRow({
-  room,
-  message
-}) {
+function EventRow({ room, message }) {
   const method = getTrimmedStringAttribute(message, "method") || "agent/event";
   const eventName = getTrimmedStringAttribute(message, "name") || getTrimmedStringAttribute(message, "event_type") || method.replace(/\//gu, ".");
   const kind = getTrimmedStringAttribute(message, "kind").toLowerCase();

package/dist/esm/chat/dataset-chat-thread.d.ts

@@ -1,8 +1,11 @@
 import type { ReactElement } from "react";
 import type { RoomClient } from "@meshagent/meshagent";
+import type { BaseChatClient } from "@meshagent/meshagent-agents";
 export interface DatasetChatThreadProps {
     room: RoomClient;
     path: string;
+    chatClient?: BaseChatClient;
+    disposeChatClient?: boolean;
     agentName?: string;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
@@ -10,4 +13,4 @@ export interface DatasetChatThreadProps {
     initialShowCompletedToolCalls?: boolean;
     openFile?: (path: string) => void | Promise<void>;
 }
-export declare function DatasetChatThread({ room, path, agentName, emptyStateTitle, emptyStateDescription, inputPlaceholder, initialShowCompletedToolCalls, openFile, }: DatasetChatThreadProps): ReactElement;
+export declare function DatasetChatThread({ room, path, chatClient, disposeChatClient, agentName, emptyStateTitle, emptyStateDescription, inputPlaceholder, initialShowCompletedToolCalls, openFile, }: DatasetChatThreadProps): ReactElement;

package/dist/esm/chat/dataset-chat-thread.js

@@ -3,10 +3,33 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   DatasetJson,
   DatasetStruct,
-  RoomMessageEvent,
   RoomServerException
 } from "@meshagent/meshagent";
-import { subscribe } from "@meshagent/meshagent-react";
+import {
+  MessagingChatClient,
+  agentFileContentDeltaType,
+  agentFileContentEndedType,
+  agentFileContentStartedType,
+  agentImageGenerationCompletedType,
+  agentImageGenerationFailedType,
+  agentImageGenerationPartialType,
+  agentImageGenerationStartedType,
+  agentReasoningContentDeltaType,
+  agentReasoningContentEndedType,
+  agentReasoningContentStartedType,
+  agentTextContentDeltaType,
+  agentTextContentEndedType,
+  agentToolCallEndedType,
+  agentToolCallInProgressType,
+  agentToolCallPendingType,
+  agentToolCallStartedType,
+  agentTurnStartAcceptedType,
+  agentTurnStartRejectedType,
+  agentTurnStartedType,
+  agentTurnSteerAcceptedType,
+  agentTurnSteerRejectedType,
+  agentTurnSteeredType
+} from "@meshagent/meshagent-agents";
 import { Download, FileText, ImageOff } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
@@ -17,37 +40,9 @@ import { ChatTypingIndicator } from "./chat-typing-indicator";
 import { Button } from "../components/ui/button";
 import { Spinner } from "../components/ui/spinner";
 import { MeshagentFileUpload, fileToAsyncIterable } from "./file-attachment";
-import { useThreadStatus } from "./chat-hooks";
+import { PendingAgentMessage, useThreadStatus } from "./chat-hooks";
 import { cn } from "../lib/utils";
 import { timeAgo } from "./chat-thread";
-const agentRoomMessageType = "agent-message";
-const agentTurnStartType = "meshagent.agent.turn.start";
-const agentTurnSteerType = "meshagent.agent.turn.steer";
-const agentTurnInterruptType = "meshagent.agent.turn.interrupt";
-const agentThreadOpenType = "meshagent.agent.thread.open";
-const agentThreadCloseType = "meshagent.agent.thread.close";
-const agentTurnStartAcceptedType = "meshagent.agent.turn.start.accepted";
-const agentTurnStartRejectedType = "meshagent.agent.turn.start.rejected";
-const agentTurnSteerAcceptedType = "meshagent.agent.turn.steer.accepted";
-const agentTurnSteerRejectedType = "meshagent.agent.turn.steer.rejected";
-const agentTurnStartedType = "meshagent.agent.turn.started";
-const agentTurnSteeredType = "meshagent.agent.turn.steered";
-const agentTextContentDeltaType = "meshagent.agent.text_content.delta";
-const agentTextContentEndedType = "meshagent.agent.text_content.ended";
-const agentReasoningContentStartedType = "meshagent.agent.reasoning_content.started";
-const agentReasoningContentDeltaType = "meshagent.agent.reasoning_content.delta";
-const agentReasoningContentEndedType = "meshagent.agent.reasoning_content.ended";
-const agentFileContentStartedType = "meshagent.agent.file_content.started";
-const agentFileContentDeltaType = "meshagent.agent.file_content.delta";
-const agentFileContentEndedType = "meshagent.agent.file_content.ended";
-const agentToolCallPendingType = "meshagent.agent.tool_call.pending";
-const agentToolCallInProgressType = "meshagent.agent.tool_call.in_progress";
-const agentToolCallStartedType = "meshagent.agent.tool_call.started";
-const agentToolCallEndedType = "meshagent.agent.tool_call.ended";
-const agentImageGenerationStartedType = "meshagent.agent.image_generation.started";
-const agentImageGenerationPartialType = "meshagent.agent.image_generation.partial";
-const agentImageGenerationCompletedType = "meshagent.agent.image_generation.completed";
-const agentImageGenerationFailedType = "meshagent.agent.image_generation.failed";
 const stickyBottomThresholdPx = 24;
 const maxPreviewEdgePx = 312.5;
 function createDatasetThreadModel() {
@@ -991,6 +986,26 @@ function describeError(error) {
   }
   return String(error);
 }
+function pendingAgentMessageFromInput(pending) {
+  const payload = pending.payload.toJson();
+  const parsed = PendingAgentMessage.fromQueueJson({
+    ...payload,
+    message_type: pending.messageType,
+    created_at: pending.createdAt.toISOString()
+  });
+  return new PendingAgentMessage({
+    messageId: parsed.messageId,
+    messageType: parsed.messageType,
+    threadPath: parsed.threadPath,
+    text: parsed.text,
+    attachments: parsed.attachments,
+    senderName: parsed.senderName,
+    createdAt: parsed.createdAt,
+    matchByContentOnly: parsed.matchByContentOnly,
+    awaitingAcceptance: pending.awaitingAcceptance,
+    awaitingOnline: pending.awaitingOnline
+  });
+}
 function MarkdownBlock({ text }) {
   return /* @__PURE__ */ jsx(
     ReactMarkdown,
@@ -1407,24 +1422,11 @@ function EmptyState({
 function ErrorBanner({ 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-4 py-3 text-sm text-destructive", children: message });
 }
-function sendThreadSubscriptionMessage({
-  room,
-  agent,
-  messageType,
-  path
-}) {
-  void room.messaging.sendMessage({
-    to: agent,
-    type: agentRoomMessageType,
-    ignoreOffline: true,
-    message: {
-      payload: { type: messageType, thread_id: path }
-    }
-  }).catch(() => void 0);
-}
 function DatasetChatThread({
   room,
   path,
+  chatClient,
+  disposeChatClient = false,
   agentName,
   emptyStateTitle,
   emptyStateDescription,
@@ -1438,14 +1440,35 @@ function DatasetChatThread({
   const [sendError, setSendError] = useState(null);
   const [showCompletedToolCalls, setShowCompletedToolCalls] = useState(initialShowCompletedToolCalls);
   const status = useThreadStatus({ room, path, agentName });
-  const agentParticipant = findAgentParticipant(room, agentName);
   const localParticipantName = getParticipantName(room.localParticipant);
   const scrollContainerRef = useRef(null);
   const contentRef = useRef(null);
   const stickToBottomRef = useRef(true);
+  const threadSessionRef = useRef(null);
+  const threadSessionCursorRef = useRef(0);
+  const [threadSessionVersion, setThreadSessionVersion] = useState(0);
+  const ownsChatClient = chatClient == null;
+  const activeChatClient = useMemo(
+    () => chatClient ?? new MessagingChatClient({ room, agentName }),
+    [agentName, chatClient, room]
+  );
+  const agentParticipant = activeChatClient.agentParticipant() ?? findAgentParticipant(room, agentName);
   const bumpModelVersion = useCallback(() => {
     setModelVersion((current) => current + 1);
   }, []);
+  useEffect(() => {
+    void activeChatClient.start();
+    const handleChange = () => {
+      setThreadSessionVersion((current) => current + 1);
+    };
+    activeChatClient.addListener(handleChange);
+    return () => {
+      activeChatClient.removeListener(handleChange);
+      if (ownsChatClient || disposeChatClient) {
+        void activeChatClient.stop();
+      }
+    };
+  }, [activeChatClient, disposeChatClient, ownsChatClient]);
   useEffect(() => {
     const model2 = createDatasetThreadModel();
     modelRef.current = model2;
@@ -1523,46 +1546,41 @@ function DatasetChatThread({
     };
   }, [bumpModelVersion, path, room]);
   useEffect(() => {
-    const subscription = subscribe(room.listen(), {
-      next: (event) => {
-        if (!(event instanceof RoomMessageEvent)) {
-          return;
-        }
-        if (event.message.type !== agentRoomMessageType) {
-          return;
-        }
-        const payload = event.message.message.payload;
-        if (!isRecord(payload)) {
-          return;
-        }
-        if (applyAgentMessagePayload(modelRef.current, payload, path)) {
-          bumpModelVersion();
+    if (isTmpThreadPath(path)) {
+      threadSessionRef.current = null;
+      threadSessionCursorRef.current = 0;
+      setThreadSessionVersion((current) => current + 1);
+      return;
+    }
+    const session = activeChatClient.openThread(path);
+    threadSessionRef.current = session;
+    threadSessionCursorRef.current = 0;
+    const drainSessionMessages = () => {
+      let changed = false;
+      const messages = session.messages;
+      while (threadSessionCursorRef.current < messages.length) {
+        const event = messages[threadSessionCursorRef.current];
+        threadSessionCursorRef.current += 1;
+        if (applyAgentMessagePayload(modelRef.current, event.payload, path)) {
+          changed = true;
         }
       }
-    });
-    return () => {
-      subscription.unsubscribe();
+      if (changed) {
+        bumpModelVersion();
+      }
+      setThreadSessionVersion((current) => current + 1);
     };
-  }, [bumpModelVersion, path, room]);
-  useEffect(() => {
-    if (!agentParticipant) {
-      return;
-    }
-    sendThreadSubscriptionMessage({
-      room,
-      agent: agentParticipant,
-      messageType: agentThreadOpenType,
-      path
-    });
+    session.addListener(drainSessionMessages);
+    drainSessionMessages();
     return () => {
-      sendThreadSubscriptionMessage({
-        room,
-        agent: agentParticipant,
-        messageType: agentThreadCloseType,
-        path
-      });
+      session.removeListener(drainSessionMessages);
+      if (threadSessionRef.current === session) {
+        threadSessionRef.current = null;
+        threadSessionCursorRef.current = 0;
+      }
+      void session.close().catch(() => void 0);
     };
-  }, [agentParticipant, path, room]);
+  }, [activeChatClient, bumpModelVersion, path]);
   const allMessages = useMemo(() => {
     const model2 = modelRef.current;
     const mergedRowsByItemId = /* @__PURE__ */ new Map();
@@ -1587,29 +1605,24 @@ function DatasetChatThread({
     for (const pending of status.pendingMessages) {
       combined.set(pending.messageId, pending);
     }
+    for (const pending of threadSessionRef.current?.pendingInputs ?? []) {
+      combined.set(pending.messageId, pendingAgentMessageFromInput(pending));
+    }
     const values = Array.from(combined.values()).filter((pending) => !allMessages.some((message) => datasetThreadMessageMatchesPendingAgentMessage(message, pending)));
     return [
       ...values.filter((message) => !message.awaitingAcceptance),
       ...values.filter((message) => message.awaitingAcceptance)
     ];
-  }, [allMessages, status.pendingMessages]);
-  const canInterruptActiveTurn = status.supportsAgentMessages && status.turnId != null;
+  }, [allMessages, status.pendingMessages, threadSessionVersion]);
+  const canInterruptActiveTurn = status.turnId != null && (status.supportsAgentMessages || agentParticipant != null || chatClient != null);
   const cancelTurn = useCallback(async () => {
-    if (!status.turnId?.trim() || !agentParticipant) {
+    const turnId = status.turnId?.trim();
+    const session = threadSessionRef.current;
+    if (!turnId || session == null) {
       return;
     }
-    await room.messaging.sendMessage({
-      to: agentParticipant,
-      type: agentRoomMessageType,
-      message: {
-        payload: {
-          type: agentTurnInterruptType,
-          thread_id: path,
-          turn_id: status.turnId
-        }
-      }
-    });
-  }, [agentParticipant, path, room, status.turnId]);
+    await session.interruptTurn(turnId);
+  }, [status.turnId, threadSessionVersion]);
   const selectAttachments = useCallback((files) => {
     const nextAttachments = files.map((file) => new MeshagentFileUpload(
       room,
@@ -1623,56 +1636,39 @@ function DatasetChatThread({
     if (message.text.trim() === "" && message.attachments.length === 0) {
       return;
     }
-    if (!agentParticipant) {
+    if (!agentParticipant && chatClient == null) {
       setSendError("This thread requires an online agent that supports agent messages.");
       return;
     }
+    const session = threadSessionRef.current;
+    if (session == null) {
+      setSendError("No thread session is open.");
+      return;
+    }
     const isSteer = status.mode === "steerable" && status.turnId != null;
     const normalizedAttachments = message.attachments.map(normalizeAgentAttachmentUrl).filter((attachment) => attachment !== null);
     const senderName = localParticipantName.trim() || void 0;
-    upsertAgentRow({
-      model: modelRef.current,
-      itemId: message.id,
-      turnId: null,
-      timestamp: /* @__PURE__ */ new Date(),
-      data: {
-        kind: "message",
-        role: "user",
-        text: message.text,
-        sender_name: senderName,
-        attachments: normalizedAttachments
-      }
-    });
-    bumpModelVersion();
     try {
-      const payload = {
-        type: isSteer ? agentTurnSteerType : agentTurnStartType,
-        thread_id: path,
-        message_id: message.id,
-        content: agentInputContent(message.text, message.attachments)
-      };
-      if (isSteer && status.turnId) {
-        payload.turn_id = status.turnId;
-      }
-      await room.messaging.sendMessage({
-        to: agentParticipant,
-        type: agentRoomMessageType,
-        message: { payload }
+      await session.sendText({
+        messageId: message.id,
+        text: message.text,
+        attachments: normalizedAttachments,
+        steer: isSteer,
+        turnId: status.turnId,
+        senderName
       });
       setSendError(null);
+      setThreadSessionVersion((current) => current + 1);
     } catch (error) {
-      modelRef.current.agentRowsByItemId.delete(message.id);
-      bumpModelVersion();
       setSendError(describeError(error));
     }
   }, [
     agentParticipant,
-    bumpModelVersion,
+    chatClient,
     localParticipantName,
-    path,
-    room,
     status.mode,
-    status.turnId
+    status.turnId,
+    threadSessionVersion
   ]);
   const hasWireBackedContent = modelRef.current.agentRowsByItemId.size > 0 || status.pendingMessages.length > 0 || pendingMessages.length > 0;
   const model = modelRef.current;
@@ -1804,8 +1800,8 @@ function DatasetChatThread({
         attachments,
         onFilesSelected: selectAttachments,
         setAttachments,
-        disabled: agentParticipant == null,
-        placeholder: inputPlaceholder ?? (agentParticipant ? "Type a message" : `Waiting for ${displayParticipantName(agentName ?? "agent")}`)
+        disabled: agentParticipant == null && chatClient == null,
+        placeholder: inputPlaceholder ?? (agentParticipant || chatClient ? "Type a message" : `Waiting for ${displayParticipantName(agentName ?? "agent")}`)
       }
     )
   ] });

package/dist/esm/chat/multi-thread-view.d.ts

@@ -1,8 +1,11 @@
 import type { ReactElement } from "react";
 import { RoomClient } from "@meshagent/meshagent";
+import type { BaseChatClient } from "@meshagent/meshagent-agents";
 export type MultiThreadContentBuilder = (threadPath: string) => ReactElement;
 export interface MultiThreadViewProps {
     room: RoomClient;
+    chatClient?: BaseChatClient;
+    disposeChatClient?: boolean;
     agentName: string;
     builder: MultiThreadContentBuilder;
     toolkit?: string;
@@ -15,4 +18,4 @@ export interface MultiThreadViewProps {
     emptyStateTitle?: string;
     emptyStateDescription?: string;
 }
-export declare function MultiThreadView({ room, agentName, builder, toolkit, tool, selectedThreadPath, onSelectedThreadPathChanged, onSelectedThreadResolved, newThreadResetVersion, centerComposer, emptyStateTitle, emptyStateDescription, }: MultiThreadViewProps): ReactElement;
+export declare function MultiThreadView({ room, chatClient, disposeChatClient, agentName, builder, toolkit, tool, selectedThreadPath, onSelectedThreadPathChanged, onSelectedThreadResolved, newThreadResetVersion, centerComposer, emptyStateTitle, emptyStateDescription, }: MultiThreadViewProps): ReactElement;

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

@@ -7,6 +7,8 @@ function normalizeSelectedThreadPath(path) {
 }
 function MultiThreadView({
   room,
+  chatClient,
+  disposeChatClient = false,
   agentName,
   builder,
   toolkit = "chat",
@@ -45,6 +47,8 @@ function MultiThreadView({
     NewChatThread,
     {
       room,
+      chatClient,
+      disposeChatClient,
       agentName,
       builder,
       toolkit,

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

@@ -1,8 +1,11 @@
 import type { ReactElement } from "react";
 import { RoomClient } from "@meshagent/meshagent";
+import type { BaseChatClient } from "@meshagent/meshagent-agents";
 export type NewChatThreadBuilder = (threadPath: string) => ReactElement;
 export interface NewChatThreadProps {
     room: RoomClient;
+    chatClient?: BaseChatClient;
+    disposeChatClient?: boolean;
     agentName: string;
     builder: NewChatThreadBuilder;
     toolkit?: string;
@@ -14,4 +17,4 @@ export interface NewChatThreadProps {
     emptyStateTitle?: string;
     emptyStateDescription?: string;
 }
-export declare function NewChatThread({ room, agentName, builder, toolkit, tool, selectedThreadPath, onThreadPathChanged, onThreadResolved, centerComposer, emptyStateTitle, emptyStateDescription, }: NewChatThreadProps): ReactElement;
+export declare function NewChatThread({ room, chatClient, disposeChatClient, agentName, builder, selectedThreadPath, onThreadPathChanged, onThreadResolved, centerComposer, emptyStateTitle, emptyStateDescription, }: NewChatThreadProps): ReactElement;