@meshagent/meshagent-tailwind 0.38.2 → 0.38.3

package/dist/esm/ChatInput.js

@@ -1,11 +1,81 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback } from "react";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { ArrowUp, LoaderCircle, X } from "lucide-react";
 import { v4 as uuidV4 } from "uuid";
-import { ChatMessage } from "@meshagent/meshagent-react";
+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";
+function useAttachmentStatusVersion(attachments) {
+  const [version, setVersion] = useState(0);
+  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) {
+  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__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "ghost",
+        className: cn("relative size-9 rounded-full", disabled && "opacity-55"),
+        disabled,
+        onClick,
+        title: disabled ? "Cancelling" : "Stop",
+        children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "absolute h-9 w-9 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-5 w-5 items-center justify-center rounded-full bg-foreground text-background", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      size: "icon",
+      className: "size-9 rounded-full shadow-xs",
+      disabled,
+      onClick,
+      title: "Send",
+      children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" })
+    }
+  );
+}
 function ChatInput({
   onSubmit,
   onFilesSelected,
@@ -13,61 +83,100 @@ 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] = React.useState("");
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const textareaRef = useRef(null);
+  const value = controlledValue ?? uncontrolledValue;
+  const attachmentStatusVersion = useAttachmentStatusVersion(attachments);
+  const setValue = useCallback((nextValue) => {
+    if (controlledValue === void 0) {
+      setUncontrolledValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+    onTextChange?.(nextValue);
+  }, [controlledValue, onTextChange, onValueChange]);
+  useAutoResizingTextarea(textareaRef, value);
+  const allAttachmentsUploaded = useMemo(
+    () => attachments.every((attachment) => attachment.status === UploadStatus.Completed),
+    [attachmentStatusVersion, attachments]
+  );
+  const hasDraft = value.trim() !== "" || attachments.length > 0;
+  const canSend = !disabled && hasDraft && allAttachmentsUploaded;
   const handleSend = useCallback(() => {
-    const trimmed2 = value.trim();
-    if (attachments.length === 0 && !trimmed2) {
+    const trimmed = value.trim();
+    if (!canSend) {
       return;
     }
-    onSubmit(new ChatMessage({
+    void onSubmit(new ChatMessage({
       id: uuidV4(),
-      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 = useCallback((event) => {
+    if (disabled) {
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      if (showCancelButton) {
+        onCancelRequest?.();
+        return;
+      }
       handleSend();
     }
-  };
+  }, [disabled, handleSend, onCancelRequest, showCancelButton]);
+  const handleChange = useCallback((event) => {
+    const nextValue = event.currentTarget.value;
+    setValue(nextValue);
+  }, [setValue]);
   const cancelAttachment = useCallback((attachment) => {
-    setAttachments(attachments.filter((f) => f.path !== attachment.path));
-  }, [attachments, setAttachments]);
-  const _onChange = useCallback((e) => {
-    setValue(e.currentTarget.value);
-    onTextChange?.(e.currentTarget.value);
-  }, [onTextChange]);
-  const trimmed = value.trim();
-  const disabled = !trimmed && attachments.length === 0;
-  return /* @__PURE__ */ jsxs("div", { className: "border-t py-3 gap-3 flex flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-0 gap-2 flex-wrap", children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+    if (disabled) {
+      return;
+    }
+    setAttachments(attachments.filter((currentAttachment) => currentAttachment !== attachment));
+  }, [attachments, disabled, setAttachments]);
+  const trailingButton = showCancelButton ? /* @__PURE__ */ jsx(ComposerActionButton, { onClick: onCancelRequest, showCancelButton: true }) : hasDraft ? /* @__PURE__ */ jsx(ComposerActionButton, { onClick: handleSend, disabled: !canSend }) : /* @__PURE__ */ jsx("div", { className: "h-9 w-9 shrink-0" });
+  return /* @__PURE__ */ jsx("div", { className: "px-4 pt-2", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex max-w-full flex-wrap gap-2 px-1 pt-1", children: attachments.map((attachment, index) => /* @__PURE__ */ jsx(
       UploadPill,
       {
         attachment,
         onCancel: cancelAttachment
       },
-      attachment.path
-    )) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-0 gap-3", children: [
-      /* @__PURE__ */ jsx(FileUploader, { onFilesSelected }),
+      `${attachment.path}-${index}`
+    )) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(FileUploader, { onFilesSelected, disabled }),
       /* @__PURE__ */ jsx(
         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__ */ jsx(Button, { onClick: onCancelRequest, children: "Cancel" }) : /* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled, children: "Send" })
+      trailingButton
     ] })
-  ] });
+  ] }) });
 }
 export {
   ChatInput

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