feat: implement file and text drop handling for chat and add shrunk sidebar override for window view
This commit is contained in:
@@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import QtQuick.Layouts
|
||||
import ZShell.Services
|
||||
import ZShell.Components
|
||||
import ZShell.Config
|
||||
import ZShell.Llm
|
||||
@@ -90,7 +91,9 @@ Item {
|
||||
signal requestClose
|
||||
|
||||
readonly property bool atNewestEnd: !listLoader.item || listLoader.item.contentY < 4
|
||||
readonly property bool importing: importIds.length > 0
|
||||
|
||||
property var importIds: []
|
||||
property var pendingAttachments: []
|
||||
|
||||
function attachFiles(): void {
|
||||
@@ -541,7 +544,7 @@ Item {
|
||||
bg.border.color: Colors.palette.m3outlineVariant
|
||||
bg.color: Colors.tPalette.m3surfaceContainerLowest
|
||||
fastGlow: LlmClient.busy
|
||||
glow.opacity: input.activeFocus && (!LlmClient.busy || ChatState.isWindow)
|
||||
glow.opacity: !ChatState.narrowSidebarExpanded ? (input.activeFocus && (!LlmClient.busy || ChatState.isWindow) ? 1 : 0) : 0
|
||||
font: Tokens.font.body.small
|
||||
implicitHeight: Math.min(root.height / 5, contentHeight + topPadding + bottomPadding)
|
||||
focus: true
|
||||
@@ -578,4 +581,52 @@ Item {
|
||||
root.send(text);
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: DropImporter
|
||||
|
||||
function onImportFinished(id: int, paths: var, errors: var): void {
|
||||
if (!root.importIds.includes(id))
|
||||
return;
|
||||
root.importIds = root.importIds.filter(i => i !== id);
|
||||
|
||||
if (paths.length > 0) {
|
||||
const added = root.chatData.addAttachments(paths);
|
||||
root.pendingAttachments = root.pendingAttachments.concat(added);
|
||||
}
|
||||
for (const e of errors)
|
||||
console.warn("Drop import:", e);
|
||||
}
|
||||
}
|
||||
|
||||
DropArea {
|
||||
id: dropArea
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
onEntered: drag => {
|
||||
drag.accepted = drag.hasUrls || drag.hasText || drag.hasHtml || drag.formats.some(f => f.startsWith("image/"));
|
||||
}
|
||||
|
||||
onDropped: drop => {
|
||||
const formats = drop.formats;
|
||||
const urls = drop.hasUrls ? drop.urls : [];
|
||||
const text = drop.hasText ? drop.text : "";
|
||||
const html = drop.hasHtml ? drop.html : "";
|
||||
|
||||
const imgFormat = formats.find(f => f.startsWith("image/"));
|
||||
const raw = imgFormat ? drop.getDataAsArrayBuffer(imgFormat) : new ArrayBuffer(0);
|
||||
|
||||
switch (DropImporter.decide(urls, text, html, raw.byteLength > 0)) {
|
||||
case DropImporter.Attach:
|
||||
root.importIds = [...root.importIds, DropImporter.importAttachments(urls, html, raw)];
|
||||
break;
|
||||
case DropImporter.InsertText:
|
||||
input.insert(input.cursorPosition, text || urls.map(u => u.toString()).join("\n"));
|
||||
root.focusInput();
|
||||
break;
|
||||
}
|
||||
drop.acceptProposedAction();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,6 +91,50 @@ CustomRect {
|
||||
|
||||
opacity: root.slim ? 0 : 1
|
||||
|
||||
state: titleText.readOnly ? "static" : "editing"
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "static"
|
||||
PropertyChanges {
|
||||
staticText.opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
titleText.opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "editing"
|
||||
PropertyChanges {
|
||||
staticText.opacity: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
titleText.opacity: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
// Going static: titleText fades out (animated), staticText snaps in
|
||||
Transition {
|
||||
to: "static"
|
||||
Anim {
|
||||
target: titleText
|
||||
property: "opacity"
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
},
|
||||
// Going editing: staticText fades out (animated), titleText snaps in
|
||||
Transition {
|
||||
to: "editing"
|
||||
Anim {
|
||||
target: staticText
|
||||
property: "opacity"
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
@@ -106,7 +150,7 @@ CustomRect {
|
||||
color: Colors.layer(Colors.palette.m3surfaceContainerHighest, 1)
|
||||
implicitHeight: titleText.implicitHeight + Tokens.padding.extraSmall * 2
|
||||
radius: Tokens.rounding.full
|
||||
implicitWidth: titleText.implicitWidth + Tokens.padding.large * 2
|
||||
implicitWidth: titleText.width + Tokens.padding.large * 2
|
||||
opacity: titleText.readOnly ? 0 : 1
|
||||
|
||||
Behavior on opacity {
|
||||
@@ -122,11 +166,6 @@ CustomRect {
|
||||
anchors.right: parent.right
|
||||
implicitHeight: titleText.implicitHeight + Tokens.padding.small * 2
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: fadeMask
|
||||
}
|
||||
|
||||
TextFieldBase {
|
||||
id: titleText
|
||||
|
||||
@@ -134,10 +173,12 @@ CustomRect {
|
||||
anchors.leftMargin: readOnly ? 0 : Tokens.padding.large
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: readOnly ? Tokens.padding.small : Tokens.padding.extraSmall * 2
|
||||
width: Math.min(implicitWidth, parent.width - Tokens.padding.large * 2)
|
||||
font: Tokens.font.body.medium
|
||||
text: root.modelData.title || qsTr("New chat")
|
||||
readOnly: true
|
||||
color: Colors.palette.m3onSurface
|
||||
opacity: 0
|
||||
|
||||
Behavior on anchors.leftMargin {
|
||||
Anim {}
|
||||
@@ -146,6 +187,11 @@ CustomRect {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
function cancelTitleEdit(): void {
|
||||
text = root.modelData.title;
|
||||
readOnly = true;
|
||||
}
|
||||
|
||||
onEditingFinished: root.modelData.title = text
|
||||
onReadOnlyChanged: {
|
||||
if (!readOnly) {
|
||||
@@ -156,27 +202,24 @@ CustomRect {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: fadeMask
|
||||
CustomText {
|
||||
id: staticText
|
||||
|
||||
anchors.fill: titleWrapper
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: titleText.readOnly ? 0 : Tokens.padding.large
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: titleText.readOnly ? Tokens.padding.small : Tokens.padding.extraSmall * 2
|
||||
anchors.right: parent.right
|
||||
font: titleText.font
|
||||
text: titleText.text
|
||||
elide: CustomText.ElideRight
|
||||
|
||||
layer.enabled: true
|
||||
visible: false
|
||||
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Horizontal
|
||||
|
||||
GradientStop {
|
||||
color: Qt.rgba(1, 1, 1, 1.0)
|
||||
position: 0.85
|
||||
Behavior on anchors.leftMargin {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
color: Qt.rgba(1, 1, 1, 0)
|
||||
position: 1.0
|
||||
Behavior on anchors.topMargin {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -323,7 +366,13 @@ CustomRect {
|
||||
inactiveColor: Colors.layer(Colors.palette.m3surfaceContainerHighest, 3)
|
||||
inactiveOnColor: Colors.palette.m3onSurfaceVariant
|
||||
|
||||
onClicked: root.remove(root.modelData)
|
||||
onClicked: {
|
||||
if (!titleText.readOnly) {
|
||||
titleText.cancelTitleEdit();
|
||||
return;
|
||||
}
|
||||
root.remove(root.modelData);
|
||||
}
|
||||
}
|
||||
|
||||
IconButton {
|
||||
@@ -366,7 +415,10 @@ CustomRect {
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
onClicked: root.expanded = !root.expanded
|
||||
onClicked: {
|
||||
root.expanded = !root.expanded;
|
||||
titleText.readOnly = true;
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
|
||||
@@ -140,7 +140,7 @@ Item {
|
||||
label.transform: Rotation {
|
||||
origin.y: fabRoot.label.height / 2
|
||||
origin.x: fabRoot.label.width / 2
|
||||
angle: ChatState.fabExpanded && (ChatState.narrowSidebarExpanded && !ChatState.isWide || !ChatState.isWindow) ? 135 : 0
|
||||
angle: ChatState.fabExpanded && (ChatState.narrowSidebarExpanded || !ChatState.isWide || !ChatState.isWindow) ? 135 : 0
|
||||
|
||||
Behavior on angle {
|
||||
Anim {}
|
||||
@@ -148,8 +148,9 @@ Item {
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if (root.slim && !ChatState.narrowSidebarExpanded) {
|
||||
if ((root.slim && !ChatState.narrowSidebarExpanded) || ChatState.shrinkSidebarOverride) {
|
||||
root.requestExpand();
|
||||
ChatState.shrinkSidebarOverride = false;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -183,6 +184,10 @@ Item {
|
||||
name: "pop out in window"
|
||||
icon: "open_in_new"
|
||||
}
|
||||
ListElement {
|
||||
name: "shrink sidebar"
|
||||
icon: "left_panel_close"
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
@@ -196,7 +201,18 @@ Item {
|
||||
|
||||
radius: sLayer.pressed ? Tokens.rounding.small : implicitHeight / 2
|
||||
color: Colors.palette.m3primaryContainer
|
||||
visible: !(modelData.name === "pop out in window" && ChatState.isWindow)
|
||||
visible: {
|
||||
const n = modelData.name;
|
||||
const w = ChatState.isWindow;
|
||||
const wide = ChatState.isWide;
|
||||
|
||||
if (n === "pop out in window" && w)
|
||||
return false;
|
||||
if (n === "shrink sidebar" && (!w || !wide))
|
||||
return false;
|
||||
else
|
||||
return true;
|
||||
}
|
||||
clip: true
|
||||
|
||||
Behavior on radius {
|
||||
@@ -297,6 +313,8 @@ Item {
|
||||
root.newChatRequest();
|
||||
else if (name === "pop out in window")
|
||||
Detach.create();
|
||||
else if (name === "shrink sidebar")
|
||||
ChatState.shrinkSidebarOverride = true;
|
||||
|
||||
ChatState.fabExpanded = false;
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ Singleton {
|
||||
property bool settledSlim: false
|
||||
property bool settledWide: false
|
||||
property bool narrowSidebarExpanded: false
|
||||
property bool windowIsWide: false
|
||||
property bool shrinkSidebarOverride: false
|
||||
property ShellScreen screen
|
||||
property bool sidebarVisible: ShellState.forActive().sidebar
|
||||
|
||||
@@ -28,6 +28,9 @@ Singleton {
|
||||
root.currentIdx = -1;
|
||||
}
|
||||
|
||||
onIsWideChanged: if (isWide)
|
||||
narrowSidebarExpanded = false
|
||||
|
||||
onSidebarVisibleChanged: if (!sidebarVisible)
|
||||
fabExpanded = false
|
||||
}
|
||||
|
||||
@@ -220,9 +220,8 @@ CustomRect {
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: root.codeHeaderColor
|
||||
font: Tokens.font.label.small
|
||||
font: Tokens.font.label.builders.small.capitalization(Font.Capitalize).build()
|
||||
text: CodeIcons.name(root.language)
|
||||
visible: root.language.length > 0
|
||||
}
|
||||
|
||||
Item {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -21,12 +21,8 @@ Item {
|
||||
property bool chatOpen: ChatState.chatSession !== null
|
||||
|
||||
readonly property bool isWide: root.width >= root.breakpoint
|
||||
|
||||
readonly property bool showList: isWide || !chatOpen
|
||||
readonly property bool showContent: !isWide && chatOpen
|
||||
|
||||
function openConversation(conv: ChatSession, index: int): void {
|
||||
}
|
||||
readonly property bool wideExpandedSidebar: isWide && !ChatState.shrinkSidebarOverride
|
||||
readonly property bool narrowExpandedSidebar: !isWide && ChatState.narrowSidebarExpanded
|
||||
|
||||
BlobGroup {
|
||||
id: blobGroup
|
||||
@@ -54,9 +50,9 @@ Item {
|
||||
anchors.left: parent.left
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.margins: Tokens.padding.medium
|
||||
implicitWidth: root.isWide || ChatState.narrowSidebarExpanded ? Config.sidebar.sizes.width : root.iconSize
|
||||
implicitWidth: root.wideExpandedSidebar || root.narrowExpandedSidebar ? Config.sidebar.sizes.width : root.iconSize
|
||||
highlight: true
|
||||
slim: !root.isWide && !ChatState.narrowSidebarExpanded
|
||||
slim: !root.wideExpandedSidebar && !root.narrowExpandedSidebar
|
||||
z: 1
|
||||
|
||||
Behavior on implicitWidth {
|
||||
@@ -86,13 +82,13 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
ClipRect {
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: invertedRect.borderLeft
|
||||
anchors.topMargin: invertedRect.borderTop
|
||||
anchors.bottomMargin: invertedRect.borderBottom
|
||||
anchors.rightMargin: invertedRect.borderRight
|
||||
radius: invertedRect.radius
|
||||
clip: true
|
||||
|
||||
children: [contentArea, dim]
|
||||
}
|
||||
@@ -100,9 +96,10 @@ Item {
|
||||
CustomRect {
|
||||
id: dim
|
||||
anchors.fill: parent
|
||||
radius: invertedRect.radius
|
||||
|
||||
color: Colors.palette.m3shadow
|
||||
opacity: ChatState.narrowSidebarExpanded && !root.isWide ? 0.3 : 0
|
||||
opacity: root.narrowExpandedSidebar ? 0.3 : 0
|
||||
z: 1
|
||||
|
||||
Behavior on opacity {
|
||||
@@ -155,7 +152,7 @@ Item {
|
||||
id: dimArea
|
||||
anchors.fill: parent
|
||||
preventStealing: true
|
||||
enabled: !root.isWide && ChatState.narrowSidebarExpanded
|
||||
enabled: root.narrowExpandedSidebar
|
||||
cursorShape: undefined
|
||||
|
||||
onClicked: {
|
||||
@@ -175,12 +172,6 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Binding {
|
||||
target: ChatState
|
||||
property: "windowIsWide"
|
||||
value: root.showList
|
||||
}
|
||||
|
||||
Binding {
|
||||
target: ChatState
|
||||
property: "isWide"
|
||||
|
||||
Reference in New Issue
Block a user