Skip to content

Commit

Permalink
ChatDrawer: make chat name editing more obvious (nomic-ai#2507)
Browse files Browse the repository at this point in the history 
Signed-off-by: Jared Van Bortel <[email protected]>
  • Loading branch information
@cebtenzzre
cebtenzzre authored Jul 1, 2024
1 parent 67fd391 commit 3d496f4
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 87 deletions.
35 changes: 18 additions & 17 deletions gpt4all-chat/CMakeLists.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/left_panel_closed.svg
icons/left_panel_open.svg
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/trash.svg
icons/network.svg
icons/thumbs_up.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/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/you.svg
)

Expand Down
1 change: 1 addition & 0 deletions gpt4all-chat/icons/check.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 98 additions & 70 deletions gpt4all-chat/qml/ChatDrawer.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
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;
ChatListModel.currentChat = ChatListModel.get(index);
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
Expand Down
10 changes: 10 additions & 0 deletions gpt4all-chat/qml/Theme.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 3d496f4

Please sign in to comment.