@djangocfg/layouts 2.0.8 → 2.0.10

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.",