feat(ui): composer attachments

apps/design_system_gallery/lib/components/message_composer/message_composer.dart

@@ -7,22 +7,30 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 // Playground
 // =============================================================================
 
+final emptyVoiceRecordingCallback = VoiceRecordingCallback(
+  onLongPressStart: () {},
+  onLongPressCancel: () {},
+  onLongPressEnd: (_) {},
+  onLongPressMoveUpdate: (_) {},
+);
+
 @widgetbook.UseCase(
   name: 'Playground',
-  type: StreamBaseMessageComposer,
+  type: StreamCoreMessageComposer,
   path: '[Components]/Message Composer',
 )
 Widget buildStreamMessageComposerPlayground(BuildContext context) {
   final textEditingController = TextEditingController();
 
   return Center(
-    child: StreamBaseMessageComposer(
+    child: StreamCoreMessageComposer(
       controller: textEditingController,
       isFloating: false,
-      inputTrailing: StreamMessageComposerInputTrailing(
+      inputTrailing: StreamCoreMessageComposerInputTrailing(
         controller: textEditingController,
         onSendPressed: () {},
-        onMicrophonePressed: () {},
+        voiceRecordingCallback: emptyVoiceRecordingCallback,
+        buttonState: StreamMessageComposerInputTrailingState.microphone,
       ),
     ),
   );
@@ -34,7 +42,7 @@ Widget buildStreamMessageComposerPlayground(BuildContext context) {
 
 @widgetbook.UseCase(
   name: 'Real-world Example',
-  type: StreamBaseMessageComposer,
+  type: StreamCoreMessageComposer,
   path: '[Components]/Message Composer',
 )
 Widget buildStreamMessageComposerExample(BuildContext context) {
@@ -126,13 +134,14 @@ Widget buildStreamMessageComposerExample(BuildContext context) {
                 left: 0,
                 right: 0,
                 bottom: 0,
-                child: StreamBaseMessageComposer(
+                child: StreamCoreMessageComposer(
                   controller: textEditingController,
                   isFloating: true,
-                  inputTrailing: StreamMessageComposerInputTrailing(
+                  inputTrailing: StreamCoreMessageComposerInputTrailing(
                     controller: textEditingController,
                     onSendPressed: () {},
-                    onMicrophonePressed: () {},
+                    voiceRecordingCallback: emptyVoiceRecordingCallback,
+                    buttonState: StreamMessageComposerInputTrailingState.microphone,
                   ),
                 ),
               ),
@@ -160,13 +169,14 @@ Widget buildStreamMessageComposerExample(BuildContext context) {
                 ),
               ),
               // Non-floating composer
-              StreamBaseMessageComposer(
+              StreamCoreMessageComposer(
                 controller: textEditingController,
                 isFloating: false,
-                inputTrailing: StreamMessageComposerInputTrailing(
+                inputTrailing: StreamCoreMessageComposerInputTrailing(
                   controller: textEditingController,
                   onSendPressed: () {},
-                  onMicrophonePressed: () {},
+                  voiceRecordingCallback: emptyVoiceRecordingCallback,
+                  buttonState: StreamMessageComposerInputTrailingState.microphone,
                 ),
               ),
             ],

apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_link_preview.dart

@@ -9,7 +9,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
 @widgetbook.UseCase(
   name: 'Playground',
-  type: MessageComposerAttachmentLinkPreview,
+  type: MessageComposerLinkPreviewAttachment,
   path: '[Components]/Message Composer',
 )
 Widget buildMessageComposerAttachmentLinkPreviewPlayground(BuildContext context) {
@@ -42,7 +42,7 @@ Widget buildMessageComposerAttachmentLinkPreviewPlayground(BuildContext context)
   return Center(
     child: ConstrainedBox(
       constraints: const BoxConstraints(maxWidth: 360),
-      child: MessageComposerAttachmentLinkPreview(
+      child: MessageComposerLinkPreviewAttachment(
         title: title.isEmpty ? null : title,
         subtitle: subtitle.isEmpty ? null : subtitle,
         url: url.isEmpty ? null : url,

apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_media_file.dart

@@ -8,12 +8,12 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
 @widgetbook.UseCase(
   name: 'Playground',
-  type: MessageComposerAttachmentMediaFile,
+  type: MessageComposerMediaFileAttachment,
   path: '[Components]/Message Composer',
 )
 Widget buildMessageComposerAttachmentMediaFilePlayground(BuildContext context) {
   return Center(
-    child: MessageComposerAttachmentMediaFile(
+    child: MessageComposerMediaFileAttachment.image(
       image: const AssetImage('assets/attachment_image.png'),
       onRemovePressed: () {},
     ),

apps/design_system_gallery/lib/components/message_composer/message_composer_attachment_reply.dart

@@ -9,7 +9,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
 @widgetbook.UseCase(
   name: 'Playground',
-  type: MessageComposerAttachmentReply,
+  type: MessageComposerReplyAttachment,
   path: '[Components]/Message Composer',
 )
 Widget buildMessageComposerAttachmentReplyPlayground(BuildContext context) {
@@ -24,7 +24,7 @@ Widget buildMessageComposerAttachmentReplyPlayground(BuildContext context) {
   return Center(
     child: ConstrainedBox(
       constraints: const BoxConstraints(maxWidth: 360),
-      child: MessageComposerAttachmentReply(
+      child: MessageComposerReplyAttachment(
         title: 'Reply to John Doe',
         subtitle: 'We had a great time during our holiday.',
         image: const AssetImage('assets/attachment_image.png'),

packages/stream_core_flutter/lib/src/components.dart

@@ -4,13 +4,15 @@ export 'components/avatar/stream_avatar.dart' hide DefaultStreamAvatar;
 export 'components/avatar/stream_avatar_group.dart' hide DefaultStreamAvatarGroup;
 export 'components/avatar/stream_avatar_stack.dart' hide DefaultStreamAvatarStack;
 export 'components/badge/stream_badge_count.dart' hide DefaultStreamBadgeCount;
+export 'components/badge/stream_media_badge.dart';
 export 'components/badge/stream_online_indicator.dart' hide DefaultStreamOnlineIndicator;
 export 'components/buttons/stream_button.dart' hide DefaultStreamButton;
 export 'components/buttons/stream_emoji_button.dart' hide DefaultStreamEmojiButton;
 export 'components/common/stream_checkbox.dart' hide DefaultStreamCheckbox;
 export 'components/common/stream_progress_bar.dart' hide DefaultStreamProgressBar;
 export 'components/context_menu/stream_context_menu.dart';
 export 'components/context_menu/stream_context_menu_item.dart' hide DefaultStreamContextMenuItem;
+export 'components/controls/stream_remove_control.dart';
 export 'components/message_composer.dart';
 export 'components/reaction/picker/stream_reaction_picker_sheet.dart';
 

packages/stream_core_flutter/lib/src/components/badge/media_badge.dart → packages/stream_core_flutter/lib/src/components/badge/stream_media_badge.dart

@@ -2,12 +2,8 @@ import 'package:flutter/widgets.dart';
 
 import '../../../stream_core_flutter.dart';
 
-class MediaBadge extends StatelessWidget {
-  const MediaBadge({
-    super.key,
-    required this.type,
-    required this.duration,
-  });
+class StreamMediaBadge extends StatelessWidget {
+  const StreamMediaBadge({super.key, required this.type, this.duration});
 
   final MediaBadgeType type;
   final Duration? duration;
@@ -17,24 +13,29 @@ class MediaBadge extends StatelessWidget {
     return Container(
       decoration: BoxDecoration(
         color: context.streamColorScheme.backgroundInverse,
-        shape: BoxShape.circle,
+        borderRadius: BorderRadius.all(context.streamRadius.max),
       ),
       padding: EdgeInsets.symmetric(
         horizontal: context.streamSpacing.xs,
         vertical: context.streamSpacing.xxs,
       ),
-      child: Column(
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
         children: [
           Icon(
             switch (type) {
               MediaBadgeType.video => context.streamIcons.videoSolid,
               MediaBadgeType.audio => context.streamIcons.microphoneSolid,
             },
             size: 12,
-            color: context.streamColorScheme.textPrimary,
+            color: context.streamColorScheme.textOnDark,
           ),
 
-          if (duration case final duration?) Text(duration.toReadableString()),
+          if (duration case final duration?)
+            Text(
+              duration.toReadableString(),
+              style: context.streamTextTheme.numericMd.copyWith(color: context.streamColorScheme.textOnDark),
+            ),
         ],
       ),
     );
@@ -53,7 +54,4 @@ extension on Duration {
   }
 }
 
-enum MediaBadgeType {
-  video,
-  audio,
-}
+enum MediaBadgeType { video, audio }

packages/stream_core_flutter/lib/src/components/controls/remove_control.dart → packages/stream_core_flutter/lib/src/components/controls/stream_remove_control.dart

@@ -2,8 +2,8 @@ import 'package:flutter/widgets.dart';
 
 import '../../../stream_core_flutter.dart';
 
-class RemoveControl extends StatelessWidget {
-  const RemoveControl({
+class StreamRemoveControl extends StatelessWidget {
+  const StreamRemoveControl({
     super.key,
     required this.onPressed,
   });

packages/stream_core_flutter/lib/src/components/message_composer.dart

@@ -1,6 +1,7 @@
-export 'message_composer/attachment/message_composer_attachment_link_preview.dart';
-export 'message_composer/attachment/message_composer_attachment_media_file.dart';
-export 'message_composer/attachment/message_composer_attachment_reply.dart';
+export 'message_composer/attachment/message_composer_file_attachment.dart';
+export 'message_composer/attachment/message_composer_link_preview_attachment.dart';
+export 'message_composer/attachment/message_composer_media_file_attachment.dart';
+export 'message_composer/attachment/message_composer_reply_attachment.dart';
 export 'message_composer/message_composer.dart';
 export 'message_composer/message_composer_input.dart';
 export 'message_composer/message_composer_input_trailing.dart';

packages/stream_core_flutter/lib/src/components/message_composer/attachment/message_composer_file_attachment.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/widgets.dart';
+
+import '../../../../stream_core_flutter.dart';
+
+class MessageComposerFileAttachment extends StatelessWidget {
+  const MessageComposerFileAttachment({
+    super.key,
+    this.title,
+    this.fileTypeIcon,
+    this.subtitle,
+    this.onRemovePressed,
+  });
+
+  final StreamFileTypeIcon? fileTypeIcon;
+  final String? title;
+  final Widget? subtitle;
+  final VoidCallback? onRemovePressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final textColor = context.streamColorScheme.textPrimary;
+
+    final titleStyle = context.streamTextTheme.captionEmphasis.copyWith(color: textColor);
+
+    final spacing = context.streamSpacing;
+    return Stack(
+      children: [
+        Container(
+          margin: EdgeInsets.all(spacing.xxs),
+          padding: EdgeInsets.fromLTRB(spacing.md, spacing.md, spacing.sm, spacing.md),
+          foregroundDecoration: BoxDecoration(
+            borderRadius: BorderRadius.all(context.streamRadius.lg),
+            border: Border.all(
+              color: context.streamColorScheme.borderDefault,
+            ),
+          ),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.all(context.streamRadius.lg),
+          ),
+          child: Row(
+            children: [
+              ?fileTypeIcon,
+              SizedBox(width: spacing.xs),
+              Expanded(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (title case final title?)
+                      Text(
+                        title,
+                        style: titleStyle,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ?subtitle,
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        if (onRemovePressed case final VoidCallback onRemovePressed?)
+          Align(
+            alignment: Alignment.topRight,
+            child: StreamRemoveControl(onPressed: onRemovePressed),
+          ),
+      ],
+    );
+  }
+}

packages/stream_core_flutter/lib/src/components/message_composer/attachment/message_composer_attachment_link_preview.dart → packages/stream_core_flutter/lib/src/components/message_composer/attachment/message_composer_link_preview_attachment.dart

@@ -1,10 +1,9 @@
 import 'package:flutter/widgets.dart';
 
 import '../../../../stream_core_flutter.dart';
-import '../../controls/remove_control.dart';
 
-class MessageComposerAttachmentLinkPreview extends StatelessWidget {
-  const MessageComposerAttachmentLinkPreview({
+class MessageComposerLinkPreviewAttachment extends StatelessWidget {
+  const MessageComposerLinkPreviewAttachment({
     super.key,
     this.title,
     this.subtitle,
@@ -95,7 +94,7 @@ class MessageComposerAttachmentLinkPreview extends StatelessWidget {
         if (onRemovePressed case final VoidCallback onRemovePressed?)
           Align(
             alignment: Alignment.topRight,
-            child: RemoveControl(onPressed: onRemovePressed),
+            child: StreamRemoveControl(onPressed: onRemovePressed),
           ),
       ],
     );