@mieweb/ui 0.8.0-dev.23 → 0.8.0-dev.24

package/dist/index.d.cts

@@ -607,6 +607,25 @@ interface AIMessageDisplayProps {
  */
 declare function AIMessageDisplay({ message, userName, showAvatar, showTimestamp, onLinkClick, renderTextContent, renderMessageFooter, className, }: AIMessageDisplayProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A candidate for the composer's `@mention` autocomplete. Generic so any
+ * surface (multi-party chat, agent picker, …) can supply its own list.
+ */
+interface MentionOption {
+    /** Stable unique key for the suggestion list. */
+    id: string;
+    /** Display name shown in the suggestion list. */
+    label: string;
+    /** Text inserted after `@` on selection. Defaults to the first word of `label`. */
+    value?: string;
+    /** Optional secondary text shown after the label. */
+    description?: string;
+    /** Optional leading node (e.g. an avatar). */
+    icon?: React$1.ReactNode;
+    /** Optional trailing meta text (e.g. a kind tag). */
+    meta?: string;
+}
+
 /**
  * Messaging Component Types
  *
@@ -869,24 +888,6 @@ interface MessageGroup {
     messages: Message[];
 }
 
-/**
- * A candidate for the composer's `@mention` autocomplete. Generic so any
- * surface (multi-party chat, agent picker, …) can supply its own list.
- */
-interface MentionOption {
-    /** Stable id (returned to the host so it can map a selection back). */
-    id: string;
-    /** Display name shown in the suggestion list. */
-    label: string;
-    /** Text inserted after `@` on selection. Defaults to the first word of `label`. */
-    value?: string;
-    /** Optional secondary text shown after the label. */
-    description?: string;
-    /** Optional leading node (e.g. an avatar). */
-    icon?: React$1.ReactNode;
-    /** Optional trailing meta text (e.g. a kind tag). */
-    meta?: string;
-}
 interface CharacterCounterProps {
     current: number;
     max: number;
@@ -3309,7 +3310,7 @@ interface ChatComposerProps {
     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 */
+    /** Enable file attachments (built-in "Attach files" menu item, paste-to-attach, drag-and-drop, chips). @default true */
     allowAttachments?: boolean;
     /** Accepted file types for the picker/paste validation (native `accept` tokens). */
     acceptedFileTypes?: string[];
@@ -3317,6 +3318,12 @@ interface ChatComposerProps {
     maxFileSize?: number;
     /** Maximum number of staged attachments. @default 10 */
     maxAttachments?: number;
+    /**
+     * Candidates for `@mention` autocomplete. When provided (non-empty), typing
+     * `@` opens a suggestion listbox (same behavior as `MessageComposer`).
+     * Omit to disable mentions entirely (default).
+     */
+    mentionOptions?: MentionOption[];
     /** Show the built-in mic button. @default false */
     showMic?: boolean;
     /** Called when the built-in mic button is clicked. */
@@ -3376,6 +3383,10 @@ interface ChatComposerProps {
     stopLabel?: string;
     /** Accessible label / empty-state text for the agent selector. @default 'Select agent' */
     agentSelectorLabel?: string;
+    /** Accessible label for the `@mention` suggestion listbox. @default 'Mention' */
+    mentionListLabel?: string;
+    /** Overlay text shown while dragging files over the composer. @default 'Drop files here' */
+    dropFilesLabel?: string;
     className?: string;
 }
 /**
@@ -7076,6 +7087,8 @@ interface DragDropZoneProps {
     disabled?: boolean;
     /** Called when an error occurs */
     onError?: (error: string) => void;
+    /** Overlay text shown while dragging files over the zone. @default 'Drop files here' */
+    overlayLabel?: string;
     /** Children to render inside the zone */
     children: React$1.ReactNode;
     className?: string;
@@ -7083,7 +7096,7 @@ interface DragDropZoneProps {
 /**
  * A wrapper component that accepts drag-and-drop files.
  */
-declare function DragDropZone({ onFilesDropped, acceptedTypes, maxFileSize, maxFiles, disabled, onError, children, className, }: DragDropZoneProps): react_jsx_runtime.JSX.Element;
+declare function DragDropZone({ onFilesDropped, acceptedTypes, maxFileSize, maxFiles, disabled, onError, overlayLabel, children, className, }: DragDropZoneProps): react_jsx_runtime.JSX.Element;
 declare namespace DragDropZone {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -607,6 +607,25 @@ interface AIMessageDisplayProps {
  */
 declare function AIMessageDisplay({ message, userName, showAvatar, showTimestamp, onLinkClick, renderTextContent, renderMessageFooter, className, }: AIMessageDisplayProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A candidate for the composer's `@mention` autocomplete. Generic so any
+ * surface (multi-party chat, agent picker, …) can supply its own list.
+ */
+interface MentionOption {
+    /** Stable unique key for the suggestion list. */
+    id: string;
+    /** Display name shown in the suggestion list. */
+    label: string;
+    /** Text inserted after `@` on selection. Defaults to the first word of `label`. */
+    value?: string;
+    /** Optional secondary text shown after the label. */
+    description?: string;
+    /** Optional leading node (e.g. an avatar). */
+    icon?: React$1.ReactNode;
+    /** Optional trailing meta text (e.g. a kind tag). */
+    meta?: string;
+}
+
 /**
  * Messaging Component Types
  *
@@ -869,24 +888,6 @@ interface MessageGroup {
     messages: Message[];
 }
 
-/**
- * A candidate for the composer's `@mention` autocomplete. Generic so any
- * surface (multi-party chat, agent picker, …) can supply its own list.
- */
-interface MentionOption {
-    /** Stable id (returned to the host so it can map a selection back). */
-    id: string;
-    /** Display name shown in the suggestion list. */
-    label: string;
-    /** Text inserted after `@` on selection. Defaults to the first word of `label`. */
-    value?: string;
-    /** Optional secondary text shown after the label. */
-    description?: string;
-    /** Optional leading node (e.g. an avatar). */
-    icon?: React$1.ReactNode;
-    /** Optional trailing meta text (e.g. a kind tag). */
-    meta?: string;
-}
 interface CharacterCounterProps {
     current: number;
     max: number;
@@ -3309,7 +3310,7 @@ interface ChatComposerProps {
     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 */
+    /** Enable file attachments (built-in "Attach files" menu item, paste-to-attach, drag-and-drop, chips). @default true */
     allowAttachments?: boolean;
     /** Accepted file types for the picker/paste validation (native `accept` tokens). */
     acceptedFileTypes?: string[];
@@ -3317,6 +3318,12 @@ interface ChatComposerProps {
     maxFileSize?: number;
     /** Maximum number of staged attachments. @default 10 */
     maxAttachments?: number;
+    /**
+     * Candidates for `@mention` autocomplete. When provided (non-empty), typing
+     * `@` opens a suggestion listbox (same behavior as `MessageComposer`).
+     * Omit to disable mentions entirely (default).
+     */
+    mentionOptions?: MentionOption[];
     /** Show the built-in mic button. @default false */
     showMic?: boolean;
     /** Called when the built-in mic button is clicked. */
@@ -3376,6 +3383,10 @@ interface ChatComposerProps {
     stopLabel?: string;
     /** Accessible label / empty-state text for the agent selector. @default 'Select agent' */
     agentSelectorLabel?: string;
+    /** Accessible label for the `@mention` suggestion listbox. @default 'Mention' */
+    mentionListLabel?: string;
+    /** Overlay text shown while dragging files over the composer. @default 'Drop files here' */
+    dropFilesLabel?: string;
     className?: string;
 }
 /**
@@ -7076,6 +7087,8 @@ interface DragDropZoneProps {
     disabled?: boolean;
     /** Called when an error occurs */
     onError?: (error: string) => void;
+    /** Overlay text shown while dragging files over the zone. @default 'Drop files here' */
+    overlayLabel?: string;
     /** Children to render inside the zone */
     children: React$1.ReactNode;
     className?: string;
@@ -7083,7 +7096,7 @@ interface DragDropZoneProps {
 /**
  * A wrapper component that accepts drag-and-drop files.
  */
-declare function DragDropZone({ onFilesDropped, acceptedTypes, maxFileSize, maxFiles, disabled, onError, children, className, }: DragDropZoneProps): react_jsx_runtime.JSX.Element;
+declare function DragDropZone({ onFilesDropped, acceptedTypes, maxFileSize, maxFiles, disabled, onError, overlayLabel, children, className, }: DragDropZoneProps): react_jsx_runtime.JSX.Element;
 declare namespace DragDropZone {
     var displayName: string;
 }

package/dist/index.js

@@ -27,10 +27,10 @@ import { Spinner, SpinnerWithLabel } from './chunk-UA7E7PDS.js';
 export { FullPageSpinner, Spinner, SpinnerWithLabel, spinnerVariants } from './chunk-UA7E7PDS.js';
 import { SparklesIcon, RefreshIcon, CloseIcon, AIMessageDisplay } from './chunk-22CYDCXA.js';
 export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon } from './chunk-22CYDCXA.js';
-import { EmptyState } from './chunk-5KJYGLVU.js';
-export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator } from './chunk-5KJYGLVU.js';
-import { validateFile, getFileType, generateAttachmentId, AttachmentPreviewItem, MessageComposer } from './chunk-AZLDTPYK.js';
-export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, validateFile } from './chunk-AZLDTPYK.js';
+import { EmptyState } from './chunk-MXQ7J4BB.js';
+export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator } from './chunk-MXQ7J4BB.js';
+import { useMentionAutocomplete, validateFile, getFileType, generateAttachmentId, AttachmentPreviewItem, MentionMenu, DragDropZone, MessageComposer } from './chunk-O6GJ4IYS.js';
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, validateFile } from './chunk-O6GJ4IYS.js';
 import { RecordButton } from './chunk-VNWJTCBQ.js';
 export { RecordButton, formatDuration, recordButtonVariants } from './chunk-VNWJTCBQ.js';
 export { RichTextEditor, convertAngleBracketsToMustache, processDictation } from './chunk-5H7SAEQO.js';
@@ -12534,6 +12534,7 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
   acceptedFileTypes,
   maxFileSize,
   maxAttachments = 10,
+  mentionOptions,
   showMic = false,
   onMicClick,
   micSlot,
@@ -12559,6 +12560,8 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
   sendLabel = "Send message",
   stopLabel = "Stop generating",
   agentSelectorLabel = "Select agent",
+  mentionListLabel = "Mention",
+  dropFilesLabel = "Drop files here",
   className
 }, ref) {
   const [internalValue, setInternalValue] = React13.useState("");
@@ -12582,6 +12585,12 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
     },
     [isControlled, onValueChange]
   );
+  const mention = useMentionAutocomplete({
+    options: mentionOptions,
+    value,
+    setValue,
+    textareaRef
+  });
   const resizeTextarea = React13.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
@@ -12716,6 +12725,7 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
     textareaRef.current?.focus();
   };
   const handleKeyDown = (event) => {
+    if (mention.handleKeyDown(event)) return;
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       handleSend();
@@ -12768,48 +12778,69 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto]", children: [
-      /* @__PURE__ */ jsx("div", { className: cells.input, children: /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ...textareaProps,
-          ref: textareaRef,
-          "data-slot": "chat-composer-input",
-          value,
-          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 text-sm",
-            cells.textarea,
-            "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",
-            textareaProps?.className
-          )
-        }
-      ) }),
+      /* @__PURE__ */ jsxs("div", { className: cells.input, ref: mention.anchorRef, children: [
+        /* @__PURE__ */ jsx(
+          MentionMenu,
+          {
+            mention,
+            label: mentionListLabel,
+            dataSlot: "chat-composer-mention-list"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: textareaRef,
+            "data-slot": "chat-composer-input",
+            value,
+            onChange: (event) => {
+              textareaProps?.onChange?.(event);
+              setValue(event.target.value);
+              mention.sync(
+                event.target.value,
+                event.target.selectionStart ?? event.target.value.length
+              );
+            },
+            onKeyDown: (event) => {
+              textareaProps?.onKeyDown?.(event);
+              if (event.defaultPrevented) return;
+              handleKeyDown(event);
+            },
+            onClick: (event) => {
+              textareaProps?.onClick?.(event);
+              if (event.defaultPrevented) return;
+              const el = event.currentTarget;
+              mention.sync(el.value, el.selectionStart ?? el.value.length);
+            },
+            onPaste: (event) => {
+              textareaProps?.onPaste?.(event);
+              if (event.defaultPrevented) return;
+              handlePaste(event);
+            },
+            placeholder,
+            disabled,
+            autoFocus,
+            rows: 1,
+            "aria-label": inputLabel,
+            ...mention.inputProps,
+            style: {
+              ...textareaProps?.style,
+              maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+            },
+            className: cn(
+              "block w-full resize-none bg-transparent",
+              "rounded-lg text-sm",
+              cells.textarea,
+              "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",
+              textareaProps?.className
+            )
+          }
+        )
+      ] }),
       showAddMenu && /* @__PURE__ */ jsx("div", { className: cells.add, children: /* @__PURE__ */ jsxs(
         Dropdown,
         {
@@ -13024,6 +13055,17 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
       ]
     }
   );
+  const card = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-composer-card",
+      className: cn(
+        "rounded-2xl border border-neutral-200 bg-white shadow-sm",
+        "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
+      ),
+      children: composerCard
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -13034,17 +13076,16 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        allowAttachments ? /* @__PURE__ */ jsx(
+          DragDropZone,
           {
-            "data-slot": "chat-composer-card",
-            className: cn(
-              "rounded-2xl border border-neutral-200 bg-white shadow-sm",
-              "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
-            ),
-            children: composerCard
+            onFilesDropped: addFiles,
+            maxFiles: Number.MAX_SAFE_INTEGER,
+            disabled,
+            overlayLabel: dropFilesLabel,
+            children: card
           }
-        ),
+        ) : card,
         selectorsRow
       ]
     }