@mieweb/ui 0.10.0-dev.19 → 0.10.0-dev.20

package/dist/components/SuperChat/index.js

@@ -1,8 +1,8 @@
 import { TextRenderContext } from '../../chunk-I6CY5C6A.js';
 export { TextRenderContext, useTextRenderContext } from '../../chunk-I6CY5C6A.js';
 import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon, JumpToBottomButton } from '../../chunk-TZJQB4P2.js';
-import { notifyComposerMigrationOnce, ChatComposer } from '../../chunk-QR7EG7YH.js';
-import { Dropdown, DropdownSubmenu, DropdownItem } from '../../chunk-ZGRCSNPK.js';
+import { notifyComposerMigrationOnce, ChatComposer } from '../../chunk-2ABWFQQH.js';
+import { Dropdown, DropdownSubmenu, DropdownItem } from '../../chunk-TF7YWJHU.js';
 import { Avatar } from '../../chunk-HZ4MBUC3.js';
 import '../../chunk-IQ4KQJAO.js';
 import { useStickToBottom, useStreamEndedBelowFold } from '../../chunk-BM35CACB.js';
@@ -15,7 +15,7 @@ import '../../chunk-T4ME7QCT.js';
 import '../../chunk-BKSPDTX4.js';
 import { usePrefersReducedMotion } from '../../chunk-HB7C7NB5.js';
 import { Badge } from '../../chunk-BMSG4NBH.js';
-import '../../chunk-XCP454Q6.js';
+import { AnimatedPresence, Animated } from '../../chunk-F4N67NAF.js';
 import { cn } from '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';
 import * as React3 from 'react';
@@ -1480,14 +1480,23 @@ function SuperChat({
                   ] })
                 }
               ),
-              order !== "desc" && !isAtBottom && /* @__PURE__ */ jsx(
-                JumpToBottomButton,
+              /* @__PURE__ */ jsx(AnimatedPresence, { children: order !== "desc" && !isAtBottom && /* @__PURE__ */ jsx(
+                Animated,
                 {
-                  dataSlot: "superchat-jump-to-bottom",
-                  hasNewMessages: hasNewBelow,
-                  onClick: handleJumpToBottom
-                }
-              )
+                  preset: "fade",
+                  mode: "presence",
+                  className: "absolute inset-x-0 bottom-0 z-20",
+                  children: /* @__PURE__ */ jsx(
+                    JumpToBottomButton,
+                    {
+                      dataSlot: "superchat-jump-to-bottom",
+                      hasNewMessages: hasNewBelow,
+                      onClick: handleJumpToBottom
+                    }
+                  )
+                },
+                "jump-to-bottom"
+              ) })
             ]
           }
         ),
@@ -1523,6 +1532,8 @@ function SuperChatConversations({
   const [internalActive, setInternalActive] = React3.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
+  const [hasMounted, setHasMounted] = React3.useState(false);
+  React3.useEffect(() => setHasMounted(true), []);
   const requestedId = activeConversationId ?? internalActive;
   const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
   const sortedConversations = React3.useMemo(
@@ -1577,10 +1588,21 @@ function SuperChatConversations({
                       /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: c.title }),
                       last?.text && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-neutral-600 dark:text-neutral-400", children: last.text })
                     ] }),
-                    !!c.unread && /* @__PURE__ */ jsxs("span", { className: "bg-primary-600 ms-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold text-white", children: [
-                      c.unread,
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: " unread messages" })
-                    ] })
+                    /* @__PURE__ */ jsx(AnimatedPresence, { initial: hasMounted, children: !!c.unread && /* @__PURE__ */ jsxs(
+                      Animated,
+                      {
+                        as: "span",
+                        preset: "pop",
+                        mode: "presence",
+                        "data-slot": "superchat-unread-badge",
+                        className: "bg-primary-600 ms-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold text-white",
+                        children: [
+                          c.unread,
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: " unread messages" })
+                        ]
+                      },
+                      "unread"
+                    ) })
                   ]
                 }
               ) }, c.id);