@djangocfg/layouts 2.0.5 → 2.0.7

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

@@ -0,0 +1,151 @@
+'use client';
+
+import React, { useRef, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { ScrollArea, Button, type ScrollAreaHandle } from '@djangocfg/ui';
+import { Bot, MessageSquare, StopCircle } from 'lucide-react';
+import { MessageBubble } from './MessageBubble';
+import type { AIChatMessage } from '../types';
+
+/**
+ * ChatMessages imperative handle
+ */
+export interface ChatMessagesHandle {
+  scrollToBottom: (instant?: boolean) => void;
+}
+
+export interface ChatMessagesProps {
+  /** Messages to display */
+  messages: AIChatMessage[];
+  /** Whether loading/streaming is in progress */
+  isLoading: boolean;
+  /** Greeting to show when no messages */
+  greeting?: string;
+  /** Callback to stop streaming */
+  onStopStreaming?: () => void;
+  /** Use compact layout (smaller bubbles) */
+  isCompact?: boolean;
+  /** Use larger icon for greeting (sidebar mode) */
+  largeGreetingIcon?: boolean;
+  /** Custom greeting icon */
+  greetingIcon?: 'bot' | 'message';
+  /** Custom greeting title */
+  greetingTitle?: string;
+}
+
+/**
+ * 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
+ */
+export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
+  (
+    {
+      messages,
+      isLoading,
+      greeting,
+      onStopStreaming,
+      isCompact = false,
+      largeGreetingIcon = false,
+      greetingIcon = 'bot',
+      greetingTitle,
+    },
+    ref
+  ) => {
+    const scrollAreaRef = useRef<ScrollAreaHandle>(null);
+    const hasScrolledOnLoad = useRef(false);
+
+    // Scroll to bottom helper
+    const scrollToBottom = useCallback((instant = false) => {
+      if (scrollAreaRef.current) {
+        scrollAreaRef.current.scrollToBottom(instant ? 'instant' : 'smooth');
+      }
+    }, []);
+
+    // Expose scrollToBottom via ref
+    useImperativeHandle(ref, () => ({
+      scrollToBottom,
+    }), [scrollToBottom]);
+
+    // Initial scroll when history loads (instant, no animation)
+    useEffect(() => {
+      if (!isLoading && messages.length > 0 && !hasScrolledOnLoad.current) {
+        requestAnimationFrame(() => {
+          scrollToBottom(true);
+          hasScrolledOnLoad.current = true;
+        });
+      }
+    }, [isLoading, messages.length, scrollToBottom]);
+
+    // Scroll to bottom on new messages (smooth animation)
+    useEffect(() => {
+      if (hasScrolledOnLoad.current && messages.length > 0) {
+        scrollToBottom(false);
+      }
+    }, [messages, scrollToBottom]);
+
+    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">
+        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4`}>
+          {/* Greeting */}
+          {messages.length === 0 && greeting && (
+            <div className={`text-center ${padding}`}>
+              <div
+                className="mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center"
+                style={{ width: iconSize.container, height: iconSize.container }}
+              >
+                <GreetingIcon className={`${iconSize.icon} text-primary`} />
+              </div>
+              {greetingTitle && (
+                <h4 className="font-medium mb-2">{greetingTitle}</h4>
+              )}
+              <p className={`text-sm text-muted-foreground ${largeGreetingIcon ? 'max-w-[300px]' : 'max-w-[280px]'} mx-auto`}>
+                {greeting}
+              </p>
+            </div>
+          )}
+
+          {/* Messages */}
+          {messages.map((message) => (
+            <MessageBubble key={message.id} message={message} isCompact={isCompact} />
+          ))}
+
+          {/* Loading indicator with stop button */}
+          {isLoading && messages.length > 0 && (
+            <div className="flex items-center justify-between text-muted-foreground text-sm">
+              <div className="flex items-center gap-2">
+                <div className="flex gap-1">
+                  <span className="animate-bounce" style={{ animationDelay: '0ms' }}>.</span>
+                  <span className="animate-bounce" style={{ animationDelay: '150ms' }}>.</span>
+                  <span className="animate-bounce" style={{ animationDelay: '300ms' }}>.</span>
+                </div>
+                <span>Generating response...</span>
+              </div>
+              {onStopStreaming && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onStopStreaming}
+                  className="h-6 px-2 text-xs"
+                >
+                  <StopCircle className="h-3 w-3 mr-1" />
+                  Stop
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    );
+  }
+);
+
+ChatMessages.displayName = 'ChatMessages';

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

@@ -0,0 +1,126 @@
+'use client';
+
+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 { ChatMessages } from './ChatMessages';
+import { AIMessageInput } from './MessageInput';
+
+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>(
+  ({
+    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>
+      );
+    }
+
+    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>
+          </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>
+        </CardHeader>
+
+        {/* Messages */}
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ChatMessages
+            messages={messages}
+            isLoading={isLoading}
+            greeting={greeting}
+            onStopStreaming={onStopStreaming}
+            isCompact
+            greetingIcon="bot"
+          />
+        </CardContent>
+
+        {/* Input */}
+        <CardFooter className="p-3 border-t">
+          <AIMessageInput
+            onSend={onSendMessage}
+            isLoading={isLoading}
+            placeholder={placeholder}
+          />
+        </CardFooter>
+      </Card>
+    );
+  }
+);
+
+ChatPanel.displayName = 'ChatPanel';

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

@@ -0,0 +1,119 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { Button } from '@djangocfg/ui';
+import { X, PanelRightClose, Bot } from 'lucide-react';
+import { ChatMessages } from './ChatMessages';
+import { AIMessageInput } from './MessageInput';
+import { useChatLayout } from '../hooks/useChatLayout';
+import type { AIChatMessage, ChatDisplayMode } from '../types';
+
+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>(
+  ({
+    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,
+    });
+
+    // Apply sidebar layout on mount, reset on unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => {
+      applyLayout('sidebar');
+      return () => {
+        applyLayout('closed');
+      };
+    }, []);
+
+    const sidebarStyles = getSidebarStyles();
+
+    return (
+      <div
+        className="flex flex-col bg-background border-l border-border"
+        style={sidebarStyles}
+        data-chat-sidebar-panel
+      >
+        {/* Header - uses CSS variable for navbar height consistency */}
+        <div
+          className="flex items-center justify-between px-4 border-b border-border bg-muted/30"
+          style={{ height: 'var(--nextra-navbar-height, 64px)', minHeight: 'var(--nextra-navbar-height, 64px)' }}
+        >
+          <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">Documentation assistant</p>
+            </div>
+          </div>
+          <div className="flex gap-1">
+            {onModeChange && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => onModeChange('floating')}
+                title="Switch to floating mode"
+              >
+                <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" />
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-hidden">
+          <ChatMessages
+            messages={messages}
+            isLoading={isLoading}
+            greeting={greeting}
+            onStopStreaming={onStopStreaming}
+            isCompact={false}
+            largeGreetingIcon
+            greetingIcon="message"
+            greetingTitle="How can I help?"
+          />
+        </div>
+
+        {/* Input */}
+        <div className="p-4 border-t border-border bg-muted/30">
+          <AIMessageInput onSend={onSendMessage} isLoading={isLoading} placeholder={placeholder} />
+        </div>
+      </div>
+    );
+  }
+);
+
+ChatSidebar.displayName = 'ChatSidebar';

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

@@ -0,0 +1,134 @@
+'use client';
+
+import React from 'react';
+import { Button, Portal } from '@djangocfg/ui';
+import { MessageCircle } from 'lucide-react';
+import { ChatPanel } from './ChatPanel';
+import { ChatSidebar } from './ChatSidebar';
+import { useChatContext, useChatContextOptional, ChatProvider } from '../context';
+import { useChatLayout } from '../hooks/useChatLayout';
+import type { ChatWidgetConfig } from '../types';
+
+export interface ChatWidgetProps extends ChatWidgetConfig {
+  /** Custom class name for the container */
+  className?: string;
+}
+
+/**
+ * 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();
+
+  // Use layout hook for consistent positioning
+  const { getFabStyles, getFloatingStyles } = useChatLayout();
+
+  const position = config.position || 'bottom-right';
+  const fabStyles = getFabStyles(position);
+  const floatingStyles = getFloatingStyles(position);
+
+  // Mode: closed - just show FAB
+  if (displayMode === 'closed') {
+    return (
+      <Portal>
+        <div style={fabStyles} className={className || ''}>
+          <Button
+            onClick={openChat}
+            className="rounded-full shadow-lg hover:shadow-xl transition-shadow"
+            style={{ width: '56px', height: '56px' }}
+          >
+            <MessageCircle className="h-6 w-6" />
+          </Button>
+        </div>
+      </Portal>
+    );
+  }
+
+  // Mode: sidebar - full-height panel on the right (desktop only)
+  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}
+        />
+      </Portal>
+    );
+  }
+
+  // Mode: floating - floating panel
+  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}
+        />
+      </div>
+    </Portal>
+  );
+};
+
+/**
+ * ChatWidget component
+ *
+ * Can be used in two ways:
+ * 1. Standalone (wraps itself in ChatProvider)
+ * 2. Inside a ChatProvider (uses context directly)
+ */
+export const ChatWidget: React.FC<ChatWidgetProps> = ({
+  apiEndpoint = '/api/chat',
+  title = 'DjangoCFG Assistant',
+  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',
+  variant = 'default',
+  className,
+}) => {
+  // Check if we're inside a ChatProvider
+  const existingContext = useChatContextOptional();
+
+  // If already in context, use internal widget directly
+  if (existingContext) {
+    return <ChatWidgetInternal className={className} />;
+  }
+
+  // Otherwise, wrap in provider
+  return (
+    <ChatProvider
+      apiEndpoint={apiEndpoint}
+      config={{ title, placeholder, greeting, position, variant }}
+    >
+      <ChatWidgetInternal className={className} />
+    </ChatProvider>
+  );
+};
+
+ChatWidget.displayName = 'ChatWidget';

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

@@ -0,0 +1,125 @@
+'use client';
+
+import React from 'react';
+import { Card, CardContent, Badge, MarkdownMessage } from '@djangocfg/ui';
+import { User, Bot, ExternalLink, Loader2 } from 'lucide-react';
+import type { AIChatMessage } from '../types';
+
+export interface MessageBubbleProps {
+  message: AIChatMessage;
+  isCompact?: boolean;
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export const MessageBubble = React.memo<MessageBubbleProps>(
+  ({ message, isCompact = false }) => {
+    const isUser = message.role === 'user';
+    const isAssistant = message.role === 'assistant';
+
+    return (
+      <div
+        className={`flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300 ${
+          isUser ? 'flex-row-reverse' : ''
+        }`}
+      >
+        {/* 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>
+
+        {/* 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 Assistant'}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {formatTime(message.timestamp)}
+            </span>
+          </div>
+
+          {/* Message Bubble */}
+          <Card
+            className={`transition-all duration-200 ${
+              isUser
+                ? 'bg-primary text-primary-foreground ml-auto'
+                : 'bg-muted'
+            }`}
+          >
+            <CardContent className={isCompact ? 'p-2' : 'p-3'}>
+              {/* Message Text */}
+              <div className={`${isCompact ? 'text-xs' : 'text-sm'}`}>
+                {isUser ? (
+                  <span className="whitespace-pre-wrap">{message.content}</span>
+                ) : message.isStreaming ? (
+                  // During streaming - show plain text to avoid parsing errors
+                  <span className="whitespace-pre-wrap">
+                    {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}
+                    className="prose-sm"
+                  />
+                )}
+              </div>
+
+              {/* Sources */}
+              {isAssistant && message.sources && message.sources.length > 0 && (
+                <div className="mt-3 pt-2 border-t border-border/50">
+                  <p className="text-xs text-muted-foreground mb-1.5">Related docs:</p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {message.sources.slice(0, 3).map((source, idx) => (
+                      <a
+                        key={idx}
+                        href={source.url || source.path}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-block"
+                      >
+                        <Badge
+                          variant="outline"
+                          className="text-xs gap-1 hover:bg-primary/10 transition-colors cursor-pointer"
+                        >
+                          {source.title}
+                          {source.section && ` - ${source.section}`}
+                          <ExternalLink className="h-2.5 w-2.5" />
+                        </Badge>
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+);
+
+MessageBubble.displayName = 'MessageBubble';