framepexls-ui-lib 2.2.7 → 2.2.11

package/dist/Sidebar.js

@@ -64,7 +64,24 @@ function groupItems(items) {
   }
   return Array.from(byGroup.entries());
 }
-function GroupHeader({ title }) {
+function GroupHeader({ collapsed, onToggle, title }) {
+  if (onToggle) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Button.default,
+      {
+        unstyled: true,
+        type: "button",
+        "aria-expanded": !collapsed,
+        onClick: onToggle,
+        className: "mb-3 flex w-full items-center gap-3 rounded-xl px-2 py-1 text-left transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--foreground)_5%,transparent)] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.18em] text-[var(--muted)]", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-px flex-1 bg-[linear-gradient(90deg,color-mix(in_oklab,var(--border)_72%,transparent),transparent)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronDownIcon, { "aria-hidden": true, className: cx("h-3.5 w-3.5 shrink-0 text-[var(--muted)] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]", collapsed ? "-rotate-90" : "rotate-0") })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3 flex items-center gap-3 px-2 select-none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.18em] text-[var(--muted)] text-left", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px flex-1 bg-[linear-gradient(90deg,color-mix(in_oklab,var(--border)_72%,transparent),transparent)]" })
@@ -275,6 +292,7 @@ function Sidebar({
   onBrandClick,
   showBrand = true,
   collapsedKey = "ga:sidebar-collapsed",
+  groupCollapsePersistKey,
   defaultCollapsed,
   onCollapsedChange,
   brandLogoSrc,
@@ -319,6 +337,8 @@ function Sidebar({
   const [navQuery, setNavQuery] = import_react.default.useState("");
   const [navDrag, setNavDrag] = import_react.default.useState(null);
   const [navDrop, setNavDrop] = import_react.default.useState(null);
+  const resolvedGroupCollapsePersistKey = groupCollapsePersistKey != null ? groupCollapsePersistKey : `${collapsedKey}:groups`;
+  const [collapsedGroups, setCollapsedGroups] = import_react.default.useState({});
   (0, import_react.useLayoutEffect)(() => {
     if (!(workspaces == null ? void 0 : workspaces.length)) return;
     if (activeWorkspaceId !== void 0) return;
@@ -349,6 +369,16 @@ function Sidebar({
   (0, import_react.useEffect)(() => {
     setMotionEnabled(true);
   }, []);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!resolvedGroupCollapsePersistKey) return;
+    try {
+      const raw = localStorage.getItem(resolvedGroupCollapsePersistKey);
+      const parsed = raw ? JSON.parse(raw) : null;
+      setCollapsedGroups(parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {});
+    } catch {
+      setCollapsedGroups({});
+    }
+  }, [resolvedGroupCollapsePersistKey]);
   (0, import_react.useLayoutEffect)(() => {
     if (!navEnabled) return;
     try {
@@ -375,9 +405,20 @@ function Sidebar({
     }
     onCollapsedChange == null ? void 0 : onCollapsedChange(collapsed);
   }, [collapsed, collapsedKey, motionEnabled, onCollapsedChange]);
+  (0, import_react.useEffect)(() => {
+    if (!motionEnabled) return;
+    if (!resolvedGroupCollapsePersistKey) return;
+    try {
+      localStorage.setItem(resolvedGroupCollapsePersistKey, JSON.stringify(collapsedGroups));
+    } catch {
+    }
+  }, [collapsedGroups, motionEnabled, resolvedGroupCollapsePersistKey]);
   const toggleCollapsed = () => {
     setCollapsed((c) => !c);
   };
+  const toggleGroupCollapsed = import_react.default.useCallback((groupName) => {
+    setCollapsedGroups((current) => ({ ...current, [groupName]: !current[groupName] }));
+  }, []);
   const sidebarWidth = collapsed ? 112 : 288;
   const sidebarWidthTransition = motionEnabled ? {
     type: "tween",
@@ -630,8 +671,10 @@ function Sidebar({
             SidebarInner,
             {
               groups,
+              collapsedGroups,
               collapsed,
               toggleCollapsed,
+              onToggleGroup: toggleGroupCollapsed,
               activeKey,
               go,
               navEditable: navEnabled,
@@ -725,9 +768,11 @@ function Sidebar({
               SidebarInner,
               {
                 groups,
+                collapsedGroups,
                 mobile: true,
                 activeKey,
                 toggleCollapsed,
+                onToggleGroup: toggleGroupCollapsed,
                 go,
                 navEditable: navEnabled,
                 navCustomizeLabel: navCustomizeButtonLabel,
@@ -1787,8 +1832,10 @@ function WorkspaceSwitcher({
 }
 function SidebarInner({
   groups,
+  collapsedGroups,
   collapsed,
   toggleCollapsed,
+  onToggleGroup,
   mobile,
   activeKey,
   go,
@@ -1909,6 +1956,11 @@ function SidebarInner({
   const calmFadeInitial = { opacity: 0, y: 4, filter: "blur(6px)" };
   const calmFadeAnimate = { opacity: 1, y: 0, filter: "blur(0px)" };
   const calmFadeExit = { opacity: 0, y: 2, filter: "blur(6px)" };
+  const groupCollapseTransition = { duration: 0.12, ease: "easeOut" };
+  const groupHasActiveItem = import_react.default.useCallback((items) => items.some((item) => {
+    var _a2;
+    return item.key === activeKey || ((_a2 = item.children) != null ? _a2 : []).some((child) => child.key === activeKey);
+  }), [activeKey]);
   const QuickIcon = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "grid h-9 w-9 place-items-center rounded-2xl text-[var(--muted)] transition-all duration-300 group-hover:scale-[1.04] group-hover:text-[var(--foreground)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[var(--foreground)]", children }) });
   const QuickActionsSection = () => {
     if (!hasQuickActions) return null;
@@ -2425,35 +2477,46 @@ function SidebarInner({
               return ((_a3 = i.children) == null ? void 0 : _a3.length) ? i.children.some((c) => c) : true;
             });
             if (visibles.length === 0) return null;
+            const groupCollapsed = !groupHasActiveItem(visibles) && Boolean(collapsedGroups == null ? void 0 : collapsedGroups[groupName]);
             return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_framer_motion.motion.div,
               {
-                layout: true,
                 initial: calmFadeInitial,
                 animate: calmFadeAnimate,
                 transition: { duration: 0.24, delay: groupIndex * 0.03, ease: calmFadeEase },
                 children: [
-                  !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupHeader, { title: groupName }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: visibles.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupHeader, { collapsed: groupCollapsed, title: groupName, onToggle: () => onToggleGroup == null ? void 0 : onToggleGroup(groupName) }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !groupCollapsed || collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_framer_motion.motion.div,
                     {
-                      layout: true,
-                      initial: { opacity: 0, filter: "blur(6px)" },
-                      animate: { opacity: 1, filter: "blur(0px)" },
-                      transition: { duration: 0.2, delay: itemIndex * 0.02, ease: calmFadeEase },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        RenderItem,
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: groupCollapseTransition,
+                      className: "space-y-2",
+                      style: { willChange: "opacity" },
+                      children: visibles.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_framer_motion.motion.div,
                         {
-                          item,
-                          collapsed: collapsed != null ? collapsed : false,
-                          activeKey,
-                          go,
-                          color
-                        }
-                      )
+                          initial: { opacity: 0 },
+                          animate: { opacity: 1 },
+                          transition: { duration: 0.1, ease: "easeOut" },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            RenderItem,
+                            {
+                              item,
+                              collapsed: collapsed != null ? collapsed : false,
+                              activeKey,
+                              go,
+                              color
+                            }
+                          )
+                        },
+                        item.key
+                      ))
                     },
-                    item.key
-                  )) }),
+                    `${groupName}-items`
+                  ) : null }),
                   !inserted && quick && firstGroupNameWithItems === groupName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: (() => {
                     inserted = true;
                     return quick;

package/dist/Sidebar.mjs

@@ -43,7 +43,24 @@ function groupItems(items) {
   }
   return Array.from(byGroup.entries());
 }
-function GroupHeader({ title }) {
+function GroupHeader({ collapsed, onToggle, title }) {
+  if (onToggle) {
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        unstyled: true,
+        type: "button",
+        "aria-expanded": !collapsed,
+        onClick: onToggle,
+        className: "mb-3 flex w-full items-center gap-3 rounded-xl px-2 py-1 text-left transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--foreground)_5%,transparent)] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.18em] text-[var(--muted)]", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-[linear-gradient(90deg,color-mix(in_oklab,var(--border)_72%,transparent),transparent)]" }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": true, className: cx("h-3.5 w-3.5 shrink-0 text-[var(--muted)] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]", collapsed ? "-rotate-90" : "rotate-0") })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-3 px-2 select-none", children: [
     /* @__PURE__ */ jsx("div", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.18em] text-[var(--muted)] text-left", children: title }),
     /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[linear-gradient(90deg,color-mix(in_oklab,var(--border)_72%,transparent),transparent)]" })
@@ -254,6 +271,7 @@ function Sidebar({
   onBrandClick,
   showBrand = true,
   collapsedKey = "ga:sidebar-collapsed",
+  groupCollapsePersistKey,
   defaultCollapsed,
   onCollapsedChange,
   brandLogoSrc,
@@ -298,6 +316,8 @@ function Sidebar({
   const [navQuery, setNavQuery] = React.useState("");
   const [navDrag, setNavDrag] = React.useState(null);
   const [navDrop, setNavDrop] = React.useState(null);
+  const resolvedGroupCollapsePersistKey = groupCollapsePersistKey != null ? groupCollapsePersistKey : `${collapsedKey}:groups`;
+  const [collapsedGroups, setCollapsedGroups] = React.useState({});
   useLayoutEffect(() => {
     if (!(workspaces == null ? void 0 : workspaces.length)) return;
     if (activeWorkspaceId !== void 0) return;
@@ -328,6 +348,16 @@ function Sidebar({
   useEffect(() => {
     setMotionEnabled(true);
   }, []);
+  useLayoutEffect(() => {
+    if (!resolvedGroupCollapsePersistKey) return;
+    try {
+      const raw = localStorage.getItem(resolvedGroupCollapsePersistKey);
+      const parsed = raw ? JSON.parse(raw) : null;
+      setCollapsedGroups(parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {});
+    } catch {
+      setCollapsedGroups({});
+    }
+  }, [resolvedGroupCollapsePersistKey]);
   useLayoutEffect(() => {
     if (!navEnabled) return;
     try {
@@ -354,9 +384,20 @@ function Sidebar({
     }
     onCollapsedChange == null ? void 0 : onCollapsedChange(collapsed);
   }, [collapsed, collapsedKey, motionEnabled, onCollapsedChange]);
+  useEffect(() => {
+    if (!motionEnabled) return;
+    if (!resolvedGroupCollapsePersistKey) return;
+    try {
+      localStorage.setItem(resolvedGroupCollapsePersistKey, JSON.stringify(collapsedGroups));
+    } catch {
+    }
+  }, [collapsedGroups, motionEnabled, resolvedGroupCollapsePersistKey]);
   const toggleCollapsed = () => {
     setCollapsed((c) => !c);
   };
+  const toggleGroupCollapsed = React.useCallback((groupName) => {
+    setCollapsedGroups((current) => ({ ...current, [groupName]: !current[groupName] }));
+  }, []);
   const sidebarWidth = collapsed ? 112 : 288;
   const sidebarWidthTransition = motionEnabled ? {
     type: "tween",
@@ -609,8 +650,10 @@ function Sidebar({
             SidebarInner,
             {
               groups,
+              collapsedGroups,
               collapsed,
               toggleCollapsed,
+              onToggleGroup: toggleGroupCollapsed,
               activeKey,
               go,
               navEditable: navEnabled,
@@ -704,9 +747,11 @@ function Sidebar({
               SidebarInner,
               {
                 groups,
+                collapsedGroups,
                 mobile: true,
                 activeKey,
                 toggleCollapsed,
+                onToggleGroup: toggleGroupCollapsed,
                 go,
                 navEditable: navEnabled,
                 navCustomizeLabel: navCustomizeButtonLabel,
@@ -1766,8 +1811,10 @@ function WorkspaceSwitcher({
 }
 function SidebarInner({
   groups,
+  collapsedGroups,
   collapsed,
   toggleCollapsed,
+  onToggleGroup,
   mobile,
   activeKey,
   go,
@@ -1888,6 +1935,11 @@ function SidebarInner({
   const calmFadeInitial = { opacity: 0, y: 4, filter: "blur(6px)" };
   const calmFadeAnimate = { opacity: 1, y: 0, filter: "blur(0px)" };
   const calmFadeExit = { opacity: 0, y: 2, filter: "blur(6px)" };
+  const groupCollapseTransition = { duration: 0.12, ease: "easeOut" };
+  const groupHasActiveItem = React.useCallback((items) => items.some((item) => {
+    var _a2;
+    return item.key === activeKey || ((_a2 = item.children) != null ? _a2 : []).some((child) => child.key === activeKey);
+  }), [activeKey]);
   const QuickIcon = ({ children }) => /* @__PURE__ */ jsx("span", { className: "grid h-9 w-9 place-items-center rounded-2xl text-[var(--muted)] transition-all duration-300 group-hover:scale-[1.04] group-hover:text-[var(--foreground)]", children: /* @__PURE__ */ jsx("span", { className: "text-[var(--foreground)]", children }) });
   const QuickActionsSection = () => {
     if (!hasQuickActions) return null;
@@ -2404,35 +2456,46 @@ function SidebarInner({
               return ((_a3 = i.children) == null ? void 0 : _a3.length) ? i.children.some((c) => c) : true;
             });
             if (visibles.length === 0) return null;
+            const groupCollapsed = !groupHasActiveItem(visibles) && Boolean(collapsedGroups == null ? void 0 : collapsedGroups[groupName]);
             return /* @__PURE__ */ jsxs(
               motion.div,
               {
-                layout: true,
                 initial: calmFadeInitial,
                 animate: calmFadeAnimate,
                 transition: { duration: 0.24, delay: groupIndex * 0.03, ease: calmFadeEase },
                 children: [
-                  !collapsed ? /* @__PURE__ */ jsx(GroupHeader, { title: groupName }) : null,
-                  /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibles.map((item, itemIndex) => /* @__PURE__ */ jsx(
+                  !collapsed ? /* @__PURE__ */ jsx(GroupHeader, { collapsed: groupCollapsed, title: groupName, onToggle: () => onToggleGroup == null ? void 0 : onToggleGroup(groupName) }) : null,
+                  /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !groupCollapsed || collapsed ? /* @__PURE__ */ jsx(
                     motion.div,
                     {
-                      layout: true,
-                      initial: { opacity: 0, filter: "blur(6px)" },
-                      animate: { opacity: 1, filter: "blur(0px)" },
-                      transition: { duration: 0.2, delay: itemIndex * 0.02, ease: calmFadeEase },
-                      children: /* @__PURE__ */ jsx(
-                        RenderItem,
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: groupCollapseTransition,
+                      className: "space-y-2",
+                      style: { willChange: "opacity" },
+                      children: visibles.map((item, itemIndex) => /* @__PURE__ */ jsx(
+                        motion.div,
                         {
-                          item,
-                          collapsed: collapsed != null ? collapsed : false,
-                          activeKey,
-                          go,
-                          color
-                        }
-                      )
+                          initial: { opacity: 0 },
+                          animate: { opacity: 1 },
+                          transition: { duration: 0.1, ease: "easeOut" },
+                          children: /* @__PURE__ */ jsx(
+                            RenderItem,
+                            {
+                              item,
+                              collapsed: collapsed != null ? collapsed : false,
+                              activeKey,
+                              go,
+                              color
+                            }
+                          )
+                        },
+                        item.key
+                      ))
                     },
-                    item.key
-                  )) }),
+                    `${groupName}-items`
+                  ) : null }),
                   !inserted && quick && firstGroupNameWithItems === groupName ? /* @__PURE__ */ jsx(React.Fragment, { children: (() => {
                     inserted = true;
                     return quick;

package/dist/SupportChatWidget.js

@@ -215,14 +215,34 @@ function SupportChatWidget({
   const open = openProp != null ? openProp : openState;
   const setOpen = (next) => {
     if (openProp === void 0) setOpenState(next);
+    if (next) setUnseenReplyCount(0);
     onOpenChange == null ? void 0 : onOpenChange(next);
   };
   const [messagesState, setMessagesState] = import_react.default.useState(() => defaultMessages != null ? defaultMessages : []);
   const messages = messagesProp != null ? messagesProp : messagesState;
   const messagesRef = import_react.default.useRef(messages);
+  const knownMessageIdsRef = import_react.default.useRef(new Set(messages.map((message) => message.id)));
+  const panelRef = import_react.default.useRef(null);
+  const triggerRef = import_react.default.useRef(null);
+  const [unseenReplyCount, setUnseenReplyCount] = import_react.default.useState(0);
   import_react.default.useEffect(() => {
     messagesRef.current = messages;
   }, [messages]);
+  import_react.default.useEffect(() => {
+    const knownIds = knownMessageIdsRef.current;
+    const newReplies = messages.filter((message) => {
+      const isNew = !knownIds.has(message.id);
+      return isNew && (message.role === "bot" || message.role === "agent");
+    });
+    messages.forEach((message) => knownIds.add(message.id));
+    if (open) {
+      setUnseenReplyCount(0);
+      return;
+    }
+    if (newReplies.length) {
+      setUnseenReplyCount((current) => Math.min(99, current + newReplies.length));
+    }
+  }, [messages, open]);
   const setMessages = (next) => {
     if (typeof next === "function") {
       const fn = next;
@@ -299,6 +319,18 @@ function SupportChatWidget({
     if (!open) return;
     (_a2 = endRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "end" });
   }, [open, messages.length, sending]);
+  import_react.default.useEffect(() => {
+    if (!open || position === "inline") return;
+    const onPointerDown = (event) => {
+      var _a2, _b2;
+      const target = event.target;
+      if (!target) return;
+      if (((_a2 = panelRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = triggerRef.current) == null ? void 0 : _b2.contains(target))) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, position]);
   const appendBotResult = (result) => {
     if (!result) return;
     if (typeof result === "string") {
@@ -404,19 +436,22 @@ function SupportChatWidget({
     await ((_d2 = config.onSave) == null ? void 0 : _d2.call(config, payload));
     downloadFile(fileName, content, mimeType);
   };
-  const trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: labelTrigger, placement: position === "bottom-left" ? "right" : "left", offset: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx(positionClass, className), style: position === "inline" ? void 0 : { zIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: labelTrigger, placement: position === "bottom-left" ? "right" : "left", offset: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: triggerRef, className: cx(positionClass, className), style: position === "inline" ? void 0 : { zIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
       type: "button",
       "aria-label": labelTrigger,
       onClick: () => setOpen(true),
       className: cx(
-        "relative grid h-14 w-14 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--ring)_28%,var(--border))]",
-        "bg-[var(--primary)] text-[var(--primary-foreground)] shadow-xl transition hover:brightness-95 active:scale-[0.98]"
+        "group relative grid size-14 place-items-center overflow-hidden rounded-2xl border border-[var(--border)]",
+        "bg-[color-mix(in_oklab,var(--card)_94%,transparent)] text-[var(--primary)] shadow-[0_20px_48px_rgba(6,19,22,0.13)] backdrop-blur-xl",
+        "transition duration-200 hover:-translate-y-0.5 hover:border-[color-mix(in_oklab,var(--primary)_38%,var(--border))] hover:bg-[var(--surface)] hover:text-[var(--foreground)] hover:shadow-[0_24px_58px_rgba(6,19,22,0.18)] active:scale-[0.98]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--primary)_42%,transparent)] dark:shadow-[0_20px_48px_rgba(0,0,0,0.28)] dark:hover:shadow-[0_24px_58px_rgba(0,0,0,0.36)]"
       ),
       children: [
-        mode === "live" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.HeadsetIcon, { "aria-hidden": true, className: "h-6 w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChatCenteredDotsIcon, { "aria-hidden": true, className: "h-6 w-6" }),
-        unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -right-1.5 -top-1.5 grid h-5 min-w-5 place-items-center rounded-full bg-[var(--danger)] px-1 text-[0.65rem] font-semibold text-white shadow ring-2 ring-[var(--card)]", children: unreadCount > 99 ? "99+" : unreadCount }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,color-mix(in_oklab,var(--primary)_18%,transparent),transparent_38%)] opacity-80 transition group-hover:opacity-100" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "relative grid size-9 place-items-center rounded-xl bg-[color-mix(in_oklab,var(--primary)_12%,transparent)] ring-1 ring-[color-mix(in_oklab,var(--primary)_18%,transparent)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChatCircleTextIcon, { "aria-hidden": true, className: "h-5 w-5" }) }),
+        Math.max(unreadCount, unseenReplyCount) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -right-1.5 -top-1.5 grid h-5 min-w-5 animate-[fx-chat-badge_280ms_ease-out] place-items-center rounded-full bg-[var(--danger)] px-1 text-[0.65rem] font-semibold text-white shadow ring-2 ring-[var(--card)]", children: Math.max(unreadCount, unseenReplyCount) > 99 ? "99+" : Math.max(unreadCount, unseenReplyCount) }) : null
       ]
     }
   ) }) });
@@ -508,43 +543,53 @@ function SupportChatWidget({
       const prev = messages[index - 1];
       const showAvatar = !mine && !system && (prev == null ? void 0 : prev.role) !== message.role;
       const bubbleClass = system ? "mx-auto max-w-[92%] border-[color-mix(in_oklab,var(--warning)_28%,var(--border))] bg-[color-mix(in_oklab,var(--warning)_10%,transparent)] text-center text-[var(--foreground)]" : mine ? "border-[color-mix(in_oklab,var(--ring)_35%,var(--border))] bg-[color-mix(in_oklab,var(--primary)_14%,transparent)] text-[var(--foreground)]" : "border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] text-[var(--foreground)]";
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("flex items-end gap-2", mine ? "justify-end" : system ? "justify-center" : "justify-start"), children: [
-        !mine && !system ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("shrink-0", showAvatar ? "" : "opacity-0"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_AvatarSquare.default,
-          {
-            size: 28,
-            src: (_b2 = actor == null ? void 0 : actor.avatarUrl) != null ? _b2 : void 0,
-            alt: (_c2 = actor == null ? void 0 : actor.name) != null ? _c2 : brandName,
-            initials: actor == null ? void 0 : actor.initials,
-            color: actor == null ? void 0 : actor.color,
-            radiusClass: "rounded-lg",
-            className: "ring-0"
-          }
-        ) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("max-w-[82%]", mine ? "items-end" : "items-start"), children: [
-          !mine && !system && showAvatar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 px-2 text-[0.6875rem] font-semibold text-[var(--muted)]", children: (_d2 = actor == null ? void 0 : actor.name) != null ? _d2 : brandName }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("rounded-2xl border px-3.5 py-2.5 text-sm leading-6 shadow-sm", bubbleClass, message.state === "error" ? "border-[color-mix(in_oklab,var(--danger)_35%,var(--border))]" : ""), children: [
-            message.state === "typing" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dots, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }),
-            ((_e2 = message.suggestedReplies) == null ? void 0 : _e2.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: message.suggestedReplies.slice(0, 4).map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: cx(
+            "flex animate-[fx-chat-message_260ms_cubic-bezier(.2,.8,.2,1)_both] items-end gap-2",
+            mine ? "justify-end [--fx-chat-x:10px]" : system ? "justify-center [--fx-chat-x:0px]" : "justify-start [--fx-chat-x:-10px]"
+          ),
+          children: [
+            !mine && !system ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("shrink-0", showAvatar ? "" : "opacity-0"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_AvatarSquare.default,
               {
-                type: "button",
-                onClick: () => {
-                  onQuickReply == null ? void 0 : onQuickReply(reply);
-                  void send(reply);
-                },
-                className: "rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]",
-                children: reply
-              },
-              `${message.id}:${reply}`
-            )) }) : null,
-            ((_f2 = message.serviceSuggestions) == null ? void 0 : _f2.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 space-y-2", children: message.serviceSuggestions.slice(0, 3).map(renderService) }) : null
-          ] }),
-          message.createdAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("mt-1 px-2 text-[0.6875rem] text-[var(--muted)]", mine ? "text-right" : "text-left"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeAgo.default, { iso: message.createdAt }) }) : null
-        ] })
-      ] }, message.id);
+                size: 28,
+                src: (_b2 = actor == null ? void 0 : actor.avatarUrl) != null ? _b2 : void 0,
+                alt: (_c2 = actor == null ? void 0 : actor.name) != null ? _c2 : brandName,
+                initials: actor == null ? void 0 : actor.initials,
+                color: actor == null ? void 0 : actor.color,
+                radiusClass: "rounded-lg",
+                className: "ring-0"
+              }
+            ) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("max-w-[82%]", mine ? "items-end" : "items-start"), children: [
+              !mine && !system && showAvatar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 px-2 text-[0.6875rem] font-semibold text-[var(--muted)]", children: (_d2 = actor == null ? void 0 : actor.name) != null ? _d2 : brandName }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("rounded-2xl border px-3.5 py-2.5 text-sm leading-6 shadow-sm transition-[background,border-color,box-shadow,transform] duration-200", bubbleClass, message.state === "error" ? "border-[color-mix(in_oklab,var(--danger)_35%,var(--border))]" : ""), children: [
+                message.state === "typing" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dots, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }),
+                ((_e2 = message.suggestedReplies) == null ? void 0 : _e2.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: message.suggestedReplies.slice(0, 4).map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onQuickReply == null ? void 0 : onQuickReply(reply);
+                      void send(reply);
+                    },
+                    className: "rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]",
+                    children: reply
+                  },
+                  `${message.id}:${reply}`
+                )) }) : null,
+                ((_f2 = message.serviceSuggestions) == null ? void 0 : _f2.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 space-y-2", children: message.serviceSuggestions.slice(0, 3).map(renderService) }) : null
+              ] }),
+              message.createdAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("mt-1 px-2 text-[0.6875rem] text-[var(--muted)]", mine ? "text-right" : "text-left"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeAgo.default, { iso: message.createdAt }) }) : null
+            ] })
+          ]
+        },
+        message.id
+      );
     }),
-    sending ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-end gap-2", children: [
+    sending ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex animate-[fx-chat-message_260ms_cubic-bezier(.2,.8,.2,1)_both] items-end gap-2 [--fx-chat-x:-10px]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_AvatarSquare.default,
         {
@@ -564,16 +609,17 @@ function SupportChatWidget({
   const panel = open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
+      ref: panelRef,
       className: cx(
         panelPositionClass,
-        "flex h-[min(680px,calc(100vh-7rem))] w-[min(400px,calc(100vw-2rem))] flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-2xl",
+        "flex h-[min(680px,calc(100vh-7rem))] w-[min(400px,calc(100vw-2rem))] animate-[fx-chat-panel_180ms_cubic-bezier(.2,.8,.2,1)_both] flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_96%,transparent)] text-[var(--foreground)] shadow-[0_28px_80px_rgba(6,19,22,0.18)] backdrop-blur-xl dark:shadow-[0_28px_80px_rgba(0,0,0,0.38)]",
         panelClassName
       ),
       style: position === "inline" ? void 0 : { zIndex },
       role: "dialog",
       "aria-label": labelTitle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_96%,transparent)] px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-[var(--border)] bg-[linear-gradient(135deg,color-mix(in_oklab,var(--card)_98%,transparent),color-mix(in_oklab,var(--primary)_8%,var(--surface)))] px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_AvatarSquare.default,