npm package: @siran/chat-react-native
Description: Composants React Native pour le système de chat utilisant le pattern Compound Components avec intégration des hooks React.
Latest version: 0.1.12

# @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

```bash
bun install
```

## Configuration initiale

Enveloppez votre application avec le `ChatProvider` :

```tsx
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` :

```tsx
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 :

```tsx
<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 :

```tsx
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 :

```tsx
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 :

```tsx
<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