@djangocfg/layouts 2.0.7 → 2.0.9

package/src/layouts/AuthLayout/OAuthCallback.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Loader2, AlertCircle, CheckCircle } from 'lucide-react';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@djangocfg/ui/components';
+
+import { useGithubAuth } from '../../auth/hooks';
+
+export interface OAuthCallbackProps {
+  onSuccess?: (user: any, isNewUser: boolean, provider: string) => void;
+  onError?: (error: string) => void;
+  redirectUrl?: string;
+}
+
+type CallbackStatus = 'processing' | 'success' | 'error';
+
+/**
+ * OAuth Callback Handler Component
+ *
+ * Processes OAuth callback from providers (GitHub, etc.).
+ * Reads code, state, and provider from URL params and exchanges for tokens.
+ *
+ * Usage:
+ * Place this component on your /auth page to handle OAuth callbacks.
+ *
+ * @example
+ * ```tsx
+ * // app/auth/page.tsx
+ * import { OAuthCallback, AuthLayout } from '@djangocfg/layouts';
+ *
+ * export default function AuthPage() {
+ *   return (
+ *     <>
+ *       <OAuthCallback
+ *         onSuccess={(user) => console.log('OAuth success:', user)}
+ *         onError={(error) => console.error('OAuth error:', error)}
+ *       />
+ *       <AuthLayout enableGithubAuth>
+ *         {/* Your auth content *\/}
+ *       </AuthLayout>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
+  onSuccess,
+  onError,
+  redirectUrl,
+}) => {
+  const searchParams = useSearchParams();
+  const [status, setStatus] = useState<CallbackStatus | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const provider = searchParams.get('provider');
+  const code = searchParams.get('code');
+  const state = searchParams.get('state');
+  const error = searchParams.get('error');
+  const errorDescription = searchParams.get('error_description');
+
+  const {
+    handleGithubCallback,
+    isLoading,
+    error: githubError,
+  } = useGithubAuth({
+    onSuccess: (user, isNewUser) => {
+      setStatus('success');
+      onSuccess?.(user, isNewUser, 'github');
+    },
+    onError: (err) => {
+      setStatus('error');
+      setErrorMessage(err);
+      onError?.(err);
+    },
+    redirectUrl,
+  });
+
+  // Process OAuth callback on mount
+  useEffect(() => {
+    // Check if this is an OAuth callback
+    if (!provider || !code || !state) {
+      // Not an OAuth callback, don't show anything
+      return;
+    }
+
+    // Check for error from provider
+    if (error) {
+      setStatus('error');
+      setErrorMessage(errorDescription || error);
+      onError?.(errorDescription || error);
+      return;
+    }
+
+    // Process based on provider
+    const processCallback = async () => {
+      setStatus('processing');
+
+      if (provider === 'github') {
+        await handleGithubCallback(code, state);
+      } else {
+        setStatus('error');
+        setErrorMessage(`Unsupported OAuth provider: ${provider}`);
+        onError?.(`Unsupported OAuth provider: ${provider}`);
+      }
+    };
+
+    processCallback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [provider, code, state, error]);
+
+  // Don't render if not an OAuth callback
+  if (!provider || (!code && !error)) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
+      <Card className="w-full max-w-md mx-4 shadow-lg">
+        <CardHeader className="text-center">
+          {status === 'processing' && (
+            <>
+              <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
+                <Loader2 className="w-6 h-6 text-primary animate-spin" />
+              </div>
+              <CardTitle>Signing you in...</CardTitle>
+              <CardDescription>
+                Please wait while we complete your {provider} authentication.
+              </CardDescription>
+            </>
+          )}
+
+          {status === 'success' && (
+            <>
+              <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-4">
+                <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
+              </div>
+              <CardTitle>Success!</CardTitle>
+              <CardDescription>
+                You have been signed in successfully. Redirecting...
+              </CardDescription>
+            </>
+          )}
+
+          {status === 'error' && (
+            <>
+              <div className="mx-auto w-12 h-12 bg-destructive/10 rounded-full flex items-center justify-center mb-4">
+                <AlertCircle className="w-6 h-6 text-destructive" />
+              </div>
+              <CardTitle>Authentication Failed</CardTitle>
+              <CardDescription className="text-destructive">
+                {errorMessage || githubError || 'An error occurred during authentication.'}
+              </CardDescription>
+            </>
+          )}
+        </CardHeader>
+
+        {status === 'error' && (
+          <CardContent className="text-center">
+            <a
+              href="/auth"
+              className="text-primary hover:underline text-sm"
+            >
+              Try again
+            </a>
+          </CardContent>
+        )}
+      </Card>
+    </div>
+  );
+};

package/src/layouts/AuthLayout/OAuthProviders.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+import { Github, Loader2 } from 'lucide-react';
+
+import { Button } from '@djangocfg/ui/components';
+
+import { useGithubAuth } from '../../auth/hooks';
+import { useAuthContext } from './AuthContext';
+
+/**
+ * OAuth Providers Component
+ *
+ * Shows OAuth login buttons (GitHub, etc.) when enabled.
+ * Handles the OAuth flow initiation.
+ */
+export const OAuthProviders: React.FC = () => {
+  const { enableGithubAuth, sourceUrl, error: contextError, setError } = useAuthContext();
+
+  const {
+    isLoading: isGithubLoading,
+    error: githubError,
+    startGithubAuth,
+  } = useGithubAuth({
+    sourceUrl,
+    onError: (error) => {
+      setError(error);
+    },
+  });
+
+  // Don't render if no OAuth providers are enabled
+  if (!enableGithubAuth) {
+    return null;
+  }
+
+  const error = githubError || contextError;
+
+  return (
+    <div className="space-y-4">
+      {/* Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-border" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-card px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+
+      {/* OAuth Buttons */}
+      <div className="grid gap-3">
+        {enableGithubAuth && (
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full h-11 text-base font-medium"
+            onClick={startGithubAuth}
+            disabled={isGithubLoading}
+          >
+            {isGithubLoading ? (
+              <div className="flex items-center gap-2">
+                <Loader2 className="w-5 h-5 animate-spin" />
+                Connecting...
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <Github className="w-5 h-5" />
+                Continue with GitHub
+              </div>
+            )}
+          </Button>
+        )}
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/layouts/AuthLayout/index.ts

@@ -12,6 +12,10 @@ export { AuthProvider as AuthLayoutProvider, useAuthContext } from './AuthContex
 export { IdentifierForm } from './IdentifierForm';
 export { OTPForm } from './OTPForm';
 
+// OAuth
+export { OAuthProviders } from './OAuthProviders';
+export { OAuthCallback, type OAuthCallbackProps } from './OAuthCallback';
+
 // Help component
 export { AuthHelp } from './AuthHelp';
 

package/src/layouts/AuthLayout/types.ts

@@ -19,6 +19,7 @@ export interface AuthContextType {
   privacyUrl?: string;
   sourceUrl: string;
   enablePhoneAuth?: boolean;
+  enableGithubAuth?: boolean;
 
   // Form handlers
   setIdentifier: (identifier: string) => void;
@@ -49,8 +50,11 @@ export interface AuthProps {
   privacyUrl?: string;
   className?: string;
   enablePhoneAuth?: boolean; // Controls whether phone authentication is available
+  enableGithubAuth?: boolean; // Controls whether GitHub OAuth is available
+  redirectUrl?: string; // URL to redirect after successful auth (default: /dashboard)
   onIdentifierSuccess?: (identifier: string, channel: 'email' | 'phone') => void;
   onOTPSuccess?: () => void;
+  onOAuthSuccess?: (user: any, isNewUser: boolean, provider: string) => void;
   onError?: (message: string) => void;
 }
 

package/src/snippets/Analytics/events.ts

@@ -30,6 +30,11 @@ export const AnalyticsEvent = {
   AUTH_TOKEN_REFRESH: 'auth_token_refresh',
   AUTH_TOKEN_REFRESH_FAIL: 'auth_token_refresh_fail',
 
+  // OAuth Events
+  AUTH_OAUTH_START: 'auth_oauth_start',
+  AUTH_OAUTH_SUCCESS: 'auth_oauth_success',
+  AUTH_OAUTH_FAIL: 'auth_oauth_fail',
+
   // Error Events
   ERROR_BOUNDARY: 'error_boundary',
   ERROR_API: 'error_api',

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