@mieweb/ui 0.8.0-dev.17 → 0.8.0-dev.18

package/dist/index.d.cts

@@ -3250,6 +3250,11 @@ interface ChatComposerHandle {
     addFiles: (files: File[]) => void;
     /** Focus the text input. */
     focus: () => void;
+    /**
+     * The underlying textarea element, for host integrations that need caret
+     * access (e.g. mention insertion via `setSelectionRange`).
+     */
+    getTextarea: () => HTMLTextAreaElement | null;
 }
 /** Structured context passed to `onError` so hosts can localize by reason. */
 interface ChatComposerError {
@@ -3280,6 +3285,27 @@ interface ChatComposerProps {
     maxLength?: number;
     /** Show a character counter (requires `maxLength`). */
     showCharacterCount?: boolean;
+    /**
+     * Allow sending while the composer itself is empty (e.g. when the host
+     * stages attachments outside the composer). The host receives a message
+     * with empty `content` and no attachments and owns any further guarding.
+     * @default false
+     */
+    canSendWhenEmpty?: boolean;
+    /**
+     * Maximum height of the auto-growing input: a pixel number or any CSS
+     * length (e.g. `'40vh'`).
+     * @default 160
+     */
+    maxHeight?: number | string;
+    /**
+     * Extra props spread onto the underlying textarea. Event handlers run
+     * before the composer's built-in handlers; call `event.preventDefault()`
+     * in `onKeyDown` / `onPaste` to claim that event (e.g. for a mention
+     * menu's arrow/Enter navigation). `className` and `style` are merged
+     * with the composer's own.
+     */
+    textareaProps?: Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue'>;
     /** Extra entries for the `+` menu, rendered after the built-in items. */
     addMenuItems?: ChatComposerMenuItem[];
     /** Enable file attachments (built-in "Attach files" menu item, paste-to-attach, chips). @default true */

package/dist/index.d.ts

@@ -3250,6 +3250,11 @@ interface ChatComposerHandle {
     addFiles: (files: File[]) => void;
     /** Focus the text input. */
     focus: () => void;
+    /**
+     * The underlying textarea element, for host integrations that need caret
+     * access (e.g. mention insertion via `setSelectionRange`).
+     */
+    getTextarea: () => HTMLTextAreaElement | null;
 }
 /** Structured context passed to `onError` so hosts can localize by reason. */
 interface ChatComposerError {
@@ -3280,6 +3285,27 @@ interface ChatComposerProps {
     maxLength?: number;
     /** Show a character counter (requires `maxLength`). */
     showCharacterCount?: boolean;
+    /**
+     * Allow sending while the composer itself is empty (e.g. when the host
+     * stages attachments outside the composer). The host receives a message
+     * with empty `content` and no attachments and owns any further guarding.
+     * @default false
+     */
+    canSendWhenEmpty?: boolean;
+    /**
+     * Maximum height of the auto-growing input: a pixel number or any CSS
+     * length (e.g. `'40vh'`).
+     * @default 160
+     */
+    maxHeight?: number | string;
+    /**
+     * Extra props spread onto the underlying textarea. Event handlers run
+     * before the composer's built-in handlers; call `event.preventDefault()`
+     * in `onKeyDown` / `onPaste` to claim that event (e.g. for a mention
+     * menu's arrow/Enter navigation). `className` and `style` are merged
+     * with the composer's own.
+     */
+    textareaProps?: Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue'>;
     /** Extra entries for the `+` menu, rendered after the built-in items. */
     addMenuItems?: ChatComposerMenuItem[];
     /** Enable file attachments (built-in "Attach files" menu item, paste-to-attach, chips). @default true */

package/dist/index.js

@@ -12524,6 +12524,9 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
   autoFocus = false,
   maxLength,
   showCharacterCount = false,
+  canSendWhenEmpty = false,
+  maxHeight = MAX_INPUT_HEIGHT,
+  textareaProps,
   addMenuItems,
   allowAttachments = true,
   acceptedFileTypes,
@@ -12569,7 +12572,7 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
   const hasText = value.trim().length > 0;
   const hasContent = hasText || attachments.length > 0;
   const isOverLimit = maxLength !== void 0 && value.length > maxLength;
-  const canSend = hasContent && onSend !== void 0 && !disabled && !isSending && !isStreaming && !isOverLimit;
+  const canSend = (hasContent || canSendWhenEmpty) && onSend !== void 0 && !disabled && !isSending && !isStreaming && !isOverLimit;
   const setValue = React13.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
@@ -12581,7 +12584,7 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
     const textarea = textareaRef.current;
     if (!textarea) return;
     textarea.style.height = "auto";
-    textarea.style.height = `${Math.min(textarea.scrollHeight, MAX_INPUT_HEIGHT)}px`;
+    textarea.style.height = `${textarea.scrollHeight}px`;
   }, [value]);
   const addFiles = React13.useCallback(
     (files) => {
@@ -12668,7 +12671,8 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
     ref,
     () => ({
       addFiles,
-      focus: () => textareaRef.current?.focus()
+      focus: () => textareaRef.current?.focus(),
+      getTextarea: () => textareaRef.current
     }),
     [addFiles]
   );
@@ -12752,24 +12756,41 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
         /* @__PURE__ */ jsx("div", { className: "px-1 pt-1", children: /* @__PURE__ */ jsx(
           "textarea",
           {
+            ...textareaProps,
             ref: textareaRef,
             "data-slot": "chat-composer-input",
             value,
-            onChange: (event) => setValue(event.target.value),
-            onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
+            onChange: (event) => {
+              textareaProps?.onChange?.(event);
+              setValue(event.target.value);
+            },
+            onKeyDown: (event) => {
+              textareaProps?.onKeyDown?.(event);
+              if (event.defaultPrevented) return;
+              handleKeyDown(event);
+            },
+            onPaste: (event) => {
+              textareaProps?.onPaste?.(event);
+              if (event.defaultPrevented) return;
+              handlePaste(event);
+            },
             placeholder,
             disabled,
             autoFocus,
             rows: 1,
             "aria-label": inputLabel,
+            style: {
+              ...textareaProps?.style,
+              maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+            },
             className: cn(
               "block w-full resize-none bg-transparent",
               "rounded-lg px-2 pt-2 pb-1 text-sm",
               "text-neutral-900 placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500",
               // Ring the input itself on focus rather than the whole shell.
               "focus:ring-primary-500 focus:ring-1 focus:outline-none",
-              "disabled:cursor-not-allowed"
+              "disabled:cursor-not-allowed",
+              textareaProps?.className
             )
           }
         ) }),