Preliminary redesign of the UI. This has no major regression.

Signed-off-by: Adam Treat <treat.adam@gmail.com>

gpt4all-chat/CMakeLists.txt

@@ -131,6 +131,7 @@ qt_add_qml_module(chat
       icons/send_message.svg
       icons/stop_generating.svg
       icons/regenerate.svg
+      icons/chat.svg
       icons/close.svg
       icons/copy.svg
       icons/db.svg
@@ -139,6 +140,8 @@ qt_add_qml_module(chat
       icons/eject.svg
       icons/edit.svg
       icons/image.svg
+      icons/info.svg
+      icons/search.svg
       icons/trash.svg
       icons/network.svg
       icons/thumbs_up.svg

gpt4all-chat/icons/chat.svg

@@ -0,0 +1,6 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M144 208c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zM256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
+<!--
+Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

gpt4all-chat/icons/info.svg

@@ -0,0 +1,6 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>
+<!--
+Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

gpt4all-chat/icons/search.svg

@@ -0,0 +1,6 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
+<!--
+Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

gpt4all-chat/main.qml

@@ -43,6 +43,48 @@ Window {
         font.pixelSize: theme.fontSizeLarge
     }
 
+    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()
+        }
+    }
+
+    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")
+        }
+    }
+
+    NetworkDialog {
+        id: networkDialog
+        anchors.centerIn: parent
+        width: Math.min(1024, window.width - (window.width * .2))
+        height: Math.min(600, window.height - (window.height * .2))
+        Item {
+            Accessible.role: Accessible.Dialog
+            Accessible.name: qsTr("Network dialog")
+            Accessible.description: qsTr("opt-in to share feedback/conversations")
+        }
+    }
+
+    AboutDialog {
+        id: aboutDialog
+        anchors.centerIn: parent
+        width: Math.min(1024, window.width - (window.width * .2))
+        height: Math.min(600, window.height - (window.height * .2))
+    }
+
     onClosing: function(close) {
         if (window.hasSaved)
             return;
@@ -63,7 +105,123 @@ Window {
 
     color: theme.black
 
+    Rectangle {
+        id: viewBar
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        width: 80
+        color: theme.viewBarBackground
+
+        ColumnLayout {
+            id: viewsLayout
+            anchors.top: parent.top
+            anchors.topMargin: 30
+            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.margins: 0
+            spacing: 25
+
+            MyToolButton {
+                id: chatButton
+                backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar
+                backgroundColorHovered: theme.iconBackgroundViewBarHovered
+                toggledWidth: 0
+                toggled: true
+                Layout.preferredWidth: 50
+                Layout.preferredHeight: 50
+                scale: 1.5
+                source: "qrc:/gpt4all/icons/chat.svg"
+                Accessible.name: qsTr("Chat view")
+                Accessible.description: qsTr("Chat view to interact with models")
+                onClicked: {
+                }
+            }
+
+            MyToolButton {
+                id: searchButton
+                backgroundColor: theme.iconBackgroundViewBar
+                backgroundColorHovered: theme.iconBackgroundViewBarHovered
+                Layout.preferredWidth: 50
+                Layout.preferredHeight: 50
+                scale: 1.5
+                source: "qrc:/gpt4all/icons/search.svg"
+                Accessible.name: qsTr("Search")
+                Accessible.description: qsTr("Launch a dialog to download new models")
+                onClicked: {
+                    downloadNewModels.showEmbeddingModels = false
+                    downloadNewModels.open()
+                }
+            }
+
+            MyToolButton {
+                id: settingsButton
+                backgroundColor: theme.iconBackgroundViewBar
+                backgroundColorHovered: theme.iconBackgroundViewBarHovered
+                Layout.preferredWidth: 50
+                Layout.preferredHeight: 50
+                scale: 1.5
+                source: "qrc:/gpt4all/icons/settings.svg"
+                Accessible.name: qsTr("Settings")
+                Accessible.description: qsTr("Reveals a dialogue with settings")
+
+                onClicked: {
+                    settingsDialog.open()
+                }
+            }
+        }
+
+        ColumnLayout {
+            id: buttonsLayout
+            anchors.bottom: parent.bottom
+            anchors.margins: 0
+            anchors.bottomMargin: 25
+            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.margins: 0
+            spacing: 25
+
+            MyToolButton {
+                id: networkButton
+                backgroundColor: theme.iconBackgroundViewBar
+                backgroundColorHovered: theme.iconBackgroundViewBarHovered
+                toggledColor: theme.iconBackgroundViewBar
+                Layout.preferredWidth: 40
+                Layout.preferredHeight: 40
+                scale: 1.2
+                toggled: MySettings.networkIsActive
+                source: "qrc:/gpt4all/icons/network.svg"
+                Accessible.name: qsTr("Network")
+                Accessible.description: qsTr("Reveals a dialogue where you can opt-in for sharing data over network")
+
+                onClicked: {
+                    if (MySettings.networkIsActive) {
+                        MySettings.networkIsActive = false
+                        Network.sendNetworkToggled(false);
+                    } else
+                        networkDialog.open()
+                }
+            }
+
+            MyToolButton {
+                id: infoButton
+                backgroundColor: theme.iconBackgroundViewBar
+                backgroundColorHovered: theme.iconBackgroundViewBarHovered
+                Layout.preferredWidth: 40
+                Layout.preferredHeight: 40
+                scale: 1.2
+                source: "qrc:/gpt4all/icons/info.svg"
+                Accessible.name: qsTr("About")
+                Accessible.description: qsTr("Reveals an about dialog")
+                onClicked: {
+                    aboutDialog.open()
+                }
+            }
+        }
+    }
+
     ChatView {
-        anchors.fill: parent
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: viewBar.right
+        anchors.right: parent.right
     }
 }

gpt4all-chat/qml/AboutDialog.qml

@@ -98,4 +98,17 @@ MyDialog {
             Accessible.description: qsTr("Contains embedded link to https://home.nomic.ai")
         }
     }
