Merge pull request #106 from GetStream/dj-develop-ui

New Message Input

analysis_options.yaml

@@ -1,6 +1,8 @@
 include: package:pedantic/analysis_options.yaml
 
 analyzer:
+  enable-experiment:
+    - extension-methods
   exclude:
     - lib/**/*.g.dart
     - example/**

lib/src/message_actions_modal.dart

@@ -213,41 +213,29 @@ class MessageActionsModal extends StatelessWidget {
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: <Widget>[
+                    IconButton(
+                      icon: Icon(
+                        StreamIcons.edit,
+                        size: 22,
+                        color:
+                        StreamChatTheme.of(context).primaryIconTheme.color,
+                      ),
+                      onPressed: () {},
+                    ),
                     Text(
                       'Edit message',
-                      style: Theme.of(context).textTheme.headline6,
+                      style: Theme.of(context).textTheme.headline6.copyWith(fontWeight: FontWeight.bold),
                     ),
-                    Container(
+                    IconButton(
-                      height: 30,
+                      icon: Icon(
-                      padding: const EdgeInsets.all(2.0),
+                        Icons.cancel_outlined,
-                      child: AspectRatio(
+                        size: 22,
-                        aspectRatio: 1,
+                        color:
-                        child: RawMaterialButton(
+                            StreamChatTheme.of(context).primaryIconTheme.color,
-                          shape: RoundedRectangleBorder(
-                            borderRadius: BorderRadius.circular(4),
                       ),
-                          elevation: 0,
-                          highlightElevation: 0,
-                          focusElevation: 0,
-                          disabledElevation: 0,
-                          hoverElevation: 0,
                       onPressed: () {
                         Navigator.of(context).pop();
                       },
-                          fillColor:
-                              Theme.of(context).brightness == Brightness.dark
-                                  ? Colors.white.withOpacity(.1)
-                                  : Colors.black.withOpacity(.1),
-                          padding: EdgeInsets.all(4),
-                          child: Icon(
-                            Icons.close,
-                            size: 15,
-                            color: StreamChatTheme.of(context)
-                                .primaryIconTheme
-                                .color,
-                          ),
-                        ),
-                      ),
                     ),
                   ],
                 ),

lib/src/message_input.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:io';
+import 'dart:math';
 
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/cupertino.dart';
@@ -165,8 +166,13 @@ class MessageInputState extends State<MessageInput> {
   bool _inputEnabled = true;
   bool _messageIsPresent = false;
   bool _typingStarted = false;
+  bool _commandEnabled = false;
   OverlayEntry _commandsOverlay, _mentionsOverlay;
 
+  Command _chosenCommand;
+  bool _actionsShrunk = false;
+  bool _sendAsDm = false;
+
   /// The editing controller passed to the input TextField
   TextEditingController textEditingController;
 
@@ -179,32 +185,30 @@ class MessageInputState extends State<MessageInput> {
             _focusNode.unfocus();
           }
         },
-        child: Padding(
+        child: Column(
-          padding: const EdgeInsets.all(8.0),
+          mainAxisSize: MainAxisSize.min,
-          child: Stack(
-            clipBehavior: Clip.none,
-            children: <Widget>[
-              _buildBorder(context),
-              Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-                  _buildAttachments(),
+            Padding(
-                  _buildTextField(context),
+              padding: const EdgeInsets.all(8.0),
-                ],
+              child: _buildTextField(context),
+            ),
+            if(widget.parentMessage != null)
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                child: _buildDmCheckbox(),
               ),
           ],
         ),
       ),
-      ),
     );
   }
 
   Flex _buildTextField(BuildContext context) {
     return Flex(
       direction: Axis.horizontal,
-      crossAxisAlignment: CrossAxisAlignment.end,
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: <Widget>[
-        if (!widget.disableAttachments) _buildAttachmentButton(),
+        if (!_commandEnabled) _buildExpandActionsButton(),
         if (widget.actionsLocation == ActionsLocation.left)
           ...widget.actions ?? [],
         _buildTextInput(context),
@@ -215,6 +219,18 @@ class MessageInputState extends State<MessageInput> {
     );
   }
 
+  Widget _buildDmCheckbox() {
+    return Row(
+      children: [
+        Checkbox(value: _sendAsDm, onChanged: (val) => setState(() {_sendAsDm = val;})),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+          child: Text('Send also as direct message'),
+        ),
+      ],
+    );
+  }
+
   AnimatedCrossFade _animateSendButton(BuildContext context) {
     return AnimatedCrossFade(
       crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
@@ -222,7 +238,34 @@ class MessageInputState extends State<MessageInput> {
           ? CrossFadeState.showFirst
           : CrossFadeState.showSecond,
       firstChild: _buildSendButton(context),
-      secondChild: SizedBox(),
+      secondChild: _buildIdleSendButton(context),
+      duration: Duration(milliseconds: 300),
+      alignment: Alignment.center,
+    );
+  }
+
+  Widget _buildExpandActionsButton() {
+    return AnimatedCrossFade(
+      crossFadeState:
+          _actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+      firstChild: IconButton(
+        onPressed: () {
+          setState(() {
+            _actionsShrunk = false;
+          });
+        },
+        icon: Icon(
+          StreamIcons.circle_left,
+          color: StreamChatTheme.of(context).accentColor,
+        ),
+      ),
+      secondChild: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          if (!widget.disableAttachments) _buildAttachmentButton(),
+          if (widget.editMessage == null) _buildCommandButton(),
+        ],
+      ),
       duration: Duration(milliseconds: 300),
       alignment: Alignment.center,
     );
@@ -230,9 +273,22 @@ class MessageInputState extends State<MessageInput> {
 
   Expanded _buildTextInput(BuildContext context) {
     return Expanded(
+      child: Center(
         child: LimitedBox(
           maxHeight: widget.maxHeight,
-        child: TextField(
+          child: Container(
+            clipBehavior: Clip.antiAlias,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(32.0),
+              border: Border.all(
+                color: Colors.grey,
+              ),
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                _buildAttachments(),
+                TextField(
                   key: Key('messageInputText'),
                   enabled: _inputEnabled,
                   minLines: null,
@@ -248,6 +304,7 @@ class MessageInputState extends State<MessageInput> {
 
                     setState(() {
                       _messageIsPresent = s.trim().isNotEmpty;
+                      _actionsShrunk = s.trim().isNotEmpty;
                     });
 
                     _commandsOverlay?.remove();
@@ -256,14 +313,31 @@ class MessageInputState extends State<MessageInput> {
                     _mentionsOverlay = null;
 
                     if (s.startsWith('/')) {
+                      var matchedCommandsList = StreamChannel.of(context)
+                          .channel
+                          .config
+                          .commands.where((element) => element.name == s.substring(1)).toList();
+
+                      if(matchedCommandsList.length == 1) {
+                        _chosenCommand = matchedCommandsList[0];
+                        textEditingController.clear();
+                        _messageIsPresent = false;
+                        setState(() {
+                          _commandEnabled = true;
+                        });
+                        _commandsOverlay.remove();
+                        _commandsOverlay = null;
+                      } else {
                         _commandsOverlay = _buildCommandsOverlayEntry();
                         Overlay.of(context).insert(_commandsOverlay);
                       }
+                    }
 
                     if (textEditingController.selection.isCollapsed &&
                         (s[textEditingController.selection.start - 1] == '@' ||
                             textEditingController.text
-                        .substring(0, textEditingController.selection.start)
+                                .substring(
+                                    0, textEditingController.selection.start)
                                 .split(' ')
                                 .last
                                 .contains('@'))) {
@@ -278,13 +352,56 @@ class MessageInputState extends State<MessageInput> {
                   },
                   style: Theme.of(context).textTheme.bodyText2,
                   autofocus: false,
+                  textAlignVertical: TextAlignVertical.center,
                   decoration: InputDecoration(
                     hintText: 'Write a message',
-            prefixText: '   ',
+                    prefixText: _commandEnabled ? null : '   ',
-            border: InputBorder.none,
+                    border: OutlineInputBorder(
+                        borderSide: BorderSide(color: Colors.transparent)),
+                    focusedBorder: OutlineInputBorder(
+                        borderSide: BorderSide(color: Colors.transparent)),
+                    enabledBorder: OutlineInputBorder(
+                        borderSide: BorderSide(color: Colors.transparent)),
+                    errorBorder: OutlineInputBorder(
+                        borderSide: BorderSide(color: Colors.transparent)),
+                    disabledBorder: OutlineInputBorder(
+                        borderSide: BorderSide(color: Colors.transparent)),
+                    contentPadding: EdgeInsets.all(8),
+                    prefixIcon: _commandEnabled
+                        ? Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 8.0),
+                            child: Chip(
+                              backgroundColor:
+                                  StreamChatTheme.of(context).accentColor,
+                              label: Text(
+                                _chosenCommand?.name ?? "",
+                                style: TextStyle(color: Colors.white),
+                              ),
+                              avatar: Icon(
+                                StreamIcons.lightning,
+                                color: Colors.white,
+                              ),
+                            ),
+                          )
+                        : null,
+                    suffixIcon: _commandEnabled
+                        ? IconButton(
+                            icon: Icon(Icons.cancel_outlined),
+                            onPressed: () {
+                              setState(() {
+                                _commandEnabled = false;
+                              });
+                            },
+                          )
+                        : null,
                   ),
                   textCapitalization: TextCapitalization.sentences,
                 ),
+              ],
+            ),
+          ),
+        ),
       ),
     );
   }
@@ -340,33 +457,53 @@ class MessageInputState extends State<MessageInput> {
         bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
         left: 0,
         right: 0,
-        child: Material(
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Card(
+            elevation: 2.0,
             color: StreamChatTheme.of(context).primaryColor,
+            clipBehavior: Clip.antiAlias,
             child: Container(
               constraints: BoxConstraints.loose(Size.fromHeight(400)),
               decoration: BoxDecoration(
-              boxShadow: [
+                  // boxShadow: [
-                BoxShadow(
+                  //   BoxShadow(
-                  spreadRadius: -8,
+                  //     spreadRadius: -8,
-                  blurRadius: 5.0,
+                  //     blurRadius: 5.0,
-                  offset: Offset(0, -4),
+                  //     offset: Offset(0, -4),
-                ),
+                  //   ),
-              ],
+                  // ],
                   color: StreamChatTheme.of(context).primaryColor,
-            ),
+                  borderRadius: BorderRadius.circular(8.0)),
               child: ListView(
                 padding: const EdgeInsets.all(0),
                 shrinkWrap: true,
-              children: commands
+                children: [
+                  if (commands.isNotEmpty)
+                    Padding(
+                      padding: const EdgeInsets.only(left: 8.0, top: 8.0),
+                      child: Row(
+                        children: [
+                          Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 8.0),
+                            child: Icon(StreamIcons.lightning,
+                                color: StreamChatTheme.of(context).accentColor),
+                          ),
+                          Text('Instant Commands')
+                        ],
+                      ),
+                    ),
+                  ...commands
                       .map(
                         (c) => ListTile(
                           title: Text.rich(
                             TextSpan(
-                          text: '${c.name}',
+                              text: '${c.name.capitalize()}',
                               style: TextStyle(fontWeight: FontWeight.bold),
                               children: [
                                 TextSpan(
-                              text: ' ${c.args}',
+                                  text: ' /${c.name} ${c.args}',
                                   style: TextStyle(
                                     fontWeight: FontWeight.w300,
                                   ),
@@ -374,13 +511,25 @@ class MessageInputState extends State<MessageInput> {
                               ],
                             ),
                           ),
-                      subtitle: Text(c.description),
+                          trailing: CircleAvatar(
+                            backgroundColor:
+                                StreamChatTheme.of(context).accentColor,
+                            child: Icon(
+                              StreamIcons.lightning,
+                              color: Colors.white,
+                              size: 12.5,
+                            ),
+                            maxRadius: 15,
+                          ),
+                          //subtitle: Text(c.description),
                           onTap: () {
                             _setCommand(c);
                           },
                         ),
                       )
                       .toList(),
+                ],
+              ),
             ),
           ),
         ),
@@ -417,8 +566,11 @@ class MessageInputState extends State<MessageInput> {
         bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
         left: 0,
         right: 0,
-        child: Material(
+        child: Card(
+          margin: EdgeInsets.all(8.0),
+          elevation: 2.0,
           color: StreamChatTheme.of(context).primaryColor,
+          clipBehavior: Clip.antiAlias,
           child: Container(
             constraints: BoxConstraints.loose(Size.fromHeight(400)),
             decoration: BoxDecoration(
@@ -443,7 +595,15 @@ class MessageInputState extends State<MessageInput> {
                               leading: UserAvatar(
                                 user: m.user,
                               ),
-                              title: Text('${m.user.name}'),
+                              title: Text(
+                                '${m.user.name}',
+                                style: TextStyle(fontWeight: FontWeight.bold),
+                              ),
+                              subtitle: Text('${m.userId}'),
+                              trailing: Icon(
+                                Icons.alternate_email,
+                                color: StreamChatTheme.of(context).accentColor,
+                              ),
                               onTap: () {
                                 _mentionedUsers.add(m.user);
 
@@ -474,12 +634,12 @@ class MessageInputState extends State<MessageInput> {
   }
 
   void _setCommand(Command c) {
-    textEditingController.value = TextEditingValue(
+    textEditingController.clear();
-      text: '/${c.name} ',
+    setState(() {
-      selection: TextSelection.collapsed(
+      _chosenCommand = c;
-        offset: c.name.length + 2,
+      _commandEnabled = true;
-      ),
+      _messageIsPresent = false;
-    );
+    });
     _commandsOverlay?.remove();
     _commandsOverlay = null;
   }
@@ -498,8 +658,12 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildAttachments() {
-    return Wrap(
+    return _attachments.isEmpty
-      direction: Axis.horizontal,
+        ? Container()
+        : LimitedBox(
+            maxHeight: 76.0,
+            child: ListView(
+              scrollDirection: Axis.horizontal,
               children: _attachments
                   .map(
                     (attachment) => Padding(
@@ -508,11 +672,14 @@ class MessageInputState extends State<MessageInput> {
                         borderRadius: BorderRadius.circular(10),
                         child: Stack(
                           children: <Widget>[
-                    Container(
+                            AspectRatio(
+                              aspectRatio: 1.0,
+                              child: Container(
                                 height: 50,
                                 width: 50,
                                 child: _buildAttachment(attachment),
                               ),
+                            ),
                             _buildRemoveButton(attachment),
                             attachment.uploaded
                                 ? SizedBox()
@@ -530,6 +697,7 @@ class MessageInputState extends State<MessageInput> {
                     ),
                   )
                   .toList(),
+            ),
           );
   }
 
@@ -602,20 +770,39 @@ class MessageInputState extends State<MessageInput> {
     }
   }
 
-  Material _buildAttachmentButton() {
+  Widget _buildCommandButton() {
-    return Material(
+    return Center(
-      clipBehavior: Clip.hardEdge,
+      child: InkWell(
-      shape: RoundedRectangleBorder(
+        child: Padding(
-        borderRadius: BorderRadius.circular(32),
+          padding: const EdgeInsets.only(
+              left: 4.0, right: 8.0, top: 8.0, bottom: 8.0),
+          child: Icon(StreamIcons.lightning),
         ),
-      color: Colors.transparent,
+        onTap: () {
-      child: IconButton(
+          if (_commandsOverlay == null) {
-        onPressed: () {
+            _commandsOverlay = _buildCommandsOverlayEntry();
+            Overlay.of(context).insert(_commandsOverlay);
+          } else {
+            _commandsOverlay?.remove();
+            _commandsOverlay = null;
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildAttachmentButton() {
+    var padding = widget.editMessage == null ? 4.0 : 8.0;
+    return Center(
+      child: InkWell(
+        child: Padding(
+          padding: EdgeInsets.only(
+              left: 8.0, right: padding, top: 8.0, bottom: 8.0),
+          child: Icon(StreamIcons.attach),
+        ),
+        onTap: () {
           showAttachmentModal();
         },
-        icon: Icon(
-          Icons.add_circle_outline,
-        ),
       ),
     );
   }
@@ -832,37 +1019,61 @@ class MessageInputState extends State<MessageInput> {
     return res.file;
   }
 
+  Widget _buildIdleSendButton(BuildContext context) {
+    return IconTheme(
+      data:
+          StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: Center(
+            child: InkWell(
+          onTap: () {
+            sendMessage();
+          },
+          child: Icon(
+            StreamIcons.send_message,
+            color: Colors.grey,
+          ),
+        )),
+      ),
+    );
+  }
+
   Widget _buildSendButton(BuildContext context) {
     return IconTheme(
       data:
           StreamChatTheme.of(context).channelTheme.messageInputButtonIconTheme,
-      child: Material(
+      child: Center(
-        clipBehavior: Clip.hardEdge,
+        child: Padding(
-        shape: RoundedRectangleBorder(
+          padding: const EdgeInsets.all(8.0),
-          borderRadius: BorderRadius.circular(32),
+          child: InkWell(
-        ),
+            onTap: () {
-        color: Colors.transparent,
-        child: IconButton(
-          key: Key('sendButton'),
-          onPressed: () {
               sendMessage();
             },
-          icon: Icon(
+            child: Transform.rotate(
-            Icons.send,
+              angle: widget.editMessage == null ? -pi / 2 : 0,
+              child: Icon(
+                widget.editMessage == null ? StreamIcons.send_message : StreamIcons.check_send,
                 color: StreamChatTheme.of(context).accentColor,
               ),
             ),
           ),
+        ),
+      ),
     );
   }
 
   /// Sends the current message
   void sendMessage() async {
-    final text = textEditingController.text.trim();
+    var text = textEditingController.text.trim();
     if (text.isEmpty && _attachments.isEmpty) {
       return;
     }
 
+    if (_commandEnabled) {
+      text = '/${_chosenCommand.name} ' + text;
+    }
+
     final attachments = List<_SendingAttachment>.from(_attachments);
 
     textEditingController.clear();
@@ -871,6 +1082,7 @@ class MessageInputState extends State<MessageInput> {
     setState(() {
       _messageIsPresent = false;
       _typingStarted = false;
+      _commandEnabled = false;
     });
 
     _commandsOverlay?.remove();
@@ -896,6 +1108,7 @@ class MessageInputState extends State<MessageInput> {
         attachments: _getAttachments(attachments).toList(),
         mentionedUsers:
             _mentionedUsers.where((u) => text.contains('@${u.name}')).toList(),
+        showInChannel: widget.parentMessage != null ? _sendAsDm : null,
       );
     }
 
@@ -1016,3 +1229,9 @@ class _SendingAttachment {
     this.uploaded = false,
   });
 }
+
+extension StringExtension on String {
+  String capitalize() {
+    return "${this[0].toUpperCase()}${this.substring(1)}";
+  }
+}

pubspec.yaml

@@ -6,7 +6,7 @@ repository: https://github.com/GetStream/stream-chat-flutter
 issue_tracker: https://github.com/GetStream/stream-chat-flutter/issues
 
 environment:
-  sdk: ">=2.3.0 <3.0.0"
+  sdk: ">=2.6.0 <3.0.0"
 
 dependencies:
   flutter: