Chatview and combobox UI fixes (#2489)

Chatview and combobox UI fixes (#2489)

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

gpt4all-chat/CMakeLists.txt

@@ -208,6 +208,7 @@ qt_add_qml_module(chat
       icons/thumbs_up.svg
       icons/thumbs_down.svg
       icons/twitter.svg
+      icons/up_down.svg
       icons/left_panel_closed.svg
       icons/left_panel_open.svg
       icons/gpt4all.svg

gpt4all-chat/icons/eject.svg

@@ -1,6 +1 @@
-
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,200a8,8,0,0,1-8,8H32a8,8,0,1,1,0-16H224A8,8,0,0,1,232,200ZM25.59,150.84a16,16,0,0,1,2-17.07L109.26,32.94a24.11,24.11,0,0,1,37.48,0l81.65,100.83A16.1,16.1,0,0,1,215.91,160H40.09A16,16,0,0,1,25.59,150.84ZM40,143.91s0,.09.08.11l175.83,0s.08-.09.08-.13L134.3,43a8.1,8.1,0,0,0-12.6,0L40,143.84A.28.28,0,0,0,40,143.91Z"></path></svg>
-<svg xmlns="http://www.w3.org/2000/svg" fill="#7d7d8e" viewBox="0 0 448 512"><path d="M448 384v64c0 17.673-14.327 32-32 32H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h384c17.673 0 32 14.327 32 32zM48.053 320h351.886c41.651 0 63.581-49.674 35.383-80.435L259.383 47.558c-19.014-20.743-51.751-20.744-70.767 0L12.67 239.565C-15.475 270.268 6.324 320 48.053 320z"/></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/up_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"></path></svg>

gpt4all-chat/qml/ChatView.qml

@@ -205,13 +205,12 @@ Rectangle {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: 20
+                spacing: 0
 
                 Rectangle {
                     Layout.alignment: Qt.AlignLeft
                     Layout.leftMargin: 30
                     Layout.fillWidth: true
-                    Layout.preferredWidth: 100
                     color: "transparent"
                     Layout.preferredHeight: childrenRect.height
                     MyToolButton {
@@ -237,8 +236,15 @@ Rectangle {
                     id: comboBox
                     Layout.alignment: Qt.AlignHCenter
                     Layout.fillHeight: true
-                    Layout.preferredWidth: 350
+                    Layout.preferredWidth: 550
-                    Layout.maximumWidth: 675
+                    Layout.leftMargin: {
+                        // This function works in tandem with the preferredWidth and the layout to
+                        // provide the maximum size combobox we can have at the smallest window width
+                        // we allow with the largest font size we allow. It is unfortunately based
+                        // upon a magic number that was produced through trial and error for something
+                        // I don't fully understand.
+                        return -Math.max(0, comboBox.width / 2 + collectionsButton.width + 110 /*magic*/ - comboLayout.width / 2);
+                    }
                     enabled: !currentChat.isServer
                         && !currentChat.trySwitchContextInProgress
                         && !currentChat.isCurrentlyLoading
@@ -266,8 +272,8 @@ Rectangle {
                         ProgressBar {
                             id: modelProgress
                             anchors.bottom: parent.bottom
-                            anchors.left: parent.left
+                            anchors.horizontalCenter: parent.horizontalCenter
-                            anchors.right: parent.right
+                            width: contentRow.width + 20
                             visible: currentChat.isCurrentlyLoading
                             height: 10
                             value: currentChat.modelLoadingPercentage
@@ -286,16 +292,67 @@ Rectangle {
                             }
                         }
                     }
-                    contentItem: Text {
+
-                        anchors.horizontalCenter: parent.horizontalCenter
+                    contentItem: Item {
-                        leftPadding: 10
+                        RowLayout {
-                        rightPadding: {
+                            id: contentRow
-                            if (ejectButton.visible && reloadButton)
+                            anchors.centerIn: parent
-                                return 105;
+                            spacing: 0
-                            if (reloadButton.visible)
+                            RowLayout {
-                                return 65
+                                id: miniButtonsRow
-                            return 25
+                                clip: true
+                                Behavior on Layout.preferredWidth {
+                                    NumberAnimation {
+                                        duration: 300
+                                        easing.type: Easing.InOutQuad
                                     }
+                                }
+
+                                Layout.preferredWidth: {
+                                    if (!comboBox.hovered)
+                                        return 0
+                                    return (reloadButton.visible ? reloadButton.width : 0) + (ejectButton.visible ? ejectButton.width : 0)
+                                }
+
+                                MyMiniButton {
+                                    id: reloadButton
+                                    Layout.alignment: Qt.AlignCenter
+                                    visible: currentChat.modelLoadingError === ""
+                                        && !currentChat.trySwitchContextInProgress
+                                        && !currentChat.isCurrentlyLoading
+                                        && (currentChat.isModelLoaded || currentModelName() !== "")
+                                    source: "qrc:/gpt4all/icons/regenerate.svg"
+                                    backgroundColor: theme.textColor
+                                    backgroundColorHovered: theme.styledTextColor
+                                    onClicked: {
+                                        if (currentChat.isModelLoaded)
+                                            currentChat.forceReloadModel();
+                                        else
+                                            currentChat.reloadModel();
+                                    }
+                                    ToolTip.text: qsTr("Reload the currently loaded model")
+                                    ToolTip.visible: hovered
+                                }
+
+                                MyMiniButton {
+                                    id: ejectButton
+                                    Layout.alignment: Qt.AlignCenter
+                                    visible: currentChat.isModelLoaded && !currentChat.isCurrentlyLoading
+                                    source: "qrc:/gpt4all/icons/eject.svg"
+                                    backgroundColor: theme.textColor
+                                    backgroundColorHovered: theme.styledTextColor
+                                    onClicked: {
+                                        currentChat.forceUnloadModel();
+                                    }
+                                    ToolTip.text: qsTr("Eject the currently loaded model")
+                                    ToolTip.visible: hovered
+                                }
+                            }
+
+                            Text {
+                                id: comboBoxText
+                                leftPadding: 10
+                                rightPadding: 10
                                 text: {
                                     if (ModelList.selectableModels.count === 0)
                                         return qsTr("No model installed...")
@@ -319,6 +376,27 @@ Rectangle {
                                 horizontalAlignment: Text.AlignHCenter
                                 elide: Text.ElideRight
                             }
+                            Item {
+                                Layout.minimumWidth: updown.width
+                                Layout.minimumHeight: updown.height
+                                Image {
+                                    id: updown
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    sourceSize.width: comboBoxText.font.pixelSize
+                                    sourceSize.height: comboBoxText.font.pixelSize
+                                    mipmap: true
+                                    visible: false
+                                    source: "qrc:/gpt4all/icons/up_down.svg"
+                                }
+
+                                ColorOverlay {
+                                    anchors.fill: updown
+                                    source: updown
+                                    color: comboBoxText.color
+                                }
+                            }
+                        }
+                    }
                     delegate: ItemDelegate {
                         id: comboItemDelegate
                         width: comboItemPopup.width
@@ -330,12 +408,12 @@ Rectangle {
                             verticalAlignment: Text.AlignVCenter
                         }
                         background: Rectangle {
-                            color: (index % 2 === 0 ? theme.darkContrast : theme.lightContrast)
+                            color: highlighted ? theme.lightContrast : theme.darkContrast
-                            border.width: highlighted
-                            border.color: theme.accentColor
                         }
                         highlighted: comboBox.highlightedIndex === index
                     }
+                    indicator: Item {
+                    }
                     popup: Popup {
                         id: comboItemPopup
                         y: comboBox.height - 1
@@ -378,46 +456,6 @@ Rectangle {
                             comboBox.changeModel(index);
                         }
                     }
-
-                    MyMiniButton {
-                        id: ejectButton
-                        visible: currentChat.isModelLoaded && !currentChat.isCurrentlyLoading
-                        z: 500
-                        anchors.right: parent.right
-                        anchors.rightMargin: 50
-                        anchors.verticalCenter: parent.verticalCenter
-                        source: "qrc:/gpt4all/icons/eject.svg"
-                        backgroundColor: theme.mutedLightTextColor
-                        backgroundColorHovered: theme.iconBackgroundLight
-                        onClicked: {
-                            currentChat.forceUnloadModel();
-                        }
-                        ToolTip.text: qsTr("Eject the currently loaded model")
-                        ToolTip.visible: hovered
-                    }
-
-                    MyMiniButton {
-                        id: reloadButton
-                        visible: currentChat.modelLoadingError === ""
-                            && !currentChat.trySwitchContextInProgress
-                            && !currentChat.isCurrentlyLoading
-                            && (currentChat.isModelLoaded || currentModelName() !== "")
-                        z: 500
-                        anchors.right: ejectButton.visible ? ejectButton.left : parent.right
-                        anchors.rightMargin: ejectButton.visible ? 10 : 50
-                        anchors.verticalCenter: parent.verticalCenter
-                        source: "qrc:/gpt4all/icons/regenerate.svg"
-                        backgroundColor: theme.mutedLightTextColor
-                        backgroundColorHovered: theme.iconBackgroundLight
-                        onClicked: {
-                            if (currentChat.isModelLoaded)
-                                currentChat.forceReloadModel();
-                            else
-                                currentChat.reloadModel();
-                        }
-                        ToolTip.text: qsTr("Reload the currently loaded model")
-                        ToolTip.visible: hovered
-                    }
                 }
 
                 Rectangle {
@@ -425,14 +463,13 @@ Rectangle {
                     Layout.alignment: Qt.AlignRight
                     Layout.rightMargin: 30
                     Layout.fillWidth: true
-                    Layout.preferredWidth: 100
                     Layout.preferredHeight: childrenRect.height
+                    clip: true
 
-                    RowLayout {
-                        spacing: 20
-                        anchors.right: parent.right
                     MyButton {
                         id: collectionsButton
+                        clip: true
+                        anchors.right: parent.right
                         borderWidth: 0
                         backgroundColor: theme.collectionsButtonBackground
                         backgroundColorHovered: theme.collectionsButtonBackgroundHovered
@@ -504,7 +541,7 @@ Rectangle {
                         background: Rectangle {
                             radius: collectionsButton.backgroundRadius
                             // TODO(jared): either use collectionsButton-specific theming, or don't - this is inconsistent
-                                color: conversation.state == "expanded" ? (
+                            color: conversation.state === "expanded" ? (
                                 collectionsButton.hovered ? theme.lightButtonBackgroundHovered : theme.lightButtonBackground
                             ) : (
                                 collectionsButton.hovered ? theme.lighterButtonBackground : theme.lighterButtonBackgroundHovered
@@ -521,7 +558,6 @@ Rectangle {
                 }
             }
         }
-        }
 
         Rectangle {
             id: conversationDivider
@@ -1418,8 +1454,8 @@ Rectangle {
                 MyTextArea {
                     id: textInput
                     color: theme.textColor
-                    topPadding: 30
+                    topPadding: 15
-                    bottomPadding: 30
+                    bottomPadding: 15
                     leftPadding: 20
                     rightPadding: 40
                     enabled: currentChat.isModelLoaded && !currentChat.isServer
@@ -1506,8 +1542,8 @@ Rectangle {
                 anchors.right: textInputView.right
                 anchors.verticalCenter: textInputView.verticalCenter
                 anchors.rightMargin: 15
-                width: 30
+                imageWidth: theme.fontSizeLarger
-                height: 30
+                imageHeight: theme.fontSizeLarger
                 visible: !currentChat.isServer && ModelList.selectableModels.count !== 0
                 enabled: !currentChat.responseInProgress
                 source: "qrc:/gpt4all/icons/send_message.svg"

gpt4all-chat/qml/MyComboBox.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 
 ComboBox {
     id: comboBox
@@ -8,16 +10,40 @@ ComboBox {
     spacing: 0
     padding: 10
     Accessible.role: Accessible.ComboBox
-    contentItem: Text {
+    contentItem: RowLayout {
+        id: contentRow
+        spacing: 0
+        Text {
             id: text
+            Layout.fillWidth: true
             leftPadding: 10
             rightPadding: 20
             text: comboBox.displayText
             font: comboBox.font
             color: theme.textColor
-        verticalAlignment: Text.AlignVCenter
+            verticalAlignment: Text.AlignLeft
             elide: Text.ElideRight
         }
+        Item {
+            Layout.preferredWidth: updown.width
+            Layout.preferredHeight: updown.height
+            Image {
+                id: updown
+                anchors.verticalCenter: parent.verticalCenter
+                sourceSize.width: comboBox.font.pixelSize
+                sourceSize.height: comboBox.font.pixelSize
+                mipmap: true
+                visible: false
+                source: "qrc:/gpt4all/icons/up_down.svg"
+            }
+
+            ColorOverlay {
+                anchors.fill: updown
+                source: updown
+                color: theme.textColor
+            }
+        }
+    }
     delegate: ItemDelegate {
         width: comboBox.width
         contentItem: Text {
@@ -53,33 +79,7 @@ ComboBox {
             color: theme.black
         }
     }
-    indicator: Canvas {
+    indicator: Item {
-        id: canvas
-        x: comboBox.width - width - comboBox.rightPadding
-        y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
-        width: 12
-        height: 18
-        contextType: "2d"
-
-        Connections {
-            target: comboBox
-            function onPressedChanged() { canvas.requestPaint(); }
-        }
-
-        onPaint: {
-            var context = getContext("2d");
-            context.reset();
-            context.lineWidth = 2;
-            context.moveTo(0, height / 2 - 2);
-            context.lineTo(width / 2, 0);
-            context.lineTo(width, height / 2 - 2);
-            context.moveTo(0, height / 2 + 2);
-            context.lineTo(width / 2, height);
-            context.lineTo(width, height / 2 + 2);
-            context.strokeStyle = comboBox.pressed ? theme.mutedLightTextColor : theme.mutedLighterTextColor;
-            context.stroke();
-
-        }
     }
     background: Rectangle {
         color: theme.controlBackground

gpt4all-chat/qml/MyMiniButton.qml

@@ -33,8 +33,8 @@ Button {
             anchors.centerIn: parent
             visible: false
             mipmap: true
-            sourceSize.width: 20
+            sourceSize.width: 16
-            sourceSize.height: 20
+            sourceSize.height: 16
         }
         ColorOverlay {
             anchors.fill: image