@djangocfg/layouts 2.1.92 → 2.1.95

package/package.json

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

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

@@ -1,9 +1,9 @@
 'use client';
 
 import { Bot, MessageSquare, StopCircle } from 'lucide-react';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 
-import { Button, ScrollArea, ScrollAreaHandle} from '@djangocfg/ui-nextjs';
+import { Button } from '@djangocfg/ui-nextjs';
 
 import { MessageBubble } from './MessageBubble';
 
@@ -39,12 +39,10 @@ export interface ChatMessagesProps {
 /**
  * ChatMessages - Shared component for displaying chat messages
  *
- * Handles:
- * - Messages list rendering
- * - Greeting display when empty
- * - Loading indicator with stop button
- * - Auto-scroll on new messages
- * - Initial scroll on history load
+ * Uses flex-col-reverse for natural bottom scroll behavior:
+ * - Scroll position 0 = visual bottom
+ * - New content naturally stays at bottom
+ * - No complex JS scroll management needed
  */
 export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
   (
@@ -60,72 +58,28 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
     },
     ref
   ) => {
-    const scrollAreaRef = useRef<ScrollAreaHandle>(null);
-    const messagesContainerRef = useRef<HTMLDivElement>(null);
-    const hasScrolledOnLoad = useRef(false);
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-    // Scroll to bottom helper
-    const scrollToBottom = useCallback((instant = false) => {
-      if (scrollAreaRef.current) {
-        scrollAreaRef.current.scrollToBottom(instant ? 'instant' : 'smooth');
-      }
-    }, []);
-
-    // Scroll to last message (shows top of last message)
-    const scrollToLastMessage = useCallback((instant = false) => {
-      if (messagesContainerRef.current) {
-        const messageElements = messagesContainerRef.current.querySelectorAll('[data-message-bubble]');
-        const lastMessage = messageElements[messageElements.length - 1];
-
-        if (lastMessage) {
-          lastMessage.scrollIntoView({
-            behavior: instant ? 'instant' : 'smooth',
-            block: 'start',
-            inline: 'nearest',
-          });
-        }
-      }
-    }, []);
-
-    // Expose methods via ref
+    // Expose scroll methods via ref (for compatibility)
     useImperativeHandle(ref, () => ({
-      scrollToBottom,
-      scrollToLastMessage,
-    }), [scrollToBottom, scrollToLastMessage]);
-
-    // 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(() => {
-          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, messages]);
+      scrollToBottom: () => {
+        // With flex-col-reverse, scroll to top = visual bottom
+        scrollContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+      },
+      scrollToLastMessage: () => {
+        scrollContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+      },
+    }), []);
 
-    // Scroll to last message on new messages (smooth animation, shows top of message)
-    useEffect(() => {
-      if (hasScrolledOnLoad.current && messages.length > 0) {
-        scrollToLastMessage(false);
-      }
-    }, [messages, scrollToLastMessage]);
+    // No manual scroll effects needed - flex-col-reverse handles it naturally
 
     const GreetingIcon = greetingIcon === 'message' ? MessageSquare : Bot;
     const iconSize = largeGreetingIcon ? { container: '64px', icon: 'h-8 w-8' } : { container: '48px', icon: 'h-6 w-6' };
     const padding = largeGreetingIcon ? 'py-12' : 'py-8';
 
     return (
-      <ScrollArea ref={scrollAreaRef} className="h-full w-full">
-        <div ref={messagesContainerRef} className={`${isCompact ? 'p-3' : 'p-4'} space-y-4 max-w-full overflow-x-hidden`}>
+      <div ref={scrollContainerRef} className="h-full w-full overflow-y-auto flex flex-col-reverse">
+        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4 max-w-full overflow-x-hidden`}>
           {/* Greeting */}
           {messages.length === 0 && greeting && (
             <div className={`text-center ${padding}`}>
@@ -176,7 +130,7 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
             </div>
           )}
         </div>
-      </ScrollArea>
+      </div>
     );
   }
 );