+
+    MyButton {
+        id: checkForUpdatesButton
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        text: qsTr("Check for updates...")
+        font.pixelSize: theme.fontSizeLarge
+        Accessible.description: qsTr("Launch an external application that will check for updates to the installer")
+        onClicked: {
+            if (!LLM.checkForUpdates())
+                checkForUpdatesError.open()
+        }
+    }
 }

gpt4all-chat/qml/ChatDrawer.qml

@@ -16,13 +16,22 @@ Rectangle {
         id: theme
     }
 
-    signal downloadClicked
-    signal aboutClicked
-
     color: theme.containerBackground
 
+    Rectangle {
+        id: borderRight
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        width: 2
+        color: theme.containerForeground
+    }
+
     Item {
-        anchors.fill: parent
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: borderRight.left
         anchors.margins: 10
 
         Accessible.role: Accessible.Pane
@@ -50,7 +59,7 @@ Rectangle {
             anchors.rightMargin: -10
             anchors.topMargin: 10
             anchors.top: newChat.bottom
-            anchors.bottom: checkForUpdatesButton.top
+            anchors.bottom: parent.bottom
             anchors.bottomMargin: 10
             ScrollBar.vertical.policy: ScrollBar.AlwaysOff
             clip: true
@@ -236,45 +245,5 @@ Rectangle {
                 Accessible.description: qsTr("List of chats in the drawer dialog")
             }
         }
-
-        MyButton {
-            id: checkForUpdatesButton
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: downloadButton.top
-            anchors.bottomMargin: 10
-            text: qsTr("Updates")
-            font.pixelSize: theme.fontSizeLarge
-            Accessible.description: qsTr("Launch an external application that will check for updates to the installer")
-            onClicked: {
-                if (!LLM.checkForUpdates())
-                    checkForUpdatesError.open()
-            }
-        }
-
-        MyButton {
-            id: downloadButton
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: aboutButton.top
-            anchors.bottomMargin: 10
-            text: qsTr("Downloads")
-            Accessible.description: qsTr("Launch a dialog to download new models")
-            onClicked: {
-                downloadClicked()
-            }
-        }
-
-        MyButton {
-            id: aboutButton
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            text: qsTr("About")
-            Accessible.description: qsTr("Launch a dialog to show the about page")
-            onClicked: {
-                aboutClicked()
-            }
-        }
     }
 }

gpt4all-chat/qml/ChatView.qml

@@ -153,13 +153,6 @@ Rectangle {
         anchors.centerIn: parent
     }
 
