@meshagent/meshagent-tailwind 0.38.1 → 0.38.3

package/dist/esm/ChatTypingIndicator.d.ts

@@ -1,7 +1,14 @@
-import * as React from 'react';
-import { RoomClient } from '@meshagent/meshagent';
+import * as React from "react";
+import { RoomClient } from "@meshagent/meshagent";
 export interface ChatTypingIndicatorProps {
-    room: RoomClient | null;
-    path: string;
+    room?: RoomClient | null;
+    path?: string;
+    typing?: boolean;
+    thinking?: boolean;
+    statusText?: string | null;
+    startedAt?: Date | null;
+    onCancel?: () => void;
+    showCancelButton?: boolean;
+    cancelEnabled?: boolean;
 }
-export declare function ChatTypingIndicator({ room, path }: ChatTypingIndicatorProps): React.ReactElement | null;
+export declare function ChatTypingIndicator({ room, path, typing, thinking, statusText, startedAt, onCancel, showCancelButton, cancelEnabled, }: ChatTypingIndicatorProps): React.ReactElement | null;

package/dist/esm/ChatTypingIndicator.js

@@ -1,28 +1,109 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { useRoomIndicators } from "@meshagent/meshagent-react";
-function ChatTypingIndicator({ room, path }) {
-  const { typing, thinking } = useRoomIndicators({ room, path });
-  return typing || thinking ? /* @__PURE__ */ jsxs("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
-    [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+import { LoaderCircle, X } from "lucide-react";
+import { formatThreadStatusText } from "./chat-hooks";
+import { cn } from "./lib/utils";
+function useStatusLabel(text, startedAt) {
+  const normalizedText = text?.trim() ?? "";
+  const [tick, setTick] = React.useState(0);
+  React.useEffect(() => {
+    if (normalizedText === "" || !(startedAt instanceof Date) || Number.isNaN(startedAt.getTime())) {
+      return;
+    }
+    const timer = window.setInterval(() => {
+      setTick((current) => current + 1);
+    }, 1e3);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [normalizedText, startedAt]);
+  if (normalizedText === "") {
+    return null;
+  }
+  void tick;
+  return formatThreadStatusText(normalizedText, startedAt);
+}
+function ProcessingStatusRow({
+  text,
+  onCancel,
+  showCancelButton = false,
+  cancelEnabled = true
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-full border border-border/70 bg-background/90 px-3 py-2 shadow-sm backdrop-blur", children: [
+    showCancelButton ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: cancelEnabled ? onCancel : void 0,
+        disabled: !cancelEnabled,
+        title: cancelEnabled ? "Stop" : "Cancelling",
+        className: cn(
+          "relative inline-flex h-6 w-6 items-center justify-center rounded-full transition-opacity",
+          cancelEnabled ? "cursor-pointer" : "cursor-default opacity-55"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "absolute h-6 w-6 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-4 w-4 items-center justify-center rounded-full bg-foreground text-background", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: text })
+  ] });
+}
+function ChatTypingIndicator({
+  room = null,
+  path = "",
+  typing,
+  thinking,
+  statusText,
+  startedAt,
+  onCancel,
+  showCancelButton = false,
+  cancelEnabled = true
+}) {
+  const roomIndicators = useRoomIndicators({ room, path });
+  const resolvedTyping = typing ?? roomIndicators.typing;
+  const resolvedThinking = thinking ?? roomIndicators.thinking;
+  const resolvedStatusText = useStatusLabel(
+    statusText?.trim() ? statusText : resolvedThinking ? "Thinking" : null,
+    startedAt
+  );
+  if (resolvedStatusText) {
+    return /* @__PURE__ */ jsx(
+      ProcessingStatusRow,
+      {
+        text: resolvedStatusText,
+        onCancel,
+        showCancelButton,
+        cancelEnabled
+      }
+    );
+  }
+  if (!resolvedTyping) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full border border-border/70 bg-background/90 px-3 py-2 shadow-sm backdrop-blur", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-end gap-1", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: `inline-block w-2 h-2 bg-current rounded-full`,
+        className: "inline-block h-2 w-2 rounded-full bg-muted-foreground",
         style: {
-          animation: "typingBounce 0.6s ease-in-out infinite",
+          animation: "chatTypingBounce 0.6s ease-in-out infinite",
           animationDelay: `${index * 0.2}s`
         }
       },
       index
-    )),
+    )) }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Typing" }),
     /* @__PURE__ */ jsx("style", { children: `
-                @keyframes typingBounce {
-                    0%, 100% { transform: translateY(0); }
-                    50% { transform: translateY(-4px); }
+                @keyframes chatTypingBounce {
+                    0%, 100% { transform: translateY(0); opacity: 0.55; }
+                    50% { transform: translateY(-4px); opacity: 1; }
                 }
-                ` })
-  ] }) : null;
+            ` })
+  ] });
 }
-;
 export {
   ChatTypingIndicator
 };

package/dist/esm/FileUploader.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import * as React from "react";
 export interface FileUploaderProps {
     onFilesSelected?: (files: File[]) => void;
     accept?: string;
+    disabled?: boolean;
 }
-export declare function FileUploader({ onFilesSelected, accept }: FileUploaderProps): React.ReactElement;
+export declare function FileUploader({ onFilesSelected, accept, disabled, }: FileUploaderProps): React.ReactElement;

package/dist/esm/FileUploader.js

@@ -1,18 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { Plus } from "lucide-react";
+import * as React from "react";
+import { Paperclip } from "lucide-react";
 import { Button } from "./components/ui/button";
-function FileUploader({ onFilesSelected, accept = "" }) {
-  const inputRef = useRef(null);
-  const handleButtonClick = () => inputRef.current?.click();
-  const handleFileChange = (e) => {
-    if (!e.target.files) {
+function FileUploader({
+  onFilesSelected,
+  accept = "",
+  disabled = false
+}) {
+  const inputRef = React.useRef(null);
+  const handleButtonClick = React.useCallback(() => {
+    if (disabled) {
       return;
     }
-    const fileArray = Array.from(e.target.files);
-    onFilesSelected?.(fileArray);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    inputRef.current?.click();
+  }, [disabled]);
+  const handleFileChange = React.useCallback((event) => {
+    if (!event.target.files) {
+      return;
+    }
+    const files = Array.from(event.target.files);
+    onFilesSelected?.(files);
+    event.target.value = "";
+  }, [onFilesSelected]);
+  return /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -20,6 +30,7 @@ function FileUploader({ onFilesSelected, accept = "" }) {
         type: "file",
         multiple: true,
         accept,
+        disabled,
         className: "hidden",
         onChange: handleFileChange
       }
@@ -27,11 +38,14 @@ function FileUploader({ onFilesSelected, accept = "" }) {
     /* @__PURE__ */ jsx(
       Button,
       {
+        type: "button",
         variant: "ghost",
         size: "icon",
         "aria-label": "Attach file",
+        className: "h-9 w-9 rounded-md",
+        disabled,
         onClick: handleButtonClick,
-        children: /* @__PURE__ */ jsx(Plus, { className: "w-10 h-10" })
+        children: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" })
       }
     )
   ] });

package/dist/esm/UploadPill.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { FileUpload } from "@meshagent/meshagent-react";
+import * as React from "react";
+import { type FileUpload } from "./file-attachment";
 export interface UploadPillProps {
     attachment: FileUpload;
     onCancel: (attachment: FileUpload) => void;

package/dist/esm/UploadPill.js

@@ -1,39 +1,67 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
+import * as React from "react";
+import { FileUp, LoaderCircle, TriangleAlert, X } from "lucide-react";
 import { Progress } from "./components/ui/progress";
-import { X } from "lucide-react";
-function UploadPill({ attachment, onCancel }) {
-  const [progress, setProgress] = useState(0);
-  const handleCancel = useCallback(() => onCancel(attachment), [attachment, onCancel]);
-  useEffect(() => {
-    const onChange = () => setProgress(
-      Math.round(attachment.bytesUploaded * 100 / attachment.size)
-    );
-    attachment.on("status", onChange);
-    return () => attachment.off("status", onChange);
+import { UploadStatus } from "./file-attachment";
+import { cn } from "./lib/utils";
+function measureUploadProgress(attachment) {
+  if (attachment.size <= 0) {
+    return attachment.status === UploadStatus.Completed ? 100 : 0;
+  }
+  return Math.max(0, Math.min(100, Math.round(attachment.bytesUploaded * 100 / attachment.size)));
+}
+function useUploadState(attachment) {
+  const [progress, setProgress] = React.useState(() => measureUploadProgress(attachment));
+  const [status, setStatus] = React.useState(attachment.status);
+  React.useEffect(() => {
+    const updateState = () => {
+      setStatus(attachment.status);
+      setProgress(measureUploadProgress(attachment));
+    };
+    updateState();
+    attachment.on("change", updateState);
+    return () => {
+      attachment.off("change", updateState);
+    };
   }, [attachment]);
-  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex max-w-full items-center border bg-muted pl-3 pr-1 py-1 gap-2", children: [
-    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium leading-none", children: attachment.filename }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleCancel,
-        "aria-label": "Cancel upload",
-        className: "rounded-full p-1 transition-colors hover:bg-muted-foreground/20 focus:outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Progress,
-      {
-        value: progress,
-        className: "absolute left-0 bottom-0 h-0.5 w-full rounded-full bg-muted-foreground/20"
-      }
-    )
-  ] });
+  return { progress, status };
+}
+function UploadPill({ attachment, onCancel }) {
+  const { progress, status } = useUploadState(attachment);
+  const handleCancel = React.useCallback(() => {
+    onCancel(attachment);
+  }, [attachment, onCancel]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative inline-flex max-w-full items-center gap-2 overflow-hidden rounded-md border bg-muted/60 pl-3 pr-2 py-2 text-sm",
+        status === UploadStatus.Failed && "border-destructive/40 bg-destructive/5 text-destructive"
+      ),
+      children: [
+        status === UploadStatus.Failed ? /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4 shrink-0" }) : status === UploadStatus.Completed ? /* @__PURE__ */ jsx(FileUp, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 shrink-0 animate-spin text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium leading-none", children: attachment.filename }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCancel,
+            "aria-label": "Remove attachment",
+            className: "rounded-md p-1 transition-colors hover:bg-foreground/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            value: status === UploadStatus.Completed ? 100 : progress,
+            className: "absolute inset-x-0 bottom-0 h-0.5 rounded-none bg-border/60"
+          }
+        )
+      ]
+    }
+  );
 }
-;
 export {
   UploadPill
 };

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

@@ -0,0 +1,38 @@
+import { Element, MeshDocument, Participant, RemoteParticipant, RoomClient } from "@meshagent/meshagent";
+import { ChatMessage } from "./chat-message";
+import { type FileUpload } from "./file-attachment";
+export interface UseChatThreadProps {
+    room: RoomClient;
+    path: string;
+    participants?: Participant[];
+    participantNames?: string[];
+    includeLocalParticipant?: boolean;
+    initialMessage?: ChatMessage;
+    agentName?: string;
+}
+export interface UseChatThreadResult {
+    document: MeshDocument | null;
+    messages: Element[];
+    sendMessage: (message: ChatMessage) => void;
+    selectAttachments: (files: File[]) => void;
+    attachments: FileUpload[];
+    setAttachments: (attachments: FileUpload[]) => void;
+    schemaFileExists: boolean;
+    onlineParticipants: RemoteParticipant[];
+    localParticipantName: string;
+    cancelRequest?: () => void;
+}
+export interface ThreadStatus {
+    text: string | null;
+    mode: string | null;
+    startedAt: Date | null;
+    supportsAgentMessages: boolean;
+}
+export interface UseThreadStatusProps {
+    room: RoomClient;
+    path: string;
+    agentName?: string;
+}
+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 useThreadStatus({ room, path, agentName }: UseThreadStatusProps): ThreadStatus;