qt-chat-app

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

MessageBubble.qml (2688B)

      1 import QtQuick
      2 import QtQuick.Layouts
      3 import "../styles"
      4 
      5 Item {
      6     id: root
      7     width: parent.width
      8     height: childrenRect.height
      9 
     10     property var messageData: null
     11     property bool isOutgoing: messageData ? messageData.is_outgoing : false
     12 
     13     Item {
     14         id: contentContainer
     15         width: parent.width
     16         height: childrenRect.height
     17 
     18         RowLayout {
     19             width: parent.width
     20             spacing: 8
     21 
     22             // Left spacer for outgoing messages
     23             Item {
     24                 Layout.fillWidth: !isOutgoing
     25                 visible: !isOutgoing
     26             }
     27 
     28             // Message content
     29             ColumnLayout {
     30                 id: bubbleColumn
     31                 spacing: 4
     32                 Layout.maximumWidth: contentContainer.width * 0.7
     33 
     34             // Attachment preview (if available)
     35             Loader {
     36                 active: messageData && messageData.attachments !== undefined
     37                 sourceComponent: attachmentComponent
     38                 Layout.alignment: isOutgoing ? Qt.AlignRight : Qt.AlignLeft
     39             }
     40 
     41             // Message bubble
     42             Rectangle {
     43                 id: bubble
     44                 Layout.alignment: isOutgoing ? Qt.AlignRight : Qt.AlignLeft
     45                 width: messageText.width + 24
     46                 height: messageText.height + 16
     47                 radius: TelegramStyle.bubbleRadius
     48                 color: isOutgoing ? TelegramStyle.outgoingBubble : TelegramStyle.incomingBubble
     49                 border.color: isOutgoing ? "transparent" : TelegramStyle.divider
     50                 border.width: 1
     51 
     52                 Text {
     53                     id: messageText
     54                     anchors.centerIn: parent
     55                     text: messageData ? messageData.content : ""
     56                     wrapMode: Text.WordWrap
     57                     font.pixelSize: TelegramStyle.fontSizeNormal
     58                     color: TelegramStyle.textPrimary
     59                     width: Math.min(implicitWidth, contentContainer.width * 0.6)
     60                 }
     61             }
     62 
     63             // Timestamp
     64             Text {
     65                 Layout.alignment: isOutgoing ? Qt.AlignRight : Qt.AlignLeft
     66                 text: messageData ? messageData.sent_at : ""
     67                 font.pixelSize: TelegramStyle.fontSizeSmall
     68                 color: TelegramStyle.textSecondary
     69             }
     70         }
     71 
     72             // Right spacer for incoming messages
     73             Item {
     74                 Layout.fillWidth: isOutgoing
     75                 visible: isOutgoing
     76             }
     77         }
     78     }
     79 
     80     Component {
     81         id: attachmentComponent
     82 
     83         AttachmentPreview {
     84             attachments: messageData ? messageData.attachments : []
     85         }
     86     }
     87 }