Chat Store States
Chat Feature is provided in the SDK natively. We also support feature such as file sharing, join and leave notification etc. Files are stored on IPFS.
NOTE: Files are stored while the meeting is live, and are deleted after the meeting is over.
If a new user joins the meeting, the files are not shared with the new user.
Store States
type IChatStoreType {
unread: {
[chatRoomId: string]: number;
};
chat: {
[chatRoomId: string]: IChatMessage[];
};
reactions: {
[peerId: string]: string;
};
sharedFilesArr: Array<TSharedFile>;
notificationSounds: TNotifSounds;
chatNotif: boolean;
peerJoinNotif: boolean;
peerLeaveNotif: boolean;
}
export type IChatMessage = {
id: string;
peerId: string;
displayName?: string;
type: IChatType;
message?: string;
timestamp?: string;
error?: {
type?: IMediErrorType;
isError: boolean;
};
};
export type TSharedFile = {
fileName: string;
fileSize: number;
ipfsHash: string;
sharedByPeer: string;
};
export type TNotifSounds = 'chat' | 'peerJoin' | 'peerLeave' | '';
unread
- Unread messages count for each chat room.chat
- Chat messages for each chat room.reactions
- Reactions for each peer.sharedFilesArr
- Array of shared files.notificationSounds
- Notification sounds for chat, peer join and peer leave.chatNotif
- Chat notification.peerJoinNotif
- Peer join notification.peerLeaveNotif
- Peer leave notification.
IChatMessage
id
- Unique id for each message.peerId
- Peer id of the user who sent the message.displayName
- Display name of the user who sent the message.type
- Type of the message.message
- Message.timestamp
- Timestamp of the message.error
- Error object.
TSharedFile
fileName
- Name of the file.fileSize
- Size of the file.ipfsHash
- IPFS hash of the file.sharedByPeer
- Peer id of the user who shared the file.
Example
import { useHuddleStore } from "huddle01-client/hooks";
interface Props {
peerId: string;
}
const Component = ({ peerId }) => {
const roomChats = useRootStore((state) => state.chat[peerId]);
return (
<div>
{roomChats.map((chat) => (
<div key={chat.id}>
<span>{chat.displayName}</span>
<span>{chat.message}</span>
</div>
))}
...
<div />
)
}
NOTE: Doing this will subscribe
roomChats
state to that component and will re-render the component when the state changes.
Pro Tip: You dont need to add useEffect to subscribe to the state and change certains states based on this, it is already done for you.