Live Chat Compose Bar Component
This component enables message creation
This component provides a full functionalities of message creation. It enables user to either create a new message or reply to another message with also an option to mention specific users.
Features
Feature
Description
Create message
Enable message creation
Mention other channel member
Enable '@' character to trigger a view to select a user to mention
Customization
live_chat/message_compose_bar/*
theme
Component
You can customize component theme
live_chat/message_compose_bar/*
message_limit
Component
You can define maximum character
live_chat/message_compose_bar/*
placeholder_text
Component
You can define placeholder text on the compose bar
For more details on customization, please refer to the Customization page.
Usage
import React, { useRef, useState } from 'react';
import { AmityLiveChatMessageComposeBar } from '@amityco/ui-kit';
interface SampleLiveChatMessageComposeBarProps {
channel: Amity.Channel,
}
const SampleLiveChatPage = ({ channel }: SampleLiveChatMessageComposeBarProps) => {
const mentionSuggestionRef = useRef<HTMLDivElement>(null);
const [replyMessage, setReplyMessage] = useState<Amity.Message | undefined>();
const [mentionMessage, setMentionMessage] = useState<Amity.Message | undefined>();
return (
<>
<div ref={mentionSuggestionRef}>
{/* User suggestion panel will render here */}
</div>
{/**
* Props detail:
* - channel: Amity.Channel
* - suggestionRef: React.RefObject<HTMLDivElement> // Ref from target div to render user suggestion panel
* - composeAction: {
* replyMessage?: Amity.Message
* mentionMessage?: Amity.Message
* clearReplyMessage: () => void
* clearMention: () => void
* }
*/}
<AmityLiveChatMessageComposeBar
channel={channel}
suggestionRef={mentionSuggestionRef}
composeAction={{
replyMessage,
mentionMessage,
clearReplyMessage: () => setReplyMessage(undefined),
clearMention: () => setMentionMessage(undefined),
}}
/>
</>
)
}
export default SampleLiveChatPage;
Last updated
Was this helpful?