@djangocfg/layouts 2.0.8 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "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": "^1.4.38",
-    "@djangocfg/centrifugo": "^1.4.38",
-    "@djangocfg/ui": "^1.4.38",
+    "@djangocfg/api": "^1.4.39",
+    "@djangocfg/centrifugo": "^1.4.39",
+    "@djangocfg/ui": "^1.4.39",
     "@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": "^1.4.38",
+    "@djangocfg/typescript-config": "^1.4.39",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/context/AuthContext.tsx

@@ -8,7 +8,7 @@ import React, {
 
 import { api, Enums } from '@djangocfg/api';
 import { useAccountsContext, AccountsProvider } from './AccountsContext';
-import { useLocalStorage, useQueryParams, useRouter } from '@djangocfg/ui/hooks';
+import { useLocalStorage, useQueryParams, useCfgRouter } from '@djangocfg/ui/hooks';
 import { getCachedProfile, clearProfileCache } from '../hooks/useProfileCache';
 
 import { authLogger } from '../../utils/logger';
@@ -50,7 +50,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   });
 
   const [initialized, setInitialized] = useState(false);
-  const router = useRouter();
+  const router = useCfgRouter();
   const pathname = usePathname();
   const queryParams = useQueryParams();
 
@@ -362,13 +362,14 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         }
 
         // Handle redirect logic here
+        // Use hardPush for full page reload - ensures all React contexts reinitialize
         const defaultCallback = config?.routes?.defaultCallback || defaultRoutes.defaultCallback;
 
         if (redirectUrl && redirectUrl !== defaultCallback) {
           clearRedirectUrl();
-          router.push(redirectUrl);
+          router.hardPush(redirectUrl);
         } else {
-          router.push(defaultCallback);
+          router.hardPush(defaultCallback);
         }
 
         return {
@@ -460,7 +461,11 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       accounts.logout(); // Clear tokens and profile
       setInitialized(true);
       setIsLoading(false);
-      pushToDefaultAuthCallbackUrl();
+
+      // Use hardReplace for full page reload + replace history
+      // This ensures contexts reinitialize AND back button won't return to protected page
+      const authCallbackUrl = config?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
+      router.hardReplace(authCallbackUrl);
     };
 
     // Use config.onConfirm if provided, otherwise use a simple confirm
@@ -482,7 +487,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         performLogout();
       }
     }
