npm - @djangocfg/layouts - Versions diffs - 2.1.227 → 2.1.228 - Mend

@djangocfg/layouts 2.1.227 → 2.1.228

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/src/snippets/index.ts CHANGED Viewed

@@ -12,71 +12,4 @@ export * from './Analytics';
 export { MonitorProvider } from '@djangocfg/monitor/client';
 export type { MonitorProviderProps } from '@djangocfg/monitor/client';
-// MCP Chat (AI-powered documentation assistant)
-export {
-  AIChatWidget,
-  ChatPanel,
-  MessageBubble,
-  AIMessageInput,
-  AIChatProvider,
-  useAIChatContext,
-  useAIChatContextOptional,
-  useAIChat,
-  useChatLayout,
-  useMcpChat,
-  AskAIButton,
-} from './McpChat';
-export type {
-  AIChatWidgetProps,
-  MessageBubbleProps,
-  AIMessageInputProps,
-  AIChatContextState,
-  AIChatContextActions,
-  AIChatContextValue,
-  AIChatProviderProps,
-  ChatLayoutConfig,
-  UseChatLayoutReturn,
-  AIChatMessage,
-  AIChatSource,
-  AIMessageRole,
-  AIChatApiResponse,
-  UseAIChatOptions,
-  UseAIChatReturn,
-  ChatWidgetConfig,
-  McpChatContextType,
-  McpChatEventDetail,
-  UseMcpChatReturn,
-  AskAIButtonProps,
-} from './McpChat';
-// PWA Install (Progressive Web App Installation)
-export {
-  PwaProvider,
-  useInstall,
-  A2HSHint,
-  IOSGuide,
-  DesktopGuide,
-  useIsPWA,
-  clearIsPWACache,
-  clearAllPWAInstallData,
-  isStandalone,
-  isStandaloneReliable,
-  isMobileDevice,
-  hasValidManifest,
-  getDisplayMode,
-  onDisplayModeChange,
-} from './PWAInstall';
-export type {
-  PlatformInfo,
-  InstallPromptState,
-  BeforeInstallPromptEvent,
-  InstallOutcome,
-  IOSGuideState,
-  InstallContextType,
-  InstallManagerProps,
-  AndroidInstallButtonProps,
-  IOSGuideModalProps,
-  InstallStep,
-  UseIsPWAOptions,
-} from './PWAInstall';

package/src/layouts/AuthLayout/components/shared/ChannelToggle.tsx DELETED Viewed

@@ -1,56 +0,0 @@
-'use client';
-import { Mail, Phone } from 'lucide-react';
-import React, { useMemo } from 'react';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
-import type { AuthChannel } from '../../types';
-export interface ChannelToggleProps {
-  channel: AuthChannel;
-  onChange: (channel: AuthChannel) => void;
-  disabled?: boolean;
-  className?: string;
-}
-/**
- * ChannelToggle - Apple-style segmented control for email/phone
- */
-export const ChannelToggle: React.FC<ChannelToggleProps> = ({
-  channel,
-  onChange,
-  disabled = false,
-  className = '',
-}) => {
-  const t = useTypedT<I18nTranslations>();
-  const labels = useMemo(() => ({
-    email: t('layouts.auth.identifier.channel.email'),
-    phone: t('layouts.auth.identifier.channel.phone'),
-  }), [t]);
-  return (
-    <div className={`auth-channel-toggle ${className}`}>
-      <button
-        type="button"
-        className="auth-channel-option"
-        data-active={channel === 'email'}
-        onClick={() => onChange('email')}
-        disabled={disabled}
-      >
-        <Mail />
-        {labels.email}
-      </button>
-      <button
-        type="button"
-        className="auth-channel-option"
-        data-active={channel === 'phone'}
-        onClick={() => onChange('phone')}
-        disabled={disabled}
-      >
-        <Phone />
-        {labels.phone}
-      </button>
-    </div>
-  );
-};

package/src/snippets/McpChat/README.md DELETED Viewed

