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

package/dist/index.cjs

@@ -23,8 +23,8 @@ var chunkXTHMC76F_cjs = require('./chunk-XTHMC76F.cjs');
 var chunk7RV6CAP6_cjs = require('./chunk-7RV6CAP6.cjs');
 var chunkXXVUHLQN_cjs = require('./chunk-XXVUHLQN.cjs');
 var chunkWIAQQNFU_cjs = require('./chunk-WIAQQNFU.cjs');
-var chunkHIMVH5OH_cjs = require('./chunk-HIMVH5OH.cjs');
-var chunkQEJHAU7N_cjs = require('./chunk-QEJHAU7N.cjs');
+var chunkFQBTGS3E_cjs = require('./chunk-FQBTGS3E.cjs');
+var chunk5BVFVXHN_cjs = require('./chunk-5BVFVXHN.cjs');
 var chunkJTSKPDPH_cjs = require('./chunk-JTSKPDPH.cjs');
 var chunk7KN6J7XV_cjs = require('./chunk-7KN6J7XV.cjs');
 var chunk3SZQRMHM_cjs = require('./chunk-3SZQRMHM.cjs');
@@ -1412,7 +1412,7 @@ function AIEmptyState({
     /* @__PURE__ */ jsxRuntime.jsx(SuggestedActions, { actions: suggestions, onSelect: onSuggestionSelect })
   ] }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkHIMVH5OH_cjs.EmptyState,
+    chunkFQBTGS3E_cjs.EmptyState,
     {
       title,
       description,
@@ -1605,7 +1605,7 @@ function AIChat({
                 }
               ) }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkQEJHAU7N_cjs.MessageComposer,
+                chunk5BVFVXHN_cjs.MessageComposer,
                 {
                   onSend: handleSend,
                   placeholder: inputPlaceholder,
@@ -12513,6 +12513,7 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
   acceptedFileTypes,
   maxFileSize,
   maxAttachments = 10,
+  mentionOptions,
   showMic = false,
   onMicClick,
   micSlot,
@@ -12538,6 +12539,8 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
   sendLabel = "Send message",
   stopLabel = "Stop generating",
   agentSelectorLabel = "Select agent",
+  mentionListLabel = "Mention",
+  dropFilesLabel = "Drop files here",
   className
 }, ref) {
   const [internalValue, setInternalValue] = React13__namespace.useState("");
@@ -12561,6 +12564,12 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
     },
     [isControlled, onValueChange]
   );
+  const mention = chunk5BVFVXHN_cjs.useMentionAutocomplete({
+    options: mentionOptions,
+    value,
+    setValue,
+    textareaRef
+  });
   const resizeTextarea = React13__namespace.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
