Voice Note Conversation
Overview
The VoiceNoteConversation
component allows users to listen to and interact with voice notes shared in conversations within the LikeMinds chat application. It provides playback controls, such as play, pause, and seek, enhancing the experience of audio-based communication in chatrooms. This component ensures that users can easily send and listen to voice messages, enriching the overall chat experience.
GitHub File:
Customisation
The VoiceNoteConversation
customisations can be done using chatBubbleStyles
as shown in the Message
component.
Usage Example
- In your app, create a
CustomChatroomScreen
file, wrap it with theChatRoom
context provider. - Now, you can pass your own custom Voice note message component as prop to the
ChatRoom
context provider
import {
ChatRoom,
ChatroomHeader,
MessageList,
MessageInput,
useChatroomContext,
useMessageListContext,
ChatroomTopic,
STYLES
} from "@likeminds.community/chat-rn-core";
import {InputBoxContextProvider} from '@likeminds.community/chat-rn-core/ChatSX/context/InputBoxContext';
import {ChatroomContextValues} from '@likeminds.community/chat-rn-core/ChatSX/context/ChatroomContext';
import MessageInputBox from "@likeminds.community/chat-rn-core/ChatSX/components/InputBox";
export function CustomChatroomScreen() {
const {
chatroomID,
chatroomWithUser,
currentChatroomTopic,
chatroomType,
replyChatID,
isEditable,
chatroomName,
isSecret,
refInput,
chatroomDBDetails,
chatRequestState,
setIsEditable,
handleFileUpload,
joinSecretChatroom,
onTapToUndo,
}: ChatroomContextValues = useChatroomContext();
return (
<ChatRoom
customVoiceNoteAttachmentConversation={<"CUSTOM_VOICENOTE_MESSAGE_COMPONENT">}
>
{/* ChatroomHeader */}
<ChatroomHeader />
{/* ChatroomTopic */}
<ChatroomTopic />
{/* MessageList */}
<MessageList />
{/* Input Box Flow */}
<InputBoxContextProvider
chatroomName={chatroomName}
chatroomWithUser={chatroomWithUser}
replyChatID={replyChatID}
chatroomID={chatroomID}
isUploadScreen={false}
myRef={refInput}
handleFileUpload={handleFileUpload}
isEditable={isEditable}
setIsEditable={(value: boolean) => {
setIsEditable(value);
}}
isSecret={isSecret}
chatroomType={chatroomType}
currentChatroomTopic={currentChatroomTopic}
isPrivateMember={chatroomDBDetails.isPrivateMember}
chatRequestState={chatRequestState}>
<MessageInput>
<MessageInputBox />
</MessageInput>
</InputBoxContextProvider>
</ChatRoom>
);
}