@djangocfg/layouts 2.1.21 → 2.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.21",
+  "version": "2.1.23",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.21",
-    "@djangocfg/centrifugo": "^2.1.21",
-    "@djangocfg/ui-nextjs": "^2.1.21",
+    "@djangocfg/api": "^2.1.23",
+    "@djangocfg/centrifugo": "^2.1.23",
+    "@djangocfg/ui-nextjs": "^2.1.23",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -114,7 +114,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.21",
+    "@djangocfg/typescript-config": "^2.1.23",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -42,6 +42,7 @@ import { SidebarProvider, SidebarInset, Preloader, ButtonLink } from '@djangocfg
 import { useAuth } from '@djangocfg/api/auth';
 import { PrivateSidebar, PrivateHeader, PrivateContent } from './components';
 import type { LucideIcon as LucideIconType } from 'lucide-react';
+import { UserMenuConfig } from '../shared/types';
 
 export interface SidebarItem {
   label: string;
@@ -59,6 +60,7 @@ export interface HeaderConfig {
   title?: string;
   /** Profile path (optional, defaults to '/profile') */
   profilePath?: string;
+  groups?: UserMenuConfig['groups'];
 }
 
 export interface PrivateLayoutProps {

package/src/layouts/PrivateLayout/components/PrivateHeader.tsx

@@ -24,7 +24,6 @@ interface PrivateHeaderProps {
 
 export function PrivateHeader({ header }: PrivateHeaderProps) {
   const { user, logout } = useAuth();
-  const profilePath = header?.profilePath || '/private/profile';
 
   return (
     <header
@@ -51,7 +50,8 @@ export function PrivateHeader({ header }: PrivateHeaderProps) {
         {/* User Menu */}
         <UserMenu
           variant="desktop"
-          profilePath={profilePath}
+          groups={header?.groups}
+          authPath={header?.profilePath}
         />
       </div>
     </header>

package/src/layouts/PublicLayout/components/PublicMobileDrawer.tsx

@@ -80,8 +80,6 @@ export function PublicMobileDrawer({
           <UserMenu
             variant="mobile"
             groups={userMenu?.groups}
-            profilePath={userMenu?.profilePath}
-            dashboardPath={userMenu?.dashboardPath}
             authPath={userMenu?.authPath}
           />
 

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -71,8 +71,6 @@ export function PublicNavigation({
                 <UserMenu
                   variant="desktop"
                   groups={userMenu?.groups}
-                  profilePath={userMenu?.profilePath}
-                  dashboardPath={userMenu?.dashboardPath}
                   authPath={userMenu?.authPath}
                 />
               </>

package/src/layouts/_components/UserMenu.tsx

@@ -32,7 +32,7 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { LogOut, Settings } from 'lucide-react';
+import { LogOut } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -56,17 +56,11 @@ export interface UserMenuProps {
   groups?: UserMenuGroup[];
   /** Auth page path (for sign in button) */
   authPath?: string;
-  /** @deprecated Use groups instead - Profile page path (backward compatibility) */
-  profilePath?: string;
-  /** @deprecated Use groups instead - Dashboard page path (backward compatibility) */
-  dashboardPath?: string;
 }
 
 export function UserMenu({
   variant = 'desktop',
   groups,
-  profilePath = '/private/profile',
-  dashboardPath = '/private',
   authPath = '/auth',
 }: UserMenuProps) {
   const { user, isAuthenticated, logout } = useAuth();
@@ -76,32 +70,18 @@ export function UserMenu({
     setMounted(true);
   }, []);
 
-  if (!mounted) {
-    return null;
-  }
-
-  // Prepare menu groups (new groups prop or fallback to legacy props)
+  // Prepare menu groups
+  // Must be before early return to maintain hook order
   const menuGroups: UserMenuGroup[] = React.useMemo(() => {
-    if (groups && groups.length > 0) {
-      return groups;
-    }
+    const allGroups: UserMenuGroup[] = [];
 
-    // Fallback to legacy behavior for backward compatibility
-    const legacyGroups: UserMenuGroup[] = [];
-
-    if (profilePath) {
-      legacyGroups.push({
-        items: [
-          {
-            label: 'Profile',
-            href: profilePath,
-            icon: Settings,
-          },
-        ],
-      });
+    // Add custom groups if provided
+    if (groups && groups.length > 0) {
+      allGroups.push(...groups);
     }
 
-    legacyGroups.push({
+    // Always add Sign Out at the end
+    allGroups.push({
       items: [
         {
           label: 'Sign Out',
@@ -112,8 +92,12 @@ export function UserMenu({
       ],
     });
 
-    return legacyGroups;
-  }, [groups, profilePath, logout]);
+    return allGroups;
+  }, [groups, logout]);
+
+  if (!mounted) {
+    return null;
+  }
 
   if (!isAuthenticated || !user) {
     // Guest user - show sign in button

package/src/layouts/shared/types.ts

@@ -206,10 +206,6 @@ export interface UserMenuGroup {
 export interface UserMenuConfig {
   /** Menu groups for authenticated users */
   groups?: UserMenuGroup[];
-  /** Profile page path (used when no groups provided - backward compatibility) */
-  profilePath?: string;
-  /** Dashboard page path (used when no groups provided - backward compatibility) */
-  dashboardPath?: string;
   /** Auth page path (for sign in button) */
   authPath?: string;
 }

package/src/snippets/McpChat/components/ChatMessages.tsx

@@ -93,12 +93,21 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
     // Initial scroll when history loads (instant, no animation)
     useEffect(() => {
       if (!isLoading && messages.length > 0 && !hasScrolledOnLoad.current) {
+        // Double RAF to ensure DOM is fully updated
         requestAnimationFrame(() => {
-          scrollToLastMessage(true);
-          hasScrolledOnLoad.current = true;
+          requestAnimationFrame(() => {
+            // Verify messages are actually in DOM before scrolling
+            if (messagesContainerRef.current) {
+              const messageElements = messagesContainerRef.current.querySelectorAll('[data-message-bubble]');
+              if (messageElements.length === messages.length) {
+                scrollToLastMessage(true);
+                hasScrolledOnLoad.current = true;
+              }
+            }
+          });
         });
       }
-    }, [isLoading, messages.length, scrollToLastMessage]);
+    }, [isLoading, messages.length, scrollToLastMessage, messages]);
 
     // Scroll to last message on new messages (smooth animation, shows top of message)
     useEffect(() => {