z-bar-qt/Modules/Sidebar/Chat/Content/ProcessBlock.qml

import QtQuick
import QtQuick.Layouts
import ZShell.Blobs
import ZShell.Config
import ZShell.Components
import ZShell.Llm
import qs.Components
import qs.Services

Item {
	id: root

	required property int index
	required property var modelData
	required property var blocks
	readonly property var segments: modelData.segments
	required property Item rootParent
	required property ChatGeneration current
	readonly property bool isActive: index === blocks.length - 1
	property bool expanded: false
	readonly property var lastSegment: root.segments[root.segments.length - 1]
	readonly property real totalElapsedMs: root.segments.reduce((sum, s) => sum + (s.elapsedMs ?? 0), 0)
	readonly property bool pendingApproval: current.toolApprovalPending && segments.some(s => s.type === LlmSegment.Type.ToolCall && s.status === LlmToolCall.Status.Pending)

	implicitHeight: {
		const expand = expandedRect.implicitHeight + layout.implicitHeight + expandedRect.anchors.topMargin;
		const collapsed = layout.implicitHeight;
		const approval = layout.implicitHeight + approvalPrompt.implicitHeight + approvalPrompt.anchors.topMargin;

		if (expanded)
			return expand;
		else if (pendingApproval)
			return approval;
		else
			return collapsed;
	}

	onCurrentChanged: expanded = false

	Behavior on implicitHeight {
		Anim {
			type: Anim.DefaultEffects
		}
	}

	RowLayout {
		id: layout

		anchors.top: parent.top
		anchors.left: parent.left
		anchors.right: parent.right

		Item {
			implicitHeight: expandBtn.implicitHeight
			implicitWidth: expandBtn.implicitWidth

			LoadingIndicator {
				id: spinnerReasoning

				implicitSize: collapsedText.implicitHeight
				anchors.centerIn: parent
				opacity: root.isActive ? 1 : 0
				visible: opacity > 0

				Behavior on opacity {
					Anim {}
				}
			}

			IconButton {
				id: expandBtn

				font: Tokens.font.icon.medium
				icon: "keyboard_arrow_down"
				inactiveOnColor: hovered ? Colors.palette.m3onSurface : Colors.palette.m3outline
				anchors.centerIn: parent
				opacity: root.isActive ? 0 : 1
				enabled: opacity > 0
				rotation: root.expanded ? 180 : 0
				type: IconButton.Text

				Behavior on rotation {
					Anim {}
				}

				onClicked: root.expanded = !root.expanded
			}
		}

		CustomText {
			id: collapsedText

			color: Colors.palette.m3outline
			font: Tokens.font.label.small
			Layout.fillWidth: true
			Layout.leftMargin: Tokens.spacing.medium
			text: {
				if (root.isActive) {
					if (root.pendingApproval)
						return qsTr("Waiting for approval...");

					if (root.lastSegment.type === LlmSegment.Type.ToolCall)
						return qsTr("Using %1...").arg(root.lastSegment.name);
					return qsTr("Thinking...");
				}
				return qsTr("Worked for %1s").arg((root.totalElapsedMs / 1000).toFixed(1));
			}

			Behavior on opacity {
				Anim {}
			}
		}
	}

	ApprovalPrompt {
		id: approvalPrompt

		anchors.top: layout.bottom
		anchors.topMargin: Tokens.spacing.small
		anchors.left: parent.left
		anchors.right: parent.right
		visible: root.pendingApproval

		rootParent: root.rootParent
		current: root.current
	}

	CustomClippingRect {
		id: expandedRect

		anchors.left: parent.left
		anchors.right: parent.right
		anchors.top: layout.bottom
		anchors.bottom: parent.bottom
		anchors.topMargin: Tokens.spacing.small
		color: Colors.palette.m3surfaceContainerLow
		implicitHeight: expandedContent.contentHeight + expandedContent.anchors.margins * 2
		opacity: root.expanded ? 1 : 0
		radius: Tokens.rounding.medium
		visible: opacity > 0

		Behavior on opacity {
			Anim {}
		}

		ListView {
			id: expandedContent

			anchors.fill: parent
			anchors.margins: Tokens.padding.medium
			model: root.segments
			spacing: Tokens.spacing.medium

			delegate: Item {
				id: segment

				required property var modelData
				required property int index

				implicitWidth: ListView.view.width
				implicitHeight: header.implicitHeight + content.implicitHeight + content.anchors.topMargin

				RowLayout {
					id: header

					anchors.left: parent.left
					anchors.right: parent.right
					spacing: Tokens.spacing.small

					MaterialIcon {
						text: segment.modelData.type === LlmSegment.Type.Reasoning ? "cognition" : "build"
						fill: 1
					}

					CustomText {
						Layout.fillWidth: true
						text: segment.modelData.type === LlmSegment.Type.Reasoning ? qsTr("Thought for %1s").arg((segment.modelData.elapsedMs / 1000).toFixed(1)) : qsTr("Used %1 for %2s").arg(segment.modelData.name).arg((segment.modelData.elapsedMs / 1000).toFixed(1))
					}
				}

				CustomText {
					id: content

					function toolTarget(seg: var): string {
						var a = null;
						try {
							a = JSON.parse(seg.arguments);
						} catch (e) {}
						if (a && typeof a === "object") {
							const v = a.url ?? a.path;
							if (v !== undefined && v !== null)
								return String(v);
						}
						return String(seg.arguments);
					}

					function prettyTool(seg: var): string {
						if (seg.name === "webfetch") {
							switch (seg.status) {
							case LlmToolCall.Status.Running:
								return qsTr("Fetching");
							case LlmToolCall.Status.Pending:
								return qsTr("Pending fetch");
							case LlmToolCall.Status.Success:
								return qsTr("Fetched");
							case LlmToolCall.Status.Error:
								return qsTr("Failed to fetch");
							default:
								return qsTr("Fetched website");
							}
						} else if (seg.name === "readfile") {
							switch (seg.status) {
							case LlmToolCall.Status.Running:
								return qsTr("Reading");
							case LlmToolCall.Status.Pending:
								return qsTr("Pending read");
							case LlmToolCall.Status.Success:
								return qsTr("Read");
							case LlmToolCall.Status.Error:
								return qsTr("Failed to read");
							default:
								return qsTr("Read file");
							}
						}
					}

					anchors.left: parent.left
					anchors.leftMargin: Tokens.padding.small
					anchors.top: header.bottom
					anchors.topMargin: Tokens.spacing.small
					anchors.right: parent.right
					color: Colors.palette.m3outline
					font: Tokens.font.body.small
					wrapMode: CustomText.WrapAtWordBoundaryOrAnywhere
					text: segment.modelData.type === LlmSegment.Type.Reasoning ? segment.modelData.text : qsTr("%1 %2").arg(content.prettyTool(segment.modelData)).arg(content.toolTarget(segment.modelData))
				}
			}
		}
	}
}