@meshagent/meshagent-tailwind 0.38.1 → 0.38.3

package/dist/cjs/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/cjs/ChatTypingIndicator.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ChatTypingIndicator_exports = {};
 __export(ChatTypingIndicator_exports, {
@@ -22,27 +32,108 @@ __export(ChatTypingIndicator_exports, {
 });
 module.exports = __toCommonJS(ChatTypingIndicator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
 var import_meshagent_react = require("@meshagent/meshagent-react");
-function ChatTypingIndicator({ room, path }) {
-  const { typing, thinking } = (0, import_meshagent_react.useRoomIndicators)({ room, path });
-  return typing || thinking ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
-    [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var import_lucide_react = require("lucide-react");
+var import_chat_hooks = require("./chat-hooks");
+var import_utils = require("./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 (0, import_chat_hooks.formatThreadStatusText)(normalizedText, startedAt);
+}
+function ProcessingStatusRow({
+  text,
+  onCancel,
+  showCancelButton = false,
+  cancelEnabled = true
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: cancelEnabled ? onCancel : void 0,
+        disabled: !cancelEnabled,
+        title: cancelEnabled ? "Stop" : "Cancelling",
+        className: (0, import_utils.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LoaderCircle, { className: "absolute h-6 w-6 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "relative inline-flex h-4 w-4 items-center justify-center rounded-full bg-foreground text-background", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3 w-3" }) })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_meshagent_react.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__ */ (0, import_jsx_runtime.jsx)(
+      ProcessingStatusRow,
+      {
+        text: resolvedStatusText,
+        onCancel,
+        showCancelButton,
+        cancelEnabled
+      }
+    );
+  }
+  if (!resolvedTyping) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-end gap-1", children: [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-muted-foreground", children: "Typing" }),
     /* @__PURE__ */ (0, import_jsx_runtime.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;
+            ` })
+  ] });
 }
-;

package/dist/cjs/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/cjs/FileUploader.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FileUploader_exports = {};
 __export(FileUploader_exports, {
@@ -22,20 +32,30 @@ __export(FileUploader_exports, {
 });
 module.exports = __toCommonJS(FileUploader_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var React = __toESM(require("react"));
 var import_lucide_react = require("lucide-react");
 var import_button = require("./components/ui/button");
-function FileUploader({ onFilesSelected, accept = "" }) {
-  const inputRef = (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "shrink-0", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "input",
       {
@@ -43,6 +63,7 @@ function FileUploader({ onFilesSelected, accept = "" }) {
         type: "file",
         multiple: true,
         accept,
+        disabled,
         className: "hidden",
         onChange: handleFileChange
       }
@@ -50,11 +71,14 @@ function FileUploader({ onFilesSelected, accept = "" }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_button.Button,
       {
+        type: "button",
         variant: "ghost",
         size: "icon",
         "aria-label": "Attach file",
+        className: "h-9 w-9 rounded-md",
+        disabled,
         onClick: handleButtonClick,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: "w-10 h-10" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Paperclip, { className: "h-4 w-4" })
       }
     )
   ] });

package/dist/cjs/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/cjs/UploadPill.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var UploadPill_exports = {};
 __export(UploadPill_exports, {
@@ -22,38 +32,66 @@ __export(UploadPill_exports, {
 });
 module.exports = __toCommonJS(UploadPill_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_progress = require("./components/ui/progress");
+var React = __toESM(require("react"));
 var import_lucide_react = require("lucide-react");
-function UploadPill({ attachment, onCancel }) {
-  const [progress, setProgress] = (0, import_react.useState)(0);
-  const handleCancel = (0, import_react.useCallback)(() => onCancel(attachment), [attachment, onCancel]);
-  (0, import_react.useEffect)(() => {
-    const onChange = () => setProgress(
-      Math.round(attachment.bytesUploaded * 100 / attachment.size)
-    );
-    attachment.on("status", onChange);
-    return () => attachment.off("status", onChange);
+var import_progress = require("./components/ui/progress");
+var import_file_attachment = require("./file-attachment");
+var import_utils = require("./lib/utils");
+function measureUploadProgress(attachment) {
+  if (attachment.size <= 0) {
+    return attachment.status === import_file_attachment.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative inline-flex max-w-full items-center border bg-muted pl-3 pr-1 py-1 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-sm font-medium leading-none", children: attachment.filename }),
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_progress.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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_utils.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 === import_file_attachment.UploadStatus.Failed && "border-destructive/40 bg-destructive/5 text-destructive"
+      ),
+      children: [
+        status === import_file_attachment.UploadStatus.Failed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TriangleAlert, { className: "h-4 w-4 shrink-0" }) : status === import_file_attachment.UploadStatus.Completed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.FileUp, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LoaderCircle, { className: "h-4 w-4 shrink-0 animate-spin text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate font-medium leading-none", children: attachment.filename }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_progress.Progress,
+          {
+            value: status === import_file_attachment.UploadStatus.Completed ? 100 : progress,
+            className: "absolute inset-x-0 bottom-0 h-0.5 rounded-none bg-border/60"
+          }
+        )
+      ]
+    }
+  );
 }
-;

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