@meshagent/meshagent-tailwind 0.38.2 → 0.38.4

package/dist/cjs/ChatInput.js

@@ -1,9 +1,7 @@
 "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)
@@ -17,14 +15,6 @@ 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 ChatInput_exports = {};
 __export(ChatInput_exports, {
@@ -32,13 +22,83 @@ __export(ChatInput_exports, {
 });
 module.exports = __toCommonJS(ChatInput_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
 var import_uuid = require("uuid");
-var import_meshagent_react = require("@meshagent/meshagent-react");
+var import_chat_message = require("./chat-message");
 var import_button = require("./components/ui/button");
 var import_textarea = require("./components/ui/textarea");
 var import_FileUploader = require("./FileUploader");
 var import_UploadPill = require("./UploadPill");
+var import_file_attachment = require("./file-attachment");
+var import_utils = require("./lib/utils");
+function useAttachmentStatusVersion(attachments) {
+  const [version, setVersion] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const handleChange = () => {
+      setVersion((currentVersion) => currentVersion + 1);
+    };
+    for (const attachment of attachments) {
+      attachment.on("change", handleChange);
+    }
+    return () => {
+      for (const attachment of attachments) {
+        attachment.off("change", handleChange);
+      }
+    };
+  }, [attachments]);
+  return version;
+}
+function useAutoResizingTextarea(textareaRef, value) {
+  (0, import_react.useEffect)(() => {
+    const element = textareaRef.current;
+    if (!element) {
+      return;
+    }
+    if (value === "") {
+      element.style.height = "20px";
+    } else {
+      element.style.height = "0px";
+      element.style.height = `${Math.max(20, Math.min(element.scrollHeight, 160))}px`;
+    }
+  }, [textareaRef, value]);
+}
+function ComposerActionButton({
+  onClick,
+  disabled = false,
+  showCancelButton = false
+}) {
+  if (showCancelButton) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_button.Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: (0, import_utils.cn)("relative size-9 rounded-full", disabled && "opacity-55"),
+        disabled,
+        onClick,
+        title: disabled ? "Cancelling" : "Stop",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LoaderCircle, { className: "absolute h-9 w-9 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "relative inline-flex h-5 w-5 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" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.Button,
+    {
+      type: "button",
+      size: "icon",
+      className: "size-9 rounded-full shadow-xs",
+      disabled,
+      onClick,
+      title: "Send",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUp, { className: "h-4 w-4" })
+    }
+  );
+}
 function ChatInput({
   onSubmit,
   onFilesSelected,
@@ -46,59 +106,98 @@ function ChatInput({
   setAttachments,
   onTextChange,
   onCancelRequest,
-  showCancelButton
+  showCancelButton = false,
+  placeholder = "Message the room",
+  disabled = false,
+  clearOnSubmit = true,
+  autoFocus = true,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange
 }) {
-  const [value, setValue] = import_react.default.useState("");
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
+  const textareaRef = (0, import_react.useRef)(null);
+  const value = controlledValue ?? uncontrolledValue;
+  const attachmentStatusVersion = useAttachmentStatusVersion(attachments);
+  const setValue = (0, import_react.useCallback)((nextValue) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+    onTextChange?.(nextValue);
+  }, [controlledValue, onTextChange, onValueChange]);
+  useAutoResizingTextarea(textareaRef, value);
+  const allAttachmentsUploaded = (0, import_react.useMemo)(
+    () => attachments.every((attachment) => attachment.status === import_file_attachment.UploadStatus.Completed),
+    [attachmentStatusVersion, attachments]
+  );
+  const hasDraft = value.trim() !== "" || attachments.length > 0;
+  const canSend = !disabled && hasDraft && allAttachmentsUploaded;
   const handleSend = (0, import_react.useCallback)(() => {
-    const trimmed2 = value.trim();
-    if (attachments.length === 0 && !trimmed2) {
+    const trimmed = value.trim();
+    if (!canSend) {
       return;
     }
-    onSubmit(new import_meshagent_react.ChatMessage({
+    void onSubmit(new import_chat_message.ChatMessage({
       id: (0, import_uuid.v4)(),
-      text: trimmed2,
-      attachments: attachments.map((file) => file.path)
+      text: trimmed,
+      attachments: attachments.map((attachment) => attachment.path)
     }));
+    if (!clearOnSubmit) {
+      return;
+    }
     setValue("");
     setAttachments([]);
-  }, [value, onSubmit, attachments]);
-  const onKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
+  }, [attachments, canSend, clearOnSubmit, onSubmit, setAttachments, setValue, value]);
+  const handleKeyDown = (0, import_react.useCallback)((event) => {
+    if (disabled) {
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      if (showCancelButton) {
+        onCancelRequest?.();
+        return;
+      }
       handleSend();
     }
-  };
+  }, [disabled, handleSend, onCancelRequest, showCancelButton]);
+  const handleChange = (0, import_react.useCallback)((event) => {
+    const nextValue = event.currentTarget.value;
+    setValue(nextValue);
+  }, [setValue]);
   const cancelAttachment = (0, import_react.useCallback)((attachment) => {
-    setAttachments(attachments.filter((f) => f.path !== attachment.path));
-  }, [attachments, setAttachments]);
-  const _onChange = (0, import_react.useCallback)((e) => {
-    setValue(e.currentTarget.value);
-    onTextChange?.(e.currentTarget.value);
-  }, [onTextChange]);
-  const trimmed = value.trim();
-  const disabled = !trimmed && attachments.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-t py-3 gap-3 flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-0 gap-2 flex-wrap", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    if (disabled) {
+      return;
+    }
+    setAttachments(attachments.filter((currentAttachment) => currentAttachment !== attachment));
+  }, [attachments, disabled, setAttachments]);
+  const trailingButton = showCancelButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposerActionButton, { onClick: onCancelRequest, showCancelButton: true }) : hasDraft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposerActionButton, { onClick: handleSend, disabled: !canSend }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-9 w-9 shrink-0" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-2 rounded-md border border-input/70 bg-background px-2 py-1 shadow-xs focus-within:border-primary focus-within:[outline:1px_solid_var(--color-primary)]", children: [
+    attachments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex max-w-full flex-wrap gap-2 px-1 pt-1", children: attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_UploadPill.UploadPill,
       {
         attachment,
         onCancel: cancelAttachment
       },
-      attachment.path
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-0 gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FileUploader.FileUploader, { onFilesSelected }),
+      `${attachment.path}-${index}`
+    )) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FileUploader.FileUploader, { onFilesSelected, disabled }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_textarea.Textarea,
         {
-          placeholder: "Type a message and press Enter",
-          className: "flex-1 resize-none h-20",
+          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",
+          readOnly: disabled,
           value,
-          onChange: _onChange,
-          onKeyDown
+          onChange: handleChange,
+          onKeyDown: handleKeyDown
         }
       ),
