@mieweb/ui 0.9.0-dev.3 → 0.9.0-dev.5

package/dist/index.js

@@ -25,11 +25,11 @@ export { SourceTip } from './chunk-PHK4XBO5.js';
 export { Sparkline } from './chunk-CG4ZKJLE.js';
 import { Spinner, SpinnerWithLabel } from './chunk-UA7E7PDS.js';
 export { FullPageSpinner, Spinner, SpinnerWithLabel, spinnerVariants } from './chunk-UA7E7PDS.js';
-import { SparklesIcon, RefreshIcon, CloseIcon, AIMessageDisplay, ComposerModelSelector } from './chunk-VMQZAOFM.js';
-export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChatComposer, ChevronIcon, CloseIcon, CollapsiblePill, ComposerModelSelector, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon } from './chunk-VMQZAOFM.js';
-import { MessageComposer, EmptyState } from './chunk-RPG2ZP2T.js';
-export { AttachmentPreview, CharacterCounter, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageComposer, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SendButton, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, sendButtonVariants, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator } from './chunk-RPG2ZP2T.js';
-export { AttachmentPicker, AttachmentPreviewItem, CameraButton, DragDropZone, generateAttachmentId, getFileType, validateFile } from './chunk-IF3X2WZP.js';
+import { SparklesIcon, RefreshIcon, CloseIcon, AIMessageDisplay, ChatComposer } from './chunk-QWJGEDHV.js';
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChatComposer, ChevronIcon, CloseIcon, CollapsiblePill, ComposerModelSelector, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon } from './chunk-QWJGEDHV.js';
+import { EmptyState } from './chunk-PL6TFCYR.js';
+export { AttachmentPreview, CharacterCounter, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageComposer, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SendButton, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, sendButtonVariants, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator } from './chunk-PL6TFCYR.js';
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, DragDropZone, generateAttachmentId, getFileType, validateFile } from './chunk-MD3ZY4UO.js';
 import { RecordButton } from './chunk-VNWJTCBQ.js';
 export { RecordButton, formatDuration, recordButtonVariants } from './chunk-VNWJTCBQ.js';
 export { RichTextEditor, convertAngleBracketsToMustache, processDictation } from './chunk-QKFJDQEK.js';
@@ -80,7 +80,7 @@ export { CollabStatus, defaultCollabStatusLabels, useYjsCollabStatus } from './c
 import './chunk-7XUN3OQT.js';
 export { isHtmlEmpty, stripHtmlTags } from './chunk-ERLPVXOV.js';
 export { formatPhoneNumber, isPhoneNumberEmpty, isValidPhoneNumber, unformatPhoneNumber } from './chunk-ZVPJ2MH6.js';
-export { miewebUIPreset, miewebUISafelist } from './chunk-UHHYJ42E.js';
+export { miewebUIPreset, miewebUISafelist } from './chunk-X5YM3KXY.js';
 export { Accordion } from './chunk-KRU6IGV7.js';
 import { Alert, AlertTitle, AlertDescription } from './chunk-3JWAABYI.js';
 export { Alert, AlertDescription, AlertTitle, alertVariants } from './chunk-3JWAABYI.js';
@@ -1463,6 +1463,15 @@ var chatVariants = cva("flex flex-col", {
     size: "full"
   }
 });