-    AboutDialog {
-        id: aboutDialog
-        anchors.centerIn: parent
-        width: Math.min(1024, window.width - (window.width * .2))
-        height: Math.min(600, window.height - (window.height * .2))
-    }
-
     Item {
         Accessible.role: Accessible.Window
         Accessible.name: title
@@ -294,37 +287,41 @@ Rectangle {
         anchors.top: parent.top
         height: 100
         color: theme.mainHeader
-        Item {
-            anchors.centerIn: parent
-            height: childrenRect.height
-            visible: true
-
-            Label {
-                id: modelLabel
-                color: theme.textColor
-                padding: 20
-                font.pixelSize: theme.fontSizeLarger
-                text: ""
-                background: Rectangle {
-                    color: theme.mainHeader
-                }
-                horizontalAlignment: TextInput.AlignRight
-            }
 
         RowLayout {
             id: comboLayout
-                anchors.top: modelLabel.top
+            height: 80
-                anchors.bottom: modelLabel.bottom
+            anchors.left: parent.left
-                anchors.horizontalCenter: parent.horizontalCenter
+            anchors.right: parent.right
-                anchors.horizontalCenterOffset: window.width >= 950 ? 0 : Math.max(-((950 - window.width) / 2), -99.5)
+            anchors.verticalCenter: parent.verticalCenter
             spacing: 20
 
+            MyToolButton {
+                id: drawerButton
+                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()
+                }
+            }
+
             MyComboBox {
                 id: comboBox
-                    Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter
                 Layout.fillHeight: true
-                    implicitWidth: 575
+                Layout.fillWidth: true
-                    width: window.width >= 750 ? implicitWidth : implicitWidth - (750 - window.width)
+                Layout.minimumWidth: 375
+                Layout.maximumWidth: 675
                 enabled: !currentChat.isServer
                     && !window.trySwitchContextInProgress
                     && !window.isCurrentlyLoading
@@ -480,6 +477,72 @@ Rectangle {
                     ToolTip.visible: hovered
                 }
             }
+
+            RowLayout {
+                Layout.alignment: Qt.AlignRight
+                Layout.rightMargin: 30
+                spacing: 20
+
+                MyToolButton {
+                    id: resetContextButton
+                    backgroundColor: theme.iconBackgroundLight
+                    width: 40
+                    height: 40
+                    z: 200
+                    padding: 15
+                    source: "qrc:/gpt4all/icons/regenerate.svg"
+
+                    Accessible.name: text
+                    Accessible.description: qsTr("Reset the context and erase current conversation")
+
+                    onClicked: {
+                        Network.sendResetContext(chatModel.count)
+                        currentChat.reset();
+                        currentChat.processSystemPrompt();
+                    }
+                }
+
+                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")
+
+                    TextEdit{
+                        id: copyEdit
+                        visible: false
+                    }
+
+                    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()
+                    }
+                }
             }
         }
     }
@@ -495,64 +558,6 @@ Rectangle {
         }
     }
 
-    MyToolButton {
-        id: drawerButton
-        backgroundColor: theme.iconBackgroundLight
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.topMargin: 42.5
-        anchors.leftMargin: 30
-        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()
-        }
-    }
-
-    NetworkDialog {
-        id: networkDialog
-        anchors.centerIn: parent
-        width: Math.min(1024, window.width - (window.width * .2))
-        height: Math.min(600, window.height - (window.height * .2))
-        Item {
-            Accessible.role: Accessible.Dialog
-            Accessible.name: qsTr("Network dialog")
-            Accessible.description: qsTr("opt-in to share feedback/conversations")
-        }
-    }
-
-    MyToolButton {
-        id: networkButton
-        backgroundColor: theme.iconBackgroundLight
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.topMargin: 42.5
-        anchors.rightMargin: 30
-        width: 40
-        height: 40
-        z: 200
-        padding: 15
-        toggled: MySettings.networkIsActive
-        source: "qrc:/gpt4all/icons/network.svg"
-        Accessible.name: qsTr("Network")
-        Accessible.description: qsTr("Reveals a dialogue where you can opt-in for sharing data over network")
-
-        onClicked: {
-            if (MySettings.networkIsActive) {
-                MySettings.networkIsActive = false
-                Network.sendNetworkToggled(false);
-            } else
-                networkDialog.open()
-        }
-    }
-
     Connections {
         target: Network
         function onHealthCheckFailed(code) {
@@ -569,47 +574,6 @@ Rectangle {
         }
     }
 
-    MyToolButton {
-        id: collectionsButton
-        backgroundColor: theme.iconBackgroundLight
-        anchors.right: networkButton.left
-        anchors.top: parent.top
-        anchors.topMargin: 42.5
-        anchors.rightMargin: 10
-        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()
-        }
-    }
-
-    MyToolButton {
-        id: settingsButton
-        backgroundColor: theme.iconBackgroundLight
-        anchors.right: collectionsButton.left
-        anchors.top: parent.top
-        anchors.topMargin: 42.5
-        anchors.rightMargin: 10
-        width: 40
-        height: 40
-        z: 200
-        padding: 15
-        source: "qrc:/gpt4all/icons/settings.svg"
-        Accessible.name: qsTr("Settings")
-        Accessible.description: qsTr("Reveals a dialogue with settings")
-
-        onClicked: {
-            settingsDialog.open()
-        }
-    }
-
     PopupDialog {
         id: copyMessage
         anchors.centerIn: parent
@@ -650,35 +614,6 @@ Rectangle {
         }
     }
 
