diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt index 2ec72a80..b4900628 100644 --- a/gpt4all-chat/CMakeLists.txt +++ b/gpt4all-chat/CMakeLists.txt @@ -146,6 +146,8 @@ qt_add_qml_module(chat icons/edit.svg icons/image.svg icons/info.svg + icons/local-docs.svg + icons/models.svg icons/search.svg icons/trash.svg icons/network.svg diff --git a/gpt4all-chat/icons/chat.svg b/gpt4all-chat/icons/chat.svg index 14f264e2..c510c50e 100644 --- a/gpt4all-chat/icons/chat.svg +++ b/gpt4all-chat/icons/chat.svg @@ -1,6 +1,3 @@ - - - + + + diff --git a/gpt4all-chat/icons/db.svg b/gpt4all-chat/icons/db.svg index 4b0d1082..fc0816f7 100644 --- a/gpt4all-chat/icons/db.svg +++ b/gpt4all-chat/icons/db.svg @@ -1,5 +1,3 @@ - - + + + diff --git a/gpt4all-chat/icons/edit.svg b/gpt4all-chat/icons/edit.svg index 9820173b..5a79a50e 100644 --- a/gpt4all-chat/icons/edit.svg +++ b/gpt4all-chat/icons/edit.svg @@ -1,5 +1,3 @@ - - + + + diff --git a/gpt4all-chat/icons/info.svg b/gpt4all-chat/icons/info.svg index 3c68311e..2c207ecb 100644 --- a/gpt4all-chat/icons/info.svg +++ b/gpt4all-chat/icons/info.svg @@ -1,6 +1,3 @@ - - - + + + diff --git a/gpt4all-chat/icons/local-docs.svg b/gpt4all-chat/icons/local-docs.svg new file mode 100644 index 00000000..06031c34 --- /dev/null +++ b/gpt4all-chat/icons/local-docs.svg @@ -0,0 +1,3 @@ + + + diff --git a/gpt4all-chat/icons/models.svg b/gpt4all-chat/icons/models.svg new file mode 100644 index 00000000..4e9b5306 --- /dev/null +++ b/gpt4all-chat/icons/models.svg @@ -0,0 +1,3 @@ + + + diff --git a/gpt4all-chat/icons/settings.svg b/gpt4all-chat/icons/settings.svg index 7542ea62..3d885b3f 100644 --- a/gpt4all-chat/icons/settings.svg +++ b/gpt4all-chat/icons/settings.svg @@ -1,46 +1,3 @@ - - - - - - - + + diff --git a/gpt4all-chat/icons/trash.svg b/gpt4all-chat/icons/trash.svg index b7c1a141..fa800005 100644 --- a/gpt4all-chat/icons/trash.svg +++ b/gpt4all-chat/icons/trash.svg @@ -1,5 +1,3 @@ - - + + + diff --git a/gpt4all-chat/main.qml b/gpt4all-chat/main.qml index 9bcbd94e..86b9dfaf 100644 --- a/gpt4all-chat/main.qml +++ b/gpt4all-chat/main.qml @@ -43,29 +43,6 @@ 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 @@ -124,48 +101,56 @@ Window { MyToolButton { id: chatButton backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar - backgroundColorHovered: theme.iconBackgroundViewBarHovered + backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered + Layout.preferredWidth: 40 + Layout.preferredHeight: 40 + Layout.alignment: Qt.AlignCenter toggledWidth: 0 - toggled: true - Layout.preferredWidth: 50 - Layout.preferredHeight: 50 + toggled: stackLayout.currentIndex === 0 + toggledColor: theme.iconBackgroundViewBarToggled scale: 1.5 source: "qrc:/gpt4all/icons/chat.svg" Accessible.name: qsTr("Chat view") Accessible.description: qsTr("Chat view to interact with models") onClicked: { + stackLayout.currentIndex = 0 } } MyToolButton { id: searchButton - backgroundColor: theme.iconBackgroundViewBar - backgroundColorHovered: theme.iconBackgroundViewBarHovered - Layout.preferredWidth: 50 - Layout.preferredHeight: 50 + backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar + backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered + Layout.preferredWidth: 40 + Layout.preferredHeight: 40 + toggledWidth: 0 + toggled: stackLayout.currentIndex === 1 + toggledColor: theme.iconBackgroundViewBarToggled scale: 1.5 - source: "qrc:/gpt4all/icons/search.svg" + source: "qrc:/gpt4all/icons/models.svg" Accessible.name: qsTr("Search") Accessible.description: qsTr("Launch a dialog to download new models") onClicked: { - downloadNewModels.showEmbeddingModels = false - downloadNewModels.open() + stackLayout.currentIndex = 1 } } MyToolButton { id: settingsButton - backgroundColor: theme.iconBackgroundViewBar - backgroundColorHovered: theme.iconBackgroundViewBarHovered - Layout.preferredWidth: 50 - Layout.preferredHeight: 50 + backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar + backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered + Layout.preferredWidth: 40 + Layout.preferredHeight: 40 + toggledWidth: 0 + toggledColor: theme.iconBackgroundViewBarToggled + toggled: stackLayout.currentIndex === 2 scale: 1.5 source: "qrc:/gpt4all/icons/settings.svg" Accessible.name: qsTr("Settings") Accessible.description: qsTr("Reveals a dialogue with settings") onClicked: { - settingsDialog.open() + stackLayout.currentIndex = 2 } } } @@ -181,8 +166,8 @@ Window { MyToolButton { id: networkButton - backgroundColor: theme.iconBackgroundViewBar - backgroundColorHovered: theme.iconBackgroundViewBarHovered + backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar + backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered toggledColor: theme.iconBackgroundViewBar Layout.preferredWidth: 40 Layout.preferredHeight: 40 @@ -218,10 +203,52 @@ Window { } } - ChatView { + StackLayout { + id: stackLayout anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: viewBar.right anchors.right: parent.right + + ChatView { + id: chatView + Layout.fillWidth: true + Layout.fillHeight: true + + Connections { + target: chatView + function onDownloadViewRequested(showEmbeddingModels) { + console.log("onDownloadViewRequested") + stackLayout.currentIndex = 1; + if (showEmbeddingModels) + downloadView.showEmbeddingModels(); + } + function onSettingsViewRequested(page) { + settingsDialog.pageToDisplay = page; + stackLayout.currentIndex = 2; + } + } + } + + ModelDownloaderDialog { + id: downloadView + Layout.fillWidth: true + Layout.fillHeight: true + Item { + Accessible.role: Accessible.Dialog + Accessible.name: qsTr("Download new models") + Accessible.description: qsTr("Dialog for downloading new models") + } + } + + SettingsDialog { + id: settingsDialog + Layout.fillWidth: true + Layout.fillHeight: true + onDownloadClicked: { + stackLayout.currentIndex = 1 + downloadView.showEmbeddingModels() + } + } } } diff --git a/gpt4all-chat/qml/ChatView.qml b/gpt4all-chat/qml/ChatView.qml index 00c00099..8fc5fab4 100644 --- a/gpt4all-chat/qml/ChatView.qml +++ b/gpt4all-chat/qml/ChatView.qml @@ -21,6 +21,8 @@ Rectangle { property var currentChat: ChatListModel.currentChat property var chatModel: currentChat.chatModel + signal settingsViewRequested(int page) + signal downloadViewRequested(bool showEmbeddingModels) color: theme.black @@ -36,13 +38,6 @@ Rectangle { } } - Connections { - target: downloadNewModels - function onClosed() { - startupDialogs(); - } - } - Connections { target: Download function onHasNewerReleaseChanged() { @@ -90,15 +85,15 @@ Rectangle { return; } - // check for any current models and if not, open download dialog once + // check for any current models and if not, open download view once if (!hasShownModelDownload && ModelList.installedModels.count === 0 && !firstStartDialog.opened) { - downloadNewModels.open(); + downloadViewRequested(); hasShownModelDownload = true; return; } // check for new version - if (Download.hasNewerRelease && !firstStartDialog.opened && !downloadNewModels.opened) { + if (Download.hasNewerRelease && !firstStartDialog.opened) { newVersionDialog.open(); return; } @@ -296,22 +291,29 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter spacing: 20 - MyToolButton { - id: drawerButton + Rectangle { 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() + Layout.fillWidth: true + Layout.preferredWidth: 100 + Layout.topMargin: 20 + color: "transparent" + Layout.preferredHeight: childrenRect.height + MyToolButton { + id: drawerButton + anchors.left: parent.left + backgroundColor: theme.iconBackgroundLight + width: 40 + height: 40 + scale: 1.5 + 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() + } } } @@ -320,7 +322,7 @@ Rectangle { Layout.alignment: Qt.AlignHCenter Layout.fillHeight: true Layout.fillWidth: true - Layout.minimumWidth: 375 + Layout.preferredWidth: 100 Layout.maximumWidth: 675 enabled: !currentChat.isServer && !window.trySwitchContextInProgress @@ -478,86 +480,67 @@ Rectangle { } } - RowLayout { + Rectangle { + color: "transparent" Layout.alignment: Qt.AlignRight Layout.rightMargin: 30 - spacing: 20 + Layout.fillWidth: true + Layout.preferredWidth: 100 + Layout.preferredHeight: childrenRect.height + Layout.topMargin: 20 - MyToolButton { - id: resetContextButton - backgroundColor: theme.iconBackgroundLight - width: 40 - height: 40 - z: 200 - padding: 15 - source: "qrc:/gpt4all/icons/regenerate.svg" + RowLayout { + spacing: 20 + anchors.right: parent.right + MyButton { + id: collectionsButton + Image { + id: collectionsImage + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 15 + width: 24 + height: 24 + mipmap: true + source: "qrc:/gpt4all/icons/db.svg" + } - Accessible.name: text - Accessible.description: qsTr("Reset the context and erase current conversation") + ColorOverlay { + anchors.fill: collectionsImage + source: collectionsImage + color: collectionsButton.hovered || collectionsImage.toggled ? theme.iconBackgroundHovered : theme.iconBackgroundLight + } - onClicked: { - Network.sendResetContext(chatModel.count) - currentChat.reset(); - currentChat.processSystemPrompt(); - } - } + leftPadding: 50 + borderWidth: 0 + backgroundColor: theme.mainComboBackground + backgroundColorHovered: theme.conversationButtonBackgroundHovered + backgroundRadius: 5 + padding: 15 + topPadding: 8 + bottomPadding: 8 + textColor: hovered || toggled ? theme.iconBackgroundHovered : theme.iconBackgroundLight + text: qsTr("local docs") + fontPixelSize: theme.fontSizeSmall - 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") + property bool toggled: currentChat.collectionList.length + background: Rectangle { + radius: collectionsButton.backgroundRadius + color: collectionsButton.toggled ? collectionsButton.backgroundColorHovered : collectionsButton.backgroundColor + } - TextEdit{ - id: copyEdit - visible: false - } + Accessible.name: qsTr("Add documents") + Accessible.description: qsTr("add collections of documents to the chat") - 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() + onClicked: { + collectionsDialog.open() + } } } } } } - 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() - } - } - Connections { target: Network function onHealthCheckFailed(code) { @@ -569,8 +552,7 @@ Rectangle { id: collectionsDialog anchors.centerIn: parent onAddRemoveClicked: { - settingsDialog.pageToDisplay = 2; - settingsDialog.open(); + settingsViewRequested(2 /*page 2*/) } } @@ -680,18 +662,6 @@ Rectangle { } } - 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") - } - } - ChatDrawer { id: drawer anchors.left: parent.left @@ -877,7 +847,7 @@ Rectangle { padding: 18 leftPadding: 50 Image { - id: image + id: downloadImage anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 15 @@ -887,12 +857,13 @@ Rectangle { source: "qrc:/gpt4all/icons/download.svg" } ColorOverlay { - anchors.fill: image - source: image + anchors.fill: downloadImage + source: downloadImage color: theme.accentColor } onClicked: { - downloadNewModels.open(); + console.log("download button") + downloadViewRequested(false /*showEmbeddingModels*/); } } } diff --git a/gpt4all-chat/qml/ModelDownloaderDialog.qml b/gpt4all-chat/qml/ModelDownloaderDialog.qml index acbb6290..bd8a640c 100644 --- a/gpt4all-chat/qml/ModelDownloaderDialog.qml +++ b/gpt4all-chat/qml/ModelDownloaderDialog.qml @@ -11,21 +11,15 @@ import modellist import network import mysettings -MyDialog { +Rectangle { id: modelDownloaderDialog - modal: true - closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside - padding: 10 - property bool showEmbeddingModels: false + color: theme.containerBackground - onOpened: { + function showEmbeddingModels() { Network.sendModelDownloaderDialog(); - - if (showEmbeddingModels) { - ModelList.downloadableModels.expanded = true - var targetModelIndex = ModelList.defaultEmbeddingModelIndex - modelListView.positionViewAtIndex(targetModelIndex, ListView.Beginning) - } + ModelList.downloadableModels.expanded = true + var targetModelIndex = ModelList.defaultEmbeddingModelIndex + modelListView.positionViewAtIndex(targetModelIndex, ListView.Beginning) } PopupDialog { @@ -36,7 +30,7 @@ MyDialog { ColumnLayout { anchors.fill: parent - anchors.margins: 10 + anchors.margins: 20 spacing: 30 Label { diff --git a/gpt4all-chat/qml/MyToolButton.qml b/gpt4all-chat/qml/MyToolButton.qml index 34dc5464..ec7196f8 100644 --- a/gpt4all-chat/qml/MyToolButton.qml +++ b/gpt4all-chat/qml/MyToolButton.qml @@ -27,11 +27,12 @@ Button { anchors.fill: parent Rectangle { anchors.fill: parent - color: "transparent" + color: myButton.toggledColor visible: myButton.toggled border.color: myButton.toggledColor border.width: myButton.toggledWidth - radius: 10 + radius: 6 + opacity: .2 } Image { id: image diff --git a/gpt4all-chat/qml/SettingsDialog.qml b/gpt4all-chat/qml/SettingsDialog.qml index ec8cdb4a..b1bbf341 100644 --- a/gpt4all-chat/qml/SettingsDialog.qml +++ b/gpt4all-chat/qml/SettingsDialog.qml @@ -11,13 +11,9 @@ import network import llm import mysettings -MyDialog { +Rectangle { id: settingsDialog - modal: true - padding: 20 - onOpened: { - Network.sendSettingsDialog(); - } + color: theme.containerBackground signal downloadClicked property alias pageToDisplay: listView.currentIndex @@ -41,92 +37,96 @@ MyDialog { } } - Rectangle { - id: stackList - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.left: parent.left - width: 220 - color: theme.controlBackground - radius: 10 - - ScrollView { + Item { + anchors.fill: parent + anchors.margins: 20 + Rectangle { + id: stackList anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left - anchors.right: parent.right - anchors.topMargin: 10 - ScrollBar.vertical.policy: ScrollBar.AsNeeded - clip: true + width: 220 + color: theme.controlBackground + radius: 10 - ListView { - id: listView - anchors.fill: parent - model: stacksModel + ScrollView { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.topMargin: 10 + ScrollBar.vertical.policy: ScrollBar.AsNeeded + clip: true - delegate: Rectangle { - id: item - width: listView.width - height: titleLabel.height + 10 - color: "transparent" + ListView { + id: listView + anchors.fill: parent + model: stacksModel - MyButton { - id: titleLabel - backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground - backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground - borderColor: index === listView.currentIndex ? theme.accentColor : "transparent" - borderWidth: index === listView.currentIndex ? 1 : 0 - textColor: index === listView.currentIndex ? theme.oppositeTextColor : theme.titleTextColor - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.right: parent.right - anchors.margins: 10 - font.bold: index === listView.currentIndex - text: title - font.pixelSize: theme.fontSizeLarge - onClicked: { - listView.currentIndex = index + delegate: Rectangle { + id: item + width: listView.width + height: titleLabel.height + 10 + color: "transparent" + + MyButton { + id: titleLabel + backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground + backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground + borderColor: index === listView.currentIndex ? theme.accentColor : "transparent" + borderWidth: index === listView.currentIndex ? 1 : 0 + textColor: index === listView.currentIndex ? theme.oppositeTextColor : theme.titleTextColor + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: 10 + font.bold: index === listView.currentIndex + text: title + font.pixelSize: theme.fontSizeLarge + onClicked: { + listView.currentIndex = index + } } } } } } - } - StackLayout { - id: stackLayout - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.left: stackList.right - anchors.right: parent.right - currentIndex: listView.currentIndex + StackLayout { + id: stackLayout + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: stackList.right + anchors.right: parent.right + currentIndex: listView.currentIndex - MySettingsStack { - title: qsTr("Model/Character Settings") - tabs: [ - Component { ModelSettings { } } - ] - } + MySettingsStack { + title: qsTr("Model/Character Settings") + tabs: [ + Component { ModelSettings { } } + ] + } - MySettingsStack { - title: qsTr("Application General Settings") - tabs: [ - Component { ApplicationSettings { } } - ] - } + MySettingsStack { + title: qsTr("Application General Settings") + tabs: [ + Component { ApplicationSettings { } } + ] + } - MySettingsStack { - title: qsTr("Local Document Collections") - tabs: [ - Component { - LocalDocsSettings { - id: localDocsSettings - Component.onCompleted: { - localDocsSettings.downloadClicked.connect(settingsDialog.downloadClicked); + MySettingsStack { + title: qsTr("Local Document Collections") + tabs: [ + Component { + LocalDocsSettings { + id: localDocsSettings + Component.onCompleted: { + localDocsSettings.downloadClicked.connect(settingsDialog.downloadClicked); + } } } - } - ] + ] + } } } } diff --git a/gpt4all-chat/qml/Theme.qml b/gpt4all-chat/qml/Theme.qml index 9622506f..6768dacb 100644 --- a/gpt4all-chat/qml/Theme.qml +++ b/gpt4all-chat/qml/Theme.qml @@ -390,33 +390,33 @@ QtObject { property color iconBackgroundViewBar: { switch (MySettings.chatTheme) { case "LegacyDark": - return blue200; + return iconBackgroundLight; case "Dark": - return green400; + return iconBackgroundLight; default: - return green700; + return green600; } } property color iconBackgroundViewBarToggled: { switch (MySettings.chatTheme) { case "LegacyDark": - return purple400; + return iconBackgroundHovered; case "Dark": - return accentColor; + return green400; default: - return black; + return green950; } } property color iconBackgroundViewBarHovered: { switch (MySettings.chatTheme) { case "LegacyDark": - return blue400; + return iconBackgroundHovered; case "Dark": - return green600; + return iconBackgroundHovered; default: - return green500; + return green950; } }