feat: Improve showing tools in chat (#235)

ChatView/qml/ChatItem.qml

@@ -48,7 +48,6 @@ Rectangle {
 
     property bool isUserMessage: false
     property int messageIndex: -1
-    property real listViewContentY: 0
 
     signal resetChatToMessage(int index)
 
@@ -104,8 +103,6 @@ Rectangle {
                     id: codeBlockComponent
                     CodeBlockComponent {
                         itemData: msgCreatorDelegate.modelData
-                        blockStart: root.y + msgCreatorDelegate.y
-                        currentContentY: root.listViewContentY
                     }
                 }
             }

ChatView/qml/RootItem.qml

@@ -95,27 +95,14 @@ ChatRootView {
             boundsBehavior: Flickable.StopAtBounds
             cacheBuffer: 2000
 
-            delegate: ChatItem {
+
+            delegate: Loader {
                 required property var model
                 required property int index
 
                 width: ListView.view.width - scroll.width
-                msgModel: root.chatModel.processMessageContent(model.content)
-                messageAttachments: model.attachments
-                isUserMessage: model.roleType === ChatModel.User
-                messageIndex: index
-                listViewContentY: chatListView.contentY
-                textFontFamily: root.textFontFamily
-                codeFontFamily: root.codeFontFamily
-                codeFontSize: root.codeFontSize
-                textFontSize: root.textFontSize
-                textFormat: root.textFormat
 
-                onResetChatToMessage: function(index) {
-                    messageInput.text = model.content
-                    messageInput.cursorPosition = model.content.length
-                    root.chatModel.resetModelTo(index)
-                }
+                sourceComponent: model.roleType === ChatModel.Tool ? toolMessageComponent : chatItemComponent
             }
 
             header: Item {
@@ -136,6 +123,36 @@ ChatRootView {
                     root.scrollToBottom()
                 }
             }
+
+            Component {
+                id: chatItemComponent
+
+                ChatItem {
+                    msgModel: root.chatModel.processMessageContent(model.content)
+                    messageAttachments: model.attachments
+                    isUserMessage: model.roleType === ChatModel.User
+                    messageIndex: index
+                    textFontFamily: root.textFontFamily
+                    codeFontFamily: root.codeFontFamily
+                    codeFontSize: root.codeFontSize
+                    textFontSize: root.textFontSize
+                    textFormat: root.textFormat
+
+                    onResetChatToMessage: function(idx) {
+                        messageInput.text = model.content
+                        messageInput.cursorPosition = model.content.length
+                        root.chatModel.resetModelTo(idx)
+                    }
+                }
+            }
+
+            Component {
+                id: toolMessageComponent
+
+                ToolStatusItem {
+                    toolContent: model.content
+                }
+            }
         }
 
         ScrollView {

ChatView/qml/ToolStatusItem.qml

@@ -0,0 +1,126 @@
+/*
+ * Copyright (C) 2025 Petr Mironychev
+ *
+ * This file is part of QodeAssist.
+ *
+ * QodeAssist is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * QodeAssist is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with QodeAssist. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+
+Rectangle {
+    id: root
+
+    property string toolContent: ""
+    property bool expanded: false
+
+    readonly property int firstNewline: toolContent.indexOf('\n')
+    readonly property string toolName: firstNewline > 0 ? toolContent.substring(0, firstNewline) : toolContent
+    readonly property string toolResult: firstNewline > 0 ? toolContent.substring(firstNewline + 1) : ""
+
+    radius: 6
+    color: palette.base
+    clip: true
+
+    Behavior on implicitHeight {
+        NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
+    }
+
+    MouseArea {
+        id: header
+
+        width: parent.width
+        height: headerRow.height + 10
+        cursorShape: Qt.PointingHandCursor
+        onClicked: root.expanded = !root.expanded
+
+        Row {
+            id: headerRow
+
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: 10
+            }
+            width: parent.width
+            spacing: 8
+
+            Text {
+                text: qsTr("Tool: %1").arg(root.toolName)
+                font.pixelSize: 13
+                font.bold: true
+                color: palette.text
+            }
+
+            Text {
+                anchors.verticalCenter: parent.verticalCenter
+                text: root.expanded ? "▼" : "▶"
+                font.pixelSize: 10
+                color: palette.mid
+            }
+        }
+    }
+
+    Column {
+        id: contentColumn
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: header.bottom
+            margins: 10
+        }
+        spacing: 8
+
+        Text {
+            id: resultText
+
+            width: parent.width
+            text: root.toolResult
+            wrapMode: Text.Wrap
+            font.family: "monospace"
+            font.pixelSize: 11
+            color: palette.text
+        }
+    }
+
+    Rectangle {
+        id: messageMarker
+
+        anchors.verticalCenter: parent.verticalCenter
+        width: 3
+        height: root.height - root.radius
+        color: root.color.hslLightness > 0.5 ? Qt.darker(palette.alternateBase, 1.3)
+                                             : Qt.lighter(palette.alternateBase, 1.3)
+        radius: root.radius
+    }
+
+
+    states: [
+        State {
+            when: !root.expanded
+            PropertyChanges {
+                target: root
+                implicitHeight: header.height
+            }
+        },
+        State {
+            when: root.expanded
+            PropertyChanges {
+                target: root
+                implicitHeight: header.height + contentColumn.height + 20
+            }
+        }
+    ]
+}

ChatView/qml/dialog/CodeBlock.qml

@@ -27,27 +27,11 @@ Rectangle {
 
     property string code: ""
     property string language: ""
-
-    property real currentContentY: 0
-    property real blockStart: 0
+    property bool expanded: false
 
     property alias codeFontFamily: codeText.font.family
     property alias codeFontSize: codeText.font.pointSize
-
-    readonly property real buttonTopMargin: 5
-    readonly property real blockEnd: blockStart + root.height
-    readonly property real maxButtonOffset: Math.max(0, root.height - copyButton.height - buttonTopMargin)
-
-    readonly property real buttonPosition: {
-        if (currentContentY > blockEnd) {
-            return buttonTopMargin;
-        }
-        else if (currentContentY > blockStart) {
-            let offset = currentContentY - blockStart;
-            return Math.min(offset, maxButtonOffset);
-        }
-        return buttonTopMargin;
-    }
+    readonly property real collapsedHeight: copyButton.height + 10
 
     color: palette.alternateBase
     border.color: root.color.hslLightness > 0.5 ? Qt.darker(root.color, 1.3)
@@ -55,16 +39,65 @@ Rectangle {
     border.width: 2
     radius: 4
     implicitWidth: parent.width
-    implicitHeight: codeText.implicitHeight + 20
+    clip: true
+
+    Behavior on implicitHeight {
+        NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
+    }
 
     ChatUtils {
         id: utils
     }
 
+    HoverHandler {
+        id: hoverHandler
+        enabled: true
+    }
+
+    MouseArea {
+        id: header
+
+        width: parent.width
+        height: root.collapsedHeight
+        cursorShape: Qt.PointingHandCursor
+        onClicked: root.expanded = !root.expanded
+
+        Row {
+            id: headerRow
+
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: 10
+            }
+            spacing: 6
+
+            Text {
+                text: root.language ? qsTr("Code (%1)").arg(root.language) :
+                                      qsTr("Code")
+                font.pixelSize: 12
+                font.bold: true
+                color: palette.text
+            }
+
+            Text {
+                anchors.verticalCenter: parent.verticalCenter
+                text: root.expanded ? "▼" : "▶"
+                font.pixelSize: 10
+                color: palette.mid
+            }
+        }
+    }
+
     TextEdit {
         id: codeText
-        anchors.fill: parent
-        anchors.margins: 10
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: header.bottom
+            margins: 10
+        }
         text: root.code
         readOnly: true
         selectByMouse: true
@@ -73,29 +106,33 @@ Rectangle {
         selectionColor: palette.highlight
     }
 
-    TextEdit {
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.margins: 5
-        readOnly: true
-        selectByMouse: true
-        text: root.language
-        color: root.color.hslLightness > 0.5 ? Qt.darker(root.color, 1.1)
-                                             : Qt.lighter(root.color, 1.1)
-        font.pointSize: codeText.font.pointSize - 4
-    }
-
     QoAButton {
         id: copyButton
 
-        anchors {
-            top: parent.top
-            topMargin: root.buttonPosition
-            right: parent.right
-            rightMargin: root.buttonTopMargin
+        anchors.right: parent.right
+        anchors.rightMargin: 5
+
+        y: {
+            if (!hoverHandler.hovered || !root.expanded) {
+                return 5
+            }
+
+            let mouseY = hoverHandler.point.position.y
+            let minY = header.height + 5
+            let maxY = root.height - copyButton.height - 5
+            return Math.max(minY, Math.min(mouseY - copyButton.height / 2, maxY))
+        }
+
+        Behavior on y {
+            NumberAnimation { duration: 100; easing.type: Easing.OutQuad }
+        }
+
+        Behavior on opacity {
+            NumberAnimation { duration: 150 }
         }
 
         text: qsTr("Copy")
+
         onClicked: {
             utils.copyToClipboard(root.code)
             text = qsTr("Copied")
@@ -108,4 +145,21 @@ Rectangle {
             onTriggered: parent.text = qsTr("Copy")
         }
     }
+
+    states: [
+        State {
+            when: !root.expanded
+            PropertyChanges {
+                target: root
+                implicitHeight: root.collapsedHeight
+            }
+        },
+        State {
+            when: root.expanded
+            PropertyChanges {
+                target: root
+                implicitHeight: header.height + codeText.implicitHeight + 10
+            }
+        }
+    ]
 }