-    MyToolButton {
-        id: copyButton
-        backgroundColor: theme.iconBackgroundLight
-        anchors.right: settingsButton.left
-        anchors.top: parent.top
-        anchors.topMargin: 42.5
-        anchors.rightMargin: 10
-        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")
-
-        TextEdit{
-            id: copyEdit
-            visible: false
-        }
-
-        onClicked: {
-            var conversation = getConversation()
-            copyEdit.text = conversation
-            copyEdit.selectAll()
-            copyEdit.copy()
-            copyMessage.open()
-        }
-    }
-
     function getConversation() {
         var conversation = "";
         for (var i = 0; i < chatModel.count; i++) {
@@ -716,29 +651,6 @@ Rectangle {
         return str + "]}"
     }
 
-    MyToolButton {
-        id: resetContextButton
-        backgroundColor: theme.iconBackgroundLight
-        anchors.right: copyButton.left
-        anchors.top: parent.top
-        anchors.topMargin: 42.5
-        anchors.rightMargin: 10
-        width: 40
-        height: 40
-        z: 200
-        padding: 15
-        source: "qrc:/gpt4all/icons/regenerate.svg"
-
-        Accessible.name: text
-        Accessible.description: qsTr("Reset the context and erase current conversation")
-
-        onClicked: {
-            Network.sendResetContext(chatModel.count)
-            currentChat.reset();
-            currentChat.processSystemPrompt();
-        }
-    }
-
     Dialog {
         id: checkForUpdatesError
         anchors.centerIn: parent
@@ -785,14 +697,7 @@ Rectangle {
         anchors.left: parent.left
         anchors.top: accentRibbon.bottom
         anchors.bottom: parent.bottom
-        width: Math.min(600, 0.2 * window.width)
+        width: Math.max(180, Math.min(600, 0.2 * window.width))
-        onDownloadClicked: {
-            downloadNewModels.showEmbeddingModels = false
-            downloadNewModels.open()
-        }
-        onAboutClicked: {
-            aboutDialog.open()
-        }
     }
 
     PopupDialog {
@@ -970,10 +875,7 @@ Rectangle {
                 ListView {
                     id: listView
                     visible: ModelList.installedModels.count !== 0 && chatModel.count !== 0
-                    anchors.top: parent.top
+                    anchors.fill: parent
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: Math.min(1280, parent.width)
                     model: chatModel
 
                     ScrollBar.vertical: ScrollBar {
@@ -987,7 +889,8 @@ Rectangle {
                     delegate: TextArea {
                         id: myTextArea
                         text: value + references
-                        width: listView.width
+                        anchors.horizontalCenter: listView.contentItem.horizontalCenter
+                        width: Math.min(1280, listView.contentItem.width)
                         color: theme.textColor
                         wrapMode: Text.WordWrap
                         textFormat: TextEdit.PlainText

gpt4all-chat/qml/MyToolButton.qml

@@ -9,6 +9,8 @@ Button {
     padding: 10
     property color backgroundColor: theme.iconBackgroundDark
     property color backgroundColorHovered: theme.iconBackgroundHovered
+    property color toggledColor: theme.accentColor
+    property real toggledWidth: 1
     property bool toggled: false
     property alias source: image.source
     property alias fillMode: image.fillMode
@@ -27,8 +29,8 @@ Button {
             anchors.fill: parent
             color: "transparent"
             visible: myButton.toggled
-            border.color: theme.accentColor
+            border.color: myButton.toggledColor
-            border.width: 1
+            border.width: myButton.toggledWidth
             radius: 10
         }
         Image {

gpt4all-chat/qml/Theme.qml

@@ -200,6 +200,17 @@ QtObject {
         }
     }
 
+    property color viewBarBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray300;
+            default:
+                return gray300;
+        }
+    }
+
     property color progressForeground: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -376,6 +387,39 @@ QtObject {
         }
     }
 
+    property color iconBackgroundViewBar: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue200;
+            case "Dark":
+                return green400;
+            default:
+                return green700;
+        }
+    }
+
+    property color iconBackgroundViewBarToggled: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple400;
+            case "Dark":
+                return accentColor;
+            default:
+                return black;
+        }
+    }
+
+    property color iconBackgroundViewBarHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue400;
+            case "Dark":
+                return green600;
+            default:
+                return green500;
+        }
+    }
+
     property color slugBackground: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":