flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/ai/PresenceProvider/adapters/MockAdapter.js

@@ -0,0 +1,331 @@
+/**
+ * Mock Presence Adapter
+ *
+ * Simulates real-time presence behavior for development and Storybook demos.
+ * No external dependencies - pure client-side simulation.
+ *
+ * Features:
+ * - Simulates 4-5 users joining at staggered intervals
+ * - Random typing events every 5 seconds
+ * - Auto-stop typing after 2-5 seconds
+ * - Connection status simulation
+ */
+/**
+ * Mock user data for simulation
+ */
+const MOCK_USERS = [
+    {
+        id: 'mock-user-2',
+        name: 'Sarah Wilson',
+        avatar: 'https://i.pravatar.cc/150?img=1',
+        status: 'online',
+    },
+    {
+        id: 'mock-user-3',
+        name: 'John Doe',
+        avatar: 'https://i.pravatar.cc/150?img=2',
+        status: 'online',
+    },
+    {
+        id: 'mock-user-4',
+        name: 'Emily Chen',
+        avatar: 'https://i.pravatar.cc/150?img=3',
+        status: 'busy',
+    },
+    {
+        id: 'mock-user-5',
+        name: 'Michael Brown',
+        avatar: 'https://i.pravatar.cc/150?img=4',
+        status: 'away',
+    },
+];
+/**
+ * Mock adapter implementation
+ * Simulates presence behavior without backend
+ */
+class MockPresenceAdapter {
+    constructor() {
+        this.config = null;
+        this.connectionStatus = 'disconnected';
+        this.users = [];
+        this.typingUsers = [];
+        this.intervals = [];
+        this.timeouts = [];
+        // Callback sets
+        this.presenceCallbacks = new Set();
+        this.typingCallbacks = new Set();
+        this.connectionCallbacks = new Set();
+        this.errorCallbacks = new Set();
+    }
+    /**
+     * Connect to mock presence channel
+     */
+    async connect(config) {
+        this.config = config;
+        this.connectionStatus = 'connecting';
+        this.notifyConnectionChange();
+        // Simulate connection delay
+        await new Promise(resolve => setTimeout(resolve, 500));
+        // Add current user
+        this.users = [{
+                ...config.currentUser,
+                joinedAt: new Date(),
+            }];
+        this.connectionStatus = 'connected';
+        this.notifyConnectionChange();
+        this.notifyPresenceChange();
+        if (process.env.NODE_ENV !== 'production') {
+            console.log('[MockPresenceAdapter]: Connected to channel:', config.channel);
+        }
+        // Start simulating user activity
+        this.simulateUserActivity();
+    }
+    /**
+     * Disconnect from mock channel
+     */
+    async disconnect() {
+        // Clear all intervals and timeouts
+        this.intervals.forEach(id => clearInterval(id));
+        this.timeouts.forEach(id => clearTimeout(id));
+        this.intervals = [];
+        this.timeouts = [];
+        // Reset state
+        this.users = [];
+        this.typingUsers = [];
+        this.connectionStatus = 'disconnected';
+        this.notifyConnectionChange();
+        if (process.env.NODE_ENV !== 'production') {
+            console.log('[MockPresenceAdapter]: Disconnected from channel');
+        }
+    }
+    /**
+     * Subscribe to presence changes
+     */
+    onPresenceChange(callback) {
+        this.presenceCallbacks.add(callback);
+        return () => this.presenceCallbacks.delete(callback);
+    }
+    /**
+     * Subscribe to typing changes
+     */
+    onTypingChange(callback) {
+        this.typingCallbacks.add(callback);
+        return () => this.typingCallbacks.delete(callback);
+    }
+    /**
+     * Subscribe to connection changes
+     */
+    onConnectionChange(callback) {
+        this.connectionCallbacks.add(callback);
+        return () => this.connectionCallbacks.delete(callback);
+    }
+    /**
+     * Subscribe to errors
+     */
+    onError(callback) {
+        this.errorCallbacks.add(callback);
+        return () => this.errorCallbacks.delete(callback);
+    }
+    /**
+     * Send typing start (current user)
+     */
+    sendTypingStart() {
+        if (!this.config)
+            return;
+        // Add current user to typing list if not already there
+        const alreadyTyping = this.typingUsers.find(u => u.id === this.config.currentUser.id);
+        if (!alreadyTyping) {
+            this.typingUsers.push({
+                id: this.config.currentUser.id,
+                name: this.config.currentUser.name,
+                avatar: this.config.currentUser.avatar,
+                startedAt: new Date(),
+            });
+            this.notifyTypingChange();
+        }
+    }
+    /**
+     * Send typing stop (current user)
+     */
+    sendTypingStop() {
+        if (!this.config)
+            return;
+        this.typingUsers = this.typingUsers.filter(u => u.id !== this.config.currentUser.id);
+        this.notifyTypingChange();
+    }
+    /**
+     * Update current user metadata
+     */
+    updateUserMetadata(metadata) {
+        if (!this.config)
+            return;
+        // Update current user in users list
+        this.users = this.users.map(user => user.id === this.config.currentUser.id
+            ? { ...user, ...metadata }
+            : user);
+        // Update config
+        this.config.currentUser = {
+            ...this.config.currentUser,
+            ...metadata,
+        };
+        this.notifyPresenceChange();
+    }
+    /**
+     * Send custom event (mock implementation)
+     */
+    sendCustomEvent(event, data) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.log('[MockPresenceAdapter]: Custom event sent:', event, data);
+        }
+    }
+    /**
+     * Get current connection status
+     */
+    getConnectionStatus() {
+        return this.connectionStatus;
+    }
+    /**
+     * Get current user
+     */
+    getCurrentUser() {
+        if (!this.config) {
+            throw new Error('Adapter not connected');
+        }
+        return this.config.currentUser;
+    }
+    // ===== Private methods =====
+    /**
+     * Simulate realistic user activity
+     */
+    simulateUserActivity() {
+        // Stagger mock user joins (2s intervals)
+        MOCK_USERS.forEach((mockUser, index) => {
+            const timeout = setTimeout(() => {
+                this.users.push({
+                    ...mockUser,
+                    joinedAt: new Date(),
+                });
+                this.notifyPresenceChange();
+            }, (index + 1) * 2000);
+            this.timeouts.push(timeout);
+        });
+        // Simulate random typing events every 5 seconds
+        const typingInterval = setInterval(() => {
+            if (this.users.length > 1 && Math.random() > 0.5) {
+                // Pick random user (excluding current user)
+                const otherUsers = this.users.filter(u => { var _a; return u.id !== ((_a = this.config) === null || _a === void 0 ? void 0 : _a.currentUser.id); });
+                if (otherUsers.length > 0) {
+                    const randomUser = otherUsers[Math.floor(Math.random() * otherUsers.length)];
+                    this.simulateTypingStart(randomUser);
+                    // Auto-stop typing after 2-5 seconds
+                    const stopDelay = 2000 + Math.random() * 3000;
+                    const stopTimeout = setTimeout(() => {
+                        this.simulateTypingStop(randomUser.id);
+                    }, stopDelay);
+                    this.timeouts.push(stopTimeout);
+                }
+            }
+        }, 5000);
+        this.intervals.push(typingInterval);
+        // Simulate occasional user leaving (after 30s, 1 random user leaves)
+        const leaveTimeout = setTimeout(() => {
+            if (this.users.length > 2) {
+                // Remove random mock user (not current user)
+                const mockUserIds = MOCK_USERS.map(u => u.id);
+                const removableUsers = this.users.filter(u => mockUserIds.includes(u.id));
+                if (removableUsers.length > 0) {
+                    const randomIndex = Math.floor(Math.random() * removableUsers.length);
+                    const userToRemove = removableUsers[randomIndex];
+                    this.users = this.users.filter(u => u.id !== userToRemove.id);
+                    this.typingUsers = this.typingUsers.filter(u => u.id !== userToRemove.id);
+                    this.notifyPresenceChange();
+                    this.notifyTypingChange();
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[MockPresenceAdapter]: User left:', userToRemove.name);
+                    }
+                }
+            }
+        }, 30000);
+        this.timeouts.push(leaveTimeout);
+    }
+    /**
+     * Simulate typing start for a user
+     */
+    simulateTypingStart(user) {
+        // Don't add if already typing
+        if (this.typingUsers.find(u => u.id === user.id)) {
+            return;
+        }
+        this.typingUsers.push({
+            id: user.id,
+            name: user.name,
+            avatar: user.avatar,
+            startedAt: new Date(),
+        });
+        this.notifyTypingChange();
+        if (process.env.NODE_ENV !== 'production') {
+            console.log('[MockPresenceAdapter]: User typing:', user.name);
+        }
+    }
+    /**
+     * Simulate typing stop for a user
+     */
+    simulateTypingStop(userId) {
+        const wasTyping = this.typingUsers.some(u => u.id === userId);
+        this.typingUsers = this.typingUsers.filter(u => u.id !== userId);
+        if (wasTyping) {
+            this.notifyTypingChange();
+            if (process.env.NODE_ENV !== 'production') {
+                const user = this.users.find(u => u.id === userId);
+                console.log('[MockPresenceAdapter]: User stopped typing:', user === null || user === void 0 ? void 0 : user.name);
+            }
+        }
+    }
+    /**
+     * Notify all presence callbacks
+     */
+    notifyPresenceChange() {
+        this.presenceCallbacks.forEach(callback => {
+            try {
+                callback([...this.users]);
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('[MockPresenceAdapter]: Error in presence callback:', error);
+                }
+            }
+        });
+    }
+    /**
+     * Notify all typing callbacks
+     */
+    notifyTypingChange() {
+        this.typingCallbacks.forEach(callback => {
+            try {
+                callback([...this.typingUsers]);
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('[MockPresenceAdapter]: Error in typing callback:', error);
+                }
+            }
+        });
+    }
+    /**
+     * Notify all connection callbacks
+     */
+    notifyConnectionChange() {
+        this.connectionCallbacks.forEach(callback => {
+            try {
+                callback(this.connectionStatus);
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('[MockPresenceAdapter]: Error in connection callback:', error);
+                }
+            }
+        });
+    }
+}
+
+export { MockPresenceAdapter };