-      showCancelButton === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: onCancelRequest, children: "Cancel" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: handleSend, disabled, children: "Send" })
+      trailingButton
     ] })
-  ] });
+  ] }) });
 }

package/dist/cjs/ChatThread.d.ts

@@ -1,7 +1,21 @@
+import type { ReactElement } from "react";
 import { Element, RoomClient } from "@meshagent/meshagent";
-export declare function timeAgo(iso: string): string;
-export declare function ChatThread({ room, messages, localParticipantName }: {
+export interface ChatThreadProps {
     room: RoomClient;
     messages: Element[];
+    isLoading?: boolean;
     localParticipantName: string;
-}): import("react/jsx-runtime").JSX.Element;
+    path?: string;
+    showCompletedToolCalls?: boolean;
+    onShowCompletedToolCallsChanged?: (value: boolean) => void;
+    typing?: boolean;
+    thinking?: boolean;
+    threadStatusText?: string | null;
+    threadStatusStartedAt?: Date | null;
+    threadStatusMode?: string | null;
+    onCancelRequest?: () => void;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+}
+export declare function timeAgo(iso: string): string;
+export declare function ChatThread({ room, messages, isLoading, localParticipantName, path, showCompletedToolCalls, onShowCompletedToolCallsChanged, typing, thinking, threadStatusText, threadStatusStartedAt, threadStatusMode, onCancelRequest, emptyStateTitle, emptyStateDescription, }: ChatThreadProps): ReactElement;