Skip to main content

Message Input Config

MessageInputConfig controls the built-in MessageInputWidget used by ChatPage. It exposes input modes, toolbar controls, extension-panel entries, emoji panel layout, mention hooks, voice hooks, permission hooks, and reference preview rendering.

Entry Point​

Dart
ChatPage(
  channel: channel,
  config: ChatPageConfig(
    inputConfig: MessageInputConfig(
      hintText: 'Message',
      enableVoiceInput: false,
      toolbarControls: [MessageInputBarControl.emoji],
    ),
  ),
)

MessageInputConfig​

Core fields:

  • hintText
  • enableVoiceInput
  • enableEmojiPanel
  • enableExtensionPanel
  • toolbarControls
  • extensionPlugins
  • maxLines
  • backgroundColor
  • decoration
  • voiceInputUnavailableText
  • emptyExtensionPanelText
  • emojiItems

Mention fields:

  • enableMention
  • mentionResolver
  • mentionPicker
  • mentionCandidateBuilder
  • emptyMentionCandidatesText

Voice fields:

  • voiceDraftResolver
  • voiceRecorder
  • minimumVoiceRecordingDuration
  • maximumVoiceRecordingDuration
  • voiceInputActionText

Permission and sub-config fields:

  • onPermissionRequest
  • toolbarButtonConfigs
  • referencePreviewConfig
  • emojiPanelConfig
  • extensionPanelConfig

Toolbar Controls​

toolbarControls orders the built-in controls:

  • MessageInputBarControl.voice
  • MessageInputBarControl.emoji
  • MessageInputBarControl.extension

Use toolbarButtonConfigs to override icon, active icon, size, padding, color, active color, or visibility for a control.

On Android, the built-in input uses a compact trailing slot: when the text draft is empty it shows the extension + button, and when a draft exists it switches that same slot to the send button. The emoji button remains a separate control, and the voice button remains on the leading side. If the extension control is disabled or no extension plugin is available, the empty-draft trailing slot is hidden.

Dart
MessageInputConfig(
  toolbarControls: const [
    MessageInputBarControl.emoji,
    MessageInputBarControl.extension,
  ],
  toolbarButtonConfigs: {
    MessageInputBarControl.extension: MessageInputButtonConfig(
      icon: const Icon(Icons.add_circle_outline),
      activeIcon: const Icon(Icons.cancel_outlined),
      visible: true,
    ),
  },
)

Extension Plugins​

extensionPlugins controls the extension panel. Built-in plugin types are represented by MessageInputExtensionPluginType:

  • custom
  • photo
  • video
  • camera
  • filming
  • file
  • location

MessageInputExtensionPlugin fields:

  • id
  • title
  • icon
  • type
  • enabled
  • tooltip
  • unavailableText
  • onTap
  • permissionRequest
  • mediaPathResolver
  • mediaDraftResolver
  • locationResolver
  • builder
  • assetName

Default plugins include photo, video, camera, filming, and file. Their default asset names use the NexconnLightIcon/ resource directory. For default media actions, the UI layer can use built-in picker helpers. For custom location or business actions, provide onTap, locationResolver, or another resolver.

Dart
MessageInputConfig(
  extensionPlugins: [
    MessageInputExtensionPlugin.photo(title: 'Photo'),
    MessageInputExtensionPlugin.file(title: 'File'),
    MessageInputExtensionPlugin(
      id: 'contact_card',
      title: 'Contact',
      icon: Icons.person_outline,
      onTap: (context, plugin) async {
        // Open your own picker and send a message through ChatProvider.
      },
    ),
  ],
)

Emoji Panel​

MessageInputEmojiPanelConfig fields:

  • backgroundColor
  • height
  • rowCount
  • columnCount
  • emojiSize
  • rowSpacing
  • columnSpacing
  • padding
  • pageIndicatorConfig
  • deleteIcon
  • sendButtonConfig
  • emojiItemBuilder
  • deleteButtonBuilder
  • sendButtonBuilder

MessageInputPanelIndicatorConfig fields:

  • activeColor
  • inactiveColor
  • size
  • spacing
  • bottomPadding

MessageInputEmojiSendButtonConfig fields:

  • text
  • width
  • height
  • backgroundColor
  • textStyle
  • borderRadius
  • margin
Dart
MessageInputConfig(
  emojiItems: const [':smile:', ':party:', ':thumbs_up:'],
  emojiPanelConfig: MessageInputEmojiPanelConfig(
    height: 240,
    rowCount: 3,
    columnCount: 7,
    sendButtonConfig: MessageInputEmojiSendButtonConfig(text: 'Send'),
  ),
)

Reference Preview​

MessageInputReferencePreviewConfig fields:

  • backgroundColor
  • padding
  • textStyle
  • closeIcon
  • builder
Dart
MessageInputConfig(
  referencePreviewConfig: MessageInputReferencePreviewConfig(
    backgroundColor: const Color(0xFFF3F4F6),
    builder: (context, message, senderName, summary, onClose) {
      return ListTile(
        dense: true,
        title: Text(senderName),
        subtitle: Text(summary, maxLines: 1),
        trailing: IconButton(
          icon: const Icon(Icons.close),
          onPressed: onClose,
        ),
      );
    },
  ),
)

Extension Panel​

MessageInputExtensionPanelConfig fields:

  • itemsPerPage
  • crossAxisCount
  • backgroundColor
  • mainAxisSpacing
  • crossAxisSpacing
  • padding
  • pageIndicatorConfig
  • height
  • itemRadius
  • titleAreaHeight
Dart
MessageInputConfig(
  extensionPanelConfig: const MessageInputExtensionPanelConfig(
    itemsPerPage: 8,
    crossAxisCount: 4,
    height: 224,
  ),
)

Permissions​

MessageInputExtensionPlugin.permissionRequest has the highest priority for one plugin entry. MessageInputConfig.onPermissionRequest is the shared fallback. If neither is supplied, the built-in helper requests only the permissions needed by the selected default plugin:

  • photo and video request photo-library/media-library access.
  • camera requests camera access only.
  • filming requests camera and microphone for the direct Android recording flow.
  • filming keeps the media-library permission step when using a non-direct recording or picker flow that needs gallery access.

Return false when the user denies permission or cancels the request. The input panel stops the action without sending a message.

Styling and dark mode​

The default TextField decoration uses theme tokens. In dark mode or a custom theme, the default input fill follows NexconnThemeTokens.surfaceMutedColor, while text and placeholder colors continue to use the existing text tokens. If MessageInputConfig.decoration is provided, the custom decoration is used as-is and the SDK does not override its fillColor.

Voice Input​

Use voiceRecorder to provide a recorder implementation, or voiceDraftResolver to provide an already-created MessageInputVoiceDraft. minimumVoiceRecordingDuration and maximumVoiceRecordingDuration control validation.

Dart
MessageInputConfig(
  enableVoiceInput: true,
  voiceRecorder: MessageInputDefaultVoiceRecorder(),
  minimumVoiceRecordingDuration: const Duration(seconds: 1),
  maximumVoiceRecordingDuration: const Duration(seconds: 60),
)
Last updated on