@@ -12594,7 +12603,7 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
       }
       const staged = [];
       for (const file of files.slice(0, Math.max(room, 0))) {
-        const typeCheck = chunkQEJHAU7N_cjs.validateFile(file, acceptedFileTypes, void 0);
+        const typeCheck = chunk5BVFVXHN_cjs.validateFile(file, acceptedFileTypes, void 0);
         if (!typeCheck.valid) {
           onError?.(`${file.name}: ${typeCheck.error}`, {
             reason: "file-type",
@@ -12602,7 +12611,7 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
           });
           continue;
         }
-        const sizeCheck = chunkQEJHAU7N_cjs.validateFile(file, void 0, maxFileSize);
+        const sizeCheck = chunk5BVFVXHN_cjs.validateFile(file, void 0, maxFileSize);
         if (!sizeCheck.valid) {
           onError?.(`${file.name}: ${sizeCheck.error}`, {
             reason: "file-size",
@@ -12610,9 +12619,9 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
           });
           continue;
         }
-        const type = chunkQEJHAU7N_cjs.getFileType(file.type);
+        const type = chunk5BVFVXHN_cjs.getFileType(file.type);
         staged.push({
-          id: chunkQEJHAU7N_cjs.generateAttachmentId(),
+          id: chunk5BVFVXHN_cjs.generateAttachmentId(),
           file,
           type,
           previewUrl: type === "image" || type === "video" ? URL.createObjectURL(file) : void 0
@@ -12695,6 +12704,7 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
     textareaRef.current?.focus();
   };
   const handleKeyDown = (event) => {
+    if (mention.handleKeyDown(event)) return;
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       handleSend();
@@ -12736,7 +12746,7 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
         "data-slot": "chat-composer-attachments",
         className: "flex flex-wrap gap-2 px-3 pt-3",
         children: attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
-          chunkQEJHAU7N_cjs.AttachmentPreviewItem,
+          chunk5BVFVXHN_cjs.AttachmentPreviewItem,
           {
             attachment: { ...attachment, state: "pending" },
             onRemove: () => removeAttachment(attachment.id),
@@ -12747,48 +12757,69 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cells.input, children: /* @__PURE__ */ jsxRuntime.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: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsxs("div", { className: cells.input, ref: mention.anchorRef, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunk5BVFVXHN_cjs.MentionMenu,
+          {
+            mention,
+            label: mentionListLabel,
+            dataSlot: "chat-composer-mention-list"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx("div", { className: cells.add, children: /* @__PURE__ */ jsxRuntime.jsxs(
         chunk4SM3I7WE_cjs.Dropdown,
         {
@@ -13003,6 +13034,17 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
       ]
     }
   );
+  const card = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "chat-composer-card",
+      className: chunkS5RVSXDV_cjs.cn(
+        "rounded-2xl border border-neutral-200 bg-white shadow-sm",
+        "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
+      ),
+      children: composerCard
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -13013,17 +13055,16 @@ var ChatComposer = React13__namespace.forwardRef(function ChatComposer2({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        allowAttachments ? /* @__PURE__ */ jsxRuntime.jsx(
+          chunk5BVFVXHN_cjs.DragDropZone,
           {
-            "data-slot": "chat-composer-card",
-            className: chunkS5RVSXDV_cjs.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
       ]
     }
@@ -45518,163 +45559,163 @@ Object.defineProperty(exports, "getToolIcon", {
 });
 Object.defineProperty(exports, "AttachmentPreview", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.AttachmentPreview; }
+  get: function () { return chunkFQBTGS3E_cjs.AttachmentPreview; }
 });
 Object.defineProperty(exports, "ConversationHeader", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.ConversationHeader; }
+  get: function () { return chunkFQBTGS3E_cjs.ConversationHeader; }
 });
 Object.defineProperty(exports, "ConversationListItem", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.ConversationListItem; }
+  get: function () { return chunkFQBTGS3E_cjs.ConversationListItem; }
 });
 Object.defineProperty(exports, "ConversationListSkeleton", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.ConversationListSkeleton; }
+  get: function () { return chunkFQBTGS3E_cjs.ConversationListSkeleton; }
 });
 Object.defineProperty(exports, "DateSeparator", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.DateSeparator; }
+  get: function () { return chunkFQBTGS3E_cjs.DateSeparator; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.EmptyState; }
+  get: function () { return chunkFQBTGS3E_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "LightboxModal", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.LightboxModal; }
+  get: function () { return chunkFQBTGS3E_cjs.LightboxModal; }
 });
 Object.defineProperty(exports, "LoadMoreButton", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.LoadMoreButton; }
+  get: function () { return chunkFQBTGS3E_cjs.LoadMoreButton; }
 });
 Object.defineProperty(exports, "MessageBubble", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.MessageBubble; }
+  get: function () { return chunkFQBTGS3E_cjs.MessageBubble; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.MessageList; }
+  get: function () { return chunkFQBTGS3E_cjs.MessageList; }
 });
 Object.defineProperty(exports, "MessageStatusIcon", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.MessageStatusIcon; }
+  get: function () { return chunkFQBTGS3E_cjs.MessageStatusIcon; }
 });
 Object.defineProperty(exports, "MessageThread", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.MessageThread; }
+  get: function () { return chunkFQBTGS3E_cjs.MessageThread; }
 });
 Object.defineProperty(exports, "MessagingSplitView", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.MessagingSplitView; }
+  get: function () { return chunkFQBTGS3E_cjs.MessagingSplitView; }
 });
 Object.defineProperty(exports, "ReadReceiptIndicator", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.ReadReceiptIndicator; }
+  get: function () { return chunkFQBTGS3E_cjs.ReadReceiptIndicator; }
 });
 Object.defineProperty(exports, "SkeletonMessage", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.SkeletonMessage; }
+  get: function () { return chunkFQBTGS3E_cjs.SkeletonMessage; }
 });
 Object.defineProperty(exports, "TypingIndicator", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.TypingIndicator; }
+  get: function () { return chunkFQBTGS3E_cjs.TypingIndicator; }
 });
 Object.defineProperty(exports, "bubbleVariants", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.bubbleVariants; }
