@linktr.ee/messaging-react 1.0.2 → 1.1.0-rc-1760927977

package/src/providers/MessagingProvider.tsx

@@ -1,27 +1,34 @@
-import React, { createContext, useContext, useEffect, useState, useRef, useCallback } from 'react';
-import type { Channel } from 'stream-chat';
-import { Chat } from 'stream-chat-react';
-import { StreamChatService } from '@linktr.ee/messaging-core';
+import { StreamChatService } from '@linktr.ee/messaging-core'
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+} from 'react'
+import type { StreamChat } from 'stream-chat'
+import { Chat } from 'stream-chat-react'
 
-import type { 
-  MessagingProviderProps, 
+import type {
+  MessagingProviderProps,
   MessagingCapabilities,
-  MessagingCustomization 
-} from '../types';
+  MessagingCustomization,
+} from '../types'
 
 /**
  * Context value for messaging state and service
  */
 export interface MessagingContextValue {
-  service: StreamChatService | null;
-  client: any; // Stream Chat client
-  isConnected: boolean;
-  isLoading: boolean;
-  error: string | null;
-  capabilities: MessagingCapabilities;
-  customization: MessagingCustomization;
-  refreshConnection: () => Promise<void>;
-  debug: boolean;
+  service: StreamChatService | null
+  client: StreamChat | null // Stream Chat client
+  isConnected: boolean
+  isLoading: boolean
+  error: string | null
+  capabilities: MessagingCapabilities
+  customization: MessagingCustomization
+  refreshConnection: () => Promise<void>
+  debug: boolean
 }
 
 const MessagingContext = createContext<MessagingContextValue>({
@@ -34,12 +41,12 @@ const MessagingContext = createContext<MessagingContextValue>({
   customization: {},
   refreshConnection: async () => {},
   debug: false,
-});
+})
 
 /**
  * Hook to access messaging context
  */
-export const useMessagingContext = () => useContext(MessagingContext);
+export const useMessagingContext = () => useContext(MessagingContext)
 
 /**
  * Provider component that wraps messaging-core with React state management
@@ -54,91 +61,122 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   debug = false,
 }) => {
   // Create debug logger that respects the debug prop
-  const debugLog = (message: string, ...args: any[]) => {
-    if (debug) {
-      console.log(`🔥 [MessagingProvider] ${message}`, ...args);
-    }
-  };
+  const debugLog = useCallback(
+    (message: string, ...args: unknown[]) => {
+      if (debug) {
+        console.log(`🔥 [MessagingProvider] ${message}`, ...args)
+      }
+    },
+    [debug]
+  )
 
   debugLog('🔄 RENDER START', {
     userId: user?.id,
     apiKey: apiKey?.substring(0, 8) + '...',
     serviceConfig: !!serviceConfig,
     capabilities: Object.keys(capabilities),
-    customization: Object.keys(customization)
-  });
-
-  const [service, setService] = useState<StreamChatService | null>(null);
-  const [client, setClient] = useState<any>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  
+    customization: Object.keys(customization),
+  })
+
+  const [service, setService] = useState<StreamChatService | null>(null)
+  const [client, setClient] = useState<StreamChat | null>(null)
+  const [isConnected, setIsConnected] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
   // Prevent multiple concurrent connection attempts
-  const connectingRef = useRef(false);
+  const connectingRef = useRef(false)
 
   // Track renders and prop changes
-  const prevPropsRef = useRef({ userId: user?.id, apiKey, serviceConfig, capabilities, customization });
-  const renderCountRef = useRef(0);
-  renderCountRef.current++;
-  
+  const prevPropsRef = useRef({
+    userId: user?.id,
+    apiKey,
+    serviceConfig,
+    capabilities,
+    customization,
+  })
+  const renderCountRef = useRef(0)
+  renderCountRef.current++
+
   debugLog('📊 RENDER INFO', {
     renderCount: renderCountRef.current,
     currentProps: { userId: user?.id, apiKey: apiKey?.substring(0, 8) + '...' },
     propChanges: {
       userChanged: prevPropsRef.current.userId !== user?.id,
       apiKeyChanged: prevPropsRef.current.apiKey !== apiKey,
-      serviceConfigChanged: prevPropsRef.current.serviceConfig !== serviceConfig,
+      serviceConfigChanged:
+        prevPropsRef.current.serviceConfig !== serviceConfig,
       capabilitiesChanged: prevPropsRef.current.capabilities !== capabilities,
-      customizationChanged: prevPropsRef.current.customization !== customization
-    }
-  });
-  
-  prevPropsRef.current = { userId: user?.id, apiKey, serviceConfig, capabilities, customization };
+      customizationChanged:
+        prevPropsRef.current.customization !== customization,
+    },
+  })
+
+  prevPropsRef.current = {
+    userId: user?.id,
+    apiKey,
+    serviceConfig,
+    capabilities,
+    customization,
+  }
 
   // Initialize service when config changes
   useEffect(() => {
-    const currentRender = renderCountRef.current;
+    const currentRender = renderCountRef.current
     debugLog('🔧 SERVICE INIT EFFECT TRIGGERED', {
       renderCount: currentRender,
       apiKey: !!apiKey,
       serviceConfig: !!serviceConfig,
-      dependencies: { 
-        apiKey: apiKey?.substring(0, 8) + '...', 
+      dependencies: {
+        apiKey: apiKey?.substring(0, 8) + '...',
         serviceConfigRef: serviceConfig,
-        serviceConfigStable: prevPropsRef.current.serviceConfig === serviceConfig,
-        apiKeyStable: prevPropsRef.current.apiKey === apiKey
-      }
-    });
+        serviceConfigStable:
+          prevPropsRef.current.serviceConfig === serviceConfig,
+        apiKeyStable: prevPropsRef.current.apiKey === apiKey,
+      },
+    })
 
     if (!apiKey || !serviceConfig) {
-      debugLog('⚠️ SERVICE INIT SKIPPED', { renderCount: currentRender, reason: 'Missing apiKey or serviceConfig' });
-      return;
+      debugLog('⚠️ SERVICE INIT SKIPPED', {
+        renderCount: currentRender,
+        reason: 'Missing apiKey or serviceConfig',
+      })
+      return
     }
 
-    debugLog('🚀 CREATING NEW SERVICE', { 
+    debugLog('🚀 CREATING NEW SERVICE', {
       renderCount: currentRender,
       apiKey: apiKey?.substring(0, 8) + '...',
-      serviceConfigChanged: prevPropsRef.current.serviceConfig !== serviceConfig
-    });
-    
+      serviceConfigChanged:
+        prevPropsRef.current.serviceConfig !== serviceConfig,
+    })
+
     const newService = new StreamChatService({
       ...serviceConfig,
       apiKey,
       debug,
-    });
+    })
+
+    setService(newService)
+    debugLog('✅ SERVICE SET', {
+      renderCount: currentRender,
+      serviceInstance: !!newService,
+    })
 
-    setService(newService);
-    debugLog('✅ SERVICE SET', { renderCount: currentRender, serviceInstance: !!newService });
-    
     return () => {
-      debugLog('🧹 SERVICE CLEANUP', { renderCount: currentRender, reason: 'Effect cleanup' });
-      newService.disconnectUser().catch(console.error);
-    };
-  }, [apiKey, serviceConfig]); // Use serviceConfig object directly, not individual properties
+      debugLog('🧹 SERVICE CLEANUP', {
+        renderCount: currentRender,
+        reason: 'Effect cleanup',
+      })
+      newService.disconnectUser().catch(console.error)
+    }
+  }, [apiKey, serviceConfig, debug, debugLog]) // Use serviceConfig object directly, not individual properties
 
   // Track if we've already connected this user with this service to prevent duplicate connections
-  const connectedUserRef = useRef<{serviceId: any, userId: string} | null>(null);
+  const connectedUserRef = useRef<{
+    serviceId: StreamChatService
+    userId: string
+  } | null>(null)
 
   // Connect user when service and user are available
   useEffect(() => {
@@ -148,94 +186,125 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       userId: user?.id,
       isConnecting: connectingRef.current,
       isConnected: isConnected,
-      dependencies: { service: !!service, userId: user?.id }
-    });
+      dependencies: { service: !!service, userId: user?.id },
+    })
 
     if (!service || !user) {
-      debugLog('⚠️ USER CONNECTION SKIPPED', 'Missing service or user');
-      return;
+      debugLog('⚠️ USER CONNECTION SKIPPED', 'Missing service or user')
+      return
     }
-    
+
     if (connectingRef.current) {
-      debugLog('⚠️ USER CONNECTION SKIPPED', 'Already connecting');
-      return;
+      debugLog('⚠️ USER CONNECTION SKIPPED', 'Already connecting')
+      return
     }
-    
+
     // Check if we've already connected this exact user with this exact service instance
-    if (connectedUserRef.current?.serviceId === service && connectedUserRef.current?.userId === user.id) {
-      debugLog('⚠️ USER CONNECTION SKIPPED', 'Already connected this user with this service');
-      return;
+    if (
+      connectedUserRef.current?.serviceId === service &&
+      connectedUserRef.current?.userId === user.id
+    ) {
+      debugLog(
+        '⚠️ USER CONNECTION SKIPPED',
+        'Already connected this user with this service'
+      )
+      return
     }
 
     const connectUser = async () => {
-      debugLog('🚀 STARTING USER CONNECTION', { userId: user.id });
-      connectingRef.current = true;
-      setIsLoading(true);
-      setError(null);
+      debugLog('🚀 STARTING USER CONNECTION', { userId: user.id })
+      connectingRef.current = true
+      setIsLoading(true)
+      setError(null)
 
       try {
-        debugLog('📞 CALLING SERVICE.CONNECTUSER', { userId: user.id });
-        const streamClient = await service.connectUser(user);
-        setClient(streamClient);
-        setIsConnected(true);
-        connectedUserRef.current = { serviceId: service, userId: user.id }; // Mark as connected
-        debugLog('✅ USER CONNECTION SUCCESS', { userId: user.id, clientId: streamClient.userID });
+        debugLog('📞 CALLING SERVICE.CONNECTUSER', { userId: user.id })
+        const streamClient = await service.connectUser(user)
+        setClient(streamClient)
+        setIsConnected(true)
+        connectedUserRef.current = { serviceId: service, userId: user.id } // Mark as connected
+        debugLog('✅ USER CONNECTION SUCCESS', {
+          userId: user.id,
+          clientId: streamClient.userID,
+        })
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Connection failed';
-        setError(errorMessage);
-        debugLog('❌ USER CONNECTION ERROR', { userId: user.id, error: errorMessage });
+        const errorMessage =
+          err instanceof Error ? err.message : 'Connection failed'
+        setError(errorMessage)
+        debugLog('❌ USER CONNECTION ERROR', {
+          userId: user.id,
+          error: errorMessage,
+        })
       } finally {
-        setIsLoading(false);
-        connectingRef.current = false;
-        debugLog('🔄 USER CONNECTION FINISHED', { userId: user.id, isConnected });
+        setIsLoading(false)
+        connectingRef.current = false
+        debugLog('🔄 USER CONNECTION FINISHED', {
+          userId: user.id,
+          isConnected,
+        })
       }
-    };
+    }
 
-    connectUser();
-  }, [service, user]); // Remove isConnected to prevent circular dependency
+    connectUser()
+  }, [service, user, debugLog, isConnected]) // Remove isConnected to prevent circular dependency
 
   // Disconnect when user is removed (cleanup effect)
   useEffect(() => {
-    debugLog('🔌 CLEANUP EFFECT REGISTERED', { hasService: !!service, isConnected });
+    debugLog('🔌 CLEANUP EFFECT REGISTERED', {
+      hasService: !!service,
+      isConnected,
+    })
     return () => {
       if (service && isConnected) {
-        debugLog('🧹 CLEANUP EFFECT TRIGGERED', 'Cleaning up connection on unmount');
-        connectedUserRef.current = null; // Reset connection tracking
-        service.disconnectUser().catch(console.error);
+        debugLog(
+          '🧹 CLEANUP EFFECT TRIGGERED',
+          'Cleaning up connection on unmount'
+        )
+        connectedUserRef.current = null // Reset connection tracking
+        service.disconnectUser().catch(console.error)
       } else {
-        debugLog('🔇 CLEANUP EFFECT SKIPPED', { hasService: !!service, isConnected });
+        debugLog('🔇 CLEANUP EFFECT SKIPPED', {
+          hasService: !!service,
+          isConnected,
+        })
       }
-    };
-  }, [service, isConnected]);
+    }
+  }, [service, isConnected, debugLog])
 
   const refreshConnection = useCallback(async () => {
-    debugLog('🔄 REFRESH CONNECTION CALLED', { hasService: !!service, hasUser: !!user });
-    
+    debugLog('🔄 REFRESH CONNECTION CALLED', {
+      hasService: !!service,
+      hasUser: !!user,
+    })
+
     if (!service || !user) {
-      debugLog('⚠️ REFRESH CONNECTION SKIPPED', 'Missing service or user');
-      return;
+      debugLog('⚠️ REFRESH CONNECTION SKIPPED', 'Missing service or user')
+      return
     }
 
-    debugLog('🚀 STARTING CONNECTION REFRESH', { userId: user.id });
-    setIsLoading(true);
+    debugLog('🚀 STARTING CONNECTION REFRESH', { userId: user.id })
+    setIsLoading(true)
     try {
-      debugLog('🔌 DISCONNECTING FOR REFRESH');
-      await service.disconnectUser();
-      debugLog('📞 RECONNECTING FOR REFRESH');
-      const streamClient = await service.connectUser(user);
-      setClient(streamClient);
-      setIsConnected(true);
-      setError(null);
-      debugLog('✅ CONNECTION REFRESH SUCCESS', { userId: user.id });
+      debugLog('🔌 DISCONNECTING FOR REFRESH')
+      await service.disconnectUser()
+      debugLog('📞 RECONNECTING FOR REFRESH')
+      const streamClient = await service.connectUser(user)
+      setClient(streamClient)
+      setIsConnected(true)
+      setError(null)
+      debugLog('✅ CONNECTION REFRESH SUCCESS', { userId: user.id })
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Refresh failed';
-      setError(errorMessage);
-      debugLog('❌ CONNECTION REFRESH ERROR', { userId: user.id, error: errorMessage });
+      const errorMessage = err instanceof Error ? err.message : 'Refresh failed'
+      setError(errorMessage)
+      debugLog('❌ CONNECTION REFRESH ERROR', {
+        userId: user.id,
+        error: errorMessage,
+      })
     } finally {
-      setIsLoading(false);
-      debugLog('🔄 CONNECTION REFRESH FINISHED', { userId: user.id });
+      setIsLoading(false)
+      debugLog('🔄 CONNECTION REFRESH FINISHED', { userId: user.id })
     }
-  }, [service, user]);
+  }, [service, user, debugLog])
 
   // Memoize context value to prevent unnecessary re-renders
   const contextValue: MessagingContextValue = React.useMemo(() => {
@@ -246,9 +315,9 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       isLoading,
       hasError: !!error,
       capabilitiesKeys: Object.keys(capabilities),
-      customizationKeys: Object.keys(customization)
-    });
-    
+      customizationKeys: Object.keys(customization),
+    })
+
     return {
       service,
       client,
@@ -259,24 +328,33 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       customization,
       refreshConnection,
       debug,
-    };
-  }, [service, client, isConnected, isLoading, error, capabilities, customization, refreshConnection, debug]);
+    }
+  }, [
+    service,
+    client,
+    isConnected,
+    isLoading,
+    error,
+    capabilities,
+    customization,
+    refreshConnection,
+    debug,
+    debugLog,
+  ])
 
   debugLog('🔄 RENDER END', {
     renderCount: renderCountRef.current,
     willRenderChat: !!(client && isConnected),
-    contextValueReady: !!contextValue
-  });
+    contextValueReady: !!contextValue,
+  })
 
   return (
     <MessagingContext.Provider value={contextValue}>
       {client && isConnected ? (
-        <Chat client={client}>
-          {children}
-        </Chat>
+        <Chat client={client}>{children}</Chat>
       ) : (
         children
       )}
     </MessagingContext.Provider>
-  );
-};
+  )
+}

package/src/stories/mocks.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StreamChat } from 'stream-chat'
+import { ConnectionOpen, StreamChat } from 'stream-chat'
 import { Chat } from 'stream-chat-react'
 
 // Mock Stream Chat client for Storybook
@@ -13,25 +13,25 @@ const createMockClient = () => {
   const client = new StreamChat('mock-api-key', {
     allowServerSideConnect: true,
   })
-  
+
   // Mock the client methods
   client.connectUser = async () => {
-    return { me: mockUser } as any
+    return { me: mockUser } as unknown as ConnectionOpen
   }
-  
+
   client.disconnectUser = async () => {
     return Promise.resolve()
   }
 
-  // @ts-ignore
   client.userID = mockUser.id
-  // @ts-ignore
   client.user = mockUser
-  
+
   return client
 }
 
-export const MockChatProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const MockChatProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const [client] = React.useState(() => createMockClient())
 
   React.useEffect(() => {
@@ -44,17 +44,17 @@ export const MockChatProvider: React.FC<{ children: React.ReactNode }> = ({ chil
 }
 
 // Create a mock chat provider with pre-populated channels
-export const MockChatProviderWithChannels: React.FC<{ 
-  children: React.ReactNode;
-  channelCount?: number;
+export const MockChatProviderWithChannels: React.FC<{
+  children: React.ReactNode
+  channelCount?: number
 }> = ({ children, channelCount = 3 }) => {
   const [client] = React.useState(() => {
     const mockClient = createMockClient()
-    
+
     // Create mock channels
     const mockChannels = Array.from({ length: channelCount }, (_, i) => {
       const participant = mockParticipants[i % mockParticipants.length]
-      
+
       const mockChannel = {
         id: `channel-${i + 1}`,
         cid: `messaging:channel-${i + 1}`,
@@ -62,11 +62,11 @@ export const MockChatProviderWithChannels: React.FC<{
         _client: mockClient,
         state: {
           members: {
-            [mockUser.id]: { 
+            [mockUser.id]: {
               user: mockUser,
               user_id: mockUser.id,
             },
-            [participant.id]: { 
+            [participant.id]: {
               user: participant,
               user_id: participant.id,
             },
@@ -86,13 +86,13 @@ export const MockChatProviderWithChannels: React.FC<{
         query: async () => ({ messages: [] }),
         watch: async () => ({ messages: [] }),
       }
-      
+
       return mockChannel
     })
 
-    // @ts-ignore - Mock queryChannels method
+    // @ts-expect-error - Mock queryChannels method
     mockClient.queryChannels = async () => mockChannels
-    
+
     return mockClient
   })
 
@@ -154,4 +154,3 @@ export const mockParticipantSource = {
     }
   },
 }
-

package/src/styles.css

@@ -0,0 +1,75 @@
+/* Stream Chat base styles */
+@import 'stream-chat-react/dist/css/v2/index.css';
+
+/* Dialog component styles - used by messaging components */
+/* Note: Dialogs get moved to the top layer when opened with .showModal() */
+.mes-dialog {
+  --transition-duration: 0.2s;
+  
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  max-height: 100vh;
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  
+  /* Mobile: full width */
+  max-width: 100%;
+  
+  /* Desktop (md and up): constrained width respecting sidebar */
+  @media (min-width: 767px) {
+    max-width: min(500px, calc(100% - var(--sidebar-width, 0px)));
+  }
+  
+  /* Transitions for slide-in effect */
+  transition: 
+    translate var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
+    overlay var(--transition-duration) allow-discrete,
+    display var(--transition-duration) allow-discrete;
+  
+  /* Start off-screen to the right */
+  translate: 100% 0;
+}
+
+.mes-dialog[open] {
+  translate: 0 0;
+}
+
+.mes-dialog::backdrop {
+  transition: 
+    display var(--transition-duration) allow-discrete,
+    overlay var(--transition-duration) allow-discrete,
+    background-color var(--transition-duration) linear;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.mes-dialog[open]::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* Starting style for smooth entry animation */
+@starting-style {
+  .mes-dialog[open] {
+    translate: 100% 0;
+    
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+}
+
+/* Textarea composer focus styles */
+.mes-textarea-composer-container:has(.mes-textarea-composer:focus) {
+  outline: 2px solid black;
+
+  .mes-textarea-composer {
+    outline: none;
+  }
+}
+

package/src/test/setup.ts

@@ -1,18 +1,18 @@
-import '@testing-library/jest-dom';
-import { cleanup } from '@testing-library/react';
-import { afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
 
 // Cleanup after each test
 afterEach(() => {
-  cleanup();
-});
+  cleanup()
+})
 
 // Mock Stream Chat if needed
 global.ResizeObserver = class ResizeObserver {
   observe() {}
   unobserve() {}
   disconnect() {}
-};
+}
 
 // Mock IntersectionObserver for virtualization
 global.IntersectionObserver = class IntersectionObserver {
@@ -21,10 +21,9 @@ global.IntersectionObserver = class IntersectionObserver {
   unobserve() {}
   disconnect() {}
   takeRecords() {
-    return [];
+    return []
   }
-  root = null;
-  rootMargin = '';
-  thresholds = [];
-};
-
+  root = null
+  rootMargin = ''
+  thresholds = []
+}