@djangocfg/layouts 2.0.6 → 2.0.8

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';

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

@@ -0,0 +1,139 @@
+'use client';
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { Button } from '@djangocfg/ui';
+import { Send, Loader2 } from 'lucide-react';
+
+export interface AIMessageInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+  maxRows?: number;
+}
+
+export const AIMessageInput = React.memo<AIMessageInputProps>(
+  ({
+    onSend,
+    disabled = false,
+    isLoading = false,
+    placeholder = 'Ask about DjangoCFG...',
+    maxRows = 5,
+  }) => {
+    const [value, setValue] = useState('');
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    // Auto-resize textarea
+    const adjustHeight = useCallback(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+
+      // Reset height to auto to get the correct scrollHeight
+      textarea.style.height = 'auto';
+
+      // Calculate line height and max height
+      const lineHeight = 24; // ~1.5rem
+      const minHeight = 44; // Single line height with padding
+      const maxHeight = lineHeight * maxRows + 20; // padding
+
+      // Set new height
+      const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+      textarea.style.height = `${newHeight}px`;
+    }, [maxRows]);
+
+    // Adjust height when value changes
+    useEffect(() => {
+      adjustHeight();
+    }, [value, adjustHeight]);
+
+    const handleSubmit = useCallback(
+      (e?: React.FormEvent) => {
+        e?.preventDefault();
+
+        const trimmed = value.trim();
+        if (!trimmed || disabled || isLoading) return;
+
+        onSend(trimmed);
+        setValue('');
+
+        // Reset height after sending
+        if (textareaRef.current) {
+          textareaRef.current.style.height = 'auto';
+        }
+        textareaRef.current?.focus();
+      },
+      [value, disabled, isLoading, onSend]
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          handleSubmit();
+        }
+      },
+      [handleSubmit]
+    );
+
+    const canSend = value.trim().length > 0 && !disabled && !isLoading;
+
+    return (
+      <form onSubmit={handleSubmit} className="w-full">
+        <div
+          className="relative flex items-end rounded-2xl border border-input bg-background transition-colors focus-within:ring-1 focus-within:ring-ring focus-within:border-ring"
+          style={{ minHeight: '44px' }}
+        >
+          {/* Textarea */}
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled || isLoading}
+            rows={1}
+            className="flex-1 resize-none bg-transparent px-4 py-3 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 pr-12"
+            style={{
+              minHeight: '44px',
+              maxHeight: `${24 * maxRows + 20}px`,
+              lineHeight: '1.5rem',
+            }}
+            autoComplete="off"
+          />
+
+          {/* Send Button - positioned inside, bottom right */}
+          <div
+            className="absolute flex items-center justify-center"
+            style={{
+              right: '6px',
+              bottom: '6px',
+            }}
+          >
+            <Button
+              type="submit"
+              size="icon"
+              disabled={!canSend}
+              className="h-8 w-8 rounded-full transition-all"
+              style={{
+                opacity: canSend ? 1 : 0.5,
+              }}
+            >
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Send className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Helper text */}
+        <p className="mt-1.5 text-xs text-muted-foreground text-center">
+          Press Enter to send, Shift+Enter for new line
+        </p>
+      </form>
+    );
+  }
+);
+
+AIMessageInput.displayName = 'AIMessageInput';

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

@@ -0,0 +1,22 @@
+'use client';
+
+export { ChatWidget } from './ChatWidget';
+export type { ChatWidgetProps } from './ChatWidget';
+
+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';
+
+export { MessageBubble } from './MessageBubble';
+export type { MessageBubbleProps } from './MessageBubble';
+
+export { AIMessageInput } from './MessageInput';
+export type { AIMessageInputProps } from './MessageInput';
+
+export { ChatSidebar } from './ChatSidebar';
+export type { ChatSidebarProps } from './ChatSidebar';

package/src/snippets/McpChat/config.ts

@@ -0,0 +1,35 @@
+/**
+ * McpChat configuration
+ * Environment-aware configuration for MCP server endpoints
+ */
+
+// Hosts
+const PROD_HOST = 'https://mcp.djangocfg.com';
+const DEV_HOST = 'http://localhost:3002';
+
+// Current host based on environment
+const HOST = process.env.NODE_ENV === 'development' ? DEV_HOST : PROD_HOST;
+
+/**
+ * MCP Server endpoints
+ */
+export const mcpEndpoints = {
+  /** Base URL */
+  baseUrl: HOST,
+  /** Chat API endpoint */
+  chat: `${HOST}/api/chat`,
+  /** Search API endpoint */
+  search: `${HOST}/api/search`,
+  /** Conversations API endpoint */
+  conversations: `${HOST}/api/conversations`,
+  /** Health check endpoint */
+  health: `${HOST}/health`,
+  /** MCP protocol endpoint (Streamable HTTP) */
+  mcp: `${HOST}/mcp`,
+  /** SSE endpoint for legacy clients */
+  sse: `${HOST}/mcp/sse`,
+};
+
+// Export defaults for backwards compatibility
+export const DEFAULT_CHAT_API_ENDPOINT = PROD_HOST + '/api/chat';
+export const DEFAULT_MCP_BASE_URL = PROD_HOST;