+  get: function () { return chunkFQBTGS3E_cjs.bubbleVariants; }
 });
 Object.defineProperty(exports, "formatDateLabel", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.formatDateLabel; }
+  get: function () { return chunkFQBTGS3E_cjs.formatDateLabel; }
 });
 Object.defineProperty(exports, "formatFileSize", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.formatFileSize; }
+  get: function () { return chunkFQBTGS3E_cjs.formatFileSize; }
 });
 Object.defineProperty(exports, "formatLastSeen", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.formatLastSeen; }
+  get: function () { return chunkFQBTGS3E_cjs.formatLastSeen; }
 });
 Object.defineProperty(exports, "getConversationSubtitle", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.getConversationSubtitle; }
+  get: function () { return chunkFQBTGS3E_cjs.getConversationSubtitle; }
 });
 Object.defineProperty(exports, "getConversationTitle", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.getConversationTitle; }
+  get: function () { return chunkFQBTGS3E_cjs.getConversationTitle; }
 });
 Object.defineProperty(exports, "groupMessagesByDate", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.groupMessagesByDate; }
+  get: function () { return chunkFQBTGS3E_cjs.groupMessagesByDate; }
 });
 Object.defineProperty(exports, "headerVariants", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.headerVariants; }
+  get: function () { return chunkFQBTGS3E_cjs.headerVariants; }
 });
 Object.defineProperty(exports, "isSameSenderGroup", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.isSameSenderGroup; }
+  get: function () { return chunkFQBTGS3E_cjs.isSameSenderGroup; }
 });
 Object.defineProperty(exports, "useMessageScroll", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.useMessageScroll; }
+  get: function () { return chunkFQBTGS3E_cjs.useMessageScroll; }
 });
 Object.defineProperty(exports, "useMessages", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.useMessages; }
+  get: function () { return chunkFQBTGS3E_cjs.useMessages; }
 });
 Object.defineProperty(exports, "useReadReceipts", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.useReadReceipts; }
+  get: function () { return chunkFQBTGS3E_cjs.useReadReceipts; }
 });
 Object.defineProperty(exports, "useTypingIndicator", {
   enumerable: true,
-  get: function () { return chunkHIMVH5OH_cjs.useTypingIndicator; }
+  get: function () { return chunkFQBTGS3E_cjs.useTypingIndicator; }
 });
 Object.defineProperty(exports, "AttachmentPicker", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.AttachmentPicker; }
+  get: function () { return chunk5BVFVXHN_cjs.AttachmentPicker; }
 });
 Object.defineProperty(exports, "AttachmentPreviewItem", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.AttachmentPreviewItem; }
+  get: function () { return chunk5BVFVXHN_cjs.AttachmentPreviewItem; }
 });
 Object.defineProperty(exports, "CameraButton", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.CameraButton; }
+  get: function () { return chunk5BVFVXHN_cjs.CameraButton; }
 });
 Object.defineProperty(exports, "CharacterCounter", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.CharacterCounter; }
+  get: function () { return chunk5BVFVXHN_cjs.CharacterCounter; }
 });
 Object.defineProperty(exports, "DragDropZone", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.DragDropZone; }
+  get: function () { return chunk5BVFVXHN_cjs.DragDropZone; }
 });
 Object.defineProperty(exports, "MessageComposer", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.MessageComposer; }
+  get: function () { return chunk5BVFVXHN_cjs.MessageComposer; }
 });
 Object.defineProperty(exports, "SendButton", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.SendButton; }
+  get: function () { return chunk5BVFVXHN_cjs.SendButton; }
 });
 Object.defineProperty(exports, "generateAttachmentId", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.generateAttachmentId; }
+  get: function () { return chunk5BVFVXHN_cjs.generateAttachmentId; }
 });
 Object.defineProperty(exports, "getFileType", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.getFileType; }
+  get: function () { return chunk5BVFVXHN_cjs.getFileType; }
 });
 Object.defineProperty(exports, "sendButtonVariants", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.sendButtonVariants; }
+  get: function () { return chunk5BVFVXHN_cjs.sendButtonVariants; }
 });
 Object.defineProperty(exports, "validateFile", {
   enumerable: true,
-  get: function () { return chunkQEJHAU7N_cjs.validateFile; }
+  get: function () { return chunk5BVFVXHN_cjs.validateFile; }
 });
 Object.defineProperty(exports, "RecordButton", {
   enumerable: true,