import { Chat } from '@hiyve/rn-collaboration';
import { useChat, useConnection } from '@hiyve/rn-react';
function ChatPanel() {
const { messages, sendMessage, unreadCount, clearUnread } = useChat();
const { localUserId } = useConnection();
return (
<Chat
messages={messages}
localUserId={localUserId ?? ''}
onSend={sendMessage}
onClearUnread={clearUnread}
unreadCount={unreadCount}
/>
);
}
Chat interface with an inverted message list and a text input.
Messages from the local user are right-aligned with a colored bubble. Remote messages are left-aligned with an optional avatar showing the sender's initials. System messages are centered in italic text.
The list is rendered as an inverted
FlatList, so the newest messages appear at the bottom without manual scroll management.