feat(ui): composer also send to channel (#2537)

* Improve layout for 'send as dm'

* Remove unused imports

* remove use of default color

* Changed hideSendAsDm in canAlsoSendToChannelFromThread

* fix typo

Author: renefloor

melos.yaml

@@ -95,7 +95,7 @@ command:
       stream_core_flutter:
         git:
           url: https://github.com/GetStream/stream-core-flutter.git
-          ref: 213dfb64b1d0c22a668a4a0924503703ff9a33e9
+          ref: 2959ed4323d189c1c43930964726f8d219e5dd94
           path: packages/stream_core_flutter
       synchronized: ^3.1.0+1
       thumblr: ^0.0.4

packages/stream_chat_flutter/lib/src/components/message_composer/stream_chat_message_composer.dart

@@ -7,6 +7,7 @@ import 'package:stream_chat_flutter/src/components/message_composer/message_comp
 import 'package:stream_chat_flutter/src/components/message_composer/message_composer_recording_locked.dart';
 import 'package:stream_chat_flutter/src/components/message_composer/message_composer_recording_ongoing.dart';
 import 'package:stream_chat_flutter/src/components/message_composer/message_composer_trailing.dart';
+import 'package:stream_chat_flutter/src/message_input/dm_checkbox_list_tile.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_core_flutter/stream_core_flutter.dart' as core;
 
@@ -33,6 +34,7 @@ class StreamChatMessageComposer extends StatefulWidget {
     StreamAudioRecorderController? audioRecorderController,
     bool sendVoiceRecordingAutomatically = false,
     AudioRecorderFeedback feedback = const AudioRecorderFeedback(),
+    bool canAlsoSendToChannel = false,
   }) : props = MessageComposerProps(
          controller: controller,
          isFloating: false,
@@ -46,6 +48,7 @@ class StreamChatMessageComposer extends StatefulWidget {
          audioRecorderController: audioRecorderController,
          sendVoiceRecordingAutomatically: sendVoiceRecordingAutomatically,
          feedback: feedback,
+         canAlsoSendToChannel: canAlsoSendToChannel,
        );
 
   /// The controller for the message composer.
@@ -176,6 +179,7 @@ class MessageComposerProps {
     this.audioRecorderController,
     this.sendVoiceRecordingAutomatically = false,
     this.feedback = const AudioRecorderFeedback(),
+    this.canAlsoSendToChannel = false,
   });
 
   /// The controller for the message composer.
@@ -216,6 +220,10 @@ class MessageComposerProps {
 
   /// The feedback for the audio recorder.
   final AudioRecorderFeedback feedback;
+
+  /// Whether the user can also send the message as a direct message.
+  /// Usually used in threads.
+  final bool canAlsoSendToChannel;
 }
 
 extension on StreamAudioRecorderController {
@@ -290,7 +298,29 @@ class DefaultStreamChatMessageComposer extends StatelessWidget {
       inputLeading: StreamMessageComposerInputLeading(
         props: componentProps,
       ),
-      inputBody: body,
+      inputBody:
+          body ??
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              core.StreamMessageComposerInputField(
+                controller: inputController.textFieldController,
+                placeholder: props.placeholder,
+                focusNode: props.focusNode,
+              ),
+              if (props.canAlsoSendToChannel)
+                DmCheckboxListTile(
+                  value: props.controller?.showInChannel ?? false,
+                  // height of list tile is 34px, height of checkbox is 16px, so we need to subtract 8px to make the spacing correct.
+                  contentPadding: EdgeInsets.only(
+                    right: context.streamSpacing.md,
+                    left: context.streamSpacing.md,
+                    bottom: context.streamSpacing.md - 8,
+                  ),
+                  onChanged: (value) => props.controller?.showInChannel = value,
+                ),
+            ],
+          ),
     );
   }
 

packages/stream_chat_flutter/lib/src/localization/translations.dart

@@ -670,7 +670,7 @@ class DefaultTranslations implements Translations {
   String get reconnectingLabel => 'Reconnecting...';
 
   @override
-  String get alsoSendAsDirectMessageLabel => 'Also send as direct message';
+  String get alsoSendAsDirectMessageLabel => 'Also send in Channel';
 
   @override
   String get addACommentOrSendLabel => 'Add a comment or send';

packages/stream_chat_flutter/lib/src/message_input/dm_checkbox_list_tile.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/theme/stream_chat_theme.dart';
-import 'package:stream_chat_flutter/src/utils/extensions.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'package:stream_core_flutter/stream_core_flutter.dart';
 
 /// {@template dmCheckboxListTile}
 /// A widget that represents a checkbox list tile for direct message input.
@@ -25,37 +25,21 @@ class DmCheckboxListTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = StreamChatTheme.of(context);
-    final textTheme = theme.textTheme;
-    final colorTheme = theme.colorTheme;
+    final textTheme = context.streamTextTheme;
 
     const visualDensity = VisualDensity(
       vertical: VisualDensity.minimumDensity,
       horizontal: VisualDensity.minimumDensity,
     );
 
     final checkbox = ExcludeFocus(
-      child: CheckboxTheme(
-        data: CheckboxThemeData(
-          overlayColor: WidgetStatePropertyAll(
-            colorTheme.accentPrimary.withAlpha(kRadialReactionAlpha),
-          ),
-        ),
-        child: Checkbox(
-          value: value,
-          visualDensity: visualDensity,
-          activeColor: colorTheme.accentPrimary,
-          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          side: BorderSide(width: 2, color: colorTheme.textLowEmphasis),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3)),
-          onChanged: switch (onChanged) {
-            final onChanged? => (value) {
-              if (value == null) return;
-              return onChanged.call(value);
-            },
-            _ => null,
-          },
-        ),
+      child: StreamCheckbox(
+        value: value,
+        size: StreamCheckboxSize.sm,
+        onChanged: switch (onChanged) {
+          final onChanged? => onChanged.call,
+          _ => null,
+        },
       ),
     );
 
