Message Input

CometChatMessageInput is a component that provides a skeleton layout for contents of like TextField, auxiliary options, primary button view and attachment options. This element enable users to enter free-form text data along with custom view of 3 variants (primary, secondary and auxiliary).

Properties

Name	Type	Description
text	string	Initial text of the input element
placeholderText	string	Text that appears in the input element when it has no value set
disabled	boolean	When set to true, user won't be able to interact with the input element
auxiliaryButtonAlignment	auxiliaryButtonAlignmentEnum	Group of constants representing the in-built alignment pattern
messageInputStyle	MessageInputStyle	Styling properties and values of the element

Slots

User-defined view

Name	Description
primaryView	Placeholder for the main or primary view that the user is intended to engage with. For e.g. send button
secondaryView	Placeholder for the secondary or less prominent view compared to primary view that the user is intended to engage with. For e.g. attachment button
auxilaryView	Placeholder for the secondary or additional view that provides supplementary information that the user is intended to engage with.

auxiliaryButtonAlignmentEnum

Alignment constants

Name	Description
left	Aligns the auxiliary view to the left i.e. besides the secondary view
right	Aligns the auxiliary view to the right i.e. before the primary view

MessageInputStyle

Styling properties and values of the element

Name	Description
width	Sets the width of the element
height	Sets the height of the element
border	Sets the border of the element
borderRadius	Sets the border radius of the element
background	Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
placeholderTextFont	Sets all the different properties of font for the hint text. Reference link
placeholderTextColor	Sets the foreground color of hint text.
textFont	Sets all the different properties of font for the user input text. Reference link
textColor	Sets the foreground color of user input text.
dividerColor	Sets the tint or color applied to the separator.
inputBorder	Sets the border of the text input within the element
inputBorderRadius	Sets the border radius of the text input within the element
inputBackground	Sets all background style properties at once, such as color, image, origin and size, or repeat method of the text input within the element. Reference link
maxHeight	Sets the maximum height of the element before it can trigger the scrolling or overflow behavior.

Events

Name	Description
cc-message-input-changed	Event triggered when the content of the element is modified or changed by the user.

Usage

Javascript

import "@cometchat/uikit-elements"; //import the web elements package.

const changeHandler = event => {
  console.log(event.detail.value)
}

<cometchat-message-input 
:placeholderText="Enter your message here"
@cc-message-input-changed="changeHandler($event)">
<div slot="secondaryView">
  <button>Send message<button>
</div>
</cometchat-message-input>