Rework the left chat panel to be persistently open.

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

gpt4all-chat/CMakeLists.txt

@@ -142,6 +142,8 @@ qt_add_qml_module(chat
       icons/network.svg
       icons/thumbs_up.svg
       icons/thumbs_down.svg
+      icons/left_panel_closed.svg
+      icons/left_panel_open.svg
       icons/logo.svg
       icons/logo-32.png
       icons/logo-48.png

gpt4all-chat/icons/left_panel_closed.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 16H54C55.6569 16 57 17.3431 57 19V45C57 46.6569 55.6569 48 54 48H23V16ZM20 16H10C8.34315 16 7 17.3431 7 19V45C7 46.6569 8.34315 48 10 48H20V16ZM4 19C4 15.6863 6.68629 13 10 13H54C57.3137 13 60 15.6863 60 19V45C60 48.3137 57.3137 51 54 51H10C6.68629 51 4 48.3137 4 45V19Z" fill="black"/>
+</svg>

gpt4all-chat/icons/left_panel_open.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 16H54C55.6569 16 57 17.3431 57 19V45C57 46.6569 55.6569 48 54 48H23V16ZM4 19C4 15.6863 6.68629 13 10 13H54C57.3137 13 60 15.6863 60 19V45C60 48.3137 57.3137 51 54 51H10C6.68629 51 4 48.3137 4 45V19Z" fill="black"/>
+</svg>

gpt4all-chat/main.qml

@@ -528,57 +528,24 @@ Window {
         }
     }
 
-    Button {
+    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("Main menu")
+        Accessible.name: qsTr("Chat panel")
-        Accessible.description: qsTr("Navigation drawer with options")
+        Accessible.description: qsTr("Chat panel with options")
-
-        background: Item {
-            anchors.centerIn: parent
-            width: 30
-            height: 30
-
-            Rectangle {
-                id: bar1
-                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
-                width: parent.width
-                height: 6
-                radius: 2
-                antialiasing: true
-            }
-
-            Rectangle {
-                id: bar2
-                anchors.centerIn: parent
-                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
-                width: parent.width
-                height: 6
-                radius: 2
-                antialiasing: true
-            }
-
-            Rectangle {
-                id: bar3
-                anchors.bottom: parent.bottom
-                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
-                width: parent.width
-                height: 6
-                radius: 2
-                antialiasing: true
-            }
-        }
         onClicked: {
-            drawer.visible = !drawer.visible
+            conversation.toggleLeftPanel()
         }
     }
 
@@ -857,9 +824,10 @@ Window {
 
     ChatDrawer {
         id: drawer
-        y: header.height + accentRibbon.height
+        anchors.left: parent.left
-        width: Math.min(600, 0.3 * window.width)
+        anchors.top: accentRibbon.bottom
-        height: window.height - y
+        anchors.bottom: parent.bottom
+        width: Math.min(600, 0.2 * window.width)
         onDownloadClicked: {
             downloadNewModels.showEmbeddingModels = false
             downloadNewModels.open()
@@ -884,6 +852,39 @@ Window {
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.top: accentRibbon.bottom
+        state: "collapsed"
+
+        states: [
+            State {
+                name: "expanded"
+                AnchorChanges {
+                    target: conversation
+                    anchors.left: drawer.right
+                }
+            },
+            State {
+                name: "collapsed"
+                AnchorChanges {
+                    target: conversation
+                    anchors.left: parent.left
+                }
+            }
+        ]
+
+        function toggleLeftPanel() {
+            if (conversation.state === "expanded") {
+                conversation.state = "collapsed";
+            } else {
+                conversation.state = "expanded";
+            }
+        }
+
+        transitions: Transition {
+            AnchorAnimation {
+                easing.type: Easing.InOutQuad
+                duration: 200
+            }
+        }
 
         ScrollView {
             id: scrollView

gpt4all-chat/qml/ChatDrawer.qml

@@ -9,9 +9,8 @@ import download
 import network
 import mysettings
 
-Drawer {
+Rectangle {
     id: chatDrawer
-    modal: false
 
     Theme {
         id: theme
@@ -20,10 +19,7 @@ Drawer {
     signal downloadClicked
     signal aboutClicked
 
-    background: Rectangle {
-        height: parent.height
     color: theme.containerBackground
-    }
 
     Item {
         anchors.fill: parent
@@ -94,7 +90,7 @@ Drawer {
                         wrapMode: Text.NoWrap
                         hoverEnabled: false // Disable hover events on the TextArea
                         selectByMouse: false // Disable text selection in the TextArea
-                        font.pixelSize: theme.fontSizeLarger
+                        font.pixelSize: theme.fontSizeLarge
                         text: readOnly ? metrics.elidedText : name
                         horizontalAlignment: TextInput.AlignLeft
                         opacity: trashQuestionDisplayed ? 0.5 : 1.0