@package/chat/react-native

Composants React Native pour le système de chat utilisant le pattern Compound Components avec intégration des hooks React.

Installation

bun install

Configuration initiale

Enveloppez votre application avec le ChatProvider :

import { ChatProvider } from '@package/chat/react-native';
import { createChatClient } from '@siran/chat-client';

function App() {
  const chatClient = createChatClient({
    engine,
    eventSubscriber,
  });

  return (
    <ChatProvider client={chatClient}>
      <YourApp />
    </ChatProvider>
  );
}

Utilisation

Tous les composants utilisent automatiquement les hooks de @siran/chat-react-hooks :

import { ChatProvider, Chat } from '@package/chat/react-native';
import { createChatClient } from '@siran/chat-client';

function ChatScreen() {
  return (
    <ChatProvider client={chatClient}>
      <Chat conversationId="conv-123" userId="user-456">
        <Chat.Header>
          <Text>Conversation</Text>
        </Chat.Header>

        {/* Charge automatiquement les messages via useMessages */}
        <Chat.MessageList />

        {/* Affiche automatiquement les utilisateurs en train de taper via useTyping */}
        <Chat.TypingIndicator />

        {/* Combine Input + SendButton avec useSendMessage */}
        <Chat.InputArea />
      </Chat>
    </ChatProvider>
  );
}

Personnalisation du rendu des messages

Vous pouvez personnaliser le rendu de chaque message :

<Chat.MessageList
  renderMessage={(message) => (
    <Chat.Message key={message.id} messageId={message.id}>
      <View>
        <Text>{message.senderId}</Text>
        <Text>{message.content}</Text>
        <Text>{message.sentAt.toLocaleString()}</Text>
      </View>
    </Chat.Message>
  )}
/>

Slots disponibles

Chat.Header

En-tête de la conversation.

Props:

• children?: ReactNode - Contenu de l'en-tête
• style?: ViewStyle - Styles personnalisés

Chat.MessageList

Conteneur scrollable pour la liste des messages. Utilise toujours useMessages et useSubscribeToConversation.

Props:

• conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
• userId?: string - ID de l'utilisateur (optionnel si fourni dans Chat)
• autoLoad?: boolean - Charger automatiquement les messages (défaut: true)
• showLoading?: boolean - Afficher l'indicateur de chargement (défaut: true)
• showError?: boolean - Afficher les erreurs (défaut: true)
• renderMessage?: (message: ChatMessage) => ReactNode - Fonction pour personnaliser le rendu de chaque message
• style?: ViewStyle - Styles personnalisés

Requis: conversationId et userId doivent être fournis (via props ou contexte Chat)

Chat.Message

Composant pour afficher un message individuel.

Props:

• children?: ReactNode - Contenu du message
• messageId?: string - Identifiant du message
• style?: ViewStyle - Styles personnalisés

Chat.Input

Champ de saisie pour les messages.

Props:

• placeholder?: string - Texte placeholder (défaut: "Tapez votre message...")
• value?: string - Valeur contrôlée
• onChangeText?: (text: string) => void - Callback de changement
• style?: ViewStyle - Styles personnalisés
• Toutes les props de TextInput de React Native

Chat.SendButton

Bouton pour envoyer un message.

Props:

• onPress?: () => void - Callback au clic
• disabled?: boolean - État désactivé
• children?: ReactNode - Contenu personnalisé (défaut: "Envoyer")
• style?: ViewStyle - Styles personnalisés

Chat.InputArea

Composant combiné qui intègre Chat.Input + Chat.SendButton avec useSendMessage. Utilise toujours les hooks pour envoyer les messages.

Props:

• conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
• senderId?: string - ID de l'expéditeur (optionnel si userId fourni dans Chat)
• placeholder?: string - Texte placeholder (défaut: "Tapez votre message...")
• style?: ViewStyle - Styles du conteneur
• inputStyle?: ViewStyle - Styles de l'input
• buttonStyle?: ViewStyle - Styles du bouton

Requis: conversationId et senderId doivent être fournis (via props ou contexte Chat)

Chat.TypingIndicator

Indicateur de frappe en cours. Utilise toujours useTyping pour récupérer les utilisateurs en train de taper.

Props:

• conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
• style?: ViewStyle - Styles personnalisés

Requis: conversationId doit être fourni (via props ou contexte Chat)

Hooks disponibles

useChatContext

Pour accéder au contexte du composant Chat dans vos propres composants :

import { useChatContext } from '@package/chat/react-native';

function CustomComponent() {
  const { conversationId, userId } = useChatContext();
  // Utiliser conversationId et userId
}

Hooks de @siran/chat-react-hooks

Tous les hooks de @siran/chat-react-hooks sont disponibles et peuvent être utilisés directement :

import { useMessages, useSendMessage, useTyping } from '@siran/chat-react-hooks';

function MyComponent() {
  const { messages } = useMessages('conv-123', 'user-456');
  const { sendMessage } = useSendMessage();
  const typingUsers = useTyping('conv-123');
  // ...
}

Composition flexible

Les slots peuvent être utilisés dans n'importe quel ordre et vous pouvez créer votre propre layout :

<ChatProvider client={chatClient}>
  <Chat conversationId="conv-123" userId="user-456">
    {/* Votre propre structure */}
    <View style={{ flex: 1 }}>
      <Chat.Header />
      <Chat.MessageList />
      <Chat.TypingIndicator />
      <Chat.InputArea />
    </View>
  </Chat>
</ChatProvider>

Personnalisation

• Tous les composants acceptent une prop style pour personnaliser l'apparence
• Chat.MessageList accepte renderMessage pour personnaliser le rendu de chaque message
• Les composants Chat.Input et Chat.SendButton peuvent être utilisés séparément si vous préférez gérer l'envoi manuellement