-  }, [accounts, pushToDefaultAuthCallbackUrl]);
+  }, [accounts, config?.routes?.defaultAuthCallback, router]);
 
   // Redirect URL methods
   const getSavedRedirectUrl = useCallback((): string | null => {

package/src/auth/hooks/useAuthGuard.ts

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 
 import { useAuth } from '../context';
-import { useRouter } from '@djangocfg/ui/hooks';
+import { useCfgRouter } from '@djangocfg/ui/hooks';
 
 interface UseAuthGuardOptions {
   redirectTo?: string;
@@ -13,7 +13,7 @@ interface UseAuthGuardOptions {
 export const useAuthGuard = (options: UseAuthGuardOptions = {}) => {
   const { redirectTo = '/auth', requireAuth = true } = options;
   const { isAuthenticated, isLoading } = useAuth();
-  const router = useRouter();
+  const router = useCfgRouter();
 
   useEffect(() => {
     if (!isLoading && requireAuth && !isAuthenticated) {

package/src/auth/hooks/useAutoAuth.ts

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import { useQueryParams, useRouter } from '@djangocfg/ui/hooks';
+import { useQueryParams, useCfgRouter } from '@djangocfg/ui/hooks';
 import { authLogger } from '../../utils/logger';
 
 export interface UseAutoAuthOptions {
@@ -18,7 +18,7 @@ export const useAutoAuth = (options: UseAutoAuthOptions = {}) => {
   const { onOTPDetected, cleanupUrl = true } = options;
   const queryParams = useQueryParams();
   const pathname = usePathname();
-  const router = useRouter();
+  const router = useCfgRouter();
 
   const isReady = !!pathname && !!queryParams.get('otp');
   const hasOTP = !!(queryParams.get('otp'));

package/src/auth/hooks/useGithubAuth.ts

@@ -1,9 +1,9 @@
 'use client';
 
 import { useCallback, useState } from 'react';
-import { useRouter } from 'next/navigation';
 
 import { api } from '@djangocfg/api';
+import { useCfgRouter } from '@djangocfg/ui/hooks';
 import { authLogger } from '../../utils/logger';
 import { Analytics, AnalyticsEvent, AnalyticsCategory } from '../../snippets/Analytics';
 
@@ -42,7 +42,7 @@ export interface UseGithubAuthReturn {
  */
 export const useGithubAuth = (options: UseGithubAuthOptions = {}): UseGithubAuthReturn => {
   const { sourceUrl, onSuccess, onError, redirectUrl } = options;
-  const router = useRouter();
+  const router = useCfgRouter();
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -155,8 +155,9 @@ export const useGithubAuth = (options: UseGithubAuthOptions = {}): UseGithubAuth
       onSuccess?.(response.user, response.is_new_user || false);
 
       // Redirect to dashboard or specified URL
+      // Use hardPush for full page reload - ensures all React contexts reinitialize
       const finalRedirectUrl = redirectUrl || '/dashboard';
-      router.push(finalRedirectUrl);
+      router.hardPush(finalRedirectUrl);
 
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'GitHub authentication failed';

package/src/components/RedirectPage/RedirectPage.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import { useAuth } from '../../auth';
-import { useRouter } from '@djangocfg/ui/hooks';
+import { useCfgRouter } from '@djangocfg/ui/hooks';
 import { Preloader } from '@djangocfg/ui/components';
 
 export interface RedirectPageProps {
@@ -49,7 +49,7 @@ export function RedirectPage({
   loadingText = 'Loading...',
 }: RedirectPageProps) {
   const { isAuthenticated } = useAuth();
-  const router = useRouter();
+  const router = useCfgRouter();
 
   useEffect(() => {
     if (!isAuthenticated) {

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -10,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@djangocfg/ui/components';
-import { useEventListener, useRouter } from '@djangocfg/ui/hooks';
+import { useEventListener, useCfgRouter } from '@djangocfg/ui/hooks';
 
 // Re-export events for backwards compatibility
 export const DIALOG_EVENTS = {
@@ -31,7 +31,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
 }) => {
   const [open, setOpen] = useState(false);
   const [message, setMessage] = useState<string>('Please sign in to continue');
-  const router = useRouter();
+  const router = useCfgRouter();
 
   // Listen for open auth dialog event
   useEventListener(DIALOG_EVENTS.OPEN_AUTH_DIALOG, (payload: any) => {

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

@@ -66,20 +66,7 @@ export interface AIChatWidgetProps extends ChatWidgetConfig {
  * Internal AI chat widget that uses context
  */
 const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className }) => {
-  const {
-    messages,
-    isLoading,
-    isMinimized,
-    config,
-    displayMode,
-    isMobile,
-    sendMessage,
-    openChat,
-    closeChat,
-    toggleMinimize,
-    setDisplayMode,
-    stopStreaming,
-  } = useAIChatContext();
+  const { config, displayMode, openChat } = useAIChatContext();
 
   // Use layout hook for consistent positioning
   const { getFabStyles, getFloatingStyles } = useChatLayout();
@@ -173,17 +160,7 @@ const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className })
   if (displayMode === 'sidebar') {
     return (
       <Portal>
-        <ChatSidebar
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onModeChange={setDisplayMode}
-          onStopStreaming={stopStreaming}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatSidebar />
       </Portal>
     );
   }
@@ -192,20 +169,7 @@ const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className })
   return (
     <Portal>
       <div style={floatingStyles} className={className || ''}>
-        <ChatPanel
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onMinimize={toggleMinimize}
-          onModeChange={setDisplayMode}
-          onStopStreaming={stopStreaming}
-          isMinimized={isMinimized}
-          isMobile={isMobile}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatPanel />
       </div>
     </Portal>
   );

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

@@ -93,8 +93,8 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
     const padding = largeGreetingIcon ? 'py-12' : 'py-8';
 
     return (
-      <ScrollArea ref={scrollAreaRef} className="h-full">
-        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4`}>
+      <ScrollArea ref={scrollAreaRef} className="h-full w-full">
+        <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}`}>

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

@@ -2,125 +2,99 @@
 
 import React from 'react';
 import { Card, CardHeader, CardContent, CardFooter, Button } from '@djangocfg/ui';
-import { X, Minimize2, PanelRight, Bot } from 'lucide-react';
-import type { ChatDisplayMode, AIChatMessage } from '../types';
+import { X, PanelRight, Bot, RotateCcw } from 'lucide-react';
 import { ChatMessages } from './ChatMessages';
 import { AIMessageInput } from './MessageInput';
+import { useAIChatContext } from '../context/AIChatContext';
 
-export interface ChatPanelProps {
-  messages: AIChatMessage[];
-  isLoading: boolean;
-  onSendMessage: (content: string) => void;
-  onClose?: () => void;
-  onMinimize?: () => void;
-  onModeChange?: (mode: ChatDisplayMode) => void;
-  onStopStreaming?: () => void;
-  isMinimized?: boolean;
-  isMobile?: boolean;
-  title?: string;
-  placeholder?: string;
-  greeting?: string;
-}
-
-export const ChatPanel = React.memo<ChatPanelProps>(
-  ({
+export const ChatPanel = React.memo(() => {
+  const {
     messages,
     isLoading,
-    onSendMessage,
-    onClose,
-    onMinimize,
-    onModeChange,
-    onStopStreaming,
-    isMinimized = false,
-    isMobile = false,
-    title = 'DjangoCFG Assistant',
-    placeholder,
-    greeting,
-  }) => {
-    if (isMinimized) {
-      return (
-        <Button
-          onClick={onMinimize}
-          className="rounded-full shadow-lg"
-          style={{ width: '56px', height: '56px' }}
-        >
-          <Bot className="h-6 w-6" />
-        </Button>
-      );
-    }
+    config,
+    isMobile,
+    sendMessage,
+    closeChat,
+    setDisplayMode,
+    stopStreaming,
+    clearMessages,
+  } = useAIChatContext();
 
-    return (
-      <Card
-        className="flex flex-col shadow-2xl border-border/50"
-        style={{
-          width: '380px',
-          height: '520px',
-          maxHeight: 'calc(100vh - 100px)',
-        }}
-      >
-        {/* Header */}
-        <CardHeader className="flex flex-row items-center justify-between p-3 border-b">
-          <div className="flex items-center gap-2">
-            <div
-              className="rounded-full bg-primary/10 flex items-center justify-center"
-              style={{ width: '32px', height: '32px' }}
-            >
-              <Bot className="h-4 w-4 text-primary" />
-            </div>
-            <div>
-              <h3 className="font-semibold text-sm">{title}</h3>
-              <p className="text-xs text-muted-foreground">AI-powered documentation assistant</p>
-            </div>
+  return (
+    <Card
+      className="flex flex-col shadow-2xl border-border/50"
+      style={{
+        width: '380px',
+        height: '520px',
+        maxHeight: 'calc(100vh - 100px)',
+      }}
+    >
+      {/* Header */}
+      <CardHeader className="flex flex-row items-center justify-between p-3 border-b">
+        <div className="flex items-center gap-2">
+          <div
+            className="rounded-full bg-primary/10 flex items-center justify-center"
+            style={{ width: '32px', height: '32px' }}
+          >
+            <Bot className="h-4 w-4 text-primary" />
           </div>
-          <div className="flex gap-1">
-            {/* Sidebar mode button - only on desktop */}
-            {onModeChange && !isMobile && (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => onModeChange('sidebar')}
-                title="Switch to sidebar mode"
-              >
-                <PanelRight className="h-4 w-4" />
-              </Button>
-            )}
-            {onMinimize && (
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onMinimize} title="Minimize">
-                <Minimize2 className="h-4 w-4" />
-              </Button>
-            )}
-            {onClose && (
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose} title="Close">
-                <X className="h-4 w-4" />
-              </Button>
-            )}
+          <div>
+            <h3 className="font-semibold text-sm">{config.title || 'DjangoCFG AI'}</h3>
+            <p className="text-xs text-muted-foreground">documentation assistant</p>
           </div>
-        </CardHeader>
+        </div>
+        <div className="flex gap-1">
+          {messages.length > 0 && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={clearMessages}
+              title="New chat"
+            >
+              <RotateCcw className="h-4 w-4" />
+            </Button>
+          )}
+          {/* Sidebar mode button - only on desktop */}
+          {!isMobile && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setDisplayMode('sidebar')}
+              title="Switch to sidebar mode"
+            >
+              <PanelRight className="h-4 w-4" />
+            </Button>
+          )}
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title="Close">
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </CardHeader>
 
-        {/* Messages */}
-        <CardContent className="flex-1 p-0 overflow-hidden">
-          <ChatMessages
-            messages={messages}
-            isLoading={isLoading}
-            greeting={greeting}
-            onStopStreaming={onStopStreaming}
-            isCompact
-            greetingIcon="bot"
-          />
-        </CardContent>
+      {/* Messages */}
+      <CardContent className="flex-1 p-0 overflow-hidden">
+        <ChatMessages
+          messages={messages}
+          isLoading={isLoading}
+          greeting={config.greeting}
+          onStopStreaming={stopStreaming}
+          isCompact
+          greetingIcon="bot"
+        />
+      </CardContent>
 
-        {/* Input */}
-        <CardFooter className="p-3 border-t">
-          <AIMessageInput
-            onSend={onSendMessage}
-            isLoading={isLoading}
-            placeholder={placeholder}
-          />
-        </CardFooter>
-      </Card>
-    );
-  }
-);
+      {/* Input */}
+      <CardFooter className="p-3 border-t">
+        <AIMessageInput
+          onSend={sendMessage}
+          isLoading={isLoading}
+          placeholder={config.placeholder}
+        />
+      </CardFooter>
+    </Card>
+  );
+});
 
 ChatPanel.displayName = 'ChatPanel';

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

@@ -2,60 +2,59 @@
 
 import React, { useEffect } from 'react';
 import { Button } from '@djangocfg/ui';
-import { X, PanelRightClose, Bot } from 'lucide-react';
+import { X, PanelRightClose, Bot, GripVertical, RotateCcw } from 'lucide-react';
 import { ChatMessages } from './ChatMessages';
 import { AIMessageInput } from './MessageInput';
 import { useChatLayout } from '../hooks/useChatLayout';
-import type { AIChatMessage, ChatDisplayMode } from '../types';
+import { useAIChatContext } from '../context/AIChatContext';
 
-const SIDEBAR_WIDTH = 400;
-
-export interface ChatSidebarProps {
-  messages: AIChatMessage[];
-  isLoading: boolean;
-  onSendMessage: (content: string) => void;
-  onClose?: () => void;
-  onModeChange?: (mode: ChatDisplayMode) => void;
-  onStopStreaming?: () => void;
-  title?: string;
-  placeholder?: string;
-  greeting?: string;
-}
-
-export const ChatSidebar = React.memo<ChatSidebarProps>(
-  ({
+export const ChatSidebar = React.memo(() => {
+  const {
     messages,
     isLoading,
-    onSendMessage,
-    onClose,
-    onModeChange,
-    onStopStreaming,
-    title = 'DjangoCFG Assistant',
-    placeholder,
-    greeting,
-  }) => {
-    // Use the layout hook for content pushing
-    const { applyLayout, getSidebarStyles } = useChatLayout({
-      sidebarWidth: SIDEBAR_WIDTH,
-    });
+    config,
+    sendMessage,
+    closeChat,
+    setDisplayMode,
+    stopStreaming,
+    clearMessages,
+  } = useAIChatContext();
 
-    // Apply sidebar layout on mount, reset on unmount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => {
-      applyLayout('sidebar');
-      return () => {
-        applyLayout('closed');
-      };
-    }, []);
+  // Use the layout hook for content pushing and resizing
+  const { applyLayout, getSidebarStyles, startResize, isResizing } = useChatLayout();
 
-    const sidebarStyles = getSidebarStyles();
+  // Apply sidebar layout on mount, reset on unmount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    applyLayout('sidebar');
+    return () => {
+      applyLayout('closed');
+    };
+  }, []);
 
-    return (
+  const sidebarStyles = getSidebarStyles();
+
+  return (
+    <div
+      className="flex bg-background"
+      style={sidebarStyles}
+      data-chat-sidebar-panel
+    >
+      {/* Resize handle */}
       <div
-        className="flex flex-col bg-background border-l border-border"
-        style={sidebarStyles}
-        data-chat-sidebar-panel
+        className={`
+          flex items-center justify-center w-3 cursor-ew-resize
+          border-l border-border transition-colors select-none flex-shrink-0
+          ${isResizing ? 'bg-primary/20' : 'bg-muted/30 hover:bg-muted/50'}
+        `}
+        onMouseDown={startResize}
+        title="Drag to resize"
       >
+        <GripVertical className={`h-4 w-4 ${isResizing ? 'text-primary' : 'text-muted-foreground/50'}`} />
+      </div>
+
+      {/* Main sidebar content */}
+      <div className="flex flex-col flex-1 min-w-0">
         {/* Header - uses CSS variable for navbar height consistency */}
         <div
           className="flex items-center justify-between px-4 border-b border-border bg-muted/30"
@@ -69,27 +68,34 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(
               <Bot className="h-4 w-4 text-primary" />
             </div>
             <div>
-              <h3 className="font-semibold text-sm">{title}</h3>
-              <p className="text-xs text-muted-foreground">Documentation assistant</p>
+              <h3 className="font-semibold text-sm">{config.title || 'DjangoCFG AI'}</h3>
+              <p className="text-xs text-muted-foreground">documentation assistant</p>
             </div>
           </div>
           <div className="flex gap-1">
-            {onModeChange && (
+            {messages.length > 0 && (
               <Button
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8"
-                onClick={() => onModeChange('floating')}
-                title="Switch to floating mode"
+                onClick={clearMessages}
+                title="New chat"
               >
-                <PanelRightClose className="h-4 w-4" />
-              </Button>
-            )}
-            {onClose && (
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose} title="Close chat">
-                <X className="h-4 w-4" />
+                <RotateCcw className="h-4 w-4" />
               </Button>
             )}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => setDisplayMode('floating')}
+              title="Switch to floating mode"
+            >
+              <PanelRightClose className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title="Close chat">
+              <X className="h-4 w-4" />
+            </Button>
           </div>
         </div>
 
@@ -98,8 +104,8 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(
           <ChatMessages
             messages={messages}
             isLoading={isLoading}
-            greeting={greeting}
-            onStopStreaming={onStopStreaming}
+            greeting={config.greeting}
+            onStopStreaming={stopStreaming}
             isCompact={false}
             largeGreetingIcon
             greetingIcon="message"
@@ -109,11 +115,11 @@ export const ChatSidebar = React.memo<ChatSidebarProps>(
 
         {/* Input */}
         <div className="p-4 border-t border-border bg-muted/30">
-          <AIMessageInput onSend={onSendMessage} isLoading={isLoading} placeholder={placeholder} />
+          <AIMessageInput onSend={sendMessage} isLoading={isLoading} placeholder={config.placeholder} />
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+});
 
 ChatSidebar.displayName = 'ChatSidebar';

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

@@ -18,19 +18,7 @@ export interface ChatWidgetProps extends ChatWidgetConfig {
  * Internal chat widget that uses context
  */
 const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) => {
-  const {
-    messages,
-    isLoading,
-    isMinimized,
-    config,
-    displayMode,
-    isMobile,
-    sendMessage,
-    openChat,
-    closeChat,
-    toggleMinimize,
-    setDisplayMode,
-  } = useChatContext();
+  const { config, displayMode, openChat } = useChatContext();
 
   // Use layout hook for consistent positioning
   const { getFabStyles, getFloatingStyles } = useChatLayout();
@@ -60,16 +48,7 @@ const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) =>
   if (displayMode === 'sidebar') {
     return (
       <Portal>
-        <ChatSidebar
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onModeChange={setDisplayMode}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatSidebar />
       </Portal>
     );
   }
@@ -78,19 +57,7 @@ const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) =>
   return (
     <Portal>
       <div style={floatingStyles} className={className || ''}>
-        <ChatPanel
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onMinimize={toggleMinimize}
-          onModeChange={setDisplayMode}
-          isMinimized={isMinimized}
-          isMobile={isMobile}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatPanel />
       </div>
     </Portal>
   );
@@ -105,7 +72,7 @@ const ChatWidgetInternal: React.FC<{ className?: string }> = ({ className }) =>
  */
 export const ChatWidget: React.FC<ChatWidgetProps> = ({
   apiEndpoint = '/api/chat',
-  title = 'DjangoCFG Assistant',
+  title = 'DjangoCFG AI',
   placeholder = 'Ask about DjangoCFG...',
   greeting = "Hi! I'm your DjangoCFG documentation assistant. Ask me anything about configuration, features, or how to use the library.",
   position = 'bottom-right',

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

@@ -24,7 +24,7 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
 
     return (
       <div
-        className={`flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300 ${
+        className={`flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300 max-w-full overflow-hidden ${
           isUser ? 'flex-row-reverse' : ''
         }`}
       >
@@ -52,7 +52,7 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
           {/* 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 Assistant'}
+              {isUser ? 'You' : 'DjangoCFG AI'}
             </span>
             <span className="text-xs text-muted-foreground">
               {formatTime(message.timestamp)}
@@ -69,12 +69,12 @@ export const MessageBubble = React.memo<MessageBubbleProps>(
           >
             <CardContent className={isCompact ? 'p-2' : 'p-3'}>
               {/* Message Text */}
-              <div className={`${isCompact ? 'text-xs' : 'text-sm'}`}>
+              <div className={`${isCompact ? 'text-xs' : 'text-sm'} overflow-hidden`} style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}>
                 {isUser ? (
-                  <span className="whitespace-pre-wrap">{message.content}</span>
+                  <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">
+                  <span className="whitespace-pre-wrap" style={{ overflowWrap: 'anywhere' }}>
                     {message.content}
                     <Loader2 className="inline-block ml-1 h-3 w-3 animate-spin" />
                   </span>

package/src/snippets/McpChat/components/index.ts

@@ -7,7 +7,6 @@ export { AIChatWidget } from './AIChatWidget';
 export type { AIChatWidgetProps } from './AIChatWidget';
 
 export { ChatPanel } from './ChatPanel';
-export type { ChatPanelProps } from './ChatPanel';
 
 export { ChatMessages } from './ChatMessages';
 export type { ChatMessagesProps, ChatMessagesHandle } from './ChatMessages';
@@ -19,4 +18,3 @@ export { AIMessageInput } from './MessageInput';
 export type { AIMessageInputProps } from './MessageInput';
 
 export { ChatSidebar } from './ChatSidebar';
-export type { ChatSidebarProps } from './ChatSidebar';

package/src/snippets/McpChat/config.ts

@@ -33,3 +33,45 @@ export const mcpEndpoints = {
 // Export defaults for backwards compatibility
 export const DEFAULT_CHAT_API_ENDPOINT = PROD_HOST + '/api/chat';
 export const DEFAULT_MCP_BASE_URL = PROD_HOST;
+
+/**
+ * Chat sidebar layout configuration
+ */
+export const sidebarConfig = {
+  /** Minimum sidebar width in pixels */
+  minWidth: 320,
+  /** Maximum sidebar width in pixels */
+  maxWidth: 600,
+  /** Default sidebar width in pixels */
+  defaultWidth: 400,
+  /** Z-index for chat elements */
+  zIndex: 300,
+  /** Animation duration in milliseconds */
+  animationDuration: 200,
+};
+
+/**
+ * Chat FAB (Floating Action Button) configuration
+ */
+export const fabConfig = {
+  /** Bottom offset in pixels */
+  bottom: 24,
+  /** Right offset in pixels */
+  right: 24,
+  /** Size of FAB button in pixels */
+  size: 56,
+};
+
+/**
+ * LocalStorage keys for chat state persistence
+ */
+export const storageKeys = {
+  /** Display mode (closed, floating, sidebar) */
+  mode: 'djangocfg-chat-mode',
+  /** User ID for conversation tracking */
+  userId: 'djangocfg-chat-user-id',
+  /** Chat messages history */
+  messages: 'djangocfg-chat-messages',
+  /** Sidebar width */
+  sidebarWidth: 'djangocfg-chat-sidebar-width',
+};

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

@@ -4,10 +4,8 @@ import React, { createContext, useContext, useState, useCallback, useMemo, useEf
 import { useLocalStorage, useIsMobile } from '@djangocfg/ui/hooks';
 import { v4 as uuidv4 } from 'uuid';
 import type { AIChatMessage, ChatApiResponse, AIChatSource, ChatWidgetConfig, ChatDisplayMode } from '../types';
+import { storageKeys } from '../config';
 
-const STORAGE_KEY_MODE = 'djangocfg-chat-mode';
-const STORAGE_KEY_USER_ID = 'djangocfg-chat-user-id';
-const STORAGE_KEY_MESSAGES = 'djangocfg-chat-messages';
 const MAX_STORED_MESSAGES = 50;
 
 function generateMessageId(): string {
@@ -102,13 +100,13 @@ export function ChatProvider({
   const isHydratedRef = useRef(false);
 
   // Display mode with localStorage persistence
-  const [storedMode, setStoredMode] = useLocalStorage<ChatDisplayMode>(STORAGE_KEY_MODE, 'closed');
+  const [storedMode, setStoredMode] = useLocalStorage<ChatDisplayMode>(storageKeys.mode, 'closed');
 
   // User ID with localStorage persistence
-  const [userId, setUserId] = useLocalStorage<string>(STORAGE_KEY_USER_ID, '');
+  const [userId, setUserId] = useLocalStorage<string>(storageKeys.userId, '');
 
   // Messages storage (serialized)
-  const [storedMessages, setStoredMessages] = useLocalStorage<SerializedMessage[]>(STORAGE_KEY_MESSAGES, []);
+  const [storedMessages, setStoredMessages] = useLocalStorage<SerializedMessage[]>(storageKeys.messages, []);
 
   const isMobile = useIsMobile();
 
@@ -163,7 +161,7 @@ export function ChatProvider({
   const config: ChatWidgetConfig = useMemo(
     () => ({
       apiEndpoint,
-      title: 'DjangoCFG Assistant',
+      title: 'DjangoCFG AI',
       placeholder: 'Ask about DjangoCFG...',
       greeting:
         "Hi! I'm your DjangoCFG documentation assistant. Ask me anything about configuration, features, or how to use the library.",

package/src/snippets/McpChat/hooks/useChatLayout.ts

@@ -1,16 +1,21 @@
 'use client';
 
-import { useEffect, useCallback, useRef } from 'react';
+import { useEffect, useCallback, useRef, useState } from 'react';
+import { useLocalStorage } from '@djangocfg/ui/hooks';
 import type { ChatDisplayMode } from '../types';
+import { sidebarConfig, fabConfig, storageKeys } from '../config';
+
+// Re-export for convenience
+export const MIN_SIDEBAR_WIDTH = sidebarConfig.minWidth;
+export const MAX_SIDEBAR_WIDTH = sidebarConfig.maxWidth;
+export const DEFAULT_SIDEBAR_WIDTH = sidebarConfig.defaultWidth;
 
 /**
  * Configuration for chat layout management
  */
 export interface ChatLayoutConfig {
-  /** Width of sidebar in pixels */
-  sidebarWidth?: number;
-  /** Z-index for chat elements */
-  zIndex?: number;
+  /** Initial width of sidebar in pixels */
+  initialWidth?: number;
   /** Animation duration in ms */
   animationDuration?: number;
   /** Element to push (defaults to body) */
@@ -21,10 +26,18 @@ export interface ChatLayoutConfig {
  * Return type for useChatLayout hook
  */
 export interface UseChatLayoutReturn {
+  /** Current sidebar width */
+  sidebarWidth: number;
   /** Apply layout changes for mode */
   applyLayout: (mode: ChatDisplayMode) => void;
   /** Reset layout to default */
   resetLayout: () => void;
+  /** Update sidebar width (for resize) */
+  updateWidth: (width: number) => void;
+  /** Start resize operation */
+  startResize: (e: React.MouseEvent) => void;
+  /** Whether currently resizing */
+  isResizing: boolean;
   /** Get CSS for sidebar container */
   getSidebarStyles: () => React.CSSProperties;
   /** Get CSS for floating container */
@@ -34,9 +47,8 @@ export interface UseChatLayoutReturn {
 }
 
 const DEFAULT_CONFIG: Required<ChatLayoutConfig> = {
-  sidebarWidth: 400,
-  zIndex: 300,
-  animationDuration: 200,
+  initialWidth: sidebarConfig.defaultWidth,
+  animationDuration: sidebarConfig.animationDuration,
   pushTarget: 'body',
 };
 
@@ -69,7 +81,22 @@ interface FixedElementOriginalStyles {
  */
 export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
   const mergedConfig = { ...DEFAULT_CONFIG, ...config };
-  const { sidebarWidth, zIndex, animationDuration, pushTarget } = mergedConfig;
+  const { initialWidth, animationDuration, pushTarget } = mergedConfig;
+
+  // Sidebar width with localStorage persistence
+  const [storedWidth, setStoredWidth] = useLocalStorage<number>(storageKeys.sidebarWidth, initialWidth);
+
+  // Clamp stored width to valid range
+  const sidebarWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, storedWidth));
+  const sidebarWidthRef = useRef(sidebarWidth);
+
+  // Resizing state (runtime only, not persisted)
+  const [isResizing, setIsResizing] = useState(false);
+
+  // Keep ref in sync
+  useEffect(() => {
+    sidebarWidthRef.current = sidebarWidth;
+  }, [sidebarWidth]);
 
   // Store original styles for cleanup
   const originalStylesRef = useRef<{
@@ -157,6 +184,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
    */
   const adjustFixedElements = useCallback(
     (open: boolean) => {
+      const currentWidth = sidebarWidthRef.current;
       if (open) {
         // Save and adjust fixed elements
         const fixedElements = getFixedElements();
@@ -168,7 +196,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
 
         fixedElements.forEach((el) => {
           el.style.transition = `right ${animationDuration}ms ease`;
-          el.style.right = `${sidebarWidth}px`;
+          el.style.right = `${currentWidth}px`;
         });
       } else {
         // Restore fixed elements
@@ -185,7 +213,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
         fixedElementsRef.current = [];
       }
     },
-    [getFixedElements, sidebarWidth, animationDuration]
+    [getFixedElements, animationDuration]
   );
 
   /**
@@ -195,11 +223,13 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     const target = getTargetElement();
     if (!target) return;
 
+    const currentWidth = sidebarWidthRef.current;
+
     saveOriginalStyles(target);
 
     // Add smooth transition
     target.style.transition = `margin-right ${animationDuration}ms ease`;
-    target.style.marginRight = `${sidebarWidth}px`;
+    target.style.marginRight = `${currentWidth}px`;
     target.style.overflowX = 'hidden';
     target.setAttribute('data-chat-sidebar', 'open');
 
@@ -207,7 +237,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     adjustFixedElements(true);
 
     currentModeRef.current = 'sidebar';
-  }, [getTargetElement, saveOriginalStyles, sidebarWidth, animationDuration, adjustFixedElements]);
+  }, [getTargetElement, saveOriginalStyles, animationDuration, adjustFixedElements]);
 
   /**
    * Apply floating/closed mode layout (reset sidebar push)
@@ -268,6 +298,83 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     currentModeRef.current = 'closed';
   }, [getTargetElement, restoreOriginalStyles]);
 
+  /**
+   * Update width during resize (no animation)
+   */
+  const updateWidthImmediate = useCallback(
+    (newWidth: number) => {
+      const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+
+      // Update body margin
+      const target = getTargetElement();
+      if (target && currentModeRef.current === 'sidebar') {
+        target.style.transition = 'none';
+        target.style.marginRight = `${clampedWidth}px`;
+      }
+
+      // Update fixed elements
+      fixedElementsRef.current.forEach(({ element }) => {
+        element.style.transition = 'none';
+        element.style.right = `${clampedWidth}px`;
+      });
+
+      return clampedWidth;
+    },
+    [getTargetElement]
+  );
+
+  /**
+   * Update sidebar width (for resize)
+   */
+  const updateWidth = useCallback(
+    (newWidth: number) => {
+      const clampedWidth = updateWidthImmediate(newWidth);
+      setStoredWidth(clampedWidth);
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+
+  /**
+   * Start resize operation
+   */
+  const startResize = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsResizing(true);
+
+      const startX = e.clientX;
+      const startWidth = sidebarWidthRef.current;
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        // Calculate new width (dragging left increases width)
+        const deltaX = startX - moveEvent.clientX;
+        const newWidth = startWidth + deltaX;
+        const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+
+        // Update DOM immediately for smooth feel
+        updateWidthImmediate(clampedWidth);
+        sidebarWidthRef.current = clampedWidth;
+
+        // Also update React state so sidebar visually resizes
+        setStoredWidth(clampedWidth);
+      };
+
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'ew-resize';
+      document.body.style.userSelect = 'none';
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+
   /**
    * Get CSS styles for sidebar container
    */
@@ -278,9 +385,9 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
       right: 0,
       bottom: 0,
       width: `${sidebarWidth}px`,
-      zIndex,
+      zIndex: sidebarConfig.zIndex,
     };
-  }, [sidebarWidth, zIndex]);
+  }, [sidebarWidth]);
 
   /**
    * Get CSS styles for floating container
@@ -289,12 +396,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
       return {
         position: 'fixed',
-        zIndex: zIndex - 50, // Slightly lower than sidebar
-        bottom: 56, // Above banner
-        ...(position === 'bottom-right' ? { right: 16 } : { left: 16 }),
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
       };
     },
-    [zIndex]
+    []
   );
 
   /**
@@ -304,12 +411,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
       return {
         position: 'fixed',
-        zIndex: zIndex - 50,
-        bottom: 56,
-        ...(position === 'bottom-right' ? { right: 16 } : { left: 16 }),
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
       };
     },
-    [zIndex]
+    []
   );
 
   // Cleanup on unmount
@@ -320,8 +427,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
   }, [resetLayout]);
 
   return {
+    sidebarWidth,
     applyLayout,
     resetLayout,
+    updateWidth,
+    startResize,
+    isResizing,
     getSidebarStyles,
     getFloatingStyles,
     getFabStyles,

package/src/snippets/McpChat/index.ts

@@ -46,7 +46,6 @@ export { ChatWidget, AIChatWidget, ChatPanel, MessageBubble, AIMessageInput } fr
 export type {
   ChatWidgetProps,
   AIChatWidgetProps,
-  ChatPanelProps,
   MessageBubbleProps,
   AIMessageInputProps,
 } from './components';

package/src/snippets/index.ts

@@ -24,7 +24,6 @@ export {
 } from './McpChat';
 export type {
   AIChatWidgetProps,
-  ChatPanelProps,
   MessageBubbleProps,
   AIMessageInputProps,
   AIChatContextState,