@mieweb/ui 0.10.0-dev.7 → 0.10.0-dev.9

package/dist/index.d.cts

@@ -75,7 +75,7 @@ export { Slider, SliderProps, sliderRangeVariants, sliderThumbVariants, sliderTr
 export { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from './components/Switch/index.cjs';
 export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from './components/Table/index.cjs';
 import { UseScrollSpyOptions } from './hooks/index.cjs';
-export { Direction, DragOverState, HoverPreviewState, KeyboardShortcutOptions, MediaTransportState, RTL_LOCALES, UseDragReorderOptions, UseDragReorderReturn, UseMediaTransportOptions, UseMediaTransportReturn, UseScrollSpyReturn, UseYouTubeHoverPreviewOptions, UseYouTubeHoverPreviewReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useYouTubeHoverPreview } from './hooks/index.cjs';
+export { Direction, DragOverState, HoverPreviewState, KeyboardShortcutOptions, MediaTransportState, RTL_LOCALES, UseDragReorderOptions, UseDragReorderReturn, UseMediaTransportOptions, UseMediaTransportReturn, UseScrollSpyReturn, UseStickToBottomOptions, UseStickToBottomReturn, UseYouTubeHoverPreviewOptions, UseYouTubeHoverPreviewReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useStickToBottom, useStreamEndedBelowFold, useYouTubeHoverPreview } from './hooks/index.cjs';
 export { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps, tabsListVariants, tabsTriggerVariants } from './components/Tabs/index.cjs';
 export { SmallMuted, Text, TextProps, textVariants } from './components/Text/index.cjs';
 export { Textarea, TextareaProps, textareaVariants } from './components/Textarea/index.cjs';

package/dist/index.d.ts

@@ -75,7 +75,7 @@ export { Slider, SliderProps, sliderRangeVariants, sliderThumbVariants, sliderTr
 export { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from './components/Switch/index.js';
 export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from './components/Table/index.js';
 import { UseScrollSpyOptions } from './hooks/index.js';
-export { Direction, DragOverState, HoverPreviewState, KeyboardShortcutOptions, MediaTransportState, RTL_LOCALES, UseDragReorderOptions, UseDragReorderReturn, UseMediaTransportOptions, UseMediaTransportReturn, UseScrollSpyReturn, UseYouTubeHoverPreviewOptions, UseYouTubeHoverPreviewReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useYouTubeHoverPreview } from './hooks/index.js';
+export { Direction, DragOverState, HoverPreviewState, KeyboardShortcutOptions, MediaTransportState, RTL_LOCALES, UseDragReorderOptions, UseDragReorderReturn, UseMediaTransportOptions, UseMediaTransportReturn, UseScrollSpyReturn, UseStickToBottomOptions, UseStickToBottomReturn, UseYouTubeHoverPreviewOptions, UseYouTubeHoverPreviewReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useStickToBottom, useStreamEndedBelowFold, useYouTubeHoverPreview } from './hooks/index.js';
 export { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps, tabsListVariants, tabsTriggerVariants } from './components/Tabs/index.js';
 export { SmallMuted, Text, TextProps, textVariants } from './components/Text/index.js';
 export { Textarea, TextareaProps, textareaVariants } from './components/Textarea/index.js';

package/dist/index.js

@@ -29,8 +29,8 @@ import { Skeleton } from './chunk-ZIUADGAR.js';
 export { Skeleton, SkeletonCard, SkeletonTable, SkeletonText, skeletonVariants } from './chunk-ZIUADGAR.js';
 export { SourceTip } from './chunk-Z5V7SAZ4.js';
 export { Sparkline } from './chunk-CG4ZKJLE.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 { SparklesIcon, RefreshIcon, CloseIcon, JumpToBottomButton, AIMessageDisplay } from './chunk-HACNIFO3.js';
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon } from './chunk-HACNIFO3.js';
 import { useTypingEmulation, EmptyState } from './chunk-3M7TAXNR.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, useTypingEmulation, useTypingIndicator } from './chunk-3M7TAXNR.js';
 import { notifyComposerMigrationOnce, ChatComposer, DEFAULT_MAX_FILE_SIZE, DEFAULT_ACCEPTED_FILE_TYPES } from './chunk-ACCAXVOG.js';
@@ -95,10 +95,12 @@ export { CalendarView, defaultCalendarLabels } from './chunk-G4D6CLBT.js';
 export { accentClasses, defaultViewLabels, toDateTime } from './chunk-3YBS4WUQ.js';
 import { Spinner, SpinnerWithLabel } from './chunk-UA7E7PDS.js';
 export { FullPageSpinner, Spinner, SpinnerWithLabel, spinnerVariants } from './chunk-UA7E7PDS.js';
-import { useDirection, useCommandK, useIsMobile, useMediaQuery } from './chunk-JHULS3EC.js';
-export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery } from './chunk-JHULS3EC.js';
+import { useDirection, useCommandK, useIsMobile, useMediaQuery } from './chunk-AWJBOND5.js';
+export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery } from './chunk-AWJBOND5.js';
 export { useYouTubeHoverPreview } from './chunk-POWS35OT.js';
 export { useTheme } from './chunk-KJZNEVYM.js';
+import { useStickToBottom, useStreamEndedBelowFold } from './chunk-BM35CACB.js';
+export { useStickToBottom, useStreamEndedBelowFold } from './chunk-BM35CACB.js';
 import { useScrollSpy } from './chunk-WBGUYSWY.js';
 export { useScrollSpy } from './chunk-WBGUYSWY.js';
 export { DEFAULT_FILLER_WORDS, DEFAULT_MIN_SILENCE_MS, DEFAULT_NL_SILENCE_MS, buildPlaybackSegments, getSpeedAtIndex, initEditableWords, insertSilences, useTranscriptEdits } from './chunk-UUI7WXI5.js';
@@ -107,7 +109,7 @@ export { useMediaTransport } from './chunk-SQHMGT4W.js';
 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-XEPDIFEA.js';
+export { miewebUIPreset, miewebUISafelist } from './chunk-4A3W4TQF.js';
 export { Accordion } from './chunk-KRU6IGV7.js';
 import { Alert, AlertTitle, AlertDescription } from './chunk-3JWAABYI.js';
 export { Alert, AlertDescription, AlertTitle, alertVariants } from './chunk-3JWAABYI.js';
@@ -1512,7 +1514,6 @@ function AIChat({
   renderTextContent,
   renderMessageFooter
 }) {
-  const messagesContainerRef = React13.useRef(null);
   React13.useEffect(() => {
     notifyComposerMigrationOnce("AIChat");
   }, []);
@@ -1521,10 +1522,108 @@ function AIChat({
     [session?.messages, messagesProp]
   );
   const isGenerating = session?.isGenerating || isGeneratingProp || false;
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const {
+    containerRef: messagesContainerRef,
+    contentRef: messagesContentRef,
+    isAtBottom,
+    scrollToBottom,
+    anchorToTurnStart,
+    followIfPinned,
+    stopFollowing
+  } = useStickToBottom();
+  const [hasNewBelow, setHasNewBelow] = React13.useState(false);
+  const [turnStartId, setTurnStartId] = React13.useState(null);
+  const [turnMinHeight, setTurnMinHeight] = React13.useState();
+  const anchoredTurnRef = React13.useRef(null);
+  React13.useEffect(() => {
+    setTurnStartId(null);
+    anchoredTurnRef.current = null;
+    scrollToBottom("auto");
+    setHasNewBelow(false);
+  }, [session?.id, scrollToBottom]);
+  const messageCount = messages.length;
+  const prevMessageCountRef = React13.useRef(messageCount);
+  const policySessionRef = React13.useRef(session?.id);
+  const policyBaselinedRef = React13.useRef(false);
   React13.useEffect(() => {
+    if (!policyBaselinedRef.current || policySessionRef.current !== session?.id) {
+      policyBaselinedRef.current = true;
+      policySessionRef.current = session?.id;
+      prevMessageCountRef.current = messageCount;
+      if (messages.at(-1)?.status === "streaming") stopFollowing();
+      return;
+    }
+    const prevCount = prevMessageCountRef.current;
+    if (messageCount === prevCount) return;
+    const grew = messageCount > prevCount;
+    prevMessageCountRef.current = messageCount;
+    const ownMessage = grew ? messages.slice(prevCount).filter((m) => m.role === "user").at(-1) : void 0;
+    if (ownMessage) {
+      setTurnStartId(ownMessage.id);
+    } else if (grew && messages.at(-1)?.status === "streaming") {
+      followIfPinned("auto");
+      stopFollowing();
+    } else if (!followIfPinned("auto") && grew) {
+      setHasNewBelow(true);
+    }
+  }, [messageCount, isAtBottom, session?.id]);
+  React13.useLayoutEffect(() => {
+    if (!turnStartId || anchoredTurnRef.current === turnStartId) return;
     const container = messagesContainerRef.current;
-    if (container) container.scrollTop = container.scrollHeight;
-  }, [messages]);
+    if (!container) return;
+    const reserve = Math.max(0, container.clientHeight - 32);
+    if (turnMinHeight !== reserve) {
+      setTurnMinHeight(reserve);
+      return;
+    }
+    const target = container.querySelector(
+      '[data-slot="ai-chat-turn"]'
+    );
+    if (target) {
+      anchorToTurnStart(target, prefersReducedMotion ? "auto" : "smooth");
+      anchoredTurnRef.current = turnStartId;
+    }
+  }, [
+    turnStartId,
+    turnMinHeight,
+    anchorToTurnStart,
+    prefersReducedMotion,
+    messagesContainerRef
+  ]);
+  const turnIndex = React13.useMemo(
+    () => turnStartId ? messages.findIndex((m) => m.id === turnStartId) : -1,
+    [messages, turnStartId]
+  );
+  React13.useEffect(() => {
+    if (isAtBottom) setHasNewBelow(false);
+  }, [isAtBottom]);
+  const raiseNewBelow = React13.useCallback(() => setHasNewBelow(true), []);
+  const resumeFollowing = React13.useCallback(
+    () => scrollToBottom("auto"),
+    [scrollToBottom]
+  );
+  useStreamEndedBelowFold(
+    messages.at(-1),
+    isAtBottom,
+    raiseNewBelow,
+    resumeFollowing
+  );
+  const handleJumpToBottom = React13.useCallback(() => {
+    scrollToBottom(prefersReducedMotion ? "auto" : "smooth");
+  }, [scrollToBottom, prefersReducedMotion]);
+  const renderMessageItem = (message) => /* @__PURE__ */ jsx(
+    AIMessageDisplay,
+    {
+      message,
+      userName,
+      showTimestamp: showTimestamps,
+      onLinkClick: handleLinkClick,
+      renderTextContent,
+      renderMessageFooter
+    },
+    message.id
+  );
   const {
     showAttachmentPicker,
     inputTrailing,
@@ -1662,30 +1761,47 @@ function AIChat({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: messagesContainerRef,
-            "data-slot": "ai-chat-messages",
-            className: "flex-1 overflow-y-auto px-4 py-4",
-            children: messages.length === 0 ? /* @__PURE__ */ jsx(
-              AIEmptyState,
-              {
-                suggestions,
-                onSuggestionSelect: handleSuggestionSelect
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: messages.map((message) => /* @__PURE__ */ jsx(
-              AIMessageDisplay,
-              {
-                message,
-                userName,
-                showTimestamp: showTimestamps,
-                onLinkClick: handleLinkClick,
-                renderTextContent,
-                renderMessageFooter
-              },
-              message.id
-            )) })
+            "data-slot": "ai-chat-messages-viewport",
+            className: "relative flex min-h-0 flex-1 flex-col",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: messagesContainerRef,
+                  "data-slot": "ai-chat-messages",
+                  className: "flex-1 overflow-y-auto px-4 py-4",
+                  children: /* @__PURE__ */ jsx("div", { ref: messagesContentRef, children: messages.length === 0 ? /* @__PURE__ */ jsx(
+                    AIEmptyState,
+                    {
+                      suggestions,
+                      onSuggestionSelect: handleSuggestionSelect
+                    }
+                  ) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                    (turnIndex === -1 ? messages : messages.slice(0, turnIndex)).map(renderMessageItem),
+                    turnIndex !== -1 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-slot": "ai-chat-turn",
+                        className: "space-y-4",
+                        style: { minHeight: turnMinHeight },
+                        children: messages.slice(turnIndex).map(renderMessageItem)
+                      }
+                    )
+                  ] }) })
+                }
+              ),
+              !isAtBottom && /* @__PURE__ */ jsx(
+                JumpToBottomButton,
+                {
+                  dataSlot: "ai-chat-jump-to-bottom",
+                  hasNewMessages: hasNewBelow,
+                  onClick: handleJumpToBottom
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsxs(