diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt index f78be01e..febb7833 100644 --- a/gpt4all-chat/CMakeLists.txt +++ b/gpt4all-chat/CMakeLists.txt @@ -175,49 +175,50 @@ qt_add_qml_module(chat icons/antenna_1.svg icons/antenna_2.svg icons/antenna_3.svg - icons/send_message.svg - icons/stop_generating.svg - icons/recycle.svg - icons/regenerate.svg icons/caret_down.svg icons/caret_right.svg - icons/chat.svg icons/changelog.svg + icons/chat.svg + icons/check.svg icons/close.svg icons/copy.svg icons/db.svg icons/discord.svg icons/download.svg - icons/settings.svg - icons/eject.svg icons/edit.svg + icons/eject.svg icons/email.svg - icons/file.svg icons/file-md.svg icons/file-pdf.svg icons/file-txt.svg + icons/file.svg icons/github.svg icons/globe.svg + icons/gpt4all-32.png + icons/gpt4all-48.png + icons/gpt4all.svg + icons/gpt4all_transparent.svg icons/home.svg icons/image.svg icons/info.svg - icons/local-docs.svg - icons/models.svg - icons/nomic_logo.svg - icons/notes.svg - icons/search.svg - icons/trash.svg - icons/network.svg - 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 - icons/gpt4all_transparent.svg - icons/gpt4all-32.png - icons/gpt4all-48.png + icons/local-docs.svg + icons/models.svg + icons/network.svg + icons/nomic_logo.svg + icons/notes.svg + icons/recycle.svg + icons/regenerate.svg + icons/search.svg + icons/send_message.svg + icons/settings.svg + icons/stop_generating.svg + icons/thumbs_down.svg + icons/thumbs_up.svg + icons/trash.svg + icons/twitter.svg + icons/up_down.svg icons/you.svg ) diff --git a/gpt4all-chat/icons/check.svg b/gpt4all-chat/icons/check.svg new file mode 100644 index 00000000..a8d37421 --- /dev/null +++ b/gpt4all-chat/icons/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/gpt4all-chat/qml/ChatDrawer.qml b/gpt4all-chat/qml/ChatDrawer.qml index 26c5f1c5..2eda4822 100644 --- a/gpt4all-chat/qml/ChatDrawer.qml +++ b/gpt4all-chat/qml/ChatDrawer.qml @@ -122,7 +122,7 @@ Rectangle { delegate: Rectangle { id: chatRectangle width: conversationList.width - height: chatName.height + height: chatNameBox.height + 20 property bool isCurrent: ChatListModel.currentChat === ChatListModel.get(index) property bool isServer: ChatListModel.get(index) && ChatListModel.get(index).isServer property bool trashQuestionDisplayed: false @@ -133,97 +133,125 @@ Rectangle { border.color: theme.dividerColor radius: 10 - TextField { - id: chatName + Rectangle { + id: chatNameBox + height: chatName.height anchors.left: parent.left - anchors.right: buttons.left - color: theme.styledTextColor - topPadding: 15 - bottomPadding: 15 - focus: false - readOnly: true - wrapMode: Text.NoWrap - hoverEnabled: false // Disable hover events on the TextArea - selectByMouse: false // Disable text selection in the TextArea - font.pixelSize: theme.fontSizeLarge - font.bold: true - text: readOnly ? metrics.elidedText : name - horizontalAlignment: TextInput.AlignLeft - opacity: trashQuestionDisplayed ? 0.5 : 1.0 - TextMetrics { - id: metrics - font: chatName.font - text: name - elide: Text.ElideRight - elideWidth: chatName.width - 15 - } - background: Rectangle { - color: "transparent" - } - onEditingFinished: { - // Work around a bug in qml where we're losing focus when the whole window - // goes out of focus even though this textfield should be marked as not - // having focus - if (chatName.readOnly) - return; - Network.trackChatEvent("rename_chat") - changeName(); - } - function changeName() { - ChatListModel.get(index).name = chatName.text - chatName.focus = false - chatName.readOnly = true - chatName.selectByMouse = false - } - TapHandler { - onTapped: { - if (isCurrent) - return; - ChatListModel.currentChat = ChatListModel.get(index); + anchors.right: trashButton.left + anchors.verticalCenter: chatRectangle.verticalCenter + anchors.leftMargin: 5 + anchors.rightMargin: 5 + radius: 5 + color: chatName.readOnly ? "transparent" : theme.chatNameEditBgColor + + TextField { + id: chatName + anchors.left: parent.left + anchors.right: editButton.left + anchors.verticalCenter: chatNameBox.verticalCenter + topPadding: 5 + bottomPadding: 5 + color: theme.styledTextColor + focus: false + readOnly: true + wrapMode: Text.NoWrap + hoverEnabled: false // Disable hover events on the TextArea + selectByMouse: false // Disable text selection in the TextArea + font.pixelSize: theme.fontSizeLarge + font.bold: true + text: readOnly ? metrics.elidedText : name + horizontalAlignment: TextInput.AlignLeft + opacity: trashQuestionDisplayed ? 0.5 : 1.0 + TextMetrics { + id: metrics + font: chatName.font + text: name + elide: Text.ElideRight + elideWidth: chatName.width - 15 } + background: Rectangle { + color: "transparent" + } + onEditingFinished: { + // Work around a bug in qml where we're losing focus when the whole window + // goes out of focus even though this textfield should be marked as not + // having focus + console.log("onEditingFinished in"); + if (chatName.readOnly) + return; + console.log("onEditingFinished changeName"); + changeName(); + } + function changeName() { + Network.trackChatEvent("rename_chat"); + ChatListModel.get(index).name = chatName.text; + chatName.focus = false; + chatName.readOnly = true; + chatName.selectByMouse = false; + } + TapHandler { + onTapped: { + if (isCurrent) + return; + ChatListModel.currentChat = ChatListModel.get(index); + } + } + Accessible.role: Accessible.Button + Accessible.name: text + Accessible.description: qsTr("Select the current chat or edit the chat when in edit mode") } - Accessible.role: Accessible.Button - Accessible.name: text - Accessible.description: qsTr("Select the current chat or edit the chat when in edit mode") - } - Row { - id: buttons - anchors.verticalCenter: chatName.verticalCenter - anchors.right: chatRectangle.right - anchors.rightMargin: 10 - spacing: 5 MyToolButton { id: editButton + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 5 imageWidth: 24 imageHeight: 24 - visible: isCurrent && !isServer + visible: isCurrent && !isServer && chatName.readOnly opacity: trashQuestionDisplayed ? 0.5 : 1.0 source: "qrc:/gpt4all/icons/edit.svg" onClicked: { - chatName.focus = true - chatName.readOnly = false - chatName.selectByMouse = true + chatName.focus = true; + chatName.readOnly = false; + chatName.selectByMouse = true; } Accessible.name: qsTr("Edit chat name") } MyToolButton { - id: trashButton + id: okButton + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 5 imageWidth: 24 imageHeight: 24 - visible: isCurrent && !isServer - source: "qrc:/gpt4all/icons/trash.svg" - onClicked: { - trashQuestionDisplayed = true - timer.start() - } - Accessible.name: qsTr("Delete chat") + visible: isCurrent && !isServer && !chatName.readOnly + opacity: trashQuestionDisplayed ? 0.5 : 1.0 + source: "qrc:/gpt4all/icons/check.svg" + onClicked: chatName.changeName() + Accessible.name: qsTr("Save chat name") } } + + MyToolButton { + id: trashButton + anchors.verticalCenter: chatNameBox.verticalCenter + anchors.right: chatRectangle.right + anchors.rightMargin: 10 + imageWidth: 24 + imageHeight: 24 + visible: isCurrent && !isServer + source: "qrc:/gpt4all/icons/trash.svg" + onClicked: { + trashQuestionDisplayed = true + timer.start() + } + Accessible.name: qsTr("Delete chat") + } Rectangle { id: trashSureQuestion - anchors.top: buttons.bottom + anchors.top: trashButton.bottom anchors.topMargin: 10 - anchors.right: buttons.right + anchors.right: trashButton.right width: childrenRect.width height: childrenRect.height color: chatRectangle.color diff --git a/gpt4all-chat/qml/Theme.qml b/gpt4all-chat/qml/Theme.qml index c558e348..e2fac4a4 100644 --- a/gpt4all-chat/qml/Theme.qml +++ b/gpt4all-chat/qml/Theme.qml @@ -1154,6 +1154,16 @@ QtObject { } } + property color chatNameEditBgColor: { + switch (MySettings.chatTheme) { + case "LegacyDark": + case "Dark": + return controlBackground; + default: + return gray100; + } + } + property real fontScale: MySettings.fontSize === "Small" ? 1 : MySettings.fontSize === "Medium" ? 1.3 : /* "Large" */ 1.8