package/dist/components/ai/PresenceProvider/adapters/PresenceAdapter.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Presence Adapter Interface
+ *
+ * Defines the contract for backend adapters that enable real-time presence.
+ * Implementations can use WebSocket, Supabase, Ably, Pusher, or custom backends.
+ */
+import { PresenceUser, TypingUser, ConnectionStatus } from '../PresenceProvider.types';
+/**
+ * Adapter configuration
+ * Passed to adapter on connection
+ */
+export interface PresenceAdapterConfig {
+    /** Channel/room ID */
+    channel: string;
+    /** Current user information */
+    currentUser: PresenceUser;
+    /** Typing debounce delay in ms (default: 300) */
+    typingDebounce?: number;
+    /** Typing timeout in ms (default: 3000) */
+    typingTimeout?: number;
+}
+/**
+ * Base adapter interface
+ * All presence adapters must implement these methods
+ */
+export interface PresenceAdapter {
+    /**
+     * Connect to presence channel
+     * @param config - Connection configuration
+     * @returns Promise that resolves when connected
+     */
+    connect(config: PresenceAdapterConfig): Promise<void>;
+    /**
+     * Disconnect from channel
+     * @returns Promise that resolves when disconnected
+     */
+    disconnect(): Promise<void>;
+    /**
+     * Subscribe to presence changes (users joining/leaving)
+     * @param callback - Called when presence state changes
+     * @returns Unsubscribe function
+     */
+    onPresenceChange(callback: (users: PresenceUser[]) => void): () => void;
+    /**
+     * Subscribe to typing state changes
+     * @param callback - Called when typing state changes
+     * @returns Unsubscribe function
+     */
+    onTypingChange(callback: (typingUsers: TypingUser[]) => void): () => void;
+    /**
+     * Subscribe to connection status changes
+     * @param callback - Called when connection status changes
+     * @returns Unsubscribe function
+     */
+    onConnectionChange(callback: (status: ConnectionStatus) => void): () => void;
+    /**
+     * Subscribe to errors
+     * @param callback - Called when an error occurs
+     * @returns Unsubscribe function
+     */
+    onError(callback: (error: Error) => void): () => void;
+    /**
+     * Send typing start event
+     * Notifies other users that current user started typing
+     */
+    sendTypingStart(): void;
+    /**
+     * Send typing stop event
+     * Notifies other users that current user stopped typing
+     */
+    sendTypingStop(): void;
+    /**
+     * Update current user metadata
+     * @param metadata - Partial user data to update
+     */
+    updateUserMetadata(metadata: Partial<PresenceUser>): void;
+    /**
+     * Send custom event to channel
+     * @param event - Event name
+     * @param data - Event payload (JSON serializable)
+     */
+    sendCustomEvent(event: string, data?: unknown): void;
+    /**
+     * Get current connection status
+     * @returns Current connection status
+     */
+    getConnectionStatus(): ConnectionStatus;
+    /**
+     * Get current user
+     * @returns Current user data
+     */
+    getCurrentUser(): PresenceUser;
+}