+var LEGACY_ACCEPTED_FILE_TYPES = [
+  "image/*",
+  "video/*",
+  ".pdf",
+  ".doc",
+  ".docx"
+];
+var LEGACY_MAX_FILE_SIZE = 25 * 1024 * 1024;
+var normalizeLegacySlot = (node) => node || void 0;
 function AIChat({
   session,
   messages: messagesProp,
@@ -1501,11 +1510,88 @@ function AIChat({
     const container = messagesContainerRef.current;
     if (container) container.scrollTop = container.scrollHeight;
   }, [messages]);
-  const handleSend = async (message) => {
-    if (message.content.trim() && onSendMessage) {
-      onSendMessage(message.content.trim());
+  const {
+    showAttachmentPicker,
+    inputTrailing,
+    onTypingStart,
+    onTypingStop,
+    value: hostValue,
+    onValueChange: hostOnValueChange,
+    onSend: hostOnSend,
+    micSlot: hostMicSlot,
+    ...composerRest
+  } = composerProps ?? {};
+  delete composerRest.showCameraButton;
+  delete composerRest.variant;
+  const hasInputTrailing = !!composerProps && "inputTrailing" in composerProps;
+  const legacyAttachments = !!composerProps && "showAttachmentPicker" in composerProps ? showAttachmentPicker ?? true : false;
+  const [draft, setDraft] = React13.useState("");
+  const draftEpochRef = React13.useRef(0);
+  const composerValue = hostValue ?? draft;
+  const isHostControlled = hostValue !== void 0;
+  const handleComposerValueChange = React13.useCallback(
+    (value) => {
+      draftEpochRef.current += 1;
+      setDraft(value);
+      if (isHostControlled) hostOnValueChange?.(value);
+    },
+    [isHostControlled, hostOnValueChange]
+  );
+  const [isTyping, setIsTyping] = React13.useState(false);
+  const typingTimeoutRef = React13.useRef(
+    null
+  );
+  React13.useEffect(() => {
+    if (!onTypingStart && !onTypingStop) return;
+    if (composerValue.length > 0 && !isTyping) {
+      setIsTyping(true);
+      onTypingStart?.();
+    }
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      if (isTyping) {
+        setIsTyping(false);
+        onTypingStop?.();
+      }
+    }, 2e3);
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, [composerValue, isTyping, onTypingStart, onTypingStop]);
+  const stopTypingOnSend = () => {
+    setIsTyping(false);
+    onTypingStop?.();
+  };
+  const sendWithRestore = async (message, send) => {
+    stopTypingOnSend();
+    const epoch = draftEpochRef.current;
+    try {
+      await Promise.resolve(send(message));
+    } catch (error) {
+      if (draftEpochRef.current === epoch) {
+        setDraft(message.content);
+        if (isHostControlled) hostOnValueChange?.(message.content);
+      }
+      throw error;
     }
   };
+  const handleSend = async (message) => {
+    if (!onSendMessage) return;
+    const content = message.content.trim();
+    const attachments = message.attachments?.length ? message.attachments : void 0;
+    if (!content && !attachments) return;
+    await sendWithRestore(
+      message,
+      () => (
+        // Keep the exact legacy call shape for text-only sends.
+        attachments ? onSendMessage(content, attachments) : onSendMessage(content)
+      )
+    );
+  };
   const handleSuggestionSelect = (action) => {
     if (onSuggestedAction) {
       onSuggestedAction(action);
@@ -1624,18 +1710,14 @@ function AIChat({
                   onSelect: handleSuggestionSelect
                 }
               ) }),
-              /* @__PURE__ */ jsx(
-                MessageComposer,
+              /* @__PURE__ */ jsx("div", { "data-slot": "ai-chat-composer", className: "p-3", children: /* @__PURE__ */ jsx(
+                ChatComposer,
                 {
-                  onSend: handleSend,
+                  onSend: hostOnSend ? (message) => sendWithRestore(message, hostOnSend) : handleSend,
                   placeholder: inputPlaceholder,
                   disabled: isGenerating,
                   isSending: isGenerating,
-                  showAttachmentPicker: false,
-                  showCameraButton: false,
-                  showCharacterCount: false,
-                  variant: "minimal",
-                  inputTrailing: talkToText ? /* @__PURE__ */ jsx(
+                  micSlot: hostMicSlot !== void 0 ? hostMicSlot : hasInputTrailing ? normalizeLegacySlot(inputTrailing) : talkToText ? /* @__PURE__ */ jsx(
                     RecordButton,
                     {
                       variant: "ghost",
@@ -1647,9 +1729,16 @@ function AIChat({
                       onRecordingComplete
                     }
                   ) : void 0,
-                  ...composerProps
+                  ...composerRest,
+                  allowAttachments: composerRest.allowAttachments ?? legacyAttachments,
+                  maxLength: composerRest.maxLength ?? 1600,
+                  inputLabel: composerRest.inputLabel ?? "Message",
+                  acceptedFileTypes: composerRest.acceptedFileTypes ?? (legacyAttachments ? LEGACY_ACCEPTED_FILE_TYPES : void 0),
+                  maxFileSize: composerRest.maxFileSize ?? (legacyAttachments ? LEGACY_MAX_FILE_SIZE : void 0),
+                  value: composerValue,
+                  onValueChange: handleComposerValueChange
                 }
-              )
+              ) })
             ]
           }
         )
@@ -2115,20 +2204,17 @@ function OzwellChat({
     });
     setMessagesMenuOpen(false);
   };
-  const modelSelector = showModelSelector && models ? /* @__PURE__ */ jsx(
-    ComposerModelSelector,
-    {
-      models: models.options,
-      value: models.value,
-      onChange: models.onChange,
-      ...models.providerFilter !== void 0 ? {
-        providerFilter: models.providerFilter,
-        onProviderFilterChange: models.onProviderFilterChange
-      } : { onProviderFilterChange: models.onProviderFilterChange },
-      boundaryRef: shellRef,
-      className: "border-border bg-card text-foreground max-w-[min(142px,38vw)] shadow-sm"
-    }
-  ) : void 0;
+  const modelSelectorProps = showModelSelector && models ? {
+    models: models.options,
+    value: models.value,
+    onChange: models.onChange,
+    ...models.providerFilter !== void 0 ? {
+      providerFilter: models.providerFilter,
+      onProviderFilterChange: models.onProviderFilterChange
+    } : { onProviderFilterChange: models.onProviderFilterChange },
+    boundaryRef: shellRef,
+    className: "max-w-[min(160px,44vw)]"
+  } : void 0;
   const startQueuedMessageEdit = () => {
     setQueuedMessageDraft(queuedMessage ?? "");
     setIsEditingQueuedMessage(true);
@@ -2342,7 +2428,6 @@ function OzwellChat({
           {
             messages: chatMessages,
             isGenerating,
-            className: showModelSelector ? '[&_[data-slot="composer-input"]]:pe-[min(160px,44vw)]' : void 0,
             showHeader: false,
             height: "100%",
             variant: "embedded",
@@ -2352,9 +2437,9 @@ function OzwellChat({
             renderTextContent: renderMessageTextContent,
             renderMessageFooter: renderQueuedMessageFooter,
             composerProps: {
-              inputTrailing: modelSelector,
               disabled: false,
-              isSending: false
+              isSending: false,
+              ...modelSelectorProps ? { showModelSelector: true, modelSelectorProps } : {}
             }
           }
         ),
@@ -5741,9 +5826,9 @@ function HandsFreeChat({
             // Controlled input (value/onValueChange) comes from the hook — it fills the box with the live
             // caption while dictating, else the typed text. We only add the mic button here.
             ...oz.chatProps.composerProps,
-            // The composer's OWN mic button, driven by our shared stream (controlled mode disables its
+            // The composer's OWN mic slot, driven by our shared stream (controlled mode disables its
             // internal recorder). So the built-in mic and "hey ozwell" both do the same thing — one mic.
-            inputTrailing: /* @__PURE__ */ jsx(
+            micSlot: /* @__PURE__ */ jsx(
               "span",
               {
                 onClickCapture: () => {