From c2edd26598d098ebeb27cfc9b838a0601eb913ec Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 12 Oct 2025 13:13:25 +0200 Subject: [PATCH] ai chat: adjust msg header style --- .../ii/modules/common/widgets/GroupButton.qml | 2 +- .../modules/sidebarLeft/aiChat/AiMessage.qml | 267 +++++++++--------- .../aiChat/AiMessageControlButton.qml | 3 +- 3 files changed, 141 insertions(+), 131 deletions(-) diff --git a/.config/quickshell/ii/modules/common/widgets/GroupButton.qml b/.config/quickshell/ii/modules/common/widgets/GroupButton.qml index 4a524e1d5..d1b07c74e 100644 --- a/.config/quickshell/ii/modules/common/widgets/GroupButton.qml +++ b/.config/quickshell/ii/modules/common/widgets/GroupButton.qml @@ -32,7 +32,7 @@ Button { implicitWidth: (root.down && bounce) ? clickedWidth : baseWidth implicitHeight: (root.down && bounce) ? clickedHeight : baseHeight - property color colBackground: ColorUtils.transparentize(Appearance?.colors.colLayer1Hover, 1) || "transparent" + property color colBackground: ColorUtils.transparentize(colBackgroundHover, 1) || "transparent" property color colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED" property color colBackgroundActive: Appearance?.colors.colLayer1Active ?? "#D6CEE2" property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F" diff --git a/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessage.qml b/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessage.qml index 2072a67ae..8462f2432 100644 --- a/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessage.qml +++ b/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessage.qml @@ -78,156 +78,165 @@ Rectangle { anchors.top: parent.top anchors.margins: messagePadding spacing: root.contentSpacing - - RowLayout { // Header - spacing: 15 + + Rectangle { Layout.fillWidth: true + implicitWidth: headerRowLayout.implicitWidth + 4 * 2 + implicitHeight: headerRowLayout.implicitHeight + 4 * 2 + color: Appearance.colors.colSecondaryContainer + radius: Appearance.rounding.small + + RowLayout { // Header + id: headerRowLayout + anchors { + fill: parent + margins: 4 + } + spacing: 18 - Rectangle { // Name - id: nameWrapper - color: Appearance.colors.colSecondaryContainer - // color: "transparent" - radius: Appearance.rounding.small - implicitHeight: Math.max(nameRowLayout.implicitHeight + 5 * 2, 30) - Layout.fillWidth: true - Layout.alignment: Qt.AlignVCenter + Item { // Name + id: nameWrapper + implicitHeight: Math.max(nameRowLayout.implicitHeight + 5 * 2, 30) + Layout.fillWidth: true + Layout.alignment: Qt.AlignVCenter - RowLayout { - id: nameRowLayout - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: 10 - anchors.rightMargin: 10 - spacing: 7 + RowLayout { + id: nameRowLayout + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: 10 + anchors.rightMargin: 10 + spacing: 7 - Item { - Layout.alignment: Qt.AlignVCenter - Layout.fillHeight: true - implicitWidth: messageData?.role == 'assistant' ? modelIcon.width : roleIcon.implicitWidth - implicitHeight: messageData?.role == 'assistant' ? modelIcon.height : roleIcon.implicitHeight + Item { + Layout.alignment: Qt.AlignVCenter + Layout.fillHeight: true + implicitWidth: messageData?.role == 'assistant' ? modelIcon.width : roleIcon.implicitWidth + implicitHeight: messageData?.role == 'assistant' ? modelIcon.height : roleIcon.implicitHeight - CustomIcon { - id: modelIcon - anchors.centerIn: parent - visible: messageData?.role == 'assistant' && Ai.models[messageData?.model].icon - width: Appearance.font.pixelSize.large - height: Appearance.font.pixelSize.large - source: messageData?.role == 'assistant' ? Ai.models[messageData?.model].icon : - messageData?.role == 'user' ? 'linux-symbolic' : 'desktop-symbolic' + CustomIcon { + id: modelIcon + anchors.centerIn: parent + visible: messageData?.role == 'assistant' && Ai.models[messageData?.model].icon + width: Appearance.font.pixelSize.large + height: Appearance.font.pixelSize.large + source: messageData?.role == 'assistant' ? Ai.models[messageData?.model].icon : + messageData?.role == 'user' ? 'linux-symbolic' : 'desktop-symbolic' - colorize: true + colorize: true + color: Appearance.m3colors.m3onSecondaryContainer + } + + MaterialSymbol { + id: roleIcon + anchors.centerIn: parent + visible: !modelIcon.visible + iconSize: Appearance.font.pixelSize.larger + color: Appearance.m3colors.m3onSecondaryContainer + text: messageData?.role == 'user' ? 'person' : + messageData?.role == 'interface' ? 'settings' : + messageData?.role == 'assistant' ? 'neurology' : + 'computer' + } + } + + StyledText { + id: providerName + Layout.alignment: Qt.AlignVCenter + Layout.fillWidth: true + elide: Text.ElideRight + font.pixelSize: Appearance.font.pixelSize.normal color: Appearance.m3colors.m3onSecondaryContainer - } - - MaterialSymbol { - id: roleIcon - anchors.centerIn: parent - visible: !modelIcon.visible - iconSize: Appearance.font.pixelSize.larger - color: Appearance.m3colors.m3onSecondaryContainer - text: messageData?.role == 'user' ? 'person' : - messageData?.role == 'interface' ? 'settings' : - messageData?.role == 'assistant' ? 'neurology' : - 'computer' + text: messageData?.role == 'assistant' ? Ai.models[messageData?.model].name : + (messageData?.role == 'user' && SystemInfo.username) ? SystemInfo.username : + Translation.tr("Interface") } } + } - StyledText { - id: providerName - Layout.alignment: Qt.AlignVCenter - Layout.fillWidth: true - elide: Text.ElideRight - font.pixelSize: Appearance.font.pixelSize.normal - color: Appearance.m3colors.m3onSecondaryContainer - text: messageData?.role == 'assistant' ? Ai.models[messageData?.model].name : - (messageData?.role == 'user' && SystemInfo.username) ? SystemInfo.username : - Translation.tr("Interface") + Button { // Not visible to model + id: modelVisibilityIndicator + visible: messageData?.role == 'interface' + implicitWidth: 16 + implicitHeight: 30 + Layout.alignment: Qt.AlignVCenter + + background: Item + + MaterialSymbol { + id: notVisibleToModelText + anchors.centerIn: parent + iconSize: Appearance.font.pixelSize.small + color: Appearance.colors.colSubtext + text: "visibility_off" + } + StyledToolTip { + text: Translation.tr("Not visible to model") } } - } - Button { // Not visible to model - id: modelVisibilityIndicator - visible: messageData?.role == 'interface' - implicitWidth: 16 - implicitHeight: 30 - Layout.alignment: Qt.AlignVCenter + ButtonGroup { + spacing: 5 - background: Item + AiMessageControlButton { + id: copyButton + buttonIcon: activated ? "inventory" : "content_copy" - MaterialSymbol { - id: notVisibleToModelText - anchors.centerIn: parent - iconSize: Appearance.font.pixelSize.small - color: Appearance.colors.colSubtext - text: "visibility_off" - } - StyledToolTip { - text: Translation.tr("Not visible to model") - } - } + onClicked: { + Quickshell.clipboardText = root.messageData?.content + copyButton.activated = true + copyIconTimer.restart() + } - ButtonGroup { - spacing: 5 - - AiMessageControlButton { - id: copyButton - buttonIcon: activated ? "inventory" : "content_copy" - - onClicked: { - Quickshell.clipboardText = root.messageData?.content - copyButton.activated = true - copyIconTimer.restart() - } - - Timer { - id: copyIconTimer - interval: 1500 - repeat: false - onTriggered: { - copyButton.activated = false + Timer { + id: copyIconTimer + interval: 1500 + repeat: false + onTriggered: { + copyButton.activated = false + } + } + + StyledToolTip { + text: Translation.tr("Copy") } } - - StyledToolTip { - text: Translation.tr("Copy") - } - } - AiMessageControlButton { - id: editButton - activated: root.editing - enabled: root.messageData?.done ?? false - buttonIcon: "edit" - onClicked: { - root.editing = !root.editing - if (!root.editing) { // Save changes - root.saveMessage() + AiMessageControlButton { + id: editButton + activated: root.editing + enabled: root.messageData?.done ?? false + buttonIcon: "edit" + onClicked: { + root.editing = !root.editing + if (!root.editing) { // Save changes + root.saveMessage() + } + } + StyledToolTip { + text: root.editing ? Translation.tr("Save") : Translation.tr("Edit") } } - StyledToolTip { - text: root.editing ? Translation.tr("Save") : Translation.tr("Edit") + AiMessageControlButton { + id: toggleMarkdownButton + activated: !root.renderMarkdown + buttonIcon: "code" + onClicked: { + root.renderMarkdown = !root.renderMarkdown + } + StyledToolTip { + text: Translation.tr("View Markdown source") + } } - } - AiMessageControlButton { - id: toggleMarkdownButton - activated: !root.renderMarkdown - buttonIcon: "code" - onClicked: { - root.renderMarkdown = !root.renderMarkdown - } - StyledToolTip { - text: Translation.tr("View Markdown source") - } - } - AiMessageControlButton { - id: deleteButton - buttonIcon: "close" - onClicked: { - Ai.removeMessage(root.messageIndex) - } - StyledToolTip { - text: Translation.tr("Delete") + AiMessageControlButton { + id: deleteButton + buttonIcon: "close" + onClicked: { + Ai.removeMessage(root.messageIndex) + } + StyledToolTip { + text: Translation.tr("Delete") + } } } } diff --git a/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessageControlButton.qml b/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessageControlButton.qml index 64fc77239..2c8067f60 100644 --- a/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessageControlButton.qml +++ b/.config/quickshell/ii/modules/sidebarLeft/aiChat/AiMessageControlButton.qml @@ -8,8 +8,9 @@ GroupButton { property string buttonIcon property bool activated: false toggled: activated - baseWidth: height + colBackgroundHover: Appearance.colors.colSecondaryContainerHover + colBackgroundActive: Appearance.colors.colSecondaryContainerActive contentItem: MaterialSymbol { horizontalAlignment: Text.AlignHCenter