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

Config ID	Config Key	Type	Description
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

iOS

Android

React

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;