Unstable.

tests/languages/en.ts

@@ -26,6 +26,13 @@
         <translation>Search contact or enter SIP address</translation>
     </message>
 </context>
+<context>
+    <name>Timeline</name>
+    <message>
+        <source>timelineTitle</source>
+        <translation>Previously</translation>
+    </message>
+</context>
 <context>
     <name>contacts</name>
     <message>

tests/languages/fr.ts

@@ -26,6 +26,13 @@
         <translation>Rechercher un contact ou entrer une adresse SIP</translation>
     </message>
 </context>
+<context>
+    <name>Timeline</name>
+    <message>
+        <source>timelineTitle</source>
+        <translation>Précédemment</translation>
+    </message>
+</context>
 <context>
     <name>contacts</name>
     <message>

tests/linphone.pro

@@ -21,12 +21,15 @@ TRANSLATIONS = \
 lupdate_only{
   # Each component folder must be added explicitly.
   SOURCES = \
+    ui/components/chat/*.qml \
     ui/components/collapse/*.qml \
     ui/components/contact/*.qml \
     ui/components/dialog/*.qml \
     ui/components/form/*.qml \
     ui/components/misc/*.qml \
+    ui/components/scrollBar/*.qml \
     ui/components/select/*.qml \
+    ui/components/timeline/*.qml \
     ui/views/*.qml \
     ui/views/mainWindow/*.qml
 }

tests/resources.qrc

@@ -7,6 +7,10 @@
     <file>ui/components/timeline/Timeline.qml</file>
     <file>ui/components/select/SelectContact.qml</file>
     <file>ui/components/collapse/Collapse.qml</file>
+    <file>ui/components/chat/IncomingMessage.qml</file>
+    <file>ui/components/chat/Chat.qml</file>
+    <file>ui/components/chat/OutgoingMessage.qml</file>
+    <file>ui/components/chat/Message.qml</file>
     <file>ui/components/contact/Contact.qml</file>
     <file>ui/components/contact/ShortContactDescription.qml</file>
     <file>ui/components/contact/Avatar.qml</file>

tests/ui/components/chat/Chat.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+
+import 'qrc:/ui/components/scrollBar'
+
+ListView {
+    ScrollBar.vertical: ForceScrollBar { }
+    boundsBehavior: Flickable.StopAtBounds
+    clip: true
+    highlightRangeMode: ListView.ApplyRange
+    spacing: 10
+
+    model: ListModel {
+        ListElement { $timestamp: 1465389121; $type: 'message'; $message: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef  e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' }
+        ListElement { $type: 'message'; $message: 'Perfect!' }
+    }
+
+    delegate: Rectangle {
+        anchors.left: parent.left
+        anchors.leftMargin: 18
+        anchors.right: parent.right
+        anchors.rightMargin: 18
+
+        // Unable to use `height` property.
+        // The height is given by message height.
+        implicitHeight: layout.height
+        width: parent.width
+
+        RowLayout {
+            id: layout
+
+            // The height is computed with the message height.
+            // Unable to use `height` and `implicitHeight` property.
+            width: parent.width
+
+            Rectangle {
+                Layout.alignment: Qt.AlignTop
+                Layout.preferredHeight: 15
+                Layout.preferredWidth: 42
+                color: 'blue'
+            }
+
+            Loader {
+                Layout.fillWidth: true
+                id: loader
+                source: 'qrc:/ui/components/chat/IncomingMessage.qml'
+            }
+        }
+    }
+}

tests/ui/components/chat/IncomingMessage.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import 'qrc:/ui/components/contact'
+
+Message {
+    backgroundColor: '#BFBFBF'
+    Layout.fillWidth: true
+}

tests/ui/components/chat/Message.qml

+import QtQuick 2.7
+
+Item {
+    property alias backgroundColor: rectangle.color
+
+    id: container
+    implicitHeight: text.contentHeight + text.padding * 2
+    width: parent.width - text.padding * 2
+
+    Rectangle {
+        id: rectangle
+        height: parent.height
+        radius: 4
+        width: (
+            text.contentWidth < parent.width
+                ? text.contentWidth
+                : parent.width
+        ) + text.padding * 2
+    }
+
+    Text {
+        anchors.left: container.left
+        anchors.right: container.right
+        padding: 8
+        id: text
+        text: $message
+        wrapMode: Text.Wrap
+    }
+}

tests/ui/components/chat/OutgoingMessage.qml

+import QtQuick 2.7

tests/ui/views/mainWindow/conversation.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts 1.3
 import 'qrc:/ui/components/contact'
 import 'qrc:/ui/components/form'
 import 'qrc:/ui/components/scrollBar'
+import 'qrc:/ui/components/chat'
 
 ColumnLayout  {
     spacing: 0
@@ -112,15 +113,11 @@ ColumnLayout  {
         border.width: 1
         id: messagesArea
 
-        ListView {
+        Chat {
             ScrollBar.vertical: ForceScrollBar { }
-            anchors.fill: parent
             anchors.bottomMargin: messagesArea.border.width
+            anchors.fill: parent
             anchors.topMargin: messagesArea.border.width
-            boundsBehavior: Flickable.StopAtBounds
-            clip: true
-            highlightRangeMode: ListView.ApplyRange
-            spacing: 1
         }
     }