package/dist/components/ai/PresenceProvider/adapters/SupabaseAdapter.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Supabase Presence Adapter
+ *
+ * Supabase Realtime integration for presence tracking.
+ * Requires @supabase/supabase-js to be installed.
+ *
+ * @example
+ * ```tsx
+ * import { createClient } from '@supabase/supabase-js';
+ *
+ * const supabase = createClient('YOUR_URL', 'YOUR_KEY');
+ * const adapter = new SupabasePresenceAdapter(supabase);
+ *
+ * <PresenceProvider adapter={adapter} currentUser={user} channel="room-123">
+ *   <YourApp />
+ * </PresenceProvider>
+ * ```
+ */
+import { PresenceAdapter, PresenceAdapterConfig } from './PresenceAdapter';
+import { PresenceUser, TypingUser, ConnectionStatus } from '../PresenceProvider.types';
+/**
+ * Supabase Realtime Channel interface
+ * (Minimal type definition for adapter, user should have @supabase/supabase-js installed)
+ */
+interface SupabaseRealtimeChannel {
+    on(event: string, filter: {
+        event: string;
+    }, callback: (payload: any) => void): SupabaseRealtimeChannel;
+    send(payload: {
+        type: string;
+        event: string;
+        payload: any;
+    }): Promise<any>;
+    track(payload: any): Promise<any>;
+    subscribe(callback?: (status: string) => void): SupabaseRealtimeChannel;
+    unsubscribe(): Promise<any>;
+    presenceState(): Record<string, any[]>;
+}
+/**
+ * Minimal SupabaseClient interface
+ */
+interface SupabaseClient {
+    channel(name: string, options?: {
+        config?: {
+            presence?: {
+                key: string;
+            };
+        };
+    }): SupabaseRealtimeChannel;
+}
+/**
+ * Supabase presence adapter
+ * Uses Supabase Realtime for presence tracking
+ *
+ * NOTE: Requires @supabase/supabase-js installed:
+ * npm install @supabase/supabase-js
+ */
+export declare class SupabasePresenceAdapter implements PresenceAdapter {
+    private client;
+    private channel;
+    private config;
+    private connectionStatus;
+    private typingStates;
+    private presenceCallbacks;
+    private typingCallbacks;
+    private connectionCallbacks;
+    private errorCallbacks;
+    constructor(client: SupabaseClient);
+    /**
+     * Connect to Supabase Realtime channel
+     */
+    connect(config: PresenceAdapterConfig): Promise<void>;
+    /**
+     * Disconnect from Supabase channel
+     */
+    disconnect(): Promise<void>;
+    /**
+     * Subscribe to presence changes
+     */
+    onPresenceChange(callback: (users: PresenceUser[]) => void): () => void;
+    /**
+     * Subscribe to typing changes
+     */
+    onTypingChange(callback: (users: TypingUser[]) => void): () => void;
+    /**
+     * Subscribe to connection changes
+     */
+    onConnectionChange(callback: (status: ConnectionStatus) => void): () => void;
+    /**
+     * Subscribe to errors
+     */
+    onError(callback: (error: Error) => void): () => void;
+    /**
+     * Send typing start
+     */
+    sendTypingStart(): void;
+    /**
+     * Send typing stop
+     */
+    sendTypingStop(): void;
+    /**
+     * Update user metadata
+     */
+    updateUserMetadata(metadata: Partial<PresenceUser>): void;
+    /**
+     * Send custom event
+     */
+    sendCustomEvent(event: string, data?: unknown): void;
+    /**
+     * Get connection status
+     */
+    getConnectionStatus(): ConnectionStatus;
+    /**
+     * Get current user
+     */
+    getCurrentUser(): PresenceUser;
+    /**
+     * Notify presence callbacks
+     */
+    private notifyPresenceChange;
+    /**
+     * Notify typing callbacks
+     */
+    private notifyTypingChange;
+    /**
+     * Notify connection callbacks
+     */
+    private notifyConnectionChange;
+    /**
+     * Notify error callbacks
+     */
+    private notifyError;
+}
+export {};

