Merge pull request #4591 from NicKoehler/multiline-chat

Multiline chat

flutter/lib/common/widgets/chat_page.dart

@@ -50,31 +50,21 @@ 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),
-              decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(10.0),
-                color: Theme.of(context).colorScheme.background,
-              ),
-              child: Stack(
               children: [
                 LayoutBuilder(builder: (context, constraints) {
                   final chat = DashChat(
-                      onSend: (chatMsg) {
+                    onSend: chatModel.send,
-                        chatModel.send(chatMsg);
-                        chatModel.inputNode.requestFocus();
-                      },
                     currentUser: chatModel.me,
-                      messages: chatModel
+                    messages:
-                              .messages[chatModel.currentID]?.chatMessages ??
+                        chatModel.messages[chatModel.currentID]?.chatMessages ??
                             [],
                     inputOptions: InputOptions(
-                        sendOnEnter: true,
                       focusNode: chatModel.inputNode,
+                      textController: chatModel.textController,
                       inputTextStyle: TextStyle(
                           fontSize: 14,
-                            color:
+                          color: Theme.of(context).textTheme.titleLarge?.color),
-                                Theme.of(context).textTheme.titleLarge?.color),
                       inputDecoration: InputDecoration(
                         isDense: true,
                         hintText: translate('Write a message'),
@@ -123,7 +113,6 @@ class ChatPage extends StatelessWidget implements PageShape {
                       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,
@@ -144,8 +133,7 @@ class ChatPage extends StatelessWidget implements PageShape {
                         padding: EdgeInsets.all(12),
                         child: Row(
                           children: [
-                              Icon(Icons.account_circle,
+                            Icon(Icons.account_circle, color: MyTheme.accent80),
-                                  color: MyTheme.accent80),
                             SizedBox(width: 5),
                             Text(
                               "${currentUser.firstName}   ${currentUser.id}",
@@ -155,8 +143,7 @@ class ChatPage extends StatelessWidget implements PageShape {
                         ),
                       ),
               ],
-              ),
+            ).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);
+
+        String trimmedText = textController.text.trim();
+
+        // don't send empty message
+        if (trimmedText.isEmpty) {
+          textController.text = trimmedText;
         }
 
-  FocusNode inputNode = FocusNode();
+        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() {