@djangocfg/layouts 2.1.20 → 2.1.21

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

@@ -11,6 +11,7 @@ import type { AIChatMessage } from '../types';
  */
 export interface ChatMessagesHandle {
   scrollToBottom: (instant?: boolean) => void;
+  scrollToLastMessage: (instant?: boolean) => void;
 }
 
 export interface ChatMessagesProps {
@@ -57,6 +58,7 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
     ref
   ) => {
     const scrollAreaRef = useRef<ScrollAreaHandle>(null);
+    const messagesContainerRef = useRef<HTMLDivElement>(null);
     const hasScrolledOnLoad = useRef(false);
 
     // Scroll to bottom helper
@@ -66,27 +68,44 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
       }
     }, []);
 
-    // Expose scrollToBottom via ref
+    // 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
     useImperativeHandle(ref, () => ({
       scrollToBottom,
-    }), [scrollToBottom]);
+      scrollToLastMessage,
+    }), [scrollToBottom, scrollToLastMessage]);
 
     // Initial scroll when history loads (instant, no animation)
     useEffect(() => {
       if (!isLoading && messages.length > 0 && !hasScrolledOnLoad.current) {
         requestAnimationFrame(() => {
-          scrollToBottom(true);
+          scrollToLastMessage(true);
           hasScrolledOnLoad.current = true;
         });
       }
-    }, [isLoading, messages.length, scrollToBottom]);
+    }, [isLoading, messages.length, scrollToLastMessage]);
 
-    // Scroll to bottom on new messages (smooth animation)
+    // Scroll to last message on new messages (smooth animation, shows top of message)
     useEffect(() => {
       if (hasScrolledOnLoad.current && messages.length > 0) {
-        scrollToBottom(false);
+        scrollToLastMessage(false);
       }
-    }, [messages, scrollToBottom]);
+    }, [messages, scrollToLastMessage]);
 
     const GreetingIcon = greetingIcon === 'message' ? MessageSquare : Bot;
     const iconSize = largeGreetingIcon ? { container: '64px', icon: 'h-8 w-8' } : { container: '48px', icon: 'h-6 w-6' };
@@ -94,7 +113,7 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
 
     return (
       <ScrollArea ref={scrollAreaRef} className="h-full w-full">
-        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4 max-w-full overflow-x-hidden`}>
+        <div ref={messagesContainerRef} 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}`}>
@@ -115,7 +134,9 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
 
           {/* Messages */}
           {messages.map((message) => (
-            <MessageBubble key={message.id} message={message} isCompact={isCompact} />
+            <div key={message.id} data-message-bubble>
+              <MessageBubble message={message} isCompact={isCompact} />
+            </div>
           ))}
 
           {/* Loading indicator with stop button */}

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

@@ -59,7 +59,7 @@ export const ChatPanel = React.memo(() => {
           </div>
           <div>
             <h3 className="font-semibold text-sm">{config.title || 'DjangoCFG AI'}</h3>
-            <p className="text-xs text-muted-foreground">documentation assistant</p>
+            <p className="text-xs text-muted-foreground">AI Assistant</p>
           </div>
         </div>
         <div className="flex gap-1">

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

@@ -86,7 +86,7 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(({
             </div>
             <div>
               <h3 className="font-semibold text-sm">{config.title || 'DjangoCFG AI'}</h3>
-              <p className="text-xs text-muted-foreground">documentation assistant</p>
+              <p className="text-xs text-muted-foreground">AI Assistant</p>
             </div>
           </div>
           <div className="flex gap-1">

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

@@ -1,8 +1,9 @@
 'use client';
 
 import React from 'react';
-import { Card, CardContent, Badge, MarkdownMessage } from '@djangocfg/ui-nextjs';
+import { Card, CardContent, Badge, MarkdownMessage, Avatar, AvatarImage, AvatarFallback } from '@djangocfg/ui-nextjs';
 import { User, Bot, ExternalLink, Loader2 } from 'lucide-react';
+import { useAuth } from '@djangocfg/api/auth';
 import type { AIChatMessage } from '../types';
 
 export interface MessageBubbleProps {
@@ -21,6 +22,15 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
   ({ message, isCompact = false }) => {
     const isUser = message.role === 'user';
     const isAssistant = message.role === 'assistant';
+    const { user, isAuthenticated } = useAuth();
+
+    // Prepare user data BEFORE render
+    const showUserAvatar = isUser && isAuthenticated && user;
+    const userAvatar = user?.avatar || '';
+    const userDisplayName = user?.display_username || user?.email || 'User';
+    const userInitial = userDisplayName.charAt(0).toUpperCase();
+    const avatarSize = isCompact ? '28px' : '36px';
+    const iconSize = isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4';
 
     return (
       <div
@@ -29,30 +39,38 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
         }`}
       >
         {/* Avatar */}
-        <div
-          className={`flex-shrink-0 rounded-full flex items-center justify-center ${
-            isUser
-              ? 'bg-primary text-primary-foreground'
-              : 'bg-muted text-muted-foreground'
-          }`}
-          style={{
-            width: isCompact ? '28px' : '36px',
-            height: isCompact ? '28px' : '36px',
-          }}
-        >
-          {isUser ? (
-            <User className={isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4'} />
-          ) : (
-            <Bot className={isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4'} />
-          )}
-        </div>
+        {showUserAvatar ? (
+          // Authenticated user avatar
+          <Avatar className="flex-shrink-0" style={{ width: avatarSize, height: avatarSize }}>
+            <AvatarImage src={userAvatar} alt={userDisplayName} />
+            <AvatarFallback className="bg-primary text-primary-foreground text-xs">
+              {userInitial}
+            </AvatarFallback>
+          </Avatar>
+        ) : isUser ? (
+          // Guest user icon
+          <div
+            className="flex-shrink-0 rounded-full flex items-center justify-center bg-primary text-primary-foreground"
+            style={{ width: avatarSize, height: avatarSize }}
+          >
+            <User className={iconSize} />
+          </div>
+        ) : (
+          // Bot icon
+          <div
+            className="flex-shrink-0 rounded-full flex items-center justify-center bg-muted text-muted-foreground"
+            style={{ width: avatarSize, height: avatarSize }}
+          >
+            <Bot className={iconSize} />
+          </div>
+        )}
 
         {/* Message Content */}
         <div className={`flex-1 min-w-0 ${isUser ? 'max-w-[80%] ml-auto' : 'max-w-[85%]'}`}>
           {/* Header */}
           <div className={`flex items-baseline gap-2 mb-1 ${isUser ? 'justify-end' : ''}`}>
             <span className={`font-medium ${isCompact ? 'text-xs' : 'text-sm'}`}>
-              {isUser ? 'You' : 'DjangoCFG AI'}
+              {isUser ? userDisplayName : 'DjangoCFG AI'}
             </span>
             <span className="text-xs text-muted-foreground">
               {formatTime(message.timestamp)}
@@ -70,21 +88,15 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
             <CardContent className={isCompact ? 'p-2' : 'p-3'}>
               {/* Message Text */}
               <div className={`${isCompact ? 'text-xs' : 'text-sm'} overflow-hidden`} style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}>
-                {isUser ? (
-                  <span className="whitespace-pre-wrap" style={{ overflowWrap: 'anywhere' }}>{message.content}</span>
-                ) : message.isStreaming ? (
-                  // During streaming - show plain text to avoid parsing errors
-                  <span className="whitespace-pre-wrap" style={{ overflowWrap: 'anywhere' }}>
-                    {message.content}
-                    <Loader2 className="inline-block ml-1 h-3 w-3 animate-spin" />
-                  </span>
-                ) : (
-                  // Streaming complete - render with markdown formatting
-                  <MarkdownMessage
-                    content={message.content}
-                    isUser={isUser}
-                    isCompact={isCompact}
-                  />
+                {/* Always render markdown for immediate code block highlighting */}
+                <MarkdownMessage
+                  content={message.content}
+                  isUser={isUser}
+                  isCompact={isCompact}
+                />
+                {/* Show spinner during streaming */}
+                {message.isStreaming && (
+                  <Loader2 className="inline-block ml-1 h-3 w-3 animate-spin" />
                 )}
               </div>
 

package/src/snippets/McpChat/context/AIChatContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState, useCallback, useMemo, useEffect, type ReactNode } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo, useEffect, useRef, type ReactNode } from 'react';
 import { useLocalStorage, useIsMobile } from '@djangocfg/ui-nextjs/hooks';
 import { useAIChat } from '../hooks/useAIChat';
 import { mcpEndpoints, type AIChatMessage, type ChatWidgetConfig, type ChatDisplayMode } from '../types';
@@ -119,10 +119,24 @@ export function AIChatProvider({
   // Derived state: isOpen is true when not in 'closed' mode
   const isOpen = displayMode !== 'closed';
 
+  // Track isOpen in a ref for event handler
+  const isOpenRef = useRef(isOpen);
+  useEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+
+  // Track last active mode (non-closed) to restore when reopening
+  const lastActiveModeRef = useRef<Exclude<ChatDisplayMode, 'closed'>>('floating');
+  useEffect(() => {
+    if (displayMode !== 'closed') {
+      lastActiveModeRef.current = displayMode;
+    }
+  }, [displayMode]);
+
   const config: ChatWidgetConfig = useMemo(
     () => ({
       apiEndpoint,
-      title: 'DjangoCFG AI Assistant',
+      title: 'DjangoCFG AI',
       placeholder: 'Ask about DjangoCFG...',
       greeting:
         "Hi! I'm your DjangoCFG AI assistant powered by GPT. Ask me anything about configuration, features, or how to use the library.",
@@ -145,7 +159,8 @@ export function AIChatProvider({
   }, [clearAIMessages]);
 
   const openChat = useCallback(() => {
-    setStoredMode('floating');
+    // Restore last active mode instead of always opening in floating
+    setStoredMode(lastActiveModeRef.current);
     setIsMinimized(false);
   }, [setStoredMode]);
 
@@ -258,12 +273,14 @@ export function AIChatProvider({
         }
       }
 
-      // Open chat in requested mode (or default to floating)
+      // Open chat in requested mode, or keep current mode if already open
       if (requestedMode) {
         setDisplayMode(requestedMode);
-      } else {
+      } else if (!isOpenRef.current) {
+        // Only open if chat is currently closed
         openChat();
       }
+      // If already open, keep current mode
 
       // Auto-send message if requested
       if (autoSend) {
@@ -282,7 +299,7 @@ export function AIChatProvider({
         (window as any).__MCP_CHAT_AVAILABLE__ = false;
       }
     };
-  }, [sendMessage, openChat, setDisplayMode]);
+  }, [sendMessage, setDisplayMode, openChat]);
 
   return <AIChatContext.Provider value={value}>{children}</AIChatContext.Provider>;
 }

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

@@ -1,190 +0,0 @@
-/**
- * Public Layout Footer
- *
- * Footer component for PublicLayout
- */
-
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { useIsMobile } from '@djangocfg/ui-nextjs/hooks';
-
-interface FooterConfig {
-  links?: {
-    privacy?: string;
-    terms?: string;
-    security?: string;
-    cookies?: string;
-    docs?: string;
-  };
-  copyright?: string;
-}
-
-interface PublicFooterProps {
-  logo?: string;
-  siteName: string;
-  footer?: FooterConfig;
-}
-
-export function PublicFooter({
-  logo,
-  siteName,
-  footer,
-}: PublicFooterProps) {
-  const isMobile = useIsMobile();
-  const currentYear = new Date().getFullYear();
-  const copyright =
-    footer?.copyright ||
-    `© ${currentYear} ${siteName}. All rights reserved.`;
-
-  if (isMobile) {
-    return (
-      <footer className="lg:hidden bg-background border-t border-border mt-auto">
-        <div className="w-full px-4 py-8">
-          {/* Project Info */}
-          <div className="text-center space-y-4 mb-6">
-            <div className="flex items-center justify-center gap-2">
-              {logo && (
-                <div className="w-6 h-6 flex items-center justify-center">
-                  <img
-                    src={logo}
-                    alt={`${siteName} Logo`}
-                    className="w-full h-full object-contain"
-                  />
-                </div>
-              )}
-              <span className="text-lg font-bold text-foreground">
-                {siteName}
-              </span>
-            </div>
-          </div>
-
-          {/* Quick Links */}
-          <div className="flex flex-wrap justify-center gap-4 mb-6 items-center">
-            {footer?.links?.docs && (
-              <a
-                href={footer.links.docs}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-primary transition-colors"
-                title="Documentation"
-              >
-                Docs
-              </a>
-            )}
-            {footer?.links?.privacy && (
-              <Link
-                href={footer.links.privacy}
-                className="text-sm text-muted-foreground hover:text-primary transition-colors"
-              >
-                Privacy
-              </Link>
-            )}
-            {footer?.links?.terms && (
-              <Link
-                href={footer.links.terms}
-                className="text-sm text-muted-foreground hover:text-primary transition-colors"
-              >
-                Terms
-              </Link>
-            )}
-          </div>
-
-          {/* Bottom Section */}
-          <div className="border-t border-border pt-4">
-            <div className="text-center space-y-2">
-              <div className="text-xs text-muted-foreground">{copyright}</div>
-            </div>
-          </div>
-        </div>
-      </footer>
-    );
-  }
-
-  // Desktop Footer
-  return (
-    <footer className="max-lg:hidden bg-background border-t border-border mt-auto">
-      <div className="w-full px-8 lg:px-16 xl:px-24 py-12">
-        <div className="flex flex-col gap-8">
-          {/* Top Section */}
-          <div className="flex gap-8">
-            {/* Left Column - Project Info */}
-            <div className="space-y-4" style={{ width: '30%', minWidth: '300px' }}>
-              <div className="flex items-center gap-2">
-                {logo && (
-                  <div className="w-8 h-8 flex items-center justify-center">
-                    <img
-                      src={logo}
-                      alt={`${siteName} Logo`}
-                      className="w-full h-full object-contain"
-                    />
-                  </div>
-                )}
-                <span className="text-xl font-bold text-foreground">
-                  {siteName}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* Bottom Section */}
-          <div
-            className="border-t border-border"
-            style={{ marginTop: '2rem', paddingTop: '2rem' }}
-          >
-            <div className="flex justify-between items-center gap-4">
-              <div className="text-xs text-muted-foreground">{copyright}</div>
-              <div className="flex flex-wrap items-center gap-4">
-                {footer?.links?.docs && (
-                  <a
-                    href={footer.links.docs}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                    title="Documentation"
-                  >
-                    Docs
-                  </a>
-                )}
-                {footer?.links?.privacy && (
-                  <Link
-                    href={footer.links.privacy}
-                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                  >
-                    Privacy Policy
-                  </Link>
-                )}
-                {footer?.links?.terms && (
-                  <Link
-                    href={footer.links.terms}
-                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                  >
-                    Terms of Service
-                  </Link>
-                )}
-                {footer?.links?.security && (
-                  <Link
-                    href={footer.links.security}
-                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                  >
-                    Security
-                  </Link>
-                )}
-                {footer?.links?.cookies && (
-                  <Link
-                    href={footer.links.cookies}
-                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                  >
-                    Cookies
-                  </Link>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
-