Merge pull request #4591 from NicKoehler/multiline-chat

Multiline chat

flutter/lib/common/widgets/chat_page.dart

@@ -50,113 +50,100 @@ class ChatPage extends StatelessWidget implements PageShape {
         child: Consumer<ChatModel>(
           builder: (context, chatModel, child) {
             final currentUser = chatModel.currentUser;
-            return Container(
+            return Stack(
-              padding: EdgeInsets.symmetric(vertical: 5.0),
+              children: [
-              decoration: BoxDecoration(
+                LayoutBuilder(builder: (context, constraints) {
-                borderRadius: BorderRadius.circular(10.0),
+                  final chat = DashChat(
-                color: Theme.of(context).colorScheme.background,
+                    onSend: chatModel.send,
-              ),
+                    currentUser: chatModel.me,
-              child: Stack(
+                    messages:
-                children: [
+                        chatModel.messages[chatModel.currentID]?.chatMessages ??
-                  LayoutBuilder(builder: (context, constraints) {
+                            [],
-                    final chat = DashChat(
+                    inputOptions: InputOptions(
-                      onSend: (chatMsg) {
+                      focusNode: chatModel.inputNode,
-                        chatModel.send(chatMsg);
+                      textController: chatModel.textController,
-                        chatModel.inputNode.requestFocus();
+                      inputTextStyle: TextStyle(
-                      },
+                          fontSize: 14,
-                      currentUser: chatModel.me,
+                          color: Theme.of(context).textTheme.titleLarge?.color),
-                      messages: chatModel
+                      inputDecoration: InputDecoration(
-                              .messages[chatModel.currentID]?.chatMessages ??
+                        isDense: true,
-                          [],
+                        hintText: translate('Write a message'),
-                      inputOptions: InputOptions(
+                        filled: true,
-                        sendOnEnter: true,
+                        fillColor: Theme.of(context).colorScheme.background,
-                        focusNode: chatModel.inputNode,
+                        contentPadding: EdgeInsets.all(10),
-                        inputTextStyle: TextStyle(
+                        border: OutlineInputBorder(
-                            fontSize: 14,
+                          borderRadius: BorderRadius.circular(10.0),
-                            color:
+                          borderSide: const BorderSide(
-                                Theme.of(context).textTheme.titleLarge?.color),
+                            width: 1,
-                        inputDecoration: InputDecoration(
+                            style: BorderStyle.solid,
-                          isDense: true,
-                          hintText: translate('Write a message'),
-                          filled: true,
-                          fillColor: Theme.of(context).colorScheme.background,
-                          contentPadding: EdgeInsets.all(10),
-                          border: OutlineInputBorder(
-                            borderRadius: BorderRadius.circular(10.0),
-                            borderSide: const BorderSide(
-                              width: 1,
-                              style: BorderStyle.solid,
-                            ),
                           ),
                         ),
-                        sendButtonBuilder: defaultSendButton(
-                          padding:
-                              EdgeInsets.symmetric(horizontal: 6, vertical: 0),
-                          color: MyTheme.accent,
-                          icon: Icons.send_rounded,
-                        ),
                       ),
-                      messageOptions: MessageOptions(
+                      sendButtonBuilder: defaultSendButton(
-                        showOtherUsersAvatar: false,
+                        padding:
-                        showOtherUsersName: false,
+                            EdgeInsets.symmetric(horizontal: 6, vertical: 0),
-                        textColor: Colors.white,
+                        color: MyTheme.accent,
-                        maxWidth: constraints.maxWidth * 0.7,
+                        icon: Icons.send_rounded,
-                        messageTextBuilder: (message, _, __) {
-                          final isOwnMessage = message.user.id.isBlank!;
-                          return Column(
-                            crossAxisAlignment: isOwnMessage
-                                ? CrossAxisAlignment.end
-                                : CrossAxisAlignment.start,
-                            children: <Widget>[
-                              Text(message.text,
-                                  style: TextStyle(color: Colors.white)),
-                              Text(
-                                "${message.createdAt.hour}:${message.createdAt.minute.toString().padLeft(2, '0')}",
-                                style: TextStyle(
-                                  color: Colors.white,
-                                  fontSize: 8,
-                                ),
-                              ).marginOnly(top: 3),
-                            ],
-                          );
-                        },
-                        messageDecorationBuilder:
-                            (message, previousMessage, nextMessage) {
-                          final isOwnMessage = message.user.id.isBlank!;
-                          print("message.user.id = ${message.user.id}\n");
-                          return defaultMessageDecoration(
-                            color:
-                                isOwnMessage ? MyTheme.accent : Colors.blueGrey,
-                            borderTopLeft: 8,
-                            borderTopRight: 8,
-                            borderBottomRight: isOwnMessage ? 2 : 8,
-                            borderBottomLeft: isOwnMessage ? 8 : 2,
-                          );
-                        },
                       ),
-                    );
+                    ),
-                    return SelectionArea(child: chat);
+                    messageOptions: MessageOptions(
-                  }),
+                      showOtherUsersAvatar: false,
-                  desktopType == DesktopType.cm ||
+                      showOtherUsersName: false,
-                          chatModel.currentID == ChatModel.clientModeID
+                      textColor: Colors.white,
-                      ? SizedBox.shrink()
+                      maxWidth: constraints.maxWidth * 0.7,
-                      : Padding(
+                      messageTextBuilder: (message, _, __) {
-                          padding: EdgeInsets.all(12),
+                        final isOwnMessage = message.user.id.isBlank!;
-                          child: Row(
+                        return Column(
-                            children: [
+                          crossAxisAlignment: isOwnMessage
-                              Icon(Icons.account_circle,
+                              ? CrossAxisAlignment.end
-                                  color: MyTheme.accent80),
+                              : CrossAxisAlignment.start,
-                              SizedBox(width: 5),
+                          children: <Widget>[
-                              Text(
+                            Text(message.text,
-                                "${currentUser.firstName}   ${currentUser.id}",
+                                style: TextStyle(color: Colors.white)),
-                                style: TextStyle(color: MyTheme.accent),
+                            Text(
+                              "${message.createdAt.hour}:${message.createdAt.minute.toString().padLeft(2, '0')}",
+                              style: TextStyle(
+                                color: Colors.white,
+                                fontSize: 8,
                               ),
-                            ],
+                            ).marginOnly(top: 3),
-                          ),
+                          ],
+                        );
+                      },
+                      messageDecorationBuilder:
+                          (message, previousMessage, nextMessage) {
+                        final isOwnMessage = message.user.id.isBlank!;
+                        return defaultMessageDecoration(
+                          color:
+                              isOwnMessage ? MyTheme.accent : Colors.blueGrey,
+                          borderTopLeft: 8,
+                          borderTopRight: 8,
+                          borderBottomRight: isOwnMessage ? 2 : 8,
+                          borderBottomLeft: isOwnMessage ? 8 : 2,
+                        );
+                      },
+                    ),
+                  );
+                  return SelectionArea(child: chat);
+                }),
+                desktopType == DesktopType.cm ||
+                        chatModel.currentID == ChatModel.clientModeID
+                    ? SizedBox.shrink()
+                    : Padding(
+                        padding: EdgeInsets.all(12),
+                        child: Row(
+                          children: [
+                            Icon(Icons.account_circle, color: MyTheme.accent80),
+                            SizedBox(width: 5),
+                            Text(
+                              "${currentUser.firstName}   ${currentUser.id}",
+                              style: TextStyle(color: MyTheme.accent),
+                            ),
+                          ],
                         ),
-                ],
+                      ),
-              ),
+              ],
-            );
+            ).paddingOnly(bottom: 8);
           },
         ),
       ),

flutter/lib/models/chat_model.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:dash_chat_2/dash_chat_2.dart';
 import 'package:draggable_float_widget/draggable_float_widget.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_hbb/models/platform_model.dart';
 import 'package:get/get_rx/src/rx_types/rx_types.dart';
 import 'package:get/get.dart';
@@ -42,6 +43,14 @@ class ChatModel with ChangeNotifier {
 
   Rx<VoiceCallStatus> get voiceCallStatus => _voiceCallStatus;
 
+  TextEditingController textController = TextEditingController();
+
+  @override
+  void dispose() {
+    textController.dispose();
+    super.dispose();
+  }
+
   final ChatUser me = ChatUser(
     id: "",
     firstName: translate("Me"),
@@ -75,12 +84,36 @@ class ChatModel with ChangeNotifier {
   final WeakReference<FFI> parent;
 
   late final SessionID sessionId;
+  late FocusNode inputNode;
 
   ChatModel(this.parent) {
     sessionId = parent.target!.sessionId;
-  }
+    inputNode = FocusNode(
+      onKey: (node, event) {
+        bool isShiftPressed = event.isKeyPressed(LogicalKeyboardKey.shiftLeft);
+        bool isEnterPressed = event.isKeyPressed(LogicalKeyboardKey.enter);
 
-  FocusNode inputNode = FocusNode();
+        String trimmedText = textController.text.trim();
+
+        // don't send empty message
+        if (trimmedText.isEmpty) {
+          textController.text = trimmedText;
+        }
+
+        if (isEnterPressed && !isShiftPressed) {
+          final ChatMessage message = ChatMessage(
+            text: trimmedText,
+            user: me,
+            createdAt: DateTime.now(),
+          );
+          send(message);
+          textController.text = "";
+        }
+
+        return KeyEventResult.ignored;
+      },
+    );
+  }
 
   ChatUser get currentUser {
     final user = messages[currentID]?.chatUser;
@@ -313,6 +346,7 @@ class ChatModel with ChangeNotifier {
       }
     }
     notifyListeners();
+    inputNode.requestFocus();
   }
 
   close() {