Changes to the UI and icons.

Signed-off-by: Adam Treat <treat.adam@gmail.com>
2025-09-15 23:38:41 +00:00 · 2024-04-01 10:53:34 -04:00
parent 9c23d44ad3
commit 77d5adfb02
15 changed files with 268 additions and 322 deletions
--- a/gpt4all-chat/qml/ChatView.qml
+++ b/gpt4all-chat/qml/ChatView.qml
@@ -21,6 +21,8 @@ Rectangle {

    property var currentChat: ChatListModel.currentChat
    property var chatModel: currentChat.chatModel
+    signal settingsViewRequested(int page)
+    signal downloadViewRequested(bool showEmbeddingModels)

    color: theme.black

@@ -36,13 +38,6 @@ Rectangle {
        }
    }

-    Connections {
-        target: downloadNewModels
-        function onClosed() {
-            startupDialogs();
-        }
-    }
-
    Connections {
        target: Download
        function onHasNewerReleaseChanged() {
@@ -90,15 +85,15 @@ Rectangle {
            return;
        }

-        // check for any current models and if not, open download dialog once
+        // check for any current models and if not, open download view once
        if (!hasShownModelDownload && ModelList.installedModels.count === 0 && !firstStartDialog.opened) {
-            downloadNewModels.open();
+            downloadViewRequested();
            hasShownModelDownload = true;
            return;
        }

        // check for new version
-        if (Download.hasNewerRelease && !firstStartDialog.opened && !downloadNewModels.opened) {
+        if (Download.hasNewerRelease && !firstStartDialog.opened) {
            newVersionDialog.open();
            return;
        }
@@ -296,22 +291,29 @@ Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 20

-            MyToolButton {
-                id: drawerButton
+            Rectangle {
                Layout.alignment: Qt.AlignLeft
                Layout.leftMargin: 30
-                backgroundColor: theme.iconBackgroundLight
-                width: 40
-                height: 40
-                scale: 1.5
-                z: 200
-                padding: 15
-                source: conversation.state === "expanded" ? "qrc:/gpt4all/icons/left_panel_open.svg" : "qrc:/gpt4all/icons/left_panel_closed.svg"
-                Accessible.role: Accessible.ButtonMenu
-                Accessible.name: qsTr("Chat panel")
-                Accessible.description: qsTr("Chat panel with options")
-                onClicked: {
-                    conversation.toggleLeftPanel()
+                Layout.fillWidth: true
+                Layout.preferredWidth: 100
+                Layout.topMargin: 20
+                color: "transparent"
+                Layout.preferredHeight: childrenRect.height
+                MyToolButton {
+                    id: drawerButton
+                    anchors.left: parent.left
+                    backgroundColor: theme.iconBackgroundLight
+                    width: 40
+                    height: 40
+                    scale: 1.5
+                    padding: 15
+                    source: conversation.state === "expanded" ? "qrc:/gpt4all/icons/left_panel_open.svg" : "qrc:/gpt4all/icons/left_panel_closed.svg"
+                    Accessible.role: Accessible.ButtonMenu
+                    Accessible.name: qsTr("Chat panel")
+                    Accessible.description: qsTr("Chat panel with options")
+                    onClicked: {
+                        conversation.toggleLeftPanel()
+                    }
                }
            }

@@ -320,7 +322,7 @@ Rectangle {
                Layout.alignment: Qt.AlignHCenter
                Layout.fillHeight: true
                Layout.fillWidth: true
-                Layout.minimumWidth: 375
+                Layout.preferredWidth: 100
                Layout.maximumWidth: 675
                enabled: !currentChat.isServer
                    && !window.trySwitchContextInProgress
@@ -478,86 +480,67 @@ Rectangle {
                }
            }

-            RowLayout {
+            Rectangle {
+                color: "transparent"
                Layout.alignment: Qt.AlignRight
                Layout.rightMargin: 30
-                spacing: 20
+                Layout.fillWidth: true
+                Layout.preferredWidth: 100
+                Layout.preferredHeight: childrenRect.height
+                Layout.topMargin: 20

-                MyToolButton {
-                    id: resetContextButton
-                    backgroundColor: theme.iconBackgroundLight
-                    width: 40
-                    height: 40
-                    z: 200
-                    padding: 15
-                    source: "qrc:/gpt4all/icons/regenerate.svg"
+                RowLayout {
+                    spacing: 20
+                    anchors.right: parent.right
+                    MyButton {
+                        id: collectionsButton
+                        Image {
+                            id: collectionsImage
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.left: parent.left
+                            anchors.leftMargin: 15
+                            width: 24
+                            height: 24
+                            mipmap: true
+                            source: "qrc:/gpt4all/icons/db.svg"
+                        }

-                    Accessible.name: text
-                    Accessible.description: qsTr("Reset the context and erase current conversation")
+                        ColorOverlay {
+                            anchors.fill: collectionsImage
+                            source: collectionsImage
+                            color: collectionsButton.hovered || collectionsImage.toggled ? theme.iconBackgroundHovered : theme.iconBackgroundLight
+                        }

-                    onClicked: {
-                        Network.sendResetContext(chatModel.count)
-                        currentChat.reset();
-                        currentChat.processSystemPrompt();
-                    }
-                }
+                        leftPadding: 50
+                        borderWidth: 0
+                        backgroundColor: theme.mainComboBackground
+                        backgroundColorHovered: theme.conversationButtonBackgroundHovered
+                        backgroundRadius: 5
+                        padding: 15
+                        topPadding: 8
+                        bottomPadding: 8
+                        textColor: hovered || toggled ? theme.iconBackgroundHovered : theme.iconBackgroundLight
+                        text: qsTr("local docs")
+                        fontPixelSize: theme.fontSizeSmall

-                MyToolButton {
-                    id: copyButton
-                    backgroundColor: theme.iconBackgroundLight
-                    width: 40
-                    height: 40
-                    z: 200
-                    padding: 15
-                    source: "qrc:/gpt4all/icons/copy.svg"
-                    Accessible.name: qsTr("Copy")
-                    Accessible.description: qsTr("Copy the conversation to the clipboard")
+                        property bool toggled: currentChat.collectionList.length
+                        background: Rectangle {
+                            radius: collectionsButton.backgroundRadius
+                            color: collectionsButton.toggled ? collectionsButton.backgroundColorHovered : collectionsButton.backgroundColor
+                        }

-                    TextEdit{
-                        id: copyEdit
-                        visible: false
-                    }
+                        Accessible.name: qsTr("Add documents")
+                        Accessible.description: qsTr("add collections of documents to the chat")

-                    onClicked: {
-                        var conversation = getConversation()
-                        copyEdit.text = conversation
-                        copyEdit.selectAll()
-                        copyEdit.copy()
-                        copyMessage.open()
-                    }
-                }
-
-                MyToolButton {
-                    id: collectionsButton
-                    backgroundColor: theme.iconBackgroundLight
-                    width: 40
-                    height: 42.5
-                    z: 200
-                    padding: 15
-                    toggled: currentChat.collectionList.length
-                    source: "qrc:/gpt4all/icons/db.svg"
-                    Accessible.name: qsTr("Add documents")
-                    Accessible.description: qsTr("add collections of documents to the chat")
-
-                    onClicked: {
-                        collectionsDialog.open()
+                        onClicked: {
+                            collectionsDialog.open()
+                        }
                    }
                }
            }
        }
    }

-    SettingsDialog {
-        id: settingsDialog
-        anchors.centerIn: parent
-        width: Math.min(1920, window.width - (window.width * .1))
-        height: window.height - (window.height * .1)
-        onDownloadClicked: {
-            downloadNewModels.showEmbeddingModels = true
-            downloadNewModels.open()
-        }
-    }
-
    Connections {
        target: Network
        function onHealthCheckFailed(code) {
@@ -569,8 +552,7 @@ Rectangle {
        id: collectionsDialog
        anchors.centerIn: parent
        onAddRemoveClicked: {
-            settingsDialog.pageToDisplay = 2;
-            settingsDialog.open();
+            settingsViewRequested(2 /*page 2*/)
        }
    }

@@ -680,18 +662,6 @@ Rectangle {
        }
    }

-    ModelDownloaderDialog {
-        id: downloadNewModels
-        anchors.centerIn: parent
-        width: Math.min(1920, window.width - (window.width * .1))
-        height: window.height - (window.height * .1)
-        Item {
-            Accessible.role: Accessible.Dialog
-            Accessible.name: qsTr("Download new models")
-            Accessible.description: qsTr("Dialog for downloading new models")
-        }
-    }
-
    ChatDrawer {
        id: drawer
        anchors.left: parent.left
@@ -877,7 +847,7 @@ Rectangle {
                            padding: 18
                            leftPadding: 50
                            Image {
-                                id: image
+                                id: downloadImage
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: parent.left
                                anchors.leftMargin: 15
@@ -887,12 +857,13 @@ Rectangle {
                                source: "qrc:/gpt4all/icons/download.svg"
                            }
                            ColorOverlay {
-                                anchors.fill: image
-                                source: image
+                                anchors.fill: downloadImage
+                                source: downloadImage
                                color: theme.accentColor
                            }
                            onClicked: {
-                                downloadNewModels.open();
+                                console.log("download button")
+                                downloadViewRequested(false /*showEmbeddingModels*/);
                            }
                        }
                    }
--- a/gpt4all-chat/qml/ModelDownloaderDialog.qml
+++ b/gpt4all-chat/qml/ModelDownloaderDialog.qml
@@ -11,21 +11,15 @@ import modellist
 import network
 import mysettings

-MyDialog {
+Rectangle {
    id: modelDownloaderDialog
-    modal: true
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    padding: 10
-    property bool showEmbeddingModels: false
+    color: theme.containerBackground

-    onOpened: {
+    function showEmbeddingModels() {
        Network.sendModelDownloaderDialog();
-
-        if (showEmbeddingModels) {
-            ModelList.downloadableModels.expanded = true
-            var targetModelIndex = ModelList.defaultEmbeddingModelIndex
-            modelListView.positionViewAtIndex(targetModelIndex, ListView.Beginning)
-        }
+        ModelList.downloadableModels.expanded = true
+        var targetModelIndex = ModelList.defaultEmbeddingModelIndex
+        modelListView.positionViewAtIndex(targetModelIndex, ListView.Beginning)
    }

    PopupDialog {
@@ -36,7 +30,7 @@ MyDialog {

    ColumnLayout {
        anchors.fill: parent
-        anchors.margins: 10
+        anchors.margins: 20
        spacing: 30

        Label {
--- a/gpt4all-chat/qml/MyToolButton.qml
+++ b/gpt4all-chat/qml/MyToolButton.qml
@@ -27,11 +27,12 @@ Button {
        anchors.fill: parent
        Rectangle {
            anchors.fill: parent
-            color: "transparent"
+            color: myButton.toggledColor
            visible: myButton.toggled
            border.color: myButton.toggledColor
            border.width: myButton.toggledWidth
-            radius: 10
+            radius: 6
+            opacity: .2
        }
        Image {
            id: image
--- a/gpt4all-chat/qml/SettingsDialog.qml
+++ b/gpt4all-chat/qml/SettingsDialog.qml
@@ -11,13 +11,9 @@ import network
 import llm
 import mysettings

-MyDialog {
+Rectangle {
    id: settingsDialog
-    modal: true
-    padding: 20
-    onOpened: {
-        Network.sendSettingsDialog();
-    }
+    color: theme.containerBackground

    signal downloadClicked
    property alias pageToDisplay: listView.currentIndex
@@ -41,92 +37,96 @@ MyDialog {
        }
    }

-    Rectangle {
-        id: stackList
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        width: 220
-        color: theme.controlBackground
-        radius: 10
-
-        ScrollView {
+    Item {
+        anchors.fill: parent
+        anchors.margins: 20
+        Rectangle {
+            id: stackList
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.topMargin: 10
-            ScrollBar.vertical.policy: ScrollBar.AsNeeded
-            clip: true
+            width: 220
+            color: theme.controlBackground
+            radius: 10

-            ListView {
-                id: listView
-                anchors.fill: parent
-                model: stacksModel
+            ScrollView {
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.topMargin: 10
+                ScrollBar.vertical.policy: ScrollBar.AsNeeded
+                clip: true

-                delegate: Rectangle {
-                    id: item
-                    width: listView.width
-                    height: titleLabel.height + 10
-                    color: "transparent"
+                ListView {
+                    id: listView
+                    anchors.fill: parent
+                    model: stacksModel

-                    MyButton {
-                        id: titleLabel
-                        backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground
-                        backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground
-                        borderColor: index === listView.currentIndex ? theme.accentColor : "transparent"
-                        borderWidth: index === listView.currentIndex ? 1 : 0
-                        textColor: index === listView.currentIndex ? theme.oppositeTextColor : theme.titleTextColor
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        anchors.margins: 10
-                        font.bold: index === listView.currentIndex
-                        text: title
-                        font.pixelSize: theme.fontSizeLarge
-                        onClicked: {
-                            listView.currentIndex = index
+                    delegate: Rectangle {
+                        id: item
+                        width: listView.width
+                        height: titleLabel.height + 10
+                        color: "transparent"
+
+                        MyButton {
+                            id: titleLabel
+                            backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground
+                            backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground
+                            borderColor: index === listView.currentIndex ? theme.accentColor : "transparent"
+                            borderWidth: index === listView.currentIndex ? 1 : 0
+                            textColor: index === listView.currentIndex ? theme.oppositeTextColor : theme.titleTextColor
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                            anchors.margins: 10
+                            font.bold: index === listView.currentIndex
+                            text: title
+                            font.pixelSize: theme.fontSizeLarge
+                            onClicked: {
+                                listView.currentIndex = index
+                            }
                        }
                    }
                }
            }
        }
-    }

-    StackLayout {
-        id: stackLayout
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.left: stackList.right
-        anchors.right: parent.right
-        currentIndex: listView.currentIndex
+        StackLayout {
+            id: stackLayout
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: stackList.right
+            anchors.right: parent.right
+            currentIndex: listView.currentIndex

-        MySettingsStack {
-            title: qsTr("Model/Character Settings")
-            tabs: [
-                Component { ModelSettings { } }
-            ]
-        }
+            MySettingsStack {
+                title: qsTr("Model/Character Settings")
+                tabs: [
+                    Component { ModelSettings { } }
+                ]
+            }

-        MySettingsStack {
-            title: qsTr("Application General Settings")
-            tabs: [
-                Component { ApplicationSettings { } }
-            ]
-        }
+            MySettingsStack {
+                title: qsTr("Application General Settings")
+                tabs: [
+                    Component { ApplicationSettings { } }
+                ]
+            }

-        MySettingsStack {
-            title: qsTr("Local Document Collections")
-            tabs: [
-                Component {
-                    LocalDocsSettings {
-                        id: localDocsSettings
-                        Component.onCompleted: {
-                             localDocsSettings.downloadClicked.connect(settingsDialog.downloadClicked);
+            MySettingsStack {
+                title: qsTr("Local Document Collections")
+                tabs: [
+                    Component {
+                        LocalDocsSettings {
+                            id: localDocsSettings
+                            Component.onCompleted: {
+                                 localDocsSettings.downloadClicked.connect(settingsDialog.downloadClicked);
+                            }
                        }
                    }
-                }
-            ]
+                ]
+            }
        }
    }
 }
--- a/gpt4all-chat/qml/Theme.qml
+++ b/gpt4all-chat/qml/Theme.qml
@@ -390,33 +390,33 @@ QtObject {
    property color iconBackgroundViewBar: {
        switch (MySettings.chatTheme) {
            case "LegacyDark":
-                return blue200;
+                return iconBackgroundLight;
            case "Dark":
-                return green400;
+                return iconBackgroundLight;
            default:
-                return green700;
+                return green600;
        }
    }

    property color iconBackgroundViewBarToggled: {
        switch (MySettings.chatTheme) {
            case "LegacyDark":
-                return purple400;
+                return iconBackgroundHovered;
            case "Dark":
-                return accentColor;
+                return green400;
            default:
-                return black;
+                return green950;
        }
    }

    property color iconBackgroundViewBarHovered: {
        switch (MySettings.chatTheme) {
            case "LegacyDark":
-                return blue400;
+                return iconBackgroundHovered;
            case "Dark":
-                return green600;
+                return iconBackgroundHovered;
            default:
-                return green500;
+                return green950;
        }
    }