@djangocfg/centrifugo 1.0.3 → 1.0.4

package/src/components/MessagesFeed/MessageFilters.tsx

@@ -0,0 +1,163 @@
+/**
+ * Message Filters Component
+ *
+ * Filtering controls for MessagesFeed
+ */
+
+'use client';
+
+import React from 'react';
+import { Input, Badge, Button } from '@djangocfg/ui';
+import { Search, Filter, X } from 'lucide-react';
+import type { MessageFilters as MessageFiltersType } from './types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface MessageFiltersProps {
+  filters: MessageFiltersType;
+  onFiltersChange: (filters: MessageFiltersType) => void;
+  autoScroll?: boolean;
+  onAutoScrollChange?: (enabled: boolean) => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function MessageFilters({
+  filters,
+  onFiltersChange,
+  autoScroll,
+  onAutoScrollChange,
+}: MessageFiltersProps) {
+  const hasActiveFilters =
+    (filters.channels && filters.channels.length > 0) ||
+    (filters.types && filters.types.length > 0) ||
+    (filters.levels && filters.levels.length > 0) ||
+    filters.searchQuery;
+
+  const handleClearFilters = () => {
+    onFiltersChange({});
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onFiltersChange({ ...filters, searchQuery: e.target.value });
+  };
+
+  const handleToggleLevel = (level: 'info' | 'success' | 'warning' | 'error') => {
+    const currentLevels = filters.levels || [];
+    const newLevels = currentLevels.includes(level)
+      ? currentLevels.filter((l) => l !== level)
+      : [...currentLevels, level];
+
+    onFiltersChange({
+      ...filters,
+      levels: newLevels.length > 0 ? newLevels : undefined,
+    });
+  };
+
+  const handleToggleType = (type: 'connection' | 'subscription' | 'publication' | 'error' | 'system' | 'unsubscription') => {
+    const currentTypes = filters.types || [];
+    const newTypes = currentTypes.includes(type)
+      ? currentTypes.filter((t) => t !== type)
+      : [...currentTypes, type];
+
+    onFiltersChange({
+      ...filters,
+      types: newTypes.length > 0 ? newTypes : undefined,
+    });
+  };
+
+  return (
+    <div className="space-y-3 p-3 border rounded-lg bg-muted/30">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Filter className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Filters</span>
+          {hasActiveFilters && (
+            <Badge variant="secondary" className="text-xs">
+              Active
+            </Badge>
+          )}
+        </div>
+        {hasActiveFilters && (
+          <Button size="sm" variant="ghost" onClick={handleClearFilters}>
+            <X className="h-3 w-3 mr-1" />
+            Clear
+          </Button>
+        )}
+      </div>
+
+      {/* Search */}
+      <div className="flex items-center gap-2">
+        <Search className="h-4 w-4 text-muted-foreground" />
+        <Input
+          type="text"
+          placeholder="Search messages..."
+          value={filters.searchQuery || ''}
+          onChange={handleSearchChange}
+          className="flex-1"
+        />
+      </div>
+
+      {/* Level Filters */}
+      <div className="space-y-2">
+        <span className="text-xs text-muted-foreground">Level:</span>
+        <div className="flex flex-wrap gap-2">
+          {(['info', 'success', 'warning', 'error'] as const).map((level) => {
+            const isActive = filters.levels?.includes(level);
+            return (
+              <Badge
+                key={level}
+                variant={isActive ? 'default' : 'outline'}
+                className="cursor-pointer"
+                onClick={() => handleToggleLevel(level)}
+              >
+                {level}
+              </Badge>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Type Filters */}
+      <div className="space-y-2">
+        <span className="text-xs text-muted-foreground">Type:</span>
+        <div className="flex flex-wrap gap-2">
+          {(['connection', 'subscription', 'publication', 'unsubscription', 'error', 'system'] as const).map((type) => {
+            const isActive = filters.types?.includes(type);
+            return (
+              <Badge
+                key={type}
+                variant={isActive ? 'default' : 'outline'}
+                className="cursor-pointer"
+                onClick={() => handleToggleType(type)}
+              >
+                {type}
+              </Badge>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Options */}
+      {onAutoScrollChange && (
+        <div className="pt-2 border-t">
+          <label className="flex items-center gap-2 text-sm cursor-pointer">
+            <input
+              type="checkbox"
+              checked={autoScroll}
+              onChange={(e) => onAutoScrollChange(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300"
+            />
+            <span>Auto-scroll to latest</span>
+          </label>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/MessagesFeed/MessagesFeed.tsx

@@ -0,0 +1,383 @@
+/**
+ * Messages Feed Component
+ *
+ * Universal component for displaying real-time Centrifugo messages
+ * Supports filtering, search, pause/play, and export
+ */
+
+'use client';
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge,
+  Button,
+  ScrollArea,
+} from '@djangocfg/ui';
+import {
+  Trash2,
+  Pause,
+  Play,
+  Download,
+  Activity,
+  AlertCircle,
+  CheckCircle2,
+  Info,
+  Circle,
+} from 'lucide-react';
+import moment from 'moment';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
+import { MessageFilters as MessageFiltersComponent } from './MessageFilters';
+import type { CentrifugoMessage, MessageFilters, MessagesFeedProps } from './types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export function MessagesFeed({
+  maxMessages = 100,
+  showFilters = true,
+  showControls = true,
+  channels = [],
+  autoScroll: initialAutoScroll = true,
+  onMessageClick,
+  className = '',
+}: MessagesFeedProps) {
+  const { isConnected, client } = useCentrifugo();
+  const [messages, setMessages] = useState<CentrifugoMessage[]>([]);
+  const [isPaused, setIsPaused] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(initialAutoScroll);
+  const [filters, setFilters] = useState<MessageFilters>({
+    channels: channels.length > 0 ? channels : undefined,
+  });
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Add message
+  const addMessage = useCallback(
+    (message: CentrifugoMessage) => {
+      if (isPaused) return;
+
+      setMessages((prev) => {
+        const newMessages = [message, ...prev];
+        return newMessages.slice(0, maxMessages);
+      });
+    },
+    [isPaused, maxMessages]
+  );
+
+  // Listen to connection events
+  useEffect(() => {
+    if (!client) return;
+
+    const centrifuge = client.getCentrifuge();
+
+    const handleConnected = () => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `conn-${now}`,
+        timestamp: now,
+        type: 'connection',
+        level: 'success',
+        message: 'Connected to Centrifugo',
+      });
+    };
+
+    const handleDisconnected = () => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `disconn-${now}`,
+        timestamp: now,
+        type: 'connection',
+        level: 'error',
+        message: 'Disconnected from Centrifugo',
+      });
+    };
+
+    const handleError = (ctx: any) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `error-${now}`,
+        timestamp: now,
+        type: 'error',
+        level: 'error',
+        message: ctx.error?.message || 'Connection error',
+        data: ctx,
+      });
+    };
+
+    centrifuge.on('connected', handleConnected);
+    centrifuge.on('disconnected', handleDisconnected);
+    centrifuge.on('error', handleError);
+
+    return () => {
+      centrifuge.off('connected', handleConnected);
+      centrifuge.off('disconnected', handleDisconnected);
+      centrifuge.off('error', handleError);
+    };
+  }, [client, addMessage]);
+
+  // Listen to subscription events
+  useEffect(() => {
+    if (!client) return;
+
+    const centrifuge = client.getCentrifuge();
+
+    const handleSubscribed = (ctx: any) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `sub-${now}`,
+        timestamp: now,
+        type: 'subscription',
+        level: 'info',
+        channel: ctx.channel,
+        message: `Subscribed to ${ctx.channel}`,
+        data: ctx,
+      });
+    };
+
+    const handleUnsubscribed = (ctx: any) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `unsub-${now}`,
+        timestamp: now,
+        type: 'unsubscription',
+        level: 'info',
+        channel: ctx.channel,
+        message: `Unsubscribed from ${ctx.channel}`,
+        data: ctx,
+      });
+    };
+
+    const handlePublication = (ctx: any) => {
+      const now = moment.utc().valueOf();
+      addMessage({
+        id: `pub-${now}-${Math.random()}`,
+        timestamp: now,
+        type: 'publication',
+        level: 'success',
+        channel: ctx.channel,
+        message: `Message from ${ctx.channel}`,
+        data: ctx.data,
+      });
+    };
+
+    centrifuge.on('subscribed', handleSubscribed);
+    centrifuge.on('unsubscribed', handleUnsubscribed);
+    centrifuge.on('publication', handlePublication);
+
+    return () => {
+      centrifuge.off('subscribed', handleSubscribed);
+      centrifuge.off('unsubscribed', handleUnsubscribed);
+      centrifuge.off('publication', handlePublication);
+    };
+  }, [client, addMessage]);
+
+  // Auto-scroll to top when new messages arrive
+  useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, [messages, autoScroll]);
+
+  // Filter messages
+  const filteredMessages = messages.filter((msg) => {
+    if (filters.channels && filters.channels.length > 0) {
+      if (!msg.channel || !filters.channels.includes(msg.channel)) {
+        return false;
+      }
+    }
+
+    if (filters.types && filters.types.length > 0) {
+      if (!filters.types.includes(msg.type)) {
+        return false;
+      }
+    }
+
+    if (filters.levels && filters.levels.length > 0) {
+      if (!filters.levels.includes(msg.level)) {
+        return false;
+      }
+    }
+
+    if (filters.searchQuery) {
+      const query = filters.searchQuery.toLowerCase();
+      const searchableText = [
+        msg.message,
+        msg.channel,
+        JSON.stringify(msg.data),
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+
+      if (!searchableText.includes(query)) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  // Clear messages
+  const handleClear = () => {
+    setMessages([]);
+  };
+
+  // Download messages
+  const handleDownload = () => {
+    const json = JSON.stringify(filteredMessages, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `centrifugo-messages-${moment.utc().format('YYYY-MM-DD-HHmmss')}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // Get icon for message level
+  const getLevelIcon = (level: CentrifugoMessage['level']) => {
+    switch (level) {
+      case 'error':
+        return <AlertCircle className="h-4 w-4 text-red-500" />;
+      case 'warning':
+        return <AlertCircle className="h-4 w-4 text-yellow-500" />;
+      case 'success':
+        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      case 'info':
+        return <Info className="h-4 w-4 text-blue-500" />;
+      default:
+        return <Circle className="h-4 w-4 text-gray-500" />;
+    }
+  };
+
+  // Get badge variant for level
+  const getLevelVariant = (level: CentrifugoMessage['level']): 'default' | 'destructive' | 'outline' | 'secondary' => {
+    switch (level) {
+      case 'error':
+        return 'destructive';
+      case 'warning':
+        return 'secondary';
+      case 'success':
+        return 'outline';
+      default:
+        return 'default';
+    }
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <Activity className="h-5 w-5" />
+            Messages Feed
+            <Badge variant="outline">{filteredMessages.length}</Badge>
+          </CardTitle>
+
+          {showControls && (
+            <div className="flex items-center gap-2">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setIsPaused(!isPaused)}
+              >
+                {isPaused ? (
+                  <Play className="h-4 w-4" />
+                ) : (
+                  <Pause className="h-4 w-4" />
+                )}
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleClear}
+                disabled={messages.length === 0}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleDownload}
+                disabled={filteredMessages.length === 0}
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {showFilters && (
+          <MessageFiltersComponent
+            filters={filters}
+            onFiltersChange={setFilters}
+            autoScroll={autoScroll}
+            onAutoScrollChange={setAutoScroll}
+          />
+        )}
+
+        <ScrollArea className="h-[400px]" ref={scrollRef}>
+          {filteredMessages.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <Activity className="h-12 w-12 text-muted-foreground mb-4" />
+              <p className="text-sm text-muted-foreground">
+                {isPaused ? 'Paused - Click play to resume' : 'No messages yet'}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {filteredMessages.map((msg) => (
+                <div
+                  key={msg.id}
+                  className="p-3 rounded border hover:bg-muted/50 transition-colors cursor-pointer"
+                  onClick={() => onMessageClick?.(msg)}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="flex-shrink-0 mt-0.5">{getLevelIcon(msg.level)}</div>
+                    <div className="flex-1 min-w-0 space-y-1">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <Badge variant={getLevelVariant(msg.level)} className="text-xs">
+                          {msg.type}
+                        </Badge>
+                        {msg.channel && (
+                          <Badge variant="outline" className="text-xs">
+                            {msg.channel}
+                          </Badge>
+                        )}
+                        <span className="text-xs text-muted-foreground">
+                          {moment.utc(msg.timestamp).format('HH:mm:ss')}
+                        </span>
+                      </div>
+                      {msg.message && (
+                        <p className="text-sm break-words">{msg.message}</p>
+                      )}
+                      {msg.data && (
+                        <details className="text-xs">
+                          <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+                            View data
+                          </summary>
+                          <pre className="mt-2 p-2 bg-muted rounded overflow-x-auto">
+                            {JSON.stringify(msg.data, null, 2)}
+                          </pre>
+                        </details>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+

package/src/components/MessagesFeed/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Messages Feed Components
+ */
+
+export { MessagesFeed } from './MessagesFeed';
+export { MessageFilters } from './MessageFilters';
+export type { CentrifugoMessage, MessageFilters as MessageFiltersType, MessagesFeedProps } from './types';
+export type { MessageFiltersProps } from './MessageFilters';
+

package/src/components/MessagesFeed/types.ts

@@ -0,0 +1,31 @@
+/**
+ * Messages Feed Types
+ */
+
+export interface CentrifugoMessage {
+  id: string;
+  timestamp: number;
+  type: 'connection' | 'subscription' | 'publication' | 'error' | 'system' | 'unsubscription';
+  channel?: string;
+  data?: any;
+  level: 'info' | 'success' | 'warning' | 'error';
+  message?: string;
+}
+
+export interface MessageFilters {
+  channels?: string[];
+  types?: CentrifugoMessage['type'][];
+  levels?: CentrifugoMessage['level'][];
+  searchQuery?: string;
+}
+
+export interface MessagesFeedProps {
+  maxMessages?: number;
+  showFilters?: boolean;
+  showControls?: boolean;
+  channels?: string[]; // Pre-filter by channels
+  autoScroll?: boolean;
+  onMessageClick?: (message: CentrifugoMessage) => void;
+  className?: string;
+}
+