Refactor to add message text area into a flickable

retroshare-qml-app/src/ChatView.qml

@@ -117,6 +117,7 @@ Item
 
 		RowLayout {
 			id: msgComposer
+			property var styles: StyleChat.inferiorPanel.msgComposer
 
 			anchors.verticalCenter: parent.verticalCenter
 			anchors.left: attachButton.right
@@ -126,37 +127,50 @@ Item
 				   (attachButton.width + attachButton.anchors.margins) -
 				   (emojiButton.width + emojiButton.anchors.margins)
 
+			height: (flickable.contentHeight <  styles.maxHeight)? flickable.contentHeight : styles.maxHeight
+
+			Flickable {
+				id: flickable
+				anchors.fill: parent
+				flickableDirection: Flickable.VerticalFlick
+
+				width: parent.width
+
+				contentWidth: msgField.width
+				contentHeight: msgField.height
+				contentY: contentHeight - height
+
+				ScrollBar.vertical: ScrollBar {}
+
+				clip: true
 
 				TextArea
 				{
 					property var styles: StyleChat.inferiorPanel.msgComposer
 					id: msgField
 
-				height:
+					height: contentHeight + font.pixelSize
-					(contentHeight > font.pixelSize)?
-						contentHeight +font.pixelSize : parent.styles.height
 
 					width: parent.width
 
-				Layout.maximumHeight: chatView.height / styles.maxHeight
-
 					placeholderText: styles.placeHolder
 					background: styles.background
 
 					wrapMode: TextEdit.Wrap
 
 					onTextChanged: {
-					if (msgComposer.length == 0)
+						if (msgField.length == 0)
 						{
 							sendButton.state = ""
 						}
-					else if (msgComposer.length > 0)
+						else if (msgField.length > 0)
 						{
 							sendButton.state = "SENDBTN"
 						}
 					}
 
 				}
+			}
 
 		}
 
@@ -199,9 +213,9 @@ Item
 			onClicked:
 			{
 				if (sendButton.state == "SENDBTN" ) {
-					var jsonData = {"chat_id":chatView.chatId, "msg":msgComposer.text}
+					var jsonData = {"chat_id":chatView.chatId, "msg":msgField.text}
 					rsApi.request( "/chat/send_message", JSON.stringify(jsonData),
-								   function(par) { msgComposer.text = ""; } )
+								   function(par) { msgField.text = ""; } )
 				}
 			}
 

retroshare-qml-app/src/styles/ChatBubblesStyle.qml

@@ -34,7 +34,7 @@ QtObject {
 
 		property QtObject msgComposer: QtObject{
 			readonly property string placeHolder: "Send message..."
-			readonly property int maxHeight: 2 // chatListView/maxHeight
+			readonly property int maxHeight: 180
 
 			property QtObject background: Rectangle {
 				color: "transparent"