Message Input widget

Enabling users to input and submit short text messages in chat and similar applications.

In-ports

text String — input plain text or Markdown formatted String.

config JSON (dynamic) — accepts a JSON object with configuration properties that can be set at runtime.

Out-ports

on-submit String — Emits the message text when the Submit button is clicked or the Enter key is pressed.

on-inout String — Emits the message text on every keyboard input.

Overview

The Message Input widget is a UI component designed for chat and other applications that require short form text input.

Users can submit messages by either clicking on a submit icon button or pressing the Enter key (default). You can change the key combination for submitting messages by switching the "Submit on enter" setting.

This widget supports dynamic configuration, allowing you to specify required settings either in the Settings dialog or at runtime through a configuration object sent to the config port. To enable the config port for runtime configuration, activate the Enable realtime config port setting.

Settings

Enable realtime config port

If this setting is enabled, the component can be configured through the config port. This port accepts a configuration object as input and allows you to set dynamic properties at runtime. Note that using this port does not cause the component to reinitialize, but it may cause some previous state of the component to be lost.

Format message with Markdown (mode)

Specify whether the user input should be formatted with Markdown or as plain text.

Values: markdown, text
Default: markdown

Font size (fontSize)

Specify the font size of the text input area within the widget. The font size can be set to any value in pixels.

Type: Number
Default: 12

Placeholder text (placeholderText)

Placeholder text when there is no value.

Type: String

Submit button properties (submitButton)

• Minimal (minimal) - Whether this button should use minimal styles. Default: false.
• Large (large) - Whether this button should use large styles. Default: false.
• Rounded (rounded) - Whether this button should use rounded styles. Default: false.
• Intent (intent) - Visual intent color to apply to the button.
  • Values: none (grey), primary (default, blue), success (green), warning (orange), and danger (red).
  • Default: primary

Submit on enter (submitOnEnter)

Change the key combination for submitting messages and adding new lines.

Default: true

The following key combinations are supported:

Mac

	“Submit on Enter” enabled (default)	“Submit on Enter” disabled
Submit message	Return, Cmd + Return	Cmd + Return
Add a new line	Shift + Return, Ctrl + Return	Return, Shift + Return, Ctrl + Return

PC

	“Submit on Enter” enabled (default)	“Submit on Enter” disabled
Submit message	Enter	Ctrl + Enter
Add a new line	Ctrl + Enter, Shift + Enter	Enter, Shift + Enter

Configuration Object

Here is an example of a runtime configuration object that you can use as a template:

{
	"mode": "markdown",
	"fontSize": 12,
	"placeholderText": "Enter your message here",
	"submitButton": {
		"minimal": false,
		"large": false,
		"rounded": false,
		"intent": "primary"
	}
}

Related

• Form