new chatlistview component, file attachments, performance & primitive test

Modules/Notifications/Sidebar/Chat/ChatContent.qml

@@ -1,4 +1,7 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
+import Quickshell
 import QtQuick.Layouts
 import ZShell.Components
 import ZShell.Config
@@ -11,7 +14,6 @@ Item {
 	id: root
 
 	property ChatSession chatData
-	property bool following: true
 	// qmlformat off
 	readonly property var keys: [
 		Qt.Key_A,
@@ -87,12 +89,33 @@ Item {
 
 	signal requestClose
 
+	readonly property bool atNewestEnd: !listLoader.item || listLoader.item.contentY < 4
+
+	property var pendingAttachments: []
+
+	function attachFiles(): void {
+		Files.pickFiles().then(files => {
+			if (!files || files.length === 0)
+				return;
+			const added = chatData.addAttachments(files);
+			root.pendingAttachments = root.pendingAttachments.concat(added);
+		});
+	}
+
 	function send(text: string): void {
-		if (text.trim() === "")
+		if (text.trim() === "" && root.pendingAttachments.length === 0)
 			return;
-		following = true;
-		chatData.sendMessage(text);
+		root.scrollToLatest();
+		chatData.sendMessage(text, root.pendingAttachments);
 		input.text = "";
+		root.pendingAttachments = [];
+	}
+
+	function scrollToLatest(): void {
+		if (!listLoader.item || root.atNewestEnd)
+			return;
+		scrollAnim.stop();
+		scrollAnim.start();
 	}
 
 	function focusInput(): void {
@@ -110,6 +133,18 @@ Item {
 		}
 	}
 
+	Anim {
+		id: scrollAnim
+
+		target: listLoader.item
+		property: "contentY"
+		to: 0
+		type: Anim.DefaultEffects
+
+		onFinished: if (target)
+			target.contentY = 0
+	}
+
 	RowLayout {
 		id: header
 
@@ -151,41 +186,112 @@ Item {
 		anchors.topMargin: Tokens.spacing.medium
 		active: root.chatData && root.chatData.loaded
 
-		sourceComponent: VerticalFadeListView {
-			id: list
+		sourceComponent: Flickable {
+			id: flick
 
-			property bool userScrolledUp: false
-			property real lastCHeight: 0.0
+			anchors.fill: parent
+			clip: true
+			contentWidth: width
+			contentHeight: list.layoutHeight
 
-			function scrollToBottom(): void {
-				scrollAnim.start();
+			transform: Rotation {
+				origin.y: flick.height / 2
+				origin.x: flick.width / 2
+				angle: 180
 			}
 
-			cacheBuffer: Math.max(height * 20, 0)
-			clip: true
-			fadeAmount: 0.05
-			fadeThreshold: Tokens.padding.medium
-			model: root.chatData.messagesModel
-			spacing: 0
-			rotation: 180
-			add: Transition {
-				Anim {
-					from: -100
-					property: "y"
+			WheelInverter {
+				target: flick
+			}
+
+			Anim {
+				id: restoreAnim
+
+				target: flick
+				type: Anim.DefaultEffects
+				property: "contentY"
+			}
+
+			ChatListView {
+				id: list
+
+				width: flick.width
+				height: flick.height
+				yAnimDuration: Tokens.anim.durations.expressiveDefaultEffects
+
+				asynchronous: true
+				cacheBuffer: 50
+				estimatedHeight: 100
+				readyDelay: 5
+				removeDuration: Tokens.anim.durations.normal
+				spacing: 0
+
+				model: root.chatData.messagesModel
+
+				useCustomViewport: true
+				viewport: {
+					tWatcher.transform;
+					return Qt.rect(0, flick.contentY, width, flick.height);
+				}
+				onViewportAdjustNeeded: delta => {
+					restoreAnim.stop();
+					flick.contentY += delta;
+				}
+				onViewportRestoreRequested: target => {
+					restoreAnim.to = target;
+					restoreAnim.start();
+				}
+
+				delegate: MessageDelegate {
+					id: message
+
+					rootParent: flick
+					chatList: list
+					ChatListView.preferredHeight: implicitHeight
+					ChatListView.trackViewport: true
+					ChatListView.visibleHeight: ChatListView.removing ? 0 : implicitHeight
+					opacity: ChatListView.removing || ChatListView.adding ? 0 : 1
+					transform: Rotation {
+						origin.y: message.height / 2
+						origin.x: message.width / 2
+						angle: 180
+					}
+
+					Behavior on y {
+						enabled: message.ChatListView.ready
+
+						Anim {
+							id: yAnim
+							type: Anim.DefaultEffects
+						}
+					}
+
+					Behavior on x {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
 				}
 			}
 
 			CustomScrollBar.vertical: CustomScrollBar {
 				id: scrollBar
 
-				flickable: list
-				parent: list.parent
-				anchors.top: list.top
-				anchors.right: list.right
-				anchors.bottom: list.bottom
+				flickable: flick
+				parent: flick.parent
+				anchors.top: flick.top
+				anchors.right: flick.right
+				anchors.bottom: flick.bottom
+				inverted: true
 
 				transform: Rotation {
-					origin.y: list.height / 2
+					origin.y: flick.height / 2
 					origin.x: scrollBar.width / 2
 					angle: 180
 
@@ -196,57 +302,15 @@ Item {
 					}
 				}
 			}
-			delegate: MessageDelegate {
-				rotation: 180
-				rootParent: list
-			}
 
-			displaced: Transition {
-				Anim {
-					property: "y"
-				}
-			}
-			move: Transition {
-				Anim {
-					property: "y"
-				}
-			}
+			TransformWatcher {
+				id: tWatcher
 
-			Component.onCompleted: {
-				positionViewAtBeginning();
-			}
-			onAtYBeginningChanged: {
-				if (atYBeginning)
-					userScrolledUp = false;
-			}
-			onContentHeightChanged: {
-				if (userScrolledUp && Chat.busy) {
-					const delta = contentHeight - lastCHeight;
-					contentY += delta;
-				}
-
-				lastCHeight = contentHeight;
-			}
-			onMovingChanged: {
-				if (moving)
-					userScrolledUp = !atYBeginning;
-			}
-
-			Anim {
-				id: scrollAnim
-
-				property: "contentY"
-				target: list
-				type: Anim.DefaultEffects
-				to: list.originY
-			}
-
-			WheelInverter {
-				target: list
+				a: flick.contentItem
+				b: list
 			}
 		}
 
-		// Trigger the load even before we're ready to show the list.
 		Component.onCompleted: if (root.chatData)
 			root.chatData.messagesModel
 	}
@@ -265,7 +329,7 @@ Item {
 		anchors.horizontalCenter: parent.horizontalCenter
 		implicitHeight: scrollToBottom.implicitHeight
 		implicitWidth: scrollToBottom.implicitWidth
-		scale: !listLoader.item.atYBeginning && listLoader.item.contentHeight > listLoader.item.height ? 1 : 0
+		scale: root.atNewestEnd || !listLoader.item || listLoader.item.contentHeight <= listLoader.item.height ? 0 : 1
 		visible: scale > 0
 
 		Behavior on scale {
@@ -289,7 +353,180 @@ Item {
 			type: IconButton.Tonal
 
 			onClicked: {
-				listLoader.item.scrollToBottom();
+				root.scrollToLatest();
+			}
+		}
+	}
+
+	GridView {
+		id: attachments
+
+		readonly property int columns: ChatState.isWindow ? 5 : 3
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.bottom: input.top
+		anchors.bottomMargin: Tokens.spacing.medium
+
+		flow: GridView.LeftToRight
+		verticalLayoutDirection: GridView.BottomToTop
+
+		cellWidth: width / columns
+		cellHeight: cellWidth
+
+		implicitHeight: Math.ceil(count / columns) * cellHeight
+
+		displaced: Transition {
+			Anim {
+				property: "x"
+			}
+			Anim {
+				property: "y"
+			}
+		}
+
+		add: Transition {
+			id: addTrans
+			Anim {
+				property: "y"
+				from: addTrans.ViewTransition.destination.y + attachments.cellHeight / 4
+			}
+			Anim {
+				property: "opacity"
+				from: 0
+				to: 1
+			}
+		}
+		remove: Transition {
+			id: removeTrans
+			Anim {
+				property: "y"
+				to: removeTrans.ViewTransition.destination.y + attachments.cellHeight / 4
+			}
+			Anim {
+				property: "opacity"
+				from: 1
+				to: 0
+			}
+		}
+
+		model: ScriptModel {
+			objectProp: "path"
+			values: root.pendingAttachments
+		}
+
+		delegate: Item {
+			id: thumb
+
+			required property var modelData
+			function fileIcon(mime): string {
+				if (mime.startsWith("archive/") || mime === "application/zip")
+					return "folder_zip";
+				if (mime === "application/pdf")
+					return "picture_as_pdf";
+				if (mime.startsWith("audio/"))
+					return "audio_file";
+				if (mime.startsWith("video/"))
+					return "video_file";
+				if (mime.startsWith("text/"))
+					return "description";
+				return "insert_drive_file";
+			}
+
+			width: attachments.cellWidth
+			height: width
+			opacity: modelData ? 1 : 0
+			CustomClippingRect {
+				anchors.fill: parent
+				anchors.margins: Tokens.spacing.extraSmall
+
+				radius: Tokens.rounding.medium
+				color: Colors.tPalette.m3surfaceContainer
+
+				FadeImage {
+					id: attImage
+
+					anchors.fill: parent
+					fillMode: FadeImage.PreserveAspectCrop
+					asynchronous: true
+					source: visible ? thumb.modelData?.path ?? "" : ""
+					visible: thumb.modelData?.isImage ?? false
+				}
+
+				MaterialIcon {
+					anchors.centerIn: parent
+					font.pointSize: Tokens.font.size.extraLarge
+					text: thumb.fileIcon(thumb.modelData?.mimeType ?? "")
+					visible: !thumb.modelData?.isImage ?? false
+				}
+
+				Loader {
+					id: attIndicatorLoader
+
+					anchors.centerIn: parent
+
+					opacity: 0
+					active: opacity > 0 && (thumb.modelData?.isImage ?? false)
+
+					sourceComponent: CustomRect {
+						implicitWidth: attLoadingIndicator.implicitSize + Tokens.padding.largeIncreased * 2
+						implicitHeight: attLoadingIndicator.implicitSize + Tokens.padding.largeIncreased * 2
+
+						color: Colors.palette.m3primaryContainer
+						radius: Tokens.rounding.full
+
+						LoadingIndicator {
+							id: attLoadingIndicator
+
+							anchors.centerIn: parent
+							containsIcon: true
+							implicitSize: thumb.implicitWidth * 0.4
+						}
+					}
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
+				}
+
+				Timer {
+					id: attLoadDebounceTimer
+
+					interval: 100
+					onTriggered: {
+						if (attImage.status !== Image.Ready)
+							attIndicatorLoader.opacity = 1;
+					}
+				}
+
+				MouseArea {
+					id: hover
+
+					anchors.fill: parent
+					hoverEnabled: true
+					cursorShape: undefined
+
+					IconButton {
+						anchors.right: parent.right
+						anchors.top: parent.top
+						anchors.margins: Tokens.padding.medium
+
+						icon: "close"
+						visible: opacity > 0
+						enabled: thumb.opacity > 0
+						opacity: hover.containsMouse ? 1 : 0
+
+						Behavior on opacity {
+							Anim {
+								type: Anim.DefaultEffects
+							}
+						}
+
+						onClicked: root.pendingAttachments = root.pendingAttachments.filter(a => a !== thumb.modelData)
+					}
+				}
 			}
 		}
 	}
@@ -310,7 +547,9 @@ Item {
 		sendIcon.icon: "arrow_upward"
 		sendIcon.padding: Tokens.padding.extraSmall
 
-		Component.onCompleted: root.focusInput()
+		Component.onCompleted: {
+			root.focusInput();
+		}
 		Keys.onPressed: e => {
 			if (e.key == Qt.Key_Return) {
 				if (!(e.modifiers & Qt.ShiftModifier)) {
@@ -318,6 +557,14 @@ Item {
 					e.accepted = true;
 				}
 			}
+
+			if (e.key == Qt.Key_V && e.modifiers & Qt.ControlModifier) {
+				if (root.chatData.clipboardHasAttachment()) {
+					const att = root.chatData.pasteAttachments();
+					root.pendingAttachments = [...root.pendingAttachments, ...att];
+					e.accepted = true;
+				}
+			}
 		}
 		onSendPressed: root.send(text)
 	}

Modules/Notifications/Sidebar/Chat/Content/CodeBlockView.qml

@@ -16,10 +16,15 @@ CustomRect {
 	property bool copied: false
 	property color codeBackgroundColor: Colors.palette.m3surfaceContainerHigh
 	property color codeHeaderColor: Colors.palette.m3outline
-	property var codeSpans: []
+	property string html: ""
+	property bool colored: false
+	property string requestedCode: ""
+	property string requestedLanguage: ""
 	property int highlightToken: 0
 
 	function refresh() {
+		requestedCode = root.code;
+		requestedLanguage = root.language;
 		const token = ++root.highlightToken;
 		CodeHighlighter.highlight(root.code, root.language, root, token);
 	}
@@ -27,7 +32,11 @@ CustomRect {
 	function onHighlightSpans(token, spans) {
 		if (token !== root.highlightToken)
 			return;
-		codeSpans = spans;
+		if (root.code !== root.requestedCode ||
+			root.language !== root.requestedLanguage)
+			return;
+		html = spans.length ? root.highlightedHtml(root.code, spans) : "";
+		colored = root.visible && html.length > 0;
 	}
 
 	function roleColor(kind) {
@@ -71,6 +80,21 @@ CustomRect {
 		return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 	}
 
+	// Mirrors the whitespace rules of the rich text rendering below (leading
+	// whitespace kept, mid-line runs collapsed, tabs as single spaces) so the
+	// plain and colored layouts are identical.
+	function plainForDisplay(code): string {
+		return code.split("\n")
+			.map(line => {
+				const i = line.search(/\S/);
+				if (i < 0)
+					return "";
+				const lead = line.slice(0, i).replace(/\t/g, " ");
+				return lead + line.slice(i).replace(/\s+/g, " ").replace(/\s+$/, "");
+			})
+			.join("\n");
+	}
+
 	function highlightedHtml(code, spans): string {
 		let out;
 		if (!spans.length) {
@@ -101,10 +125,26 @@ CustomRect {
 	radius: Tokens.rounding.medium
 
 	onLanguageChanged: {
-		codeSpans = [];
-		refresh();
+		html = "";
+		colored = false;
+		if (root.visible)
+			refreshTimer.restart();
+	}
+	onCodeChanged: {
+		colored = false;
+		if (root.visible)
+			refreshTimer.restart();
+	}
+	onVisibleChanged: if (root.visible)
+		refreshTimer.restart();
+
+	Timer {
+		id: refreshTimer
+
+		interval: 200
+		repeat: false
+		onTriggered: refresh()
 	}
-	onCodeChanged: refresh()
 
 	RowLayout {
 		id: headerRow
@@ -229,21 +269,6 @@ CustomRect {
 		implicitHeight: codeText.implicitHeight + codeFlick.anchors.margins * 2
 		color: CodeColors.active.bg
 
-		CustomText {
-			id: code
-			anchors.top: parent.top
-			anchors.bottom: parent.bottom
-			x: implicitWidth * (0 - codeFlick.visibleArea.xPosition) + Tokens.padding.small
-			anchors.margins: Tokens.padding.small
-			text: root.highlightedHtml(root.code, root.codeSpans)
-			textFormat: Text.RichText
-			color: CodeColors.active.normal
-			layer.enabled: true
-			clip: false
-			font.family: Config.appearance.font.family.mono
-			font.pointSize: Tokens.font.size.small
-		}
-
 		Flickable {
 			id: codeFlick
 
@@ -263,12 +288,11 @@ CustomRect {
 
 				color: CodeColors.active.normal
 				layer.enabled: true
-				leftInset: Tokens.padding.small
 				clip: false
 				font.family: Config.appearance.font.family.mono
 				font.pointSize: Tokens.font.size.small
-				textFormat: Text.RichText
-				text: code.text
+				textFormat: root.colored ? Text.RichText : Text.PlainText
+				text: root.colored ? root.html : root.plainForDisplay(root.code)
 				readOnly: true
 			}
 		}

Modules/Notifications/Sidebar/Chat/Content/ErrorBubble.qml

@@ -0,0 +1,128 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Llm
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+Item {
+	id: root
+
+	required property ChatGeneration current
+
+	signal dismiss
+
+	implicitHeight: 0
+
+	Component.onCompleted: {
+		root.implicitHeight = Qt.binding(() => errorInner.implicitHeight + errorInner.anchors.margins * 2);
+		enterAnim.start();
+	}
+
+	Behavior on implicitHeight {
+		Anim {}
+	}
+
+	ParallelAnimation {
+		id: enterAnim
+
+		Anim {
+			target: container
+			property: "y"
+			from: container.implicitHeight
+			to: 0
+		}
+
+		Anim {
+			target: container
+			property: "opacity"
+			from: 0
+			to: 1
+		}
+	}
+
+	ParallelAnimation {
+		id: exitAnim
+
+		Anim {
+			target: root
+			property: "implicitHeight"
+			from: root.implicitHeight
+			to: 0
+		}
+
+		Anim {
+			target: container
+			property: "y"
+			to: container.implicitHeight
+			from: 0
+		}
+
+		Anim {
+			target: container
+			property: "opacity"
+			to: 0
+			from: 1
+		}
+
+		onFinished: root.dismiss()
+	}
+
+	CustomRect {
+		id: container
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+
+		radius: Tokens.rounding.medium
+		color: Colors.palette.m3errorContainer
+		implicitHeight: errorInner.implicitHeight + errorInner.anchors.margins * 2
+
+		ColumnLayout {
+			id: errorInner
+
+			anchors.top: parent.top
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.margins: Tokens.padding.medium
+
+			spacing: Tokens.spacing.small
+
+			CustomText {
+				id: header
+
+				Layout.fillWidth: true
+
+				font.pointSize: Tokens.font.size.large
+				elide: CustomText.ElideRight
+				color: Colors.palette.m3onErrorContainer
+
+				text: qsTr("An error occured")
+			}
+
+			CustomText {
+				id: body
+
+				Layout.fillWidth: true
+
+				wrapMode: CustomText.WordWrap
+				color: Colors.palette.m3onErrorContainer
+
+				text: root.current.errorMessage || Chat.serverError
+			}
+		}
+
+		IconButton {
+			anchors.top: parent.top
+			anchors.right: parent.right
+			anchors.margins: Tokens.padding.medium
+
+			isRound: true
+			icon: "close"
+			type: IconButton.Text
+			font.pointSize: Tokens.font.size.large
+
+			onClicked: exitAnim.start()
+		}
+	}
+}

Modules/Notifications/Sidebar/Chat/Content/MathBlockView.qml

@@ -26,8 +26,7 @@ Item {
 		id: equationImage
 
 		anchors.centerIn: parent
-		source: math.imageUrl
-		asynchronous: true
+		source: math.imageId.length ? "image://llmmath/" + math.imageId : ""
 		visible: math.ok
 		fillMode: Image.PreserveAspectFit
 		smooth: true

Modules/Notifications/Sidebar/Chat/Content/MessageDelegate.qml

@@ -3,45 +3,50 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
+import ZShell.Components
 import ZShell.Config
 import ZShell.Llm
+import qs.Modules.Notifications.Sidebar.Chat
 import qs.Components
 import qs.Services
 
 MouseArea {
 	id: root
 
-	property ChatGeneration current: modelData.activeGeneration
 	required property int index
-	readonly property bool isUser: modelData.role === ChatMessage.Role.User
 	required property Item rootParent
 	required property ChatMessage modelData
-	property bool reasoningExpanded: false
-	readonly property var blocks: blockify(current.segments)
-	property real savedOffset: -1
-	property bool stickActive: false
+	required property ChatListView chatList
 
-	function handleReasoningToggle(expanded: bool): void {
-		const view = root.ListView.view;
-		if (!view)
+	readonly property bool isUser: modelData.role === ChatMessage.Role.User
+	readonly property var blocks: blockify(current.segments, current.error)
+
+	property ChatGeneration current: modelData.activeGeneration
+	property bool reasoningExpanded: false
+	property real savedOffset: NaN
+	property bool anchored: false
+
+	function handleReasoningToggle(expanded: bool, block: Item): void {
+		if (!root.rootParent)
 			return;
 
 		if (expanded) {
-			root.savedOffset = view.contentY - root.y;
-			root.reasoningExpanded = true;
+			root.savedOffset = root.rootParent.contentY - root.y;
+			root.anchored = true;
+			chatList.anchorItem(block, ChatListView.TopEdge);
+			settleTimer.start();
 		} else {
-			root.reasoningExpanded = false;
-			root.stickActive = false;
 			settleTimer.stop();
+			root.anchored = false;
+			chatList.clearAnchor();
 			if (!isNaN(root.savedOffset)) {
-				restoreAnim.to = root.y + root.savedOffset;
-				restoreAnim.restart();
+				chatList.requestRestore(root.y + root.savedOffset);
 				root.savedOffset = NaN;
 			}
 		}
 	}
 
-	function blockify(segs) {
+	function blockify(segs, errored) {
 		const blocks = [];
 		for (let i = 0; i < segs.length; i++) {
 			const seg = segs[i];
@@ -65,35 +70,32 @@ MouseArea {
 			}
 		}
 
+		if (errored)
+			blocks.push({
+				kind: "error",
+				id: segs.length
+			});
+
 		return blocks;
 	}
 
-	implicitWidth: ListView.view.width
 	hoverEnabled: true
 	preventStealing: false
-	implicitHeight: layout.implicitHeight + Tokens.padding.medium
+	implicitHeight: layout.implicitHeight + Tokens.padding.medium + (attachments.visible ? attachments.implicitHeight : 0)
+	onImplicitHeightChanged: if (root.anchored)
+		settleTimer.restart()
 
 	Timer {
 		id: settleTimer
-		interval: 16
+
+		interval: Tokens.anim.durations.expressiveDefaultEffects
+		repeat: false
 
 		onTriggered: {
-			root.stickActive = false;
-		}
-	}
-
-	onImplicitHeightChanged: {
-		if (root.reasoningExpanded) {
-			root.stickActive = true;
-			settleTimer.restart();
-
-			const view = root.ListView.view;
-			if (!view)
-				return;
-			const bottomEdge = root.y + root.height + Tokens.padding.large * 2;
-			const viewportBottom = view.contentY + view.height;
-			if (bottomEdge > viewportBottom)
-				view.contentY = bottomEdge - view.height;
+			if (root.anchored) {
+				root.anchored = false;
+				chatList.clearAnchor();
+			}
 		}
 	}
 
@@ -147,20 +149,144 @@ MouseArea {
 		}
 	}
 
-	Anim {
-		id: restoreAnim
+	GridView {
+		id: attachments
 
-		property: "contentY"
-		target: root.ListView.view
-		type: Anim.DefaultEffects
+		readonly property int columns: ChatState.isWindow ? 5 : 3
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+
+		flow: GridView.LeftToRight
+		verticalLayoutDirection: GridView.BottomToTop
+
+		cellWidth: width / columns
+		cellHeight: cellWidth
+
+		implicitHeight: Math.ceil(count / columns) * cellHeight
+
+		displaced: Transition {
+			Anim {
+				property: "x"
+			}
+			Anim {
+				property: "y"
+			}
+		}
+
+		model: ScriptModel {
+			objectProp: "path"
+			values: {
+				const list = [...root.modelData.attachments];
+
+				if (list.length > 0 && list.length < attachments.columns) {
+					while (list.length < attachments.columns)
+						list.unshift(null);
+				}
+
+				return list;
+			}
+		}
+
+		delegate: Item {
+			id: thumb
+
+			required property var modelData
+
+			function fileIcon(mime): string {
+				if (mime.startsWith("archive/") || mime === "application/zip")
+					return "folder_zip";
+				if (mime === "application/pdf")
+					return "picture_as_pdf";
+				if (mime.startsWith("audio/"))
+					return "audio_file";
+				if (mime.startsWith("video/"))
+					return "video_file";
+				if (mime.startsWith("text/"))
+					return "description";
+				return "insert_drive_file";
+			}
+
+			width: attachments.cellWidth
+			height: width
+			opacity: modelData ? 1 : 0
+
+			CustomClippingRect {
+				anchors.fill: parent
+				anchors.margins: Tokens.spacing.extraSmall
+
+				radius: Tokens.rounding.medium
+				color: Colors.tPalette.m3surfaceContainer
+
+				FadeImage {
+					id: attImage
+
+					anchors.fill: parent
+					fillMode: FadeImage.PreserveAspectCrop
+					asynchronous: true
+					source: visible ? thumb.modelData?.path ?? "" : ""
+					visible: thumb.modelData?.isImage ?? false
+				}
+
+				MaterialIcon {
+					anchors.centerIn: parent
+					font.pointSize: Tokens.font.size.extraLarge
+					text: thumb.fileIcon(thumb.modelData?.mimeType ?? "")
+					visible: !thumb.modelData?.isImage ?? false
+				}
+
+				Loader {
+					id: attIndicatorLoader
+
+					anchors.centerIn: parent
+
+					opacity: 0
+					active: opacity > 0 && (thumb.modelData?.isImage ?? false)
+
+					sourceComponent: CustomRect {
+						implicitWidth: attLoadingIndicator.implicitSize + Tokens.padding.largeIncreased * 2
+						implicitHeight: attLoadingIndicator.implicitSize + Tokens.padding.largeIncreased * 2
+
+						color: Colors.palette.m3primaryContainer
+						radius: Tokens.rounding.full
+
+						LoadingIndicator {
+							id: attLoadingIndicator
+
+							anchors.centerIn: parent
+							containsIcon: true
+							implicitSize: thumb.implicitWidth * 0.4
+						}
+					}
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
+				}
+
+				Timer {
+					id: attLoadDebounceTimer
+
+					interval: 100
+					onTriggered: {
+						if (attImage.status !== Image.Ready)
+							attIndicatorLoader.opacity = 1;
+					}
+				}
+			}
+		}
 	}
 
 	Column {
 		id: layout
 
-		anchors.top: parent.top
+		anchors.top: attachments.bottom
 		anchors.left: parent.left
 		anchors.right: parent.right
+
 		spacing: Tokens.spacing.medium
 
 		Repeater {
@@ -173,6 +299,17 @@ MouseArea {
 			delegate: DelegateChooser {
 				role: "kind"
 
+				DelegateChoice {
+					roleValue: "error"
+
+					delegate: ErrorBubble {
+						width: root.width
+						current: root.current
+
+						onDismiss: root.current.dismissError()
+					}
+				}
+
 				DelegateChoice {
 					roleValue: "process"
 
@@ -182,7 +319,7 @@ MouseArea {
 						current: root.current
 						rootParent: root.rootParent
 
-						onExpandedChanged: root.handleReasoningToggle(expanded)
+						onExpandedChanged: root.handleReasoningToggle(expanded, this)
 					}
 				}
 

Modules/Notifications/Sidebar/Chat/Content/ProcessBlock.qml

@@ -22,7 +22,6 @@ Item {
 	readonly property real totalElapsedMs: root.segments.reduce((sum, s) => sum + (s.elapsedMs ?? 0), 0)
 	readonly property bool pendingApproval: current.toolApprovalPending && segments.filter(s => s.type === LlmSegment.Type.ToolCall).some(s => current.pendingToolCalls.includes(s))
 
-	clip: true
 	implicitHeight: {
 		const expand = expandedRect.implicitHeight + layout.implicitHeight + expandedRect.anchors.topMargin;
 		const collapsed = layout.implicitHeight;
@@ -36,6 +35,8 @@ Item {
 			return collapsed;
 	}
 
+	onCurrentChanged: expanded = false
+
 	Behavior on implicitHeight {
 		Anim {
 			type: Anim.DefaultEffects
@@ -147,19 +148,30 @@ Item {
 
 					property bool open: false
 					property Item rootParent: root.rootParent
-					property int openHeight: toolsBg.rootParent.height - Tokens.padding.medium * 2
+					property int maxHeight: rootParent.height - Tokens.padding.medium * 2
+					property int openHeight: Math.min(toolsContent.item?.implicitHeight, maxHeight)
 					property int openWidth: toolsBg.rootParent.width - Tokens.padding.medium * 2
+					property real openHeightProg: openHeight / maxHeight
+					property int collapsedY: 0
 
 					implicitHeight: toolList.implicitHeight + toolList.anchors.margins * 2
+					z: open || dialogTransition.running ? 2 : 0
 					Layout.fillWidth: true
 
 					function reparentWrapper(): void {
 						const newParent = open ? toolsBg.rootParent : toolsBg;
-						const pos = toolsWrapper.mapToItem(newParent, 0, 0);
+						const c = toolsWrapper.parent.mapToItem(newParent, toolsWrapper.x + toolsWrapper.width / 2, toolsWrapper.y + toolsWrapper.height / 2);
+						toolsBg.collapsedY = toolsWrapper.y;
 						toolsWrapper.parent = newParent;
-						toolsWrapper.x = pos.x;
-						toolsWrapper.y = pos.y;
-						console.log("X, Y:\n" + toolsWrapper.x, toolsWrapper.y, "\nWidth, Height:\n" + toolsWrapper.width, toolsWrapper.height);
+						toolsWrapper.x = c.x - toolsWrapper.width / 2;
+						toolsWrapper.y = c.y - toolsWrapper.height / 2;
+					}
+
+					onOpenChanged: {
+						if (open)
+							toolsBg.rootParent.interactive = false;
+						else
+							toolsBg.rootParent.interactive = true;
 					}
 
 					BlobGroup {
@@ -189,6 +201,8 @@ Item {
 
 						width: toolsBg.width
 						height: toolBox.implicitHeight
+						rotation: parent === toolsBg.rootParent ? 180 : 0
+						z: 1
 
 						states: State {
 							name: "open"
@@ -200,11 +214,11 @@ Item {
 								toolsBackground.bottomRightRadius: Tokens.rounding.largeIncreased
 								toolsBackground.topRightRadius: Tokens.rounding.largeIncreased
 								toolsBackground.topLeftRadius: Tokens.rounding.largeIncreased
-								// toolsContent.opacity: 1
+								toolsContent.opacity: 1
 								toolsWrapper.height: toolsBg.openHeight
 								toolsWrapper.width: toolsBg.openWidth
 								toolsWrapper.x: (toolsBg.rootParent.width - toolsBg.openWidth) / 2
-								toolsWrapper.y: (toolsBg.rootParent.height - toolsBg.openHeight) / 2
+								toolsWrapper.y: (confirmationRow.implicitHeight + Tokens.spacing.small + Tokens.padding.medium) * (1 - toolsBg.openHeightProg) + Tokens.padding.medium
 								elevation.opacity: 1
 								toolBox.opacity: 0
 							}
@@ -274,7 +288,6 @@ Item {
 
 							StateLayer {
 								onClicked: {
-									console.log("X, Y:\n" + toolsWrapper.x, toolsWrapper.y, "\nWidth, Height:\n" + toolsWrapper.width, toolsWrapper.height);
 									toolsBg.open = true;
 								}
 							}
@@ -287,7 +300,10 @@ Item {
 								anchors.margins: Tokens.padding.medium
 
 								Repeater {
-									model: root.current.pendingToolCalls ?? []
+									id: repeater
+
+									model: root.current.pendingToolCalls?.slice(0, 4) ?? []
+
 									delegate: RowLayout {
 										id: toolText
 
@@ -309,10 +325,10 @@ Item {
 											return String(seg.arguments);
 										}
 
-										CustomText {
+										MaterialIcon {
 											color: Colors.palette.m3onPrimaryContainer
-											text: String(toolText.index + 1)
-											font.pointSize: Tokens.font.size.large
+											text: toolText.modelData.name === "webfetch" ? "web" : "text_snippet"
+											fill: 1
 										}
 
 										CustomText {
@@ -331,12 +347,134 @@ Item {
 										}
 									}
 								}
+
+								CustomText {
+									color: Colors.palette.m3onPrimaryContainer
+									text: qsTr("And %1 more").arg(root.current.pendingToolCalls.slice(4).length)
+									visible: repeater.count < root.current.pendingToolCalls.length
+								}
+							}
+						}
+
+						Loader {
+							id: toolsContent
+
+							active: opacity > 0
+							anchors.fill: parent
+							asynchronous: false
+							opacity: 0
+
+							sourceComponent: MouseArea {
+								onWheel: event => event.accepted = true
+								preventStealing: true
+								implicitHeight: innerLayout.contentHeight + innerLayout.anchors.margins * 2
+
+								VerticalFadeListView {
+									id: innerLayout
+
+									anchors.fill: parent
+									anchors.margins: Tokens.padding.small
+									cacheBuffer: height * 10
+									fadeAmount: 0.1
+									fadeEnabled: interactive
+									spacing: 0
+									clip: true
+									interactive: contentHeight > toolsBg.maxHeight
+
+									model: root.current.pendingToolCalls ?? []
+
+									delegate: Item {
+										id: toolCall
+
+										required property LlmSegment modelData
+										property bool expanded: false
+
+										implicitWidth: CustomListView.view.width
+										implicitHeight: collapsedRow.implicitHeight + collapsedRow.anchors.margins + (expanded ? expandedTool.implicitHeight + expandedTool.anchors.margins + expandedTool.anchors.topMargin : collapsedRow.anchors.margins)
+
+										function toolTarget(seg: LlmSegment): 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);
+										}
+
+										Behavior on implicitHeight {
+											Anim {}
+										}
+
+										RowLayout {
+											id: collapsedRow
+
+											anchors.top: parent.top
+											anchors.left: parent.left
+											anchors.right: parent.right
+											anchors.margins: Tokens.padding.medium
+
+											IconButton {
+												id: toolExpandBtn
+
+												font.pointSize: Tokens.font.size.large
+												icon: "keyboard_arrow_down"
+												inactiveOnColor: hovered ? Colors.palette.m3onSurface : Colors.palette.m3outline
+												rotation: toolCall.expanded ? 180 : 0
+												type: IconButton.Text
+
+												Behavior on rotation {
+													Anim {}
+												}
+
+												onClicked: toolCall.expanded = !toolCall.expanded
+											}
+
+											CustomText {
+												id: preview
+
+												Layout.fillWidth: true
+
+												text: toolCall.modelData.name
+											}
+										}
+
+										CustomClippingRect {
+											id: expandedTool
+
+											anchors.top: collapsedRow.bottom
+											anchors.left: parent.left
+											anchors.right: parent.right
+											anchors.bottom: parent.bottom
+											anchors.margins: Tokens.padding.medium
+											anchors.topMargin: Tokens.spacing.medium
+
+											implicitHeight: fullToolCall.implicitHeight + fullToolCall.anchors.margins * 2
+											radius: Tokens.rounding.medium
+											color: Colors.palette.m3surfaceContainerLow
+
+											CustomText {
+												id: fullToolCall
+
+												anchors.fill: parent
+												anchors.margins: Tokens.padding.medium
+
+												text: toolCall.toolTarget(toolCall.modelData)
+												wrapMode: CustomText.WrapAtWordBoundaryOrAnywhere
+											}
+										}
+									}
+								}
 							}
 						}
 					}
 				}
 
 				ButtonRow {
+					id: confirmationRow
 					Layout.alignment: Qt.AlignRight
 					spacing: Tokens.spacing.medium
 
@@ -366,7 +504,7 @@ Item {
 		}
 	}
 
-	CustomRect {
+	CustomClippingRect {
 		id: expandedRect
 
 		anchors.left: parent.left