Component

Composer

A headless-core chat composer with auto-grow, IME-safe Enter-to-send, @mention / /slash / :emoji: trigger menus committing atomic tokens, attachments, drafts, edit-in-place, and busy/stop — the same structured output as the React composer.

Usage

dart

import 'package:refraction_ui/refraction_ui.dart';

class MyComposer extends StatelessWidget {
  const MyComposer({super.key, required this.onSend});

  final void Function(ComposerSubmission submission) onSend;

  @override
  Widget build(BuildContext context) {
    return RefractionComposer(
      placeholder: 'Message',
      maxLines: 6,
      triggers: [
        ComposerTrigger(
          id: 'mention',
          symbol: '@',
          resolve: (query) => searchTeam(query), // -> List<ComposerCandidate>
        ),
        ComposerTrigger(
          id: 'slash-command',
          symbol: '/',
          scope: ComposerTriggerScope.startOfMessage,
          resolve: (query) => searchCommands(query),
          buildDisplay: (c) => '/${c.display}',
        ),
      ],
      onSubmit: onSend, // {plainText, tokens[{type,id,display,start,end}], attachments}
    );
  }
}