Description of icon
Flex UI
API Reference

MessagingCanvas

A container which holds MessageInput and MessageList. Can be themed with Theme.Chat.MessagingCanvas in Theme.


Component children#

KeyComponentConditionAlignDescription
listMessageListMessage list. Displays the `MessageList` component
inputMessageInputMessage input. Displays the `MessageInput` component
trayMessageCanvasTrayVisible only if `showTrayOnInactive` prop is true and the channel is inactiveMessage canvas tray. Displays the `MessageCanvasTray` component for webchat

Static Properties#

NameDescriptionType
Content

Dynamic content store

DynamicContentStore.<MessagingCanvas.MessagingCanvasChildrenProps>
Input

Shortcut for MessageInput component

MessageInput
MessageList

Shortcut for MessageList component

MessageList
defaultProps

Default properties

MessagingCanvas.MessagingCanvasProps

Component Properties

  • sid: string

    The identifier of the Chat channel or Conversation.

  • inputDisabledReason?: string

    A reason on why the input element is disabled.

  • avatarCallback?: MessagingCanvas.AvatarCallback

    A handler to request for avatar.

  • memberDisplayOptions?: MessagingCanvas.MemberDisplayOptions

    Chat member display configuration.

  • messageStyle?: MessagingCanvas.MessageStyle

    Identifies how the message should be displayed.

  • showTypingIndicator?: boolean

    Should the typing indicator be shown.

  • showReadStatus?: boolean

    Should the read status be shown.

  • showTrayOnInactive?: boolean

    Should MessageTray to be shown when conversation is inactive.

  • showWelcomeMessage?: boolean

    Should a welcome message to be shown.

  • welcomeMessageText?: CompiledTemplate

    string representing the welcome message.

  • charLimit?: number

    Identifies character limit for a single message.

  • predefinedMessage?: MessagingCanvas.PredefinedMessage

    Defines the predefined, introductory message to be shown to a customer.

  • autoInitConversation?: MessagingCanvas.autoInitConversation

    Should the component automatically initialize conversation if not initialized already.

  • hasMarkdownSupport?: boolean

    If set to true, messages bodies will be parsed as markdown.

Need some help?