@@ -70,10 +54,7 @@ class DmCheckboxListTile extends StatelessWidget {
         contentPadding: contentPadding,
         title: Text(
           context.translations.alsoSendAsDirectMessageLabel,
-          style: textTheme.footnote.copyWith(
-            // ignore: deprecated_member_use
-            color: colorTheme.textHighEmphasis.withOpacity(0.5),
-          ),
+          style: textTheme.metadataDefault,
         ),
       ),
     );

packages/stream_chat_flutter/lib/src/message_input/stream_message_input.dart

@@ -11,7 +11,6 @@ import 'package:flutter_portal/flutter_portal.dart';
 import 'package:stream_chat_flutter/platform_widget_builder/src/platform_widget_builder.dart';
 import 'package:stream_chat_flutter/src/message_input/attachment_button.dart';
 import 'package:stream_chat_flutter/src/message_input/command_button.dart';
-import 'package:stream_chat_flutter/src/message_input/dm_checkbox_list_tile.dart';
 import 'package:stream_chat_flutter/src/message_input/quoting_message_top_area.dart';
 import 'package:stream_chat_flutter/src/message_input/stream_message_input_icon_button.dart';
 import 'package:stream_chat_flutter/src/message_input/tld.dart';
@@ -127,7 +126,7 @@ class StreamMessageInput extends StatefulWidget {
     this.focusNode,
     this.sendButtonLocation = SendButtonLocation.outside,
     this.autofocus = false,
-    this.hideSendAsDm = false,
+    this.canAlsoSendToChannelFromThread = true,
     this.enableVoiceRecording = false,
     this.sendVoiceRecordingAutomatically = false,
     this.voiceRecordingFeedback = const AudioRecorderFeedback(),
@@ -219,8 +218,10 @@ class StreamMessageInput extends StatefulWidget {
   /// Use this property to hide/show the commands button.
   final bool showCommandsButton;
 
-  /// Hide send as dm checkbox.
-  final bool hideSendAsDm;
+  /// Show the checkbox to send the message as a direct message to the channel.
+  ///
+  /// Defaults to true.
+  final bool canAlsoSendToChannelFromThread;
 
   /// If true the voice recording button will be displayed.
   ///
@@ -789,9 +790,9 @@ class StreamMessageInputState extends State<StreamMessageInput> with Restoration
             placeholder: _getHint(context) ?? '',
             focusNode: focusNode,
             onSendPressed: sendMessage,
-            audioRecorderController: _audioRecorderController,
+            canAlsoSendToChannel: _shouldShowSendToChannelCheckbox(),
+            audioRecorderController: widget.enableVoiceRecording ? _audioRecorderController : null,
           ),
-          _buildDmCheckbox(context),
           _buildInlineAttachmentPicker(context),
         ].nonNulls.toList(),
       ),
@@ -855,19 +856,11 @@ class StreamMessageInputState extends State<StreamMessageInput> with Restoration
     return null;
   }
 
-  Widget? _buildDmCheckbox(BuildContext context) {
-    if (widget.hideSendAsDm) return null;
+  bool _shouldShowSendToChannelCheckbox() {
+    if (!widget.canAlsoSendToChannelFromThread) return false;
 
     final insideThread = _effectiveController.message.parentId != null;
-    if (!insideThread) return null;
-
-    return DmCheckboxListTile(
-      value: _effectiveController.showInChannel,
-      contentPadding: EdgeInsets.symmetric(
-        horizontal: context.streamSpacing.md,
-      ),
-      onChanged: (value) => _effectiveController.showInChannel = value,
-    );
+    return insideThread;
   }
 
   Widget _buildNoPermissionMessage(BuildContext context) {

packages/stream_chat_flutter/pubspec.yaml

@@ -62,7 +62,7 @@ dependencies:
   stream_core_flutter:
     git:
       url: https://github.com/GetStream/stream-core-flutter.git
-      ref: 213dfb64b1d0c22a668a4a0924503703ff9a33e9
+      ref: 2959ed4323d189c1c43930964726f8d219e5dd94
       path: packages/stream_core_flutter
   svg_icon_widget: ^0.0.1
   synchronized: ^3.1.0+1

packages/stream_chat_flutter/test/src/message_input/message_input_test.dart

@@ -539,7 +539,7 @@ void main() {
                 channel: channel,
                 child: const Scaffold(
                   bottomNavigationBar: StreamMessageInput(
-                    hideSendAsDm: true,
+                    canAlsoSendToChannelFromThread: false,
                   ),
                 ),
               ),

packages/stream_chat_localizations/example/lib/add_new_lang.dart

@@ -132,7 +132,7 @@ class NnStreamChatLocalizations extends GlobalStreamChatLocalizations {
   String get reconnectingLabel => 'Reconnecting...';
 
   @override
-  String get alsoSendAsDirectMessageLabel => 'Also send as direct message';
+  String get alsoSendAsDirectMessageLabel => 'Also send in Channel';
 
   @override
   String get addACommentOrSendLabel => 'Add a comment or send';

packages/stream_chat_localizations/lib/src/stream_chat_localizations_en.dart

@@ -112,7 +112,7 @@ class StreamChatLocalizationsEn extends GlobalStreamChatLocalizations {
   String get reconnectingLabel => 'Reconnecting...';
 
   @override
-  String get alsoSendAsDirectMessageLabel => 'Also send as direct message';
+  String get alsoSendAsDirectMessageLabel => 'Also send in Channel';
 
   @override
   String get addACommentOrSendLabel => 'Add a comment or send';