Live Chat Compose Bar Component
This component enables message creation
Last updated
Was this helpful?
Was this helpful?
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;