@@ -1,441 +0,0 @@
-# MCP Chat - AI Assistant Integration
-AI-powered chat widget with global trigger system for seamless integration throughout your application.
-## Features
-- 🎯 **Global Trigger System** - Call chat from anywhere using `useMcpChat()` hook
-- 🤖 **Simple AI Button** - Universal `AskAIButton` component with AI assistant icon
-- 💬 **Multiple Display Modes** - Floating panel, sidebar, or closed
-- 🔄 **Streaming Responses** - Real-time AI responses
-- 📱 **Mobile Responsive** - Optimized for all devices
-- 🎭 **Context-Aware** - Send structured context with messages
-- 🔌 **Easy Integration** - Drop-in component with minimal setup
-## Quick Start
-### 1. Setup Provider (once in your app)
-```tsx
-// app/layout.tsx
-import { AIChatProvider, AIChatWidget } from '@djangocfg/layouts/snippets/McpChat';
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        <AIChatProvider>
-          {children}
-          <AIChatWidget />
-        </AIChatProvider>
-      </body>
-    </html>
-  );
-}
-```
-### 2. Use Anywhere
-#### Option A: Ready-to-use Button (Recommended)
-```tsx
-import { AskAIButton } from '@djangocfg/layouts/snippets/McpChat';
-// Simple usage
-<AskAIButton message="Explain this feature">
-  Ask AI
-</AskAIButton>
-// With context data
-<AskAIButton
-  message="Why is this failing?"
-  contextData={{ error: error.stack, component: 'UserForm' }}
-  source="ErrorBoundary"
->
-  Explain error
-</AskAIButton>
-// Custom styling
-<AskAIButton
-  message="Help me optimize this"
-  contextData={{ topic: "database-performance" }}
-  variant="default"
-  size="lg"
->
-  Get advice
-</AskAIButton>
-```
-#### Option B: Custom Hook
-```tsx
-import { useMcpChat } from '@djangocfg/layouts/snippets/McpChat';
-function MyComponent() {
-  const { sendToChat } = useMcpChat();
-  const handleClick = () => {
-    sendToChat({
-      message: 'Explain this error',
-      context: {
-        data: { error: errorDetails },
-        source: 'MyComponent'
-      }
-    });
-  };
-  return <button onClick={handleClick}>Ask AI</button>;
-}
-```
-## Components
-### AskAIButton
-Universal AI chat trigger button with Bot icon:
-```tsx
-<AskAIButton
-  message="Your question or prompt"
-  contextData={{ /* optional context */ }}
-  source="ComponentName"
-  variant="outline"
-  size="default"
->
-  Button text
-</AskAIButton>
-```
-**Props:**
-- `message` - Question or prompt to send to AI (required)
-- `contextData` - Additional context object (optional)
-- `source` - Source component name for tracking (optional)
-- `autoSend` - Auto-send message after opening (default: `true`)
-- `showIcon` - Show Bot icon (default: `true`)
-- All standard Button props (`variant`, `size`, `className`, etc.)
-### useMcpChat Hook
-Custom hook for programmatic chat triggering:
-```tsx
-const { sendToChat, isChatAvailable } = useMcpChat();
-sendToChat({
-  message: 'Your message',
-  context: {
-    data: { /* contextual data */ },
-    source: 'ComponentName'
-  },
-  autoSend: true,
-  displayMode: 'floating' | 'sidebar'
-});
-```
-## Real-World Examples
-### Error Handling
-```tsx
-function ErrorBoundary({ error, children }) {
-  if (error) {
-    return (
-      <div>
-        <h2>Error: {error.message}</h2>
-        <AskAIButton
-          message="Explain this error and how to fix it"
-          contextData={{
-            error: error.message,
-            stack: error.stack,
-            component: 'UserForm'
-          }}
-          source="ErrorBoundary"
-        >
-          Explain error
-        </AskAIButton>
-      </div>
-    );
-  }
-  return children;
-}
-```
-### Feature Documentation
-```tsx
-function FeatureCard({ feature }) {
-  return (
-    <Card>
-      <CardHeader>{feature.name}</CardHeader>
-      <CardContent>{feature.description}</CardContent>
-      <CardFooter>
-        <AskAIButton
-          message={`Explain how ${feature.name} works`}
-          contextData={{
-            feature: feature.name,
-            version: feature.version
-          }}
-          source="FeatureCard"
-        >
-          Learn more
-        </AskAIButton>
-      </CardFooter>
-    </Card>
-  );
-}
-```
-### Settings Page
-```tsx
-function DatabaseSettings() {
-  return (
-    <div>
-      <h3>Database Configuration</h3>
-      <form>{/* form fields */}</form>
-      <AskAIButton
-        message="What are the best practices for PostgreSQL optimization?"
-        contextData={{
-          topic: "database-optimization",
-          dbType: "PostgreSQL"
-        }}
-        source="DatabaseSettings"
-      >
-        Get tips
-      </AskAIButton>
-    </div>
-  );
-}
-```
-### Pricing Comparison
-```tsx
-function PricingSection() {
-  return (
-    <div>
-      {/* pricing cards */}
-      <AskAIButton
-        message="Which package is right for my team?"
-        contextData={{
-          packages: ["starter", "professional", "enterprise"],
-          intent: "decision-making"
-        }}
-        source="PricingSection"
-      >
-        Which package?
-      </AskAIButton>
-    </div>
-  );
-}
-```
-### Installation Help
-```tsx
-function QuickStart() {
-  return (
-    <div>
-      <h2>Installation</h2>
-      <pre>{installCommands}</pre>
-      <AskAIButton
-        message="I need help with Django-CFG installation"
-        contextData={{
-          topic: "installation",
-          os: detectedOS
-        }}
-        source="QuickStart"
-      >
-        Installation help?
-      </AskAIButton>
-    </div>
-  );
-}
-```
-## Architecture
-```
-┌─────────────────────────────────────┐
-│  Any Component                      │
-│  ┌──────────────────────────────┐  │
-│  │ AskAIButton / useMcpChat()   │  │
-│  │ sendToChat({ message, ... }) │  │
-│  └──────────────┬───────────────┘  │
-└─────────────────┼───────────────────┘
-                  │
-                  │ CustomEvent
-                  │ 'mcp:chat:send'
-                  ▼
-┌─────────────────────────────────────┐
-│  AIChatProvider (Event Listener)    │
-│  ┌──────────────────────────────┐  │
-│  │ 1. Receives event            │  │
-│  │ 2. Sends confirmation        │  │
-│  │ 3. Opens chat                │  │
-│  │ 4. Sends message to AI       │  │
-│  └──────────────────────────────┘  │
-└─────────────────────────────────────┘
-                  │
-                  ▼
-┌─────────────────────────────────────┐
-│  AIChatWidget (UI)                  │
-│  - Floating panel or sidebar        │
-│  - Message display                  │
-│  - Streaming responses              │
-└─────────────────────────────────────┘
-```
-## API
-### AskAIButton Props
-```tsx
-interface AskAIButtonProps extends ButtonProps {
-  /** Message to send to AI */
-  message: string;
-  /** Additional context data */
-  contextData?: Record<string, any>;
-  /** Source component name */
-  source?: string;
-  /** Auto-send message (default: true) */
-  autoSend?: boolean;
-  /** Show icon (default: true) */
-  showIcon?: boolean;
-  /** Callback after sending */
-  onSent?: () => void;
-}
-```
-### McpChatEventDetail
-```tsx
-interface McpChatEventDetail {
-  message: string;
-  context?: {
-    data?: Record<string, any>;
-    source?: string;
-  };
-  autoSend?: boolean;
-  displayMode?: 'floating' | 'sidebar' | 'closed';
-}
-```
-### UseMcpChatReturn
-```tsx
-interface UseMcpChatReturn {
-  /** Send message to chat */
-  sendToChat: (detail: McpChatEventDetail) => void;
-  /** Check if chat is available */
-  isChatAvailable: () => boolean;
-}
-```
-## Best Practices
-1. **Always provide source** - Helps track where requests come from
-   ```tsx
-   <AskAIButton message="..." source="ComponentName">
-   ```
-2. **Include contextData** - More context = better AI responses
-   ```tsx
-   <AskAIButton
-     message="..."
-     contextData={{ feature: "auth", version: "2.0" }}
-   >
-   ```
-3. **Keep messages clear** - Write clear questions or prompts
-   ```tsx
-   // Good
-   message="Why is Django faster than FastAPI in enterprise scenarios?"
-   // Too vague
-   message="Explain this"
-   ```
-4. **Short button labels** - Keep button text concise (max 3 words)
-   ```tsx
-   <AskAIButton message="...">
-     Explain this  {/* Good */}
-   </AskAIButton>
-   ```
-5. **Check availability** - Use `isChatAvailable()` for conditional UI
-   ```tsx
-   const { isChatAvailable } = useMcpChat();
-   if (!isChatAvailable()) {
-     return <p>Chat loading...</p>;
-   }
-   ```
-## Error Handling
-If chat is not available:
-- Console error logged
-- Alert shown to user
-- Button automatically disabled
-```tsx
-const { sendToChat, isChatAvailable } = useMcpChat();
-if (!isChatAvailable()) {
-  console.log('Chat not loaded');
-}
-```
-## TypeScript Support
-Fully typed with TypeScript for excellent IDE support:
-```tsx
-import type {
-  McpChatEventDetail,
-  UseMcpChatReturn,
-  AskAIButtonProps
-} from '@djangocfg/layouts/snippets/McpChat';
-```
-## Common Use Cases
-### Documentation Pages
-```tsx
-<AskAIButton message="How do I set this up?">
-  Setup help?
-</AskAIButton>
-```
-### Comparison Tables
-```tsx
-<AskAIButton message="Why is option A better than option B?">
-  Explain difference
-</AskAIButton>
-```
-### Feature Sections
-```tsx
-<AskAIButton message="Which features should I explore first?">
-  Explore features?
-</AskAIButton>
-```
-### Benchmarks
-```tsx
-<AskAIButton message="Why is this faster in production?">
-  Explain benchmarks?
-</AskAIButton>
-```
-## Contributing
-When adding new features:
-1. Update type definitions in `types.ts`
-2. Add examples to this README
-3. Test with different scenarios
-4. Keep the API simple and consistent
-## License
-MIT - Part of DjangoCFG project