package/dist/components/ai/PresenceProvider/adapters/WebSocketAdapter.d.ts

@@ -0,0 +1,149 @@
+/**
+ * WebSocket Presence Adapter
+ *
+ * Generic WebSocket implementation for real-time presence.
+ * Requires a WebSocket server that implements the presence protocol.
+ *
+ * @example
+ * ```tsx
+ * const adapter = new WebSocketPresenceAdapter({
+ *   url: 'ws://localhost:3000/presence',
+ *   reconnect: {
+ *     enabled: true,
+ *     maxAttempts: 5,
+ *     delay: 1000,
+ *   },
+ * });
+ *
+ * <PresenceProvider adapter={adapter} currentUser={user} channel="room-123">
+ *   <YourApp />
+ * </PresenceProvider>
+ * ```
+ */
+import { PresenceAdapter, PresenceAdapterConfig } from './PresenceAdapter';
+import { PresenceUser, TypingUser, ConnectionStatus } from '../PresenceProvider.types';
+/**
+ * WebSocket adapter configuration
+ */
+export interface WebSocketAdapterOptions {
+    /** WebSocket server URL */
+    url: string;
+    /** Reconnection configuration */
+    reconnect?: {
+        /** Enable automatic reconnection */
+        enabled: boolean;
+        /** Maximum reconnection attempts */
+        maxAttempts?: number;
+        /** Initial delay between attempts (ms) */
+        delay?: number;
+    };
+    /** Custom message protocol names */
+    protocols?: {
+        /** Join channel message type */
+        join?: string;
+        /** Leave channel message type */
+        leave?: string;
+        /** Typing message type */
+        typing?: string;
+        /** Update user message type */
+        update?: string;
+        /** Presence update message type */
+        presenceUpdate?: string;
+        /** Typing update message type */
+        typingUpdate?: string;
+    };
+}
+/**
+ * WebSocket presence adapter
+ * Connects to a WebSocket server for real-time presence
+ */
+export declare class WebSocketPresenceAdapter implements PresenceAdapter {
+    private ws;
+    private config;
+    private options;
+    private connectionStatus;
+    private reconnectAttempts;
+    private reconnectTimeoutId?;
+    private presenceCallbacks;
+    private typingCallbacks;
+    private connectionCallbacks;
+    private errorCallbacks;
+    private readonly DEFAULT_PROTOCOLS;
+    constructor(options: WebSocketAdapterOptions);
+    /**
+     * Connect to WebSocket server
+     */
+    connect(config: PresenceAdapterConfig): Promise<void>;
+    /**
+     * Disconnect from WebSocket
+     */
+    disconnect(): Promise<void>;
+    /**
+     * Subscribe to presence changes
+     */
+    onPresenceChange(callback: (users: PresenceUser[]) => void): () => void;
+    /**
+     * Subscribe to typing changes
+     */
+    onTypingChange(callback: (users: TypingUser[]) => void): () => void;
+    /**
+     * Subscribe to connection changes
+     */
+    onConnectionChange(callback: (status: ConnectionStatus) => void): () => void;
+    /**
+     * Subscribe to errors
+     */
+    onError(callback: (error: Error) => void): () => void;
+    /**
+     * Send typing start
+     */
+    sendTypingStart(): void;
+    /**
+     * Send typing stop
+     */
+    sendTypingStop(): void;
+    /**
+     * Update user metadata
+     */
+    updateUserMetadata(metadata: Partial<PresenceUser>): void;
+    /**
+     * Send custom event
+     */
+    sendCustomEvent(event: string, data?: unknown): void;
+    /**
+     * Get connection status
+     */
+    getConnectionStatus(): ConnectionStatus;
+    /**
+     * Get current user
+     */
+    getCurrentUser(): PresenceUser;
+    /**
+     * Send message to WebSocket
+     */
+    private send;
+    /**
+     * Handle incoming WebSocket message
+     */
+    private handleMessage;
+    /**
+     * Handle reconnection logic
+     */
+    private handleReconnect;
+    /**
+     * Notify presence callbacks
+     */
+    private notifyPresenceChange;
+    /**
+     * Notify typing callbacks
+     */
+    private notifyTypingChange;
+    /**
+     * Notify connection callbacks
+     */
+    private notifyConnectionChange;
+    /**
+     * Notify error callbacks
+     */
+    private notifyError;
+}