@djangocfg/layouts 2.1.226 → 2.1.228

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

@@ -1,131 +0,0 @@
-'use client';
-
-import { Bot, PanelRight, RotateCcw, X } from 'lucide-react';
-import React, { useMemo } from 'react';
-
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
-import { Button, Card, CardContent, CardFooter, CardHeader } from '@djangocfg/ui-core';
-
-import { useAIChatContext } from '../context/AIChatContext';
-import { ChatMessages } from './ChatMessages';
-import { AIMessageInput } from './MessageInput';
-
-export const ChatPanel = React.memo(() => {
-  const {
-    messages,
-    isLoading,
-    config,
-    isMobile,
-    sendMessage,
-    closeChat,
-    setDisplayMode,
-    stopStreaming,
-    clearMessages,
-  } = useAIChatContext();
-  const t = useTypedT<I18nTranslations>();
-
-  const labels = useMemo(() => ({
-    aiAssistant: t('layouts.chat.aiAssistant'),
-    defaultTitle: t('layouts.chat.defaultTitle'),
-    newChat: t('layouts.chat.newChat'),
-    closeChat: t('layouts.chat.closeChat'),
-    switchToSidebar: t('layouts.chat.switchToSidebar'),
-  }), [t]);
-
-  // Mobile: fullscreen, Desktop: floating panel
-  const panelStyles: React.CSSProperties = isMobile
-    ? {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: '100%',
-        height: '100%',
-        maxHeight: '100dvh',
-        borderRadius: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        margin: 0,
-        border: 'none',
-      }
-    : {
-        width: '380px',
-        height: '520px',
-        maxHeight: 'calc(100vh - 100px)',
-      };
-
-  return (
-    <Card
-      className={`flex flex-col ${isMobile ? 'rounded-none border-0 shadow-none' : 'shadow-2xl border-border/50'}`}
-      style={panelStyles}
-    >
-      {/* 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">{config.title || labels.defaultTitle}</h3>
-            <p className="text-xs text-muted-foreground">{labels.aiAssistant}</p>
-          </div>
-        </div>
-        <div className="flex gap-1">
-          {messages.length > 0 && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8"
-              onClick={clearMessages}
-              title={labels.newChat}
-            >
-              <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={labels.switchToSidebar}
-            >
-              <PanelRight className="h-4 w-4" />
-            </Button>
-          )}
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title={labels.closeChat}>
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-      </CardHeader>
-
-      {/* 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={sendMessage}
-          isLoading={isLoading}
-          placeholder={config.placeholder}
-        />
-      </CardFooter>
-    </Card>
-  );
-});
-
-ChatPanel.displayName = 'ChatPanel';

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

@@ -1,156 +0,0 @@
-'use client';
-
-import { Bot, GripVertical, PanelRightClose, RotateCcw, X } from 'lucide-react';
-import React, { useEffect, useMemo } from 'react';
-
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
-import { Button } from '@djangocfg/ui-core';
-
-import { useAIChatContext } from '../context/AIChatContext';
-import { useChatLayout } from '../hooks/useChatLayout';
-import { ChatMessages } from './ChatMessages';
-import { AIMessageInput } from './MessageInput';
-
-export interface ChatSidebarProps {
-  /** Width of resize handle in pixels (default: 12) */
-  resizeHandleWidth?: number;
-  /** Show grip icon in resize handle (default: true) */
-  showResizeIcon?: boolean;
-  /** Custom class for resize handle */
-  resizeHandleClassName?: string;
-}
-
-export const ChatSidebar = React.memo<ChatSidebarProps>(({
-  resizeHandleWidth = 12,
-  showResizeIcon = true,
-  resizeHandleClassName,
-}) => {
-  const {
-    messages,
-    isLoading,
-    config,
-    sendMessage,
-    closeChat,
-    setDisplayMode,
-    stopStreaming,
-    clearMessages,
-  } = useAIChatContext();
-  const t = useTypedT<I18nTranslations>();
-
-  const labels = useMemo(() => ({
-    aiAssistant: t('layouts.chat.aiAssistant'),
-    defaultTitle: t('layouts.chat.defaultTitle'),
-    newChat: t('layouts.chat.newChat'),
-    closeChat: t('layouts.chat.closeChat'),
-    switchToFloating: t('layouts.chat.switchToFloating'),
-    dragToResize: t('layouts.chat.dragToResize'),
-    howCanIHelp: t('layouts.chat.howCanIHelp'),
-  }), [t]);
-
-  // Use the layout hook for content pushing and resizing
-  const { applyLayout, getSidebarStyles, startResize, isResizing } = useChatLayout();
-
-  // 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 bg-background"
-      style={sidebarStyles}
-      data-chat-sidebar-panel
-    >
-      {/* Resize handle */}
-      <div
-        className={`
-          flex items-center justify-center 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'}
-          ${resizeHandleClassName || ''}
-        `}
-        style={{ width: resizeHandleWidth }}
-        onMouseDown={startResize}
-        title={labels.dragToResize}
-      >
-        {showResizeIcon && (
-          <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"
-          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">{config.title || labels.defaultTitle}</h3>
-              <p className="text-xs text-muted-foreground">{labels.aiAssistant}</p>
-            </div>
-          </div>
-          <div className="flex gap-1">
-            {messages.length > 0 && (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={clearMessages}
-                title={labels.newChat}
-              >
-                <RotateCcw className="h-4 w-4" />
-              </Button>
-            )}
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8"
-              onClick={() => setDisplayMode('floating')}
-              title={labels.switchToFloating}
-            >
-              <PanelRightClose className="h-4 w-4" />
-            </Button>
-            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={closeChat} title={labels.closeChat}>
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-
-        {/* Messages */}
-        <div className="flex-1 overflow-hidden">
-          <ChatMessages
-            messages={messages}
-            isLoading={isLoading}
-            greeting={config.greeting}
-            onStopStreaming={stopStreaming}
-            isCompact={false}
-            largeGreetingIcon
-            greetingIcon="message"
-            greetingTitle={labels.howCanIHelp}
-          />
-        </div>
-
-        {/* Input */}
-        <div className="p-4 border-t border-border bg-muted/30">
-          <AIMessageInput onSend={sendMessage} isLoading={isLoading} placeholder={config.placeholder} />
-        </div>
-      </div>
-    </div>
-  );
-});
-
-ChatSidebar.displayName = 'ChatSidebar';

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

@@ -1,115 +0,0 @@
-'use client';
-
-import { MessageCircle } from 'lucide-react';
-import React from 'react';
-
-import { Button, Portal } from '@djangocfg/ui-core';
-
-import { ChatProvider, useChatContext, useChatContextOptional } from '../context';
-import { useChatLayout } from '../hooks/useChatLayout';
-import { ChatPanel } from './ChatPanel';
-import { ChatSidebar } from './ChatSidebar';
-
-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 { config, displayMode, openChat, isMobile } = 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);
-
-  // Mobile fullscreen styles for floating mode
-  // Using inset: 0 with height: 100dvh for proper mobile viewport handling
-  const mobileFullscreenStyles: React.CSSProperties = {
-    position: 'fixed',
-    inset: 0,
-    height: '100dvh',
-    width: '100vw',
-    zIndex: 400, // Higher z-index for mobile overlay
-    overflow: 'hidden',
-  };
-
-  // 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 />
-      </Portal>
-    );
-  }
-
-  // Mode: floating - fullscreen on mobile, floating panel on desktop
-  return (
-    <Portal>
-      <div style={isMobile ? mobileFullscreenStyles : floatingStyles} className={className || ''}>
-        <ChatPanel />
-      </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 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',
-  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

@@ -1,142 +0,0 @@
-'use client';
-
-import { Bot, ExternalLink, Loader2, User } from 'lucide-react';
-import React from 'react';
-
-import { useAuth } from '@djangocfg/api/auth';
-import {
-    Avatar, AvatarFallback, AvatarImage, Badge, Card, CardContent
-} from '@djangocfg/ui-core';
-import { MarkdownMessage } from '@djangocfg/ui-tools';
-
-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';
-    const { user, isAuthenticated } = useAuth();
-
-    // Prepare user data BEFORE render
-    const showUserAvatar = isUser && isAuthenticated && user;
-    const userAvatar = user?.avatar || '';
-    const userDisplayName = user?.display_username || user?.email || 'User';
-    const userInitial = userDisplayName.charAt(0).toUpperCase();
-    const avatarSize = isCompact ? '28px' : '36px';
-    const iconSize = isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4';
-
-    return (
-      <div
-        className={`flex gap-3 animate-in fade-in slide-in-from-bottom-2 duration-300 max-w-full overflow-hidden ${
-          isUser ? 'flex-row-reverse' : ''
-        }`}
-      >
-        {/* Avatar */}
-        {showUserAvatar ? (
-          // Authenticated user avatar
-          <Avatar className="flex-shrink-0" style={{ width: avatarSize, height: avatarSize }}>
-            <AvatarImage src={userAvatar} alt={userDisplayName} />
-            <AvatarFallback className="bg-primary text-primary-foreground text-xs">
-              {userInitial}
-            </AvatarFallback>
-          </Avatar>
-        ) : isUser ? (
-          // Guest user icon
-          <div
-            className="flex-shrink-0 rounded-full flex items-center justify-center bg-primary text-primary-foreground"
-            style={{ width: avatarSize, height: avatarSize }}
-          >
-            <User className={iconSize} />
-          </div>
-        ) : (
-          // Bot icon
-          <div
-            className="flex-shrink-0 rounded-full flex items-center justify-center bg-muted text-muted-foreground"
-            style={{ width: avatarSize, height: avatarSize }}
-          >
-            <Bot className={iconSize} />
-          </div>
-        )}
-
-        {/* Message Content */}
-        <div className={`flex-1 min-w-0 ${isUser ? 'max-w-[80%] ml-auto' : 'max-w-[85%]'}`}>
-          {/* Header */}
-          <div className={`flex items-baseline gap-2 mb-1 ${isUser ? 'justify-end' : ''}`}>
-            <span className={`font-medium ${isCompact ? 'text-xs' : 'text-sm'}`}>
-              {isUser ? userDisplayName : 'DjangoCFG AI'}
-            </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'} overflow-hidden`} style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}>
-                {/* Always render markdown for immediate code block highlighting */}
-                <MarkdownMessage
-                  content={message.content}
-                  isUser={isUser}
-                  isCompact={isCompact}
-                />
-                {/* Show spinner during streaming */}
-                {message.isStreaming && (
-                  <Loader2 className="inline-block ml-1 h-3 w-3 animate-spin" />
-                )}
-              </div>
-
-              {/* 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

@@ -1,140 +0,0 @@
-'use client';
-
-import { Loader2, Send } from 'lucide-react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { Button } from '@djangocfg/ui-core';
-
-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';