forked from Shinonome/dots-hyprland
ai chat: adjust msg header style
This commit is contained in:
end-4
@@ -32,7 +32,7 @@ Button {
|
|||||||
implicitWidth: (root.down && bounce) ? clickedWidth : baseWidth
|
implicitWidth: (root.down && bounce) ? clickedWidth : baseWidth
|
||||||
implicitHeight: (root.down && bounce) ? clickedHeight : baseHeight
|
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 colBackgroundHover: Appearance?.colors.colLayer1Hover ?? "#E5DFED"
|
||||||
property color colBackgroundActive: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
|
property color colBackgroundActive: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
|
||||||
property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F"
|
property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F"
|
||||||
|
|||||||
@@ -79,155 +79,164 @@ Rectangle {
|
|||||||
anchors.margins: messagePadding
|
anchors.margins: messagePadding
|
||||||
spacing: root.contentSpacing
|
spacing: root.contentSpacing
|
||||||
|
|
||||||
RowLayout { // Header
|
Rectangle {
|
||||||
spacing: 15
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
implicitWidth: headerRowLayout.implicitWidth + 4 * 2
|
||||||
|
implicitHeight: headerRowLayout.implicitHeight + 4 * 2
|
||||||
|
color: Appearance.colors.colSecondaryContainer
|
||||||
|
radius: Appearance.rounding.small
|
||||||
|
|
||||||
Rectangle { // Name
|
RowLayout { // Header
|
||||||
id: nameWrapper
|
id: headerRowLayout
|
||||||
color: Appearance.colors.colSecondaryContainer
|
anchors {
|
||||||
// color: "transparent"
|
fill: parent
|
||||||
radius: Appearance.rounding.small
|
margins: 4
|
||||||
implicitHeight: Math.max(nameRowLayout.implicitHeight + 5 * 2, 30)
|
}
|
||||||
Layout.fillWidth: true
|
spacing: 18
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
|
|
||||||
RowLayout {
|
Item { // Name
|
||||||
id: nameRowLayout
|
id: nameWrapper
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
implicitHeight: Math.max(nameRowLayout.implicitHeight + 5 * 2, 30)
|
||||||
anchors.left: parent.left
|
Layout.fillWidth: true
|
||||||
anchors.right: parent.right
|
Layout.alignment: Qt.AlignVCenter
|
||||||
anchors.leftMargin: 10
|
|
||||||
anchors.rightMargin: 10
|
|
||||||
spacing: 7
|
|
||||||
|
|
||||||
Item {
|
RowLayout {
|
||||||
Layout.alignment: Qt.AlignVCenter
|
id: nameRowLayout
|
||||||
Layout.fillHeight: true
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
implicitWidth: messageData?.role == 'assistant' ? modelIcon.width : roleIcon.implicitWidth
|
anchors.left: parent.left
|
||||||
implicitHeight: messageData?.role == 'assistant' ? modelIcon.height : roleIcon.implicitHeight
|
anchors.right: parent.right
|
||||||
|
anchors.leftMargin: 10
|
||||||
|
anchors.rightMargin: 10
|
||||||
|
spacing: 7
|
||||||
|
|
||||||
CustomIcon {
|
Item {
|
||||||
id: modelIcon
|
Layout.alignment: Qt.AlignVCenter
|
||||||
anchors.centerIn: parent
|
Layout.fillHeight: true
|
||||||
visible: messageData?.role == 'assistant' && Ai.models[messageData?.model].icon
|
implicitWidth: messageData?.role == 'assistant' ? modelIcon.width : roleIcon.implicitWidth
|
||||||
width: Appearance.font.pixelSize.large
|
implicitHeight: messageData?.role == 'assistant' ? modelIcon.height : roleIcon.implicitHeight
|
||||||
height: Appearance.font.pixelSize.large
|
|
||||||
source: messageData?.role == 'assistant' ? Ai.models[messageData?.model].icon :
|
|
||||||
messageData?.role == 'user' ? 'linux-symbolic' : 'desktop-symbolic'
|
|
||||||
|
|
||||||
colorize: true
|
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
|
||||||
|
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
|
color: Appearance.m3colors.m3onSecondaryContainer
|
||||||
}
|
text: messageData?.role == 'assistant' ? Ai.models[messageData?.model].name :
|
||||||
|
(messageData?.role == 'user' && SystemInfo.username) ? SystemInfo.username :
|
||||||
MaterialSymbol {
|
Translation.tr("Interface")
|
||||||
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 {
|
Button { // Not visible to model
|
||||||
id: providerName
|
id: modelVisibilityIndicator
|
||||||
Layout.alignment: Qt.AlignVCenter
|
visible: messageData?.role == 'interface'
|
||||||
Layout.fillWidth: true
|
implicitWidth: 16
|
||||||
elide: Text.ElideRight
|
implicitHeight: 30
|
||||||
font.pixelSize: Appearance.font.pixelSize.normal
|
Layout.alignment: Qt.AlignVCenter
|
||||||
color: Appearance.m3colors.m3onSecondaryContainer
|
|
||||||
text: messageData?.role == 'assistant' ? Ai.models[messageData?.model].name :
|
background: Item
|
||||||
(messageData?.role == 'user' && SystemInfo.username) ? SystemInfo.username :
|
|
||||||
Translation.tr("Interface")
|
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
|
ButtonGroup {
|
||||||
id: modelVisibilityIndicator
|
spacing: 5
|
||||||
visible: messageData?.role == 'interface'
|
|
||||||
implicitWidth: 16
|
|
||||||
implicitHeight: 30
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
|
|
||||||
background: Item
|
AiMessageControlButton {
|
||||||
|
id: copyButton
|
||||||
|
buttonIcon: activated ? "inventory" : "content_copy"
|
||||||
|
|
||||||
MaterialSymbol {
|
onClicked: {
|
||||||
id: notVisibleToModelText
|
Quickshell.clipboardText = root.messageData?.content
|
||||||
anchors.centerIn: parent
|
copyButton.activated = true
|
||||||
iconSize: Appearance.font.pixelSize.small
|
copyIconTimer.restart()
|
||||||
color: Appearance.colors.colSubtext
|
}
|
||||||
text: "visibility_off"
|
|
||||||
}
|
|
||||||
StyledToolTip {
|
|
||||||
text: Translation.tr("Not visible to model")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ButtonGroup {
|
Timer {
|
||||||
spacing: 5
|
id: copyIconTimer
|
||||||
|
interval: 1500
|
||||||
|
repeat: false
|
||||||
|
onTriggered: {
|
||||||
|
copyButton.activated = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
AiMessageControlButton {
|
StyledToolTip {
|
||||||
id: copyButton
|
text: Translation.tr("Copy")
|
||||||
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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
AiMessageControlButton {
|
||||||
StyledToolTip {
|
id: editButton
|
||||||
text: Translation.tr("Copy")
|
activated: root.editing
|
||||||
}
|
enabled: root.messageData?.done ?? false
|
||||||
}
|
buttonIcon: "edit"
|
||||||
AiMessageControlButton {
|
onClicked: {
|
||||||
id: editButton
|
root.editing = !root.editing
|
||||||
activated: root.editing
|
if (!root.editing) { // Save changes
|
||||||
enabled: root.messageData?.done ?? false
|
root.saveMessage()
|
||||||
buttonIcon: "edit"
|
}
|
||||||
onClicked: {
|
}
|
||||||
root.editing = !root.editing
|
StyledToolTip {
|
||||||
if (!root.editing) { // Save changes
|
text: root.editing ? Translation.tr("Save") : Translation.tr("Edit")
|
||||||
root.saveMessage()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
StyledToolTip {
|
AiMessageControlButton {
|
||||||
text: root.editing ? Translation.tr("Save") : Translation.tr("Edit")
|
id: toggleMarkdownButton
|
||||||
|
activated: !root.renderMarkdown
|
||||||
|
buttonIcon: "code"
|
||||||
|
onClicked: {
|
||||||
|
root.renderMarkdown = !root.renderMarkdown
|
||||||
|
}
|
||||||
|
StyledToolTip {
|
||||||
|
text: Translation.tr("View Markdown source")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
AiMessageControlButton {
|
||||||
AiMessageControlButton {
|
id: deleteButton
|
||||||
id: toggleMarkdownButton
|
buttonIcon: "close"
|
||||||
activated: !root.renderMarkdown
|
onClicked: {
|
||||||
buttonIcon: "code"
|
Ai.removeMessage(root.messageIndex)
|
||||||
onClicked: {
|
}
|
||||||
root.renderMarkdown = !root.renderMarkdown
|
StyledToolTip {
|
||||||
}
|
text: Translation.tr("Delete")
|
||||||
StyledToolTip {
|
}
|
||||||
text: Translation.tr("View Markdown source")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
AiMessageControlButton {
|
|
||||||
id: deleteButton
|
|
||||||
buttonIcon: "close"
|
|
||||||
onClicked: {
|
|
||||||
Ai.removeMessage(root.messageIndex)
|
|
||||||
}
|
|
||||||
StyledToolTip {
|
|
||||||
text: Translation.tr("Delete")
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,8 +8,9 @@ GroupButton {
|
|||||||
property string buttonIcon
|
property string buttonIcon
|
||||||
property bool activated: false
|
property bool activated: false
|
||||||
toggled: activated
|
toggled: activated
|
||||||
|
|
||||||
baseWidth: height
|
baseWidth: height
|
||||||
|
colBackgroundHover: Appearance.colors.colSecondaryContainerHover
|
||||||
|
colBackgroundActive: Appearance.colors.colSecondaryContainerActive
|
||||||
|
|
||||||
contentItem: MaterialSymbol {
|
contentItem: MaterialSymbol {
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
|||||||
Reference in New Issue
Block a user