new chatlistview component, file attachments, performance & primitive test
This commit is contained in:
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user