Skip to main content

Reference Replies

Reference replies let a user answer a specific message while keeping a compact preview of the referenced content inside the outgoing bubble. Nexconn Chat UI uses SDK ReferenceMessage and ReferenceMessageParams for this feature.

Default Flow​

The standard long-press menu includes a reference action for supported messages. Selecting it stores the source message on ChatProvider, syncs it into MessageInputProvider, and shows a reference preview above the input field.

When the user sends text, ChatProvider.sendText creates ReferenceMessageParams instead of TextMessageParams.

Set a Reference Manually​

Use this when you build a custom message menu.

Dart
chatProvider.setReferenceMessage(message);

Clear the state when the user cancels the reply.

Dart
chatProvider.clearReferenceMessage();

Send a Reference Reply​

Dart
await chatProvider.sendText(
  'I agree with this point.',
  referenceMessage: sourceMessage,
);

Mention metadata can be included in the same send call.

Dart
await chatProvider.sendText(
  '@Ada can you confirm?',
  referenceMessage: sourceMessage,
  mentionUserIds: ['ada_user_id'],
);

Customize the Input Preview​

Use MessageInputReferencePreviewConfig to adjust the preview shown above the input field or replace it completely.

Dart
ChatPageConfig(
  inputConfig: MessageInputConfig(
    referencePreviewConfig: MessageInputReferencePreviewConfig(
      builder: (context, message, senderName, summary, onClose) {
        return ListTile(
          title: Text(senderName),
          subtitle: Text(summary),
          trailing: IconButton(
            icon: const Icon(Icons.close),
            onPressed: onClose,
          ),
        );
      },
    ),
  ),
)

The message bubble displays one referenced message preview. Nested reference content is summarized rather than expanded recursively.

Last updated on