diff --git a/src/qml/Component/ChatBox/ChatBar.qml b/src/qml/Component/ChatBox/ChatBar.qml
index af07db51f..f4b428513 100644
--- a/src/qml/Component/ChatBox/ChatBar.qml
+++ b/src/qml/Component/ChatBox/ChatBar.qml
@@ -10,15 +10,47 @@ import QtQuick.Window 2.15
 import org.kde.kirigami 2.18 as Kirigami
 import org.kde.neochat 1.0
 
+/**
+ * @brief The component which handles the message sending.
+ *
+ * The ChatBox deals with laying out the visual elements with the ChatBar handling
+ * the core functionality of displaying the current message composition before sending.
+ *
+ * This includes support for the following message types:
+ *  - text
+ *  - media (video, image, file)
+ *  - emojis/stickers
+ *  - location
+ *
+ * In addition, when replying, this component supports showing the message that is being
+ * replied to.
+ *
+ * @note There is no edit functionality here this, is handled inline by the timeline
+ *       text delegate.
+ *
+ * @sa ChatBox
+ */
 QQC2.Control {
     id: root
 
+    /**
+     * @brief The current room that user is viewing.
+     */
+    property var currentRoom
+
+    /**
+     * @brief The QQC2.TextArea object.
+     *
+     * @sa QQC2.TextArea
+     */
     property alias textField: textField
-    property bool isReplying: currentRoom.chatBoxReplyId.length > 0
-    property bool attachmentPaneVisible: currentRoom.chatBoxAttachmentPath.length > 0
-
-    signal messageSent()
 
+    /**
+     * @brief The list of actions in the ChatBar.
+     *
+     * Each of these will be visualised in the ChatBar so new actions can be added
+     * by appending to this list.
+     */
     property list<Kirigami.Action> actions : [
         Kirigami.Action {
             id: attachmentAction
@@ -95,6 +127,11 @@ QQC2.Control {
         }
     ]
 
+    /**
+     * @brief A message has been sent from the chat bar.
+     */
+    signal messageSent()
+
     leftPadding: 0
     rightPadding: 0
     topPadding: 0
@@ -237,8 +274,8 @@ QQC2.Control {
                 anchors.rightMargin: root.width > chatBarSizeHelper.currentWidth ? 0 : (chatBarScrollView.QQC2.ScrollBar.vertical.visible ? Kirigami.Units.largeSpacing * 3.5 : Kirigami.Units.largeSpacing)
 
                 active: visible
-                visible: root.isReplying || root.attachmentPaneVisible
-                sourceComponent: root.isReplying ? replyPane : attachmentPane
+                visible: root.currentRoom.chatBoxReplyId.length > 0 || root.currentRoom.chatBoxAttachmentPath.length > 0
+                sourceComponent: root.currentRoom.chatBoxReplyId.length > 0 ? replyPane : attachmentPane
             }
             Component {
                 id: replyPane
@@ -301,7 +338,7 @@ QQC2.Control {
         anchors.right: parent.right
         anchors.rightMargin: (root.width - chatBarSizeHelper.currentWidth) / 2 + Kirigami.Units.largeSpacing + (chatBarScrollView.QQC2.ScrollBar.vertical.visible && !(root.width > chatBarSizeHelper.currentWidth) ? Kirigami.Units.largeSpacing * 2.5 : 0)
 
-        visible: root.isReplying
+        visible: root.currentRoom.chatBoxReplyId.length > 0
         display: QQC2.AbstractButton.IconOnly
         action: Kirigami.Action {
             text: i18nc("@action:button", "Cancel reply")
diff --git a/src/qml/Component/ChatBox/ChatBox.qml b/src/qml/Component/ChatBox/ChatBox.qml
index ebc3026de..3648375d9 100644
--- a/src/qml/Component/ChatBox/ChatBox.qml
+++ b/src/qml/Component/ChatBox/ChatBox.qml
@@ -9,13 +9,44 @@ import QtQuick.Layouts 1.15
 import org.kde.kirigami 2.15 as Kirigami
 import org.kde.neochat 1.0
 
+/**
+ * @brief A component for typing and sending chat messages.
+ *
+ * This is designed to go to the bottom of the timeline and provides all the functionality
+ * required for the user to send messages to the room.
+ *
+ * This includes support for the following message types:
+ *  - text
+ *  - media (video, image, file)
+ *  - emojis/stickers
+ *  - location
+ *
+ * In addition when replying this component supports showing the message that is being
+ * replied to.
+ *
+ * @note The main role of this component is to layout the elements. The main functionality
+ *       is handled by ChatBar
+ *
+ * @sa ChatBar
+ */
 ColumnLayout {
     id: chatBox
 
-    signal messageSent()
+    /**
+     * @brief The current room that user is viewing.
+     */
+    property var currentRoom
 
+    /**
+     * @brief The chatBar object
+     */
     property alias chatBar: chatBar
 
+    /**
+     * @brief A message has been sent from the chat bar.
+     */
+    signal messageSent()
+
     spacing: 0
 
     Kirigami.Theme.colorSet: Kirigami.Theme.View
@@ -44,6 +75,8 @@ ColumnLayout {
         // lineSpacing is height+leading, so subtract leading once since leading only exists between lines.
         Layout.maximumHeight: chatBarFontMetrics.lineSpacing * 8 - chatBarFontMetrics.leading + textField.topPadding + textField.bottomPadding
 
+        currentRoom: root.currentRoom
+
         FontMetrics {
             id: chatBarFontMetrics
             font: chatBar.textField.font
diff --git a/src/qml/Page/RoomPage.qml b/src/qml/Page/RoomPage.qml
index a62f6e2f5..2a07c7460 100644
--- a/src/qml/Page/RoomPage.qml
+++ b/src/qml/Page/RoomPage.qml
@@ -95,6 +95,7 @@ Kirigami.Page {
         sourceComponent: ChatBox {
             id: chatBox
             width: parent.width
+            currentRoom: currentRoom
             onMessageSent: {
                 if (!timelineViewLoader.item.atYEnd) {
                     timelineViewLoader.item.goToLastMessage();