diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt index d506f6e7..7eecf36c 100644 --- a/gpt4all-chat/CMakeLists.txt +++ b/gpt4all-chat/CMakeLists.txt @@ -111,10 +111,15 @@ qt_add_qml_module(chat qml/LocalDocsSettings.qml qml/MySettingsTab.qml qml/MySettingsStack.qml + qml/MySettingsDestructiveButton.qml + qml/MySettingsButton.qml + qml/MySettingsLabel.qml + qml/MySlug.qml qml/MyButton.qml qml/MyComboBox.qml qml/MyDialog.qml qml/MyDirectoryField.qml + qml/MyTextArea.qml qml/MyTextField.qml qml/MyCheckBox.qml qml/MyBusyIndicator.qml diff --git a/gpt4all-chat/main.qml b/gpt4all-chat/main.qml index 18b346a9..4d9ef6fa 100644 --- a/gpt4all-chat/main.qml +++ b/gpt4all-chat/main.qml @@ -14,10 +14,10 @@ import mysettings Window { id: window - width: 1280 - height: 720 - minimumWidth: 720 - minimumHeight: 480 + width: 1920 + height: 1080 + minimumWidth: 1280 + minimumHeight: 720 visible: true title: qsTr("GPT4All v") + Qt.application.version @@ -47,7 +47,7 @@ Window { } } - color: theme.backgroundDarkest + color: theme.black // Startup code Component.onCompleted: { @@ -197,13 +197,93 @@ Window { + "
  • Check out our discord channel for help") } + Rectangle { + id: yellowRibbon + anchors.left: parent.left + anchors.right: parent.right + anchors.top: header.bottom + height: 3 + color: theme.yellowAccent + } + + Rectangle { + id: titleBar + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.topMargin: 5 + z: 200 + height: 25 + color: "transparent" + + RowLayout { + anchors.left: parent.left + anchors.leftMargin: 30 + + Text { + textFormat: Text.StyledText + text: "gpt4all.io |" + horizontalAlignment: Text.AlignLeft + font.pixelSize: theme.fontSizeFixedSmall + color: theme.gray300 + linkColor: theme.gray300 + onLinkActivated: { Qt.openUrlExternally("https://gpt4all.io") } + } + + Text { + textFormat: Text.StyledText + text: "github" + horizontalAlignment: Text.AlignLeft + font.pixelSize: theme.fontSizeFixedSmall + color: theme.gray300 + linkColor: theme.gray300 + onLinkActivated: { Qt.openUrlExternally("https://github.com/nomic-ai/gpt4all") } + } + } + + RowLayout { + anchors.right: parent.right + anchors.rightMargin: 30 + + Text { + textFormat: Text.StyledText + text: "nomic.ai |" + horizontalAlignment: Text.AlignRight + font.pixelSize: theme.fontSizeFixedSmall + color: theme.gray300 + linkColor: theme.gray300 + onLinkActivated: { Qt.openUrlExternally("https://nomic.ai") } + } + + Text { + textFormat: Text.StyledText + text: "twitter |" + horizontalAlignment: Text.AlignRight + font.pixelSize: theme.fontSizeFixedSmall + color: theme.gray300 + linkColor: theme.gray300 + onLinkActivated: { Qt.openUrlExternally("https://twitter.com/nomic_ai") } + } + + Text { + textFormat: Text.StyledText + text: "discord" + horizontalAlignment: Text.AlignRight + font.pixelSize: theme.fontSizeFixedSmall + color: theme.gray300 + linkColor: theme.gray300 + onLinkActivated: { Qt.openUrlExternally("https://discord.gg/4M2QFmTt2k") } + } + } + } + Rectangle { id: header anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top height: 100 - color: theme.backgroundDarkest + color: theme.mainHeader Item { anchors.centerIn: parent height: childrenRect.height @@ -216,7 +296,7 @@ Window { font.pixelSize: theme.fontSizeLarger text: "" background: Rectangle { - color: theme.backgroundDarkest + color: theme.mainHeader } horizontalAlignment: TextInput.AlignRight } @@ -251,7 +331,7 @@ Window { } } background: Rectangle { - color: theme.backgroundDark + color: theme.mainComboBackground radius: 10 } contentItem: Text { @@ -261,8 +341,8 @@ Window { text: currentChat.modelLoadingError !== "" ? qsTr("Model loading error...") : comboBox.currentModelName - font: comboBox.font - color: theme.textColor + font.pixelSize: theme.fontSizeLarger + color: theme.white verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter elide: Text.ElideRight @@ -277,7 +357,9 @@ Window { verticalAlignment: Text.AlignVCenter } background: Rectangle { - color: highlighted ? theme.backgroundLight : theme.backgroundDark + color: (index % 2 === 0 ? theme.darkContrast : theme.lightContrast) + border.width: highlighted + border.color: theme.yellowAccent } highlighted: comboBox.highlightedIndex === index } @@ -314,7 +396,7 @@ Window { anchors.verticalCenter: parent.verticalCenter text: qsTr("Loading model...") font.pixelSize: theme.fontSizeLarge - color: theme.textAccent + color: theme.oppositeTextColor } } } @@ -335,7 +417,7 @@ Window { id: drawerButton anchors.left: parent.left anchors.top: parent.top - anchors.topMargin: 30 + anchors.topMargin: 42.5 anchors.leftMargin: 30 width: 40 height: 40 @@ -353,7 +435,7 @@ Window { Rectangle { id: bar1 - color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest + color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight width: parent.width height: 6 radius: 2 @@ -363,7 +445,7 @@ Window { Rectangle { id: bar2 anchors.centerIn: parent - color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest + color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight width: parent.width height: 6 radius: 2 @@ -373,7 +455,7 @@ Window { Rectangle { id: bar3 anchors.bottom: parent.bottom - color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest + color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight width: parent.width height: 6 radius: 2 @@ -399,9 +481,10 @@ Window { MyToolButton { id: networkButton + backgroundColor: theme.iconBackgroundLight anchors.right: parent.right anchors.top: parent.top - anchors.topMargin: 30 + anchors.topMargin: 42.5 anchors.rightMargin: 30 width: 40 height: 40 @@ -439,9 +522,10 @@ Window { MyToolButton { id: collectionsButton + backgroundColor: theme.iconBackgroundLight anchors.right: networkButton.left anchors.top: parent.top - anchors.topMargin: 30 + anchors.topMargin: 42.5 anchors.rightMargin: 10 width: 40 height: 40 @@ -459,9 +543,10 @@ Window { MyToolButton { id: settingsButton + backgroundColor: theme.iconBackgroundLight anchors.right: collectionsButton.left anchors.top: parent.top - anchors.topMargin: 30 + anchors.topMargin: 42.5 anchors.rightMargin: 10 width: 40 height: 40 @@ -527,9 +612,10 @@ Window { MyToolButton { id: copyButton + backgroundColor: theme.iconBackgroundLight anchors.right: settingsButton.left anchors.top: parent.top - anchors.topMargin: 30 + anchors.topMargin: 42.5 anchors.rightMargin: 10 width: 40 height: 40 @@ -592,9 +678,10 @@ Window { MyToolButton { id: resetContextButton + backgroundColor: theme.iconBackgroundLight anchors.right: copyButton.left anchors.top: parent.top - anchors.topMargin: 30 + anchors.topMargin: 42.5 anchors.rightMargin: 10 width: 40 height: 40 @@ -616,7 +703,6 @@ Window { id: checkForUpdatesError anchors.centerIn: parent modal: false - opacity: 0.9 padding: 20 Text { horizontalAlignment: Text.AlignJustify @@ -627,7 +713,7 @@ Window { above where this application resides on your filesystem.

    If you can't start it manually, then I'm afraid you'll have to
    reinstall.") - color: theme.textColor + color: theme.textErrorColor font.pixelSize: theme.fontSizeLarge Accessible.role: Accessible.Dialog Accessible.name: text @@ -635,7 +721,7 @@ Window { } background: Rectangle { anchors.fill: parent - color: theme.backgroundDarkest + color: theme.containerBackground border.width: 1 border.color: theme.dialogBorder radius: 10 @@ -656,7 +742,7 @@ Window { ChatDrawer { id: drawer - y: header.height + y: header.height + yellowRibbon.height width: Math.min(600, 0.3 * window.width) height: window.height - y onDownloadClicked: { @@ -678,11 +764,11 @@ Window { Rectangle { id: conversation - color: theme.backgroundLight + color: theme.containerBackground anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - anchors.top: header.bottom + anchors.top: yellowRibbon.bottom ScrollView { id: scrollView @@ -695,58 +781,129 @@ Window { Rectangle { anchors.fill: parent - color: currentChat.isServer ? theme.backgroundDark : theme.backgroundLight + color: currentChat.isServer ? theme.black : theme.containerBackground - Text { - id: warningLabel - text: qsTr("You must install a model to continue. Models are available via the download dialog or you can install them manually by downloading from the GPT4All website (look for the Models Explorer) and placing them in the model folder. The model folder can be found in the settings dialog under the application tab.") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge - width: 600 - linkColor: theme.linkColor - wrapMode: Text.WordWrap - anchors.centerIn: parent - visible: ModelList.installedModels.count === 0 - onLinkActivated: function(link) { - Qt.openUrlExternally(link) - } - } + Rectangle { + id: homePage + color: "transparent"//theme.green200 + anchors.fill: parent + visible: (ModelList.installedModels.count === 0 || chatModel.count === 0) && !currentChat.isServer - MyButton { - id: downloadButton - text: qsTr("Download models") - visible: ModelList.installedModels.count === 0 - anchors.top: warningLabel.bottom - anchors.topMargin: 20 - anchors.horizontalCenter: warningLabel.horizontalCenter - padding: 15 - leftPadding: 50 - Image { - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: 15 - width: 24 - height: 24 - mipmap: true - source: "qrc:/gpt4all/icons/download.svg" - } - background: Rectangle { - border.color: downloadButton.down ? theme.backgroundLightest : theme.buttonBorder - border.width: 2 - radius: 10 - color: downloadButton.hovered ? theme.backgroundLighter : theme.backgroundLight - } - onClicked: { - downloadNewModels.open(); + ColumnLayout { + anchors.centerIn: parent + spacing: 0 + + Text { + Layout.alignment: Qt.AlignHCenter + text: qsTr("GPT4All") + color: theme.titleTextColor + font.pixelSize: theme.fontSizeLargest + 15 + font.bold: true + horizontalAlignment: Qt.AlignHCenter + wrapMode: Text.WordWrap + } + + Text { + Layout.alignment: Qt.AlignHCenter + textFormat: Text.StyledText + text: qsTr( + " + ") + color: theme.textColor + font.pixelSize: theme.fontSizeSmall + wrapMode: Text.WordWrap + } + + RowLayout { + spacing: 10 + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 30 + MySlug { + text: "MISTRAL" + color: theme.red600 + } + MySlug { + text: "FALCON" + color: theme.green600 + } + MySlug { + text: "LLAMA" + color: theme.purple500 + } + MySlug { + text: "LLAMA2" + color: theme.red400 + } + MySlug { + text: "MPT" + color: theme.green700 + } + MySlug { + text: "REPLIT" + color: theme.yellow700 + } + MySlug { + text: "STARCODER" + color: theme.purple400 + } + MySlug { + text: "SBERT" + color: theme.yellow600 + } + MySlug { + text: "GPT-J" + color: theme.gray600 + } + } + + MyButton { + id: downloadButton + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 40 + text: qsTr("Download models") + fontPixelSize: theme.fontSizeLargest + 10 + padding: 18 + leftPadding: 50 + Image { + id: image + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 15 + width: 24 + height: 24 + mipmap: true + source: "qrc:/gpt4all/icons/download.svg" + } + ColorOverlay { + anchors.fill: image + source: image + color: theme.yellowAccent + } + onClicked: { + downloadNewModels.open(); + } + } } } ListView { id: listView - visible: ModelList.installedModels.count !== 0 + visible: ModelList.installedModels.count !== 0 && chatModel.count !== 0 anchors.fill: parent model: chatModel - ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn } + + ScrollBar.vertical: ScrollBar { + parent: listView.parent + anchors.top: listView.top + anchors.left: listView.right + anchors.bottom: listView.bottom + } Accessible.role: Accessible.List Accessible.name: qsTr("Conversation with the model") @@ -767,8 +924,8 @@ Window { background: Rectangle { opacity: 1.0 color: name === qsTr("Response: ") - ? (currentChat.isServer ? theme.backgroundDarkest : theme.backgroundLighter) - : (currentChat.isServer ? theme.backgroundDark : theme.backgroundLight) + ? (currentChat.isServer ? theme.black : theme.lightContrast) + : (currentChat.isServer ? theme.white : theme.darkContrast) } TapHandler { id: tapHandler @@ -793,7 +950,7 @@ Window { Component.onCompleted: { responseText.setLinkColor(theme.linkColor); - responseText.setHeaderColor(name === qsTr("Response: ") ? theme.backgroundLight : theme.backgroundLighter); + responseText.setHeaderColor(name === qsTr("Response: ") ? theme.darkContrast : theme.lightContrast); responseText.textDocument = textDocument } @@ -824,7 +981,7 @@ Window { } Label { anchors.verticalCenter: parent.verticalCenter - color: theme.textAccent + color: theme.mutedTextColor text: { switch (currentChat.responseState) { case Chat.ResponseStopped: return qsTr("response stopped ..."); @@ -981,6 +1138,7 @@ Window { MyButton { id: myButton visible: chatModel.count && !currentChat.isServer + textColor: theme.textColor Image { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left @@ -1010,10 +1168,10 @@ Window { } } background: Rectangle { - border.color: myButton.down ? theme.backgroundLightest : theme.buttonBorder + border.color: theme.conversationButtonBorder border.width: 2 radius: 10 - color: myButton.hovered ? theme.backgroundLighter : theme.backgroundLight + color: myButton.hovered ? theme.conversationButtonBackgroundHovered : theme.conversationButtonBackground } anchors.bottom: textInputView.top anchors.horizontalCenter: textInputView.horizontalCenter @@ -1037,12 +1195,13 @@ Window { RectangularGlow { id: effect + visible: !currentChat.isServer anchors.fill: textInputView glowRadius: 50 spread: 0 - color: theme.backgroundDark + color: theme.sendGlow cornerRadius: 10 - opacity: 0.2 + opacity: 0.1 } ScrollView { @@ -1053,7 +1212,7 @@ Window { anchors.margins: 30 height: Math.min(contentHeight, 200) visible: !currentChat.isServer - TextArea { + MyTextArea { id: textInput color: theme.textColor topPadding: 30 @@ -1061,14 +1220,8 @@ Window { leftPadding: 20 rightPadding: 40 enabled: currentChat.isModelLoaded && !currentChat.isServer - wrapMode: Text.WordWrap font.pixelSize: theme.fontSizeLarger placeholderText: qsTr("Send a message...") - placeholderTextColor: theme.mutedTextColor - background: Rectangle { - color: theme.backgroundAccent - radius: 10 - } Accessible.role: Accessible.EditableText Accessible.name: placeholderText Accessible.description: qsTr("Send messages/prompts to the model") @@ -1101,6 +1254,8 @@ Window { } MyToolButton { + backgroundColor: theme.sendButtonBackground + backgroundColorHovered: theme.sendButtonBackgroundHovered anchors.right: textInputView.right anchors.verticalCenter: textInputView.verticalCenter anchors.rightMargin: 15 diff --git a/gpt4all-chat/qml/AboutDialog.qml b/gpt4all-chat/qml/AboutDialog.qml index a3ce20da..ca63f9e6 100644 --- a/gpt4all-chat/qml/AboutDialog.qml +++ b/gpt4all-chat/qml/AboutDialog.qml @@ -11,7 +11,6 @@ MyDialog { id: abpoutDialog anchors.centerIn: parent modal: false - opacity: 0.9 padding: 20 width: 1024 height: column.height + 40 @@ -39,8 +38,9 @@ MyDialog { anchors.leftMargin: 30 anchors.verticalCenter: img.verticalCenter text: qsTr("About GPT4All") - font.pixelSize: theme.fontSizeLarger color: theme.textColor + font.pixelSize: theme.fontSizeLarge + font.bold: true } } @@ -51,31 +51,23 @@ MyDialog { ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - TextArea { + MyTextArea { id: welcome - wrapMode: Text.Wrap width: 1024 - 40 - padding: 20 textFormat: TextEdit.MarkdownText text: qsTr("### Release notes\n") + Download.releaseInfo.notes + qsTr("### Contributors\n") + Download.releaseInfo.contributors - color: theme.textColor - font.pixelSize: theme.fontSizeLarge focus: false readOnly: true Accessible.role: Accessible.Paragraph Accessible.name: qsTr("Release notes") Accessible.description: qsTr("Release notes for this version") - background: Rectangle { - color: theme.backgroundLight - radius: 10 - } } } - Label { + MySettingsLabel { id: discordLink width: parent.width textFormat: Text.StyledText @@ -90,7 +82,7 @@ MyDialog { Accessible.name: qsTr("Discord link") } - Label { + MySettingsLabel { id: nomicProps width: parent.width textFormat: Text.StyledText diff --git a/gpt4all-chat/qml/ApplicationSettings.qml b/gpt4all-chat/qml/ApplicationSettings.qml index ed86fd59..6d9251d3 100644 --- a/gpt4all-chat/qml/ApplicationSettings.qml +++ b/gpt4all-chat/qml/ApplicationSettings.qml @@ -18,11 +18,9 @@ MySettingsTab { columns: 3 rowSpacing: 10 columnSpacing: 10 - Label { + MySettingsLabel { id: themeLabel - text: qsTr("Theme:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Theme") Layout.row: 1 Layout.column: 0 } @@ -53,11 +51,9 @@ MySettingsTab { MySettings.chatTheme = themeBox.currentText } } - Label { + MySettingsLabel { id: fontLabel - text: qsTr("Font Size:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Font Size") Layout.row: 2 Layout.column: 0 } @@ -88,11 +84,9 @@ MySettingsTab { MySettings.fontSize = fontBox.currentText } } - Label { + MySettingsLabel { id: deviceLabel - text: qsTr("Device:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Device") Layout.row: 3 Layout.column: 0 } @@ -126,11 +120,9 @@ MySettingsTab { MySettings.device = deviceBox.currentText } } - Label { + MySettingsLabel { id: defaultModelLabel - text: qsTr("Default model:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Default model") Layout.row: 4 Layout.column: 0 } @@ -161,11 +153,9 @@ MySettingsTab { MySettings.userDefaultModel = comboBox.currentText } } - Label { + MySettingsLabel { id: modelPathLabel - text: qsTr("Download path:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Download path") Layout.row: 5 Layout.column: 0 } @@ -190,7 +180,7 @@ MySettingsTab { } } } - MyButton { + MySettingsButton { Layout.row: 5 Layout.column: 2 text: qsTr("Browse") @@ -201,11 +191,9 @@ MySettingsTab { }) } } - Label { + MySettingsLabel { id: nThreadsLabel - text: qsTr("CPU Threads:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("CPU Threads") Layout.row: 6 Layout.column: 0 } @@ -233,11 +221,9 @@ MySettingsTab { Accessible.name: nThreadsLabel.text Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: saveChatsContextLabel - text: qsTr("Save chats context to disk:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Save chats context to disk") Layout.row: 7 Layout.column: 0 } @@ -252,11 +238,9 @@ MySettingsTab { ToolTip.text: qsTr("WARNING: Saving chats to disk can be ~2GB per chat") ToolTip.visible: hovered } - Label { + MySettingsLabel { id: serverChatLabel - text: qsTr("Enable API server:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Enable API server") Layout.row: 8 Layout.column: 0 } @@ -276,8 +260,8 @@ MySettingsTab { Layout.column: 0 Layout.columnSpan: 3 Layout.fillWidth: true - height: 1 - color: theme.tabBorder + height: 3 + color: theme.yellowAccent } } advancedSettings: GridLayout { @@ -289,14 +273,12 @@ MySettingsTab { Layout.column: 0 Layout.fillWidth: true Layout.columnSpan: 3 - height: 1 - color: theme.tabBorder + height: 3 + color: theme.yellowAccent } - Label { + MySettingsLabel { id: gpuOverrideLabel - text: qsTr("Force Metal (macOS+arm):") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Force Metal (macOS+arm)") Layout.row: 1 Layout.column: 0 } @@ -316,7 +298,7 @@ MySettingsTab { Layout.fillWidth: true Layout.alignment: Qt.AlignTop Layout.minimumHeight: warningLabel.height - Label { + MySettingsLabel { id: warningLabel width: parent.width color: theme.textErrorColor diff --git a/gpt4all-chat/qml/ChatDrawer.qml b/gpt4all-chat/qml/ChatDrawer.qml index 181a174f..fbc60442 100644 --- a/gpt4all-chat/qml/ChatDrawer.qml +++ b/gpt4all-chat/qml/ChatDrawer.qml @@ -12,7 +12,6 @@ import mysettings Drawer { id: chatDrawer modal: false - opacity: 0.9 Theme { id: theme @@ -23,7 +22,7 @@ Drawer { background: Rectangle { height: parent.height - color: theme.backgroundDarkest + color: theme.containerBackground } Item { @@ -43,12 +42,6 @@ Drawer { bottomPadding: 20 text: qsTr("\uFF0B New chat") Accessible.description: qsTr("Create a new chat") - background: Rectangle { - border.color: newChat.down ? theme.backgroundLightest : theme.buttonBorder - border.width: 2 - radius: 10 - color: newChat.hovered ? theme.backgroundDark : theme.backgroundDarkest - } onClicked: { ChatListModel.addChat(); Network.sendNewChat(ChatListModel.count) @@ -71,19 +64,23 @@ Drawer { anchors.fill: parent anchors.rightMargin: 10 model: ChatListModel - ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn } + ScrollBar.vertical: ScrollBar { + parent: conversationList.parent + anchors.top: conversationList.top + anchors.left: conversationList.right + anchors.bottom: conversationList.bottom + } delegate: Rectangle { id: chatRectangle width: conversationList.width height: chatName.height - opacity: 0.9 property bool isCurrent: ChatListModel.currentChat === ChatListModel.get(index) property bool isServer: ChatListModel.get(index) && ChatListModel.get(index).isServer property bool trashQuestionDisplayed: false visible: !isServer || MySettings.serverChat z: isCurrent ? 199 : 1 - color: isServer ? theme.backgroundDarkest : (index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter) + color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast border.width: isCurrent border.color: chatName.readOnly ? theme.assistantColor : theme.userColor TextField { @@ -106,7 +103,7 @@ Drawer { font: chatName.font text: name elide: Text.ElideRight - elideWidth: chatName.width - 25 + elideWidth: chatName.width - 40 } background: Rectangle { color: "transparent" diff --git a/gpt4all-chat/qml/CollectionsDialog.qml b/gpt4all-chat/qml/CollectionsDialog.qml index b763e688..a23db45e 100644 --- a/gpt4all-chat/qml/CollectionsDialog.qml +++ b/gpt4all-chat/qml/CollectionsDialog.qml @@ -22,9 +22,10 @@ MyDialog { id: listLabel anchors.top: parent.top anchors.left: parent.left - text: qsTr("Local Documents:") + text: qsTr("Local Documents") + color: theme.titleTextColor font.pixelSize: theme.fontSizeLarge - color: theme.textColor + font.bold: true } ScrollView { @@ -37,21 +38,28 @@ MyDialog { anchors.right: parent.right clip: true contentHeight: 300 - ScrollBar.vertical.policy: ScrollBar.AlwaysOn + ScrollBar.vertical.policy: ScrollBar.AlwaysOff background: Rectangle { - color: theme.backgroundLighter + color: theme.controlBackground } ListView { id: listView model: LocalDocs.localDocsModel boundsBehavior: Flickable.StopAtBounds + ScrollBar.vertical: ScrollBar { + parent: listView.parent + anchors.top: listView.top + anchors.left: listView.right + anchors.bottom: listView.bottom + } + delegate: Rectangle { id: item width: listView.width height: collectionId.height + 40 - color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter + color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast MyCheckBox { id: checkBox anchors.verticalCenter: parent.verticalCenter @@ -90,7 +98,7 @@ MyDialog { value: (model.totalBytesToIndex - model.currentBytesToIndex) / model.totalBytesToIndex background: Rectangle { implicitHeight: 45 - color: theme.backgroundDarkest + color: theme.progressBackground radius: 3 } contentItem: Item { @@ -100,7 +108,7 @@ MyDialog { width: itemProgressBar.visualPosition * parent.width height: parent.height radius: 2 - color: theme.assistantColor + color: theme.progressForeground } } Accessible.role: Accessible.ProgressBar @@ -123,7 +131,7 @@ MyDialog { } } - MyButton { + MySettingsButton { id: collectionSettings anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter diff --git a/gpt4all-chat/qml/LocalDocsSettings.qml b/gpt4all-chat/qml/LocalDocsSettings.qml index 52deb941..ecb6012e 100644 --- a/gpt4all-chat/qml/LocalDocsSettings.qml +++ b/gpt4all-chat/qml/LocalDocsSettings.qml @@ -26,7 +26,7 @@ MySettingsTab { property alias collection: collection.text property alias folder_path: folderEdit.text - Label { + MySettingsLabel { id: downloadLabel Layout.fillWidth: true Layout.maximumWidth: parent.width @@ -34,11 +34,9 @@ MySettingsTab { visible: !hasEmbeddingModel Layout.alignment: Qt.AlignLeft text: qsTr("This feature requires the download of a text embedding model in order to index documents for later search. Please download the SBert text embedding model from the download dialog to proceed.") - font.pixelSize: theme.fontSizeLarger - color: theme.textColor } - MyButton { + MySettingsButton { visible: !hasEmbeddingModel Layout.topMargin: 20 Layout.alignment: Qt.AlignLeft @@ -97,7 +95,7 @@ MySettingsTab { } } - MyButton { + MySettingsButton { id: browseButton text: qsTr("Browse") onClicked: { @@ -107,7 +105,7 @@ MySettingsTab { } } - MyButton { + MySettingsButton { id: addButton text: qsTr("Add") Accessible.role: Accessible.Button @@ -143,7 +141,7 @@ MySettingsTab { id: item Layout.fillWidth: true height: buttons.height + 20 - color: index % 2 === 0 ? theme.backgroundDark : theme.backgroundDarker + color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast property bool removing: false Text { @@ -177,7 +175,7 @@ MySettingsTab { anchors.margins: 20 width: removeButton.width height:removeButton.height - MyButton { + MySettingsButton { id: removeButton anchors.centerIn: parent text: qsTr("Remove") @@ -194,11 +192,9 @@ MySettingsTab { RowLayout { visible: hasEmbeddingModel - Label { + MySettingsLabel { id: showReferencesLabel - text: qsTr("Show references:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Show references") } MyCheckBox { id: showReferencesBox @@ -214,8 +210,8 @@ MySettingsTab { Rectangle { visible: hasEmbeddingModel Layout.fillWidth: true - height: 1 - color: theme.tabBorder + height: 3 + color: theme.yellowAccent } } advancedSettings: GridLayout { @@ -230,17 +226,15 @@ MySettingsTab { Layout.column: 0 Layout.fillWidth: true Layout.columnSpan: 3 - height: 1 - color: theme.tabBorder + height: 3 + color: theme.yellowAccent } - Label { + MySettingsLabel { id: chunkLabel Layout.row: 1 Layout.column: 0 - color: theme.textColor - font.pixelSize: theme.fontSizeLarge - text: qsTr("Document snippet size (characters):") + text: qsTr("Document snippet size (characters)") } MyTextField { @@ -264,13 +258,11 @@ MySettingsTab { } } - Label { + MySettingsLabel { id: contextItemsPerPrompt Layout.row: 2 Layout.column: 0 - color: theme.textColor - font.pixelSize: theme.fontSizeLarge - text: qsTr("Max document snippets per prompt:") + text: qsTr("Max document snippets per prompt") } MyTextField { @@ -300,7 +292,7 @@ MySettingsTab { Layout.fillWidth: true Layout.alignment: Qt.AlignTop Layout.minimumHeight: warningLabel.height - Label { + MySettingsLabel { id: warningLabel width: parent.width color: theme.textErrorColor diff --git a/gpt4all-chat/qml/ModelDownloaderDialog.qml b/gpt4all-chat/qml/ModelDownloaderDialog.qml index 3475114b..f0b071d6 100644 --- a/gpt4all-chat/qml/ModelDownloaderDialog.qml +++ b/gpt4all-chat/qml/ModelDownloaderDialog.qml @@ -41,11 +41,12 @@ MyDialog { Label { id: listLabel - text: qsTr("Available Models:") - font.pixelSize: theme.fontSizeLarge + text: qsTr("Available Models") Layout.alignment: Qt.AlignLeft Layout.fillWidth: true - color: theme.textColor + color: theme.titleTextColor + font.pixelSize: theme.fontSizeLarge + font.bold: true } Label { @@ -84,7 +85,7 @@ MyDialog { id: delegateItem width: modelListView.width height: childrenRect.height - color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter + color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast GridLayout { columns: 2 @@ -99,7 +100,7 @@ MyDialog { Layout.topMargin: 20 Layout.leftMargin: 20 Layout.columnSpan: 2 - color: theme.assistantColor + color: theme.titleTextColor Accessible.role: Accessible.Paragraph Accessible.name: qsTr("Model file") Accessible.description: qsTr("Model file to be downloaded") @@ -108,7 +109,8 @@ MyDialog { Rectangle { id: actionBox width: childrenRect.width + 20 - color: theme.backgroundDark + color: theme.containerBackground + border.color: theme.yellowAccent border.width: 1 radius: 10 Layout.row: 1 @@ -122,7 +124,7 @@ MyDialog { ColumnLayout { spacing: 0 - MyButton { + MySettingsButton { id: downloadButton text: isDownloading ? qsTr("Cancel") : isIncomplete ? qsTr("Resume") : qsTr("Download") font.pixelSize: theme.fontSizeLarge @@ -133,12 +135,6 @@ MyDialog { Layout.alignment: Qt.AlignTop | Qt.AlignHCenter visible: !isChatGPT && !installed && !calcHash && downloadError === "" Accessible.description: qsTr("Stop/restart/start the download") - background: Rectangle { - border.color: downloadButton.down ? theme.backgroundLightest : theme.buttonBorder - border.width: 2 - radius: 10 - color: downloadButton.hovered ? theme.backgroundDark : theme.backgroundDarkest - } onClicked: { if (!isDownloading) { Download.downloadModel(filename); @@ -148,10 +144,9 @@ MyDialog { } } - MyButton { + MySettingsDestructiveButton { id: removeButton text: qsTr("Remove") - font.pixelSize: theme.fontSizeLarge Layout.topMargin: 20 Layout.leftMargin: 20 Layout.minimumWidth: openaiKey.width @@ -159,18 +154,12 @@ MyDialog { Layout.alignment: Qt.AlignTop | Qt.AlignHCenter visible: installed || downloadError !== "" Accessible.description: qsTr("Remove model from filesystem") - background: Rectangle { - border.color: removeButton.down ? theme.backgroundLightest : theme.buttonBorder - border.width: 2 - radius: 10 - color: removeButton.hovered ? theme.backgroundDark : theme.backgroundDarkest - } onClicked: { Download.removeModel(filename); } } - MyButton { + MySettingsButton { id: installButton visible: !installed && isChatGPT Layout.topMargin: 20 @@ -180,12 +169,6 @@ MyDialog { Layout.alignment: Qt.AlignTop | Qt.AlignHCenter text: qsTr("Install") font.pixelSize: theme.fontSizeLarge - background: Rectangle { - border.color: installButton.down ? theme.backgroundLightest : theme.buttonBorder - border.width: 2 - radius: 10 - color: installButton.hovered ? theme.backgroundDark : theme.backgroundDarkest - } onClicked: { if (openaiKey.text === "") openaiKey.showError(); @@ -285,7 +268,7 @@ MyDialog { value: bytesReceived / bytesTotal background: Rectangle { implicitHeight: 45 - color: theme.backgroundDarkest + color: theme.progressBackground radius: 3 } contentItem: Item { @@ -295,7 +278,7 @@ MyDialog { width: itemProgressBar.visualPosition * parent.width height: parent.height radius: 2 - color: theme.assistantColor + color: theme.progressForeground } } Accessible.role: Accessible.ProgressBar @@ -350,21 +333,14 @@ MyDialog { Layout.minimumWidth: 150 Layout.maximumWidth: textMetrics.width + 25 Layout.alignment: Qt.AlignTop | Qt.AlignHCenter - color: theme.textColor - background: Rectangle { - color: theme.backgroundLighter - radius: 10 - } wrapMode: Text.WrapAnywhere function showError() { openaiKey.placeholderTextColor = theme.textErrorColor } onTextChanged: { - openaiKey.placeholderTextColor = theme.backgroundLightest + openaiKey.placeholderTextColor = theme.mutedTextColor } placeholderText: qsTr("enter $OPENAI_API_KEY") - font.pixelSize: theme.fontSizeLarge - placeholderTextColor: theme.backgroundLightest Accessible.role: Accessible.EditableText Accessible.name: placeholderText Accessible.description: qsTr("Whether the file hash is being calculated") @@ -402,18 +378,12 @@ MyDialog { Rectangle { width: modelListView.width height: expandButton.height + 80 - color: ModelList.downloadableModels.count % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter - MyButton { + color: ModelList.downloadableModels.count % 2 === 0 ? theme.darkContrast : theme.lightContrast + MySettingsButton { id: expandButton anchors.centerIn: parent padding: 40 text: ModelList.downloadableModels.expanded ? qsTr("Show fewer models") : qsTr("Show more models") - background: Rectangle { - border.color: expandButton.down ? theme.backgroundLightest : theme.buttonBorder - border.width: 2 - radius: 10 - color: expandButton.hovered ? theme.backgroundDark : theme.backgroundDarkest - } onClicked: { ModelList.downloadableModels.expanded = !ModelList.downloadableModels.expanded; } @@ -435,9 +405,9 @@ MyDialog { MySettings.modelPath = selectedFolder } } - Label { + MySettingsLabel { id: modelPathLabel - text: qsTr("Download path:") + text: qsTr("Download path") font.pixelSize: theme.fontSizeLarge color: theme.textColor Layout.row: 1 @@ -461,7 +431,7 @@ MyDialog { } } } - MyButton { + MySettingsButton { text: qsTr("Browse") Accessible.description: qsTr("Choose where to save model files") onClicked: modelPathDialog.open() diff --git a/gpt4all-chat/qml/ModelSettings.qml b/gpt4all-chat/qml/ModelSettings.qml index c9f46735..21257d09 100644 --- a/gpt4all-chat/qml/ModelSettings.qml +++ b/gpt4all-chat/qml/ModelSettings.qml @@ -21,13 +21,11 @@ MySettingsTab { property var currentModelId: comboBox.currentValue property var currentModelInfo: ModelList.modelInfo(root.currentModelId) - Label { + MySettingsLabel { id: label Layout.row: 0 Layout.column: 0 - text: qsTr("Model/Character:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Model/Character") } RowLayout { @@ -64,13 +62,13 @@ MySettingsTab { verticalAlignment: Text.AlignVCenter } background: Rectangle { - color: highlighted ? theme.backgroundLight : theme.backgroundDark + color: highlighted ? theme.lightContrast : theme.darkContrast } highlighted: comboBox.highlightedIndex === index } } - MyButton { + MySettingsButton { id: cloneButton text: qsTr("Clone") onClicked: { @@ -79,7 +77,7 @@ MySettingsTab { } } - MyButton { + MySettingsDestructiveButton { id: removeButton enabled: root.currentModelInfo.isClone text: qsTr("Remove") @@ -95,18 +93,15 @@ MySettingsTab { Layout.column: 0 Layout.topMargin: 15 spacing: 10 - Label { + MySettingsLabel { id: uniqueNameLabel - text: qsTr("Unique Name:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Unique Name") } - Label { + MySettingsLabel { id: uniqueNameLabelHelp visible: false text: qsTr("Must contain a non-empty unique name that does not match any existing model/character.") color: theme.textErrorColor - font.pixelSize: theme.fontSizeLarge wrapMode: TextArea.Wrap } } @@ -116,7 +111,6 @@ MySettingsTab { text: root.currentModelName font.pixelSize: theme.fontSizeLarge enabled: root.currentModelInfo.isClone || root.currentModelInfo.description === "" - color: enabled ? theme.textColor : theme.mutedTextColor Layout.row: 3 Layout.column: 0 Layout.columnSpan: 2 @@ -142,10 +136,8 @@ MySettingsTab { } } - Label { - text: qsTr("Model File:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + MySettingsLabel { + text: qsTr("Model File") Layout.row: 4 Layout.column: 0 Layout.topMargin: 15 @@ -155,18 +147,15 @@ MySettingsTab { text: root.currentModelInfo.filename font.pixelSize: theme.fontSizeLarge enabled: false - color: enabled ? theme.textColor : theme.mutedTextColor Layout.row: 5 Layout.column: 0 Layout.columnSpan: 2 Layout.fillWidth: true } - Label { + MySettingsLabel { visible: !root.currentModelInfo.isChatGPT - text: qsTr("System Prompt:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("System Prompt") Layout.row: 6 Layout.column: 0 Layout.topMargin: 15 @@ -181,18 +170,10 @@ MySettingsTab { Layout.fillWidth: true color: "transparent" Layout.minimumHeight: Math.max(100, systemPromptArea.contentHeight + 20) - TextArea { + MyTextArea { id: systemPromptArea anchors.fill: parent text: root.currentModelInfo.systemPrompt - color: theme.textColor - background: Rectangle { - implicitWidth: 150 - color: theme.backgroundDark - radius: 10 - } - padding: 10 - wrapMode: TextArea.Wrap Connections { target: MySettings function onSystemPromptChanged() { @@ -208,10 +189,10 @@ MySettingsTab { onTextChanged: { MySettings.setModelSystemPrompt(root.currentModelInfo, text) } - bottomPadding: 10 Accessible.role: Accessible.EditableText ToolTip.text: qsTr("The systemPrompt allows instructions to the model at the beginning of a chat.\nNOTE: A longer, detailed system prompt can lead to higher quality answers, but can also slow down generation.") ToolTip.visible: hovered + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval } } @@ -221,17 +202,14 @@ MySettingsTab { Layout.columnSpan: 2 Layout.topMargin: 15 spacing: 10 - Label { + MySettingsLabel { id: promptTemplateLabel - text: qsTr("Prompt Template:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Prompt Template") } - Label { + MySettingsLabel { id: promptTemplateLabelHelp text: qsTr("Must contain the string \"%1\" to be replaced with the user's input.") color: theme.textErrorColor - font.pixelSize: theme.fontSizeLarge visible: templateTextArea.text.indexOf("%1") === -1 wrapMode: TextArea.Wrap } @@ -246,19 +224,10 @@ MySettingsTab { Layout.minimumHeight: Math.max(100, templateTextArea.contentHeight + 20) color: "transparent" clip: true - TextArea { + MyTextArea { id: templateTextArea anchors.fill: parent text: root.currentModelInfo.promptTemplate - color: theme.textColor - font.pixelSize: theme.fontSizeLarge - background: Rectangle { - implicitWidth: 150 - color: theme.backgroundDark - radius: 10 - } - padding: 10 - wrapMode: TextArea.Wrap Connections { target: MySettings function onPromptTemplateChanged() { @@ -276,12 +245,12 @@ MySettingsTab { MySettings.setModelPromptTemplate(root.currentModelInfo, text) } } - bottomPadding: 10 Accessible.role: Accessible.EditableText Accessible.name: promptTemplateLabel.text Accessible.description: promptTemplateLabelHelp.text ToolTip.text: qsTr("The prompt template partially determines how models will respond to prompts.\nNOTE: A longer, detailed template can lead to higher quality answers, but can also slow down generation.") ToolTip.visible: hovered + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval } } @@ -298,8 +267,6 @@ MySettingsTab { Layout.bottomMargin: 35 Layout.leftMargin: 35 width: 3000 - border.width: 1 - border.color: theme.tabBorder radius: 10 color: "transparent" Item { @@ -324,9 +291,8 @@ MySettingsTab { } } - Label { + MySettingsLabel { text: qsTr("Generation Settings") - color: theme.textColor Layout.row: 10 Layout.column: 0 Layout.columnSpan: 2 @@ -334,7 +300,7 @@ MySettingsTab { Layout.alignment: Qt.AlignHCenter Layout.minimumWidth: promptTemplate.width horizontalAlignment: Qt.AlignHCenter - font.pixelSize: theme.fontSizeLarger + font.pixelSize: theme.fontSizeLarge font.bold: true } @@ -349,12 +315,10 @@ MySettingsTab { rowSpacing: 10 columnSpacing: 10 - Label { + MySettingsLabel { id: contextLengthLabel visible: !root.currentModelInfo.isChatGPT - text: qsTr("Context Length:") - font.pixelSize: theme.fontSizeLarge - color: theme.textColor + text: qsTr("Context Length") Layout.row: 0 Layout.column: 0 } @@ -362,8 +326,8 @@ MySettingsTab { id: contextLengthField visible: !root.currentModelInfo.isChatGPT text: root.currentModelInfo.contextLength - color: theme.textColor font.pixelSize: theme.fontSizeLarge + color: theme.textColor ToolTip.text: qsTr("Maximum combined prompt/response tokens before information is lost.\nUsing more context than the model was trained on will yield poor results.\nNOTE: Does not take effect until you RESTART GPT4All or SWITCH MODELS.") ToolTip.visible: hovered Layout.row: 0 @@ -397,11 +361,9 @@ MySettingsTab { Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: tempLabel - text: qsTr("Temperature:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Temperature") Layout.row: 1 Layout.column: 2 } @@ -409,8 +371,8 @@ MySettingsTab { MyTextField { id: temperatureField text: root.currentModelInfo.temperature - color: theme.textColor font.pixelSize: theme.fontSizeLarge + color: theme.textColor ToolTip.text: qsTr("Temperature increases the chances of choosing less likely tokens.\nNOTE: Higher temperature gives more creative but less predictable outputs.") ToolTip.visible: hovered Layout.row: 1 @@ -443,11 +405,9 @@ MySettingsTab { Accessible.name: tempLabel.text Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: topPLabel - text: qsTr("Top P:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Top P") Layout.row: 2 Layout.column: 0 } @@ -488,12 +448,10 @@ MySettingsTab { Accessible.name: topPLabel.text Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: topKLabel visible: !root.currentModelInfo.isChatGPT - text: qsTr("Top K:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Top K") Layout.row: 2 Layout.column: 2 } @@ -535,12 +493,10 @@ MySettingsTab { Accessible.name: topKLabel.text Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: maxLengthLabel visible: !root.currentModelInfo.isChatGPT - text: qsTr("Max Length:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Max Length") Layout.row: 0 Layout.column: 2 } @@ -583,12 +539,10 @@ MySettingsTab { Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: batchSizeLabel visible: !root.currentModelInfo.isChatGPT - text: qsTr("Prompt Batch Size:") - font.pixelSize: theme.fontSizeLarge - color: theme.textColor + text: qsTr("Prompt Batch Size") Layout.row: 1 Layout.column: 0 } @@ -630,12 +584,10 @@ MySettingsTab { Accessible.name: batchSizeLabel.text Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: repeatPenaltyLabel visible: !root.currentModelInfo.isChatGPT - text: qsTr("Repeat Penalty:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Repeat Penalty") Layout.row: 3 Layout.column: 0 } @@ -677,12 +629,10 @@ MySettingsTab { Accessible.name: repeatPenaltyLabel.text Accessible.description: ToolTip.text } - Label { + MySettingsLabel { id: repeatPenaltyTokensLabel visible: !root.currentModelInfo.isChatGPT - text: qsTr("Repeat Penalty Tokens:") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge + text: qsTr("Repeat Penalty Tokens") Layout.row: 3 Layout.column: 2 } @@ -733,8 +683,8 @@ MySettingsTab { Layout.topMargin: 15 Layout.fillWidth: true Layout.minimumWidth: promptTemplate.width - height: 1 - color: theme.tabBorder + height: 3 + color: theme.yellowAccent } } } diff --git a/gpt4all-chat/qml/MyBusyIndicator.qml b/gpt4all-chat/qml/MyBusyIndicator.qml index d04f943e..d8ec05d4 100644 --- a/gpt4all-chat/qml/MyBusyIndicator.qml +++ b/gpt4all-chat/qml/MyBusyIndicator.qml @@ -43,7 +43,7 @@ BusyIndicator { implicitWidth: 10 implicitHeight: 10 radius: 5 - color: theme.textAccent + color: theme.yellowAccent required property int index diff --git a/gpt4all-chat/qml/MyButton.qml b/gpt4all-chat/qml/MyButton.qml index a33f85d1..37dae039 100644 --- a/gpt4all-chat/qml/MyButton.qml +++ b/gpt4all-chat/qml/MyButton.qml @@ -6,20 +6,30 @@ import QtQuick.Controls.Basic Button { id: myButton padding: 10 + rightPadding: 18 + leftPadding: 18 + property color textColor: theme.oppositeTextColor + property color mutedTextColor: theme.oppositeMutedTextColor + property color backgroundColor: theme.buttonBackground + property color backgroundColorHovered: theme.buttonBackgroundHovered + property real borderWidth: 0 + property color borderColor: "transparent" + property real fontPixelSize: theme.fontSizeLarge contentItem: Text { text: myButton.text horizontalAlignment: Text.AlignHCenter - color: myButton.enabled ? theme.textColor : theme.mutedTextColor - font.pixelSize: theme.fontSizeLarge + color: myButton.enabled ? textColor : mutedTextColor + font.pixelSize: fontPixelSize Accessible.role: Accessible.Button Accessible.name: text } background: Rectangle { - border.color: myButton.down ? theme.backgroundLightest : theme.buttonBorder - border.width: 2 radius: 10 - color: myButton.hovered ? theme.backgroundDark : theme.backgroundDarkest + border.width: borderWidth + border.color: borderColor + color: myButton.hovered ? backgroundColorHovered : backgroundColor } Accessible.role: Accessible.Button Accessible.name: text + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval } diff --git a/gpt4all-chat/qml/MyCheckBox.qml b/gpt4all-chat/qml/MyCheckBox.qml index 6bf2242d..5f119dc7 100644 --- a/gpt4all-chat/qml/MyCheckBox.qml +++ b/gpt4all-chat/qml/MyCheckBox.qml @@ -15,15 +15,17 @@ CheckBox { implicitHeight: 26 x: myCheckBox.leftPadding y: parent.height / 2 - height / 2 - border.color: theme.dialogBorder - color: "transparent" + border.color: theme.gray200 + color: theme.white + radius: 3 Rectangle { width: 14 height: 14 x: 6 y: 6 - color: theme.textColor + radius: 2 + color: theme.green600 visible: myCheckBox.checked } } @@ -36,4 +38,5 @@ CheckBox { verticalAlignment: Text.AlignVCenter leftPadding: myCheckBox.indicator.width + myCheckBox.spacing } + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval } \ No newline at end of file diff --git a/gpt4all-chat/qml/MyComboBox.qml b/gpt4all-chat/qml/MyComboBox.qml index e55a5b04..d0c9919f 100644 --- a/gpt4all-chat/qml/MyComboBox.qml +++ b/gpt4all-chat/qml/MyComboBox.qml @@ -28,7 +28,7 @@ ComboBox { verticalAlignment: Text.AlignVCenter } background: Rectangle { - color: highlighted ? theme.backgroundLight : theme.backgroundDark + color: highlighted ? theme.lightContrast : theme.darkContrast } highlighted: comboBox.highlightedIndex === index } @@ -47,7 +47,7 @@ ComboBox { } background: Rectangle { - color: theme.backgroundDark + color: theme.black } } indicator: Canvas { @@ -73,13 +73,16 @@ ComboBox { context.moveTo(0, height / 2 + 2); context.lineTo(width / 2, height); context.lineTo(width, height / 2 + 2); - context.strokeStyle = comboBox.pressed ? theme.textAccent : theme.mutedTextColor; + context.strokeStyle = comboBox.pressed ? theme.gray400 : theme.gray300; context.stroke(); } } background: Rectangle { - color: theme.backgroundDark + color: theme.controlBackground + border.width: 1 + border.color: theme.controlBorder radius: 10 } + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval } diff --git a/gpt4all-chat/qml/MyDialog.qml b/gpt4all-chat/qml/MyDialog.qml index 480848fd..4174bad1 100644 --- a/gpt4all-chat/qml/MyDialog.qml +++ b/gpt4all-chat/qml/MyDialog.qml @@ -11,7 +11,7 @@ Dialog { background: Rectangle { width: parent.width height: parent.height - color: theme.backgroundDarkest + color: theme.containerBackground border.width: 1 border.color: theme.dialogBorder radius: 10 @@ -23,7 +23,7 @@ Dialog { anchors.centerIn: myCloseButton width: myCloseButton.width + 10 height: myCloseButton.height + 10 - color: theme.backgroundDarkest + color: theme.containerBackground } MyToolButton { diff --git a/gpt4all-chat/qml/MyDirectoryField.qml b/gpt4all-chat/qml/MyDirectoryField.qml index ed61ca56..2c9eea72 100644 --- a/gpt4all-chat/qml/MyDirectoryField.qml +++ b/gpt4all-chat/qml/MyDirectoryField.qml @@ -11,7 +11,8 @@ TextField { color: text === "" || isValid ? theme.textColor : theme.textErrorColor background: Rectangle { implicitWidth: 150 - color: theme.backgroundDark + color: theme.controlBackground radius: 10 } + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval } diff --git a/gpt4all-chat/qml/MySettingsButton.qml b/gpt4all-chat/qml/MySettingsButton.qml new file mode 100644 index 00000000..8d282cac --- /dev/null +++ b/gpt4all-chat/qml/MySettingsButton.qml @@ -0,0 +1,38 @@ +import QtCore +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import mysettings + +Button { + id: myButton + padding: 10 + rightPadding: 18 + leftPadding: 18 + property color textColor: MySettings.chatTheme === "Dark" ? theme.green800 : theme.green600 + property color mutedTextColor: textColor + property color backgroundColor: MySettings.chatTheme === "Dark" ? theme.green400 : theme.green200 + property color backgroundColorHovered: theme.green300 + property real borderWidth: 0 + property color borderColor: "transparent" + property real fontPixelSize: theme.fontSizeLarge + + contentItem: Text { + text: myButton.text + horizontalAlignment: Text.AlignHCenter + color: myButton.enabled ? textColor : mutedTextColor + font.pixelSize: fontPixelSize + font.bold: true + Accessible.role: Accessible.Button + Accessible.name: text + } + background: Rectangle { + radius: 10 + border.width: borderWidth + border.color: borderColor + color: myButton.hovered ? backgroundColorHovered : backgroundColor + } + Accessible.role: Accessible.Button + Accessible.name: text + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval +} diff --git a/gpt4all-chat/qml/MySettingsDestructiveButton.qml b/gpt4all-chat/qml/MySettingsDestructiveButton.qml new file mode 100644 index 00000000..041947d8 --- /dev/null +++ b/gpt4all-chat/qml/MySettingsDestructiveButton.qml @@ -0,0 +1,38 @@ +import QtCore +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import mysettings + +Button { + id: myButton + padding: 10 + rightPadding: 18 + leftPadding: 18 + font.pixelSize: theme.fontSizeLarge + property color textColor: MySettings.chatTheme === "Dark" ? theme.red800 : theme.red600 + property color mutedTextColor: MySettings.chatTheme === "Dark" ? theme.red400 : theme.red300 + property color backgroundColor: enabled ? (MySettings.chatTheme === "Dark" ? theme.red400 : theme.red200) : + (MySettings.chatTheme === "Dark" ? theme.red200 : theme.red100) + property color backgroundColorHovered: enabled ? (MySettings.chatTheme === "Dark" ? theme.red500 : theme.red300) : backgroundColor + property real borderWidth: 0 + property color borderColor: "transparent" + contentItem: Text { + text: myButton.text + horizontalAlignment: Text.AlignHCenter + color: myButton.enabled ? textColor : mutedTextColor + font.pixelSize: theme.fontSizeLarge + font.bold: true + Accessible.role: Accessible.Button + Accessible.name: text + } + background: Rectangle { + radius: 10 + border.width: borderWidth + border.color: borderColor + color: myButton.hovered ? backgroundColorHovered : backgroundColor + } + Accessible.role: Accessible.Button + Accessible.name: text + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval +} diff --git a/gpt4all-chat/qml/MySettingsLabel.qml b/gpt4all-chat/qml/MySettingsLabel.qml new file mode 100644 index 00000000..e3aece07 --- /dev/null +++ b/gpt4all-chat/qml/MySettingsLabel.qml @@ -0,0 +1,10 @@ +import QtCore +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +Label { + color: theme.titleTextColor + font.pixelSize: theme.fontSizeLarge - 4 + font.bold: true +} diff --git a/gpt4all-chat/qml/MySettingsStack.qml b/gpt4all-chat/qml/MySettingsStack.qml index cd3a559b..cb8e8f9d 100644 --- a/gpt4all-chat/qml/MySettingsStack.qml +++ b/gpt4all-chat/qml/MySettingsStack.qml @@ -14,28 +14,38 @@ Item { id: theme } - property alias title: titleLabel.text + property alias title: titleLabelText.text property ListModel tabTitlesModel: ListModel { } property list tabs: [ ] - Label { + Rectangle { id: titleLabel anchors.top: parent.top - anchors.horizontalCenter: parent.horizontalCenter - color: theme.textColor - padding: 10 - font.bold: true - font.pixelSize: theme.fontSizeLarger + anchors.leftMargin: 20 + anchors.rightMargin: 15 + anchors.left: parent.left + anchors.right: parent.right + height: titleLabelText.height + color: "transparent" + Label { + id: titleLabelText + anchors.left: parent.left + color: theme.titleTextColor + topPadding: 10 + bottomPadding: 10 + font.pixelSize: theme.fontSizeLargest + font.bold: true + } } Rectangle { anchors.top: titleLabel.bottom - anchors.leftMargin: 15 + anchors.leftMargin: 20 anchors.rightMargin: 15 anchors.left: parent.left anchors.right: parent.right - height: 1 - color: theme.tabBorder + height: 3 + color: theme.yellowAccent } TabBar { @@ -62,9 +72,6 @@ Item { } background: Rectangle { color: "transparent" - border.width: 1 - border.color: tabButton.checked ? theme.tabBorder : "transparent" - radius: 10 } Accessible.role: Accessible.Button Accessible.name: model.title @@ -82,16 +89,8 @@ Item { anchors.rightMargin: 15 anchors.left: parent.left anchors.right: parent.right - height: 1 - color: theme.tabBorder - } - - Rectangle { - anchors.fill: parent - color: "transparent" - radius: 10 - border.width: 1 - border.color: theme.tabBorder + height: 3 + color: theme.yellowAccent } FolderDialog { diff --git a/gpt4all-chat/qml/MySettingsTab.qml b/gpt4all-chat/qml/MySettingsTab.qml index 7d47eb4f..32e15395 100644 --- a/gpt4all-chat/qml/MySettingsTab.qml +++ b/gpt4all-chat/qml/MySettingsTab.qml @@ -32,13 +32,19 @@ Item { } ScrollView { + id: scrollView width: parent.width height: parent.height - padding: 15 - rightPadding: 20 + topPadding: 15 + leftPadding: 5 contentWidth: availableWidth contentHeight: innerColumn.height - ScrollBar.vertical.policy: ScrollBar.AlwaysOn + ScrollBar.vertical: ScrollBar { + parent: scrollView.parent + anchors.top: scrollView.top + anchors.left: scrollView.right + anchors.bottom: scrollView.bottom + } Theme { id: theme @@ -64,7 +70,7 @@ Item { Item { Layout.fillWidth: true height: restoreDefaultsButton.height - MyButton { + MySettingsButton { id: restoreDefaultsButton anchors.left: parent.left visible: showRestoreDefaultsButton @@ -78,7 +84,7 @@ Item { root.restoreDefaultsClicked(); } } - MyButton { + MySettingsButton { id: advancedSettingsButton anchors.right: parent.right visible: root.advancedSettings && showAdvancedSettingsButton diff --git a/gpt4all-chat/qml/MySlug.qml b/gpt4all-chat/qml/MySlug.qml new file mode 100644 index 00000000..48cf0ac5 --- /dev/null +++ b/gpt4all-chat/qml/MySlug.qml @@ -0,0 +1,24 @@ +import QtCore +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +Label { + id: mySlug + padding: 3 + rightPadding: 9 + leftPadding: 9 + font.pixelSize: theme.fontSizeFixedSmall + background: Rectangle { + radius: 6 + border.width: 1 + border.color: mySlug.color + color: theme.slugBackground + } + ToolTip.visible: ma.containsMouse && ToolTip.text !== "" + MouseArea { + id: ma + anchors.fill: parent + hoverEnabled: true + } +} diff --git a/gpt4all-chat/qml/MyTextArea.qml b/gpt4all-chat/qml/MyTextArea.qml new file mode 100644 index 00000000..e0894e9f --- /dev/null +++ b/gpt4all-chat/qml/MyTextArea.qml @@ -0,0 +1,22 @@ +import QtCore +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic + +TextArea { + id: myTextArea + color: enabled ? theme.textColor : theme.mutedTextColor + placeholderTextColor: theme.mutedTextColor + font.pixelSize: theme.fontSizeLarge + background: Rectangle { + implicitWidth: 150 + color: theme.controlBackground + border.width: 1 + border.color: theme.controlBorder + radius: 10 + } + padding: 10 + wrapMode: TextArea.Wrap + + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval +} \ No newline at end of file diff --git a/gpt4all-chat/qml/MyTextField.qml b/gpt4all-chat/qml/MyTextField.qml index 251aaf09..730e33ed 100644 --- a/gpt4all-chat/qml/MyTextField.qml +++ b/gpt4all-chat/qml/MyTextField.qml @@ -6,10 +6,14 @@ import QtQuick.Controls.Basic TextField { id: myTextField padding: 10 + placeholderTextColor: theme.mutedTextColor background: Rectangle { implicitWidth: 150 - color: theme.backgroundDark + color: myTextField.enabled ? theme.controlBackground : theme.disabledControlBackground + border.width: 1 + border.color: theme.controlBorder radius: 10 } - color: theme.textColor -} \ No newline at end of file + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval + color: enabled ? theme.textColor : theme.mutedTextColor +} diff --git a/gpt4all-chat/qml/MyToolButton.qml b/gpt4all-chat/qml/MyToolButton.qml index 7236b648..32658298 100644 --- a/gpt4all-chat/qml/MyToolButton.qml +++ b/gpt4all-chat/qml/MyToolButton.qml @@ -7,6 +7,8 @@ import Qt5Compat.GraphicalEffects Button { id: myButton padding: 10 + property color backgroundColor: theme.iconBackgroundDark + property color backgroundColorHovered: theme.iconBackgroundHovered property bool toggled: false property alias source: image.source property alias fillMode: image.fillMode @@ -25,7 +27,7 @@ Button { anchors.fill: parent color: "transparent" visible: myButton.toggled - border.color: theme.backgroundLightest + border.color: theme.yellowAccent border.width: 1 radius: 10 } @@ -39,9 +41,10 @@ Button { ColorOverlay { anchors.fill: image source: image - color: myButton.hovered ? theme.textColor : "transparent" + color: myButton.hovered ? backgroundColorHovered : backgroundColor } } Accessible.role: Accessible.Button Accessible.name: text + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval } diff --git a/gpt4all-chat/qml/NetworkDialog.qml b/gpt4all-chat/qml/NetworkDialog.qml index e1fdc917..c5755c8b 100644 --- a/gpt4all-chat/qml/NetworkDialog.qml +++ b/gpt4all-chat/qml/NetworkDialog.qml @@ -12,7 +12,6 @@ MyDialog { id: networkDialog anchors.centerIn: parent modal: true - opacity: 0.9 padding: 20 Theme { @@ -50,43 +49,27 @@ MyDialog { ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - TextArea { + MyTextArea { id: textOptIn - wrapMode: Text.Wrap width: 1024 - 40 - padding: 20 text: qsTr("By enabling this feature, you will be able to participate in the democratic process of training a large language model by contributing data for future model improvements. When a GPT4All model responds to you and you have opted-in, your conversation will be sent to the GPT4All Open Source Datalake. Additionally, you can like/dislike its response. If you dislike a response, you can suggest an alternative response. This data will be collected and aggregated in the GPT4All Datalake. NOTE: By turning on this feature, you will be sending your data to the GPT4All Open Source Datalake. You should have no expectation of chat privacy when this feature is enabled. You should; however, have an expectation of an optional attribution if you wish. Your chat data will be openly available for anyone to download and will be used by Nomic AI to improve future GPT4All models. Nomic AI will retain all attribution information attached to your data and you will be credited as a contributor to any GPT4All model release that uses your data!") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge focus: false readOnly: true Accessible.role: Accessible.Paragraph Accessible.name: qsTr("Terms for opt-in") Accessible.description: qsTr("Describes what will happen when you opt-in") - background: Rectangle { - color: theme.backgroundLight - radius: 10 - } } } - TextField { + MyTextField { id: attribution - color: theme.textColor - padding: 20 width: parent.width text: MySettings.networkAttribution - font.pixelSize: theme.fontSizeLarge placeholderText: qsTr("Please provide a name for attribution (optional)") - placeholderTextColor: theme.backgroundLightest - background: Rectangle { - color: theme.backgroundLighter - radius: 10 - } Accessible.role: Accessible.EditableText Accessible.name: qsTr("Attribution (optional)") Accessible.description: qsTr("Provide attribution") @@ -101,12 +84,12 @@ NOTE: By turning on this feature, you will be sending your data to the GPT4All O padding: 20 alignment: Qt.AlignRight spacing: 10 - MyButton { + MySettingsButton { text: qsTr("Enable") Accessible.description: qsTr("Enable opt-in") DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole } - MyButton { + MySettingsButton { text: qsTr("Cancel") Accessible.description: qsTr("Cancel opt-in") DialogButtonBox.buttonRole: DialogButtonBox.RejectRole diff --git a/gpt4all-chat/qml/NewVersionDialog.qml b/gpt4all-chat/qml/NewVersionDialog.qml index 0d925e4c..7ade2ca9 100644 --- a/gpt4all-chat/qml/NewVersionDialog.qml +++ b/gpt4all-chat/qml/NewVersionDialog.qml @@ -31,12 +31,13 @@ MyDialog { anchors.left: parent.left topPadding: 20 bottomPadding: 20 - text: qsTr("New version is available:") - color: theme.textColor + text: qsTr("New version is available") + color: theme.titleTextColor font.pixelSize: theme.fontSizeLarge + font.bold: true } - MyButton { + MySettingsButton { id: button anchors.left: label.right anchors.leftMargin: 10 diff --git a/gpt4all-chat/qml/PopupDialog.qml b/gpt4all-chat/qml/PopupDialog.qml index 6c67bdb2..d542b04a 100644 --- a/gpt4all-chat/qml/PopupDialog.qml +++ b/gpt4all-chat/qml/PopupDialog.qml @@ -7,7 +7,6 @@ import QtQuick.Layouts Dialog { id: popupDialog anchors.centerIn: parent - opacity: 0.9 padding: 20 property alias text: textField.text property bool shouldTimeOut: true @@ -53,7 +52,7 @@ Dialog { background: Rectangle { anchors.fill: parent - color: theme.backgroundDarkest + color: theme.containerBackground border.width: 1 border.color: theme.dialogBorder radius: 10 diff --git a/gpt4all-chat/qml/SettingsDialog.qml b/gpt4all-chat/qml/SettingsDialog.qml index d8120753..440a1d37 100644 --- a/gpt4all-chat/qml/SettingsDialog.qml +++ b/gpt4all-chat/qml/SettingsDialog.qml @@ -41,46 +41,52 @@ MyDialog { } } - ScrollView { + Rectangle { id: stackList anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left - width: 200 - ScrollBar.vertical.policy: ScrollBar.AsNeeded - clip: true + width: 220 + color: theme.controlBackground + radius: 10 - ListView { - id: listView - anchors.fill: parent - anchors.rightMargin: 10 - 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 + 25 - color: "transparent" - border.color: theme.backgroundLighter - border.width: index == listView.currentIndex ? 1 : 0 - radius: 10 + ListView { + id: listView + anchors.fill: parent + model: stacksModel - Text { - id: titleLabel - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.margins: 20 - font.bold: index == listView.currentIndex - text: title - font.pixelSize: theme.fontSizeLarge - elide: Text.ElideRight - color: theme.textColor - width: 200 - } + delegate: Rectangle { + id: item + width: listView.width + height: titleLabel.height + 10 + color: "transparent" - TapHandler { - onTapped: { - listView.currentIndex = index + MyButton { + id: titleLabel + backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground + backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground + borderColor: index === listView.currentIndex ? theme.yellowAccent : "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 + } } } } diff --git a/gpt4all-chat/qml/StartupDialog.qml b/gpt4all-chat/qml/StartupDialog.qml index f0f2ebcb..115d3738 100644 --- a/gpt4all-chat/qml/StartupDialog.qml +++ b/gpt4all-chat/qml/StartupDialog.qml @@ -52,27 +52,19 @@ MyDialog { ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - TextArea { + MyTextArea { id: welcome - wrapMode: Text.Wrap width: 1024 - 40 - padding: 20 textFormat: TextEdit.MarkdownText text: qsTr("### Release notes\n") + Download.releaseInfo.notes + qsTr("### Contributors\n") + Download.releaseInfo.contributors - color: theme.textColor - font.pixelSize: theme.fontSizeLarge focus: false readOnly: true Accessible.role: Accessible.Paragraph Accessible.name: qsTr("Release notes") Accessible.description: qsTr("Release notes for this version") - background: Rectangle { - color: theme.backgroundLight - radius: 10 - } } } @@ -83,11 +75,9 @@ MyDialog { ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - TextArea { + MyTextArea { id: optInTerms - wrapMode: Text.Wrap width: 1024 - 40 - padding: 20 textFormat: TextEdit.MarkdownText text: qsTr( "### Opt-ins for anonymous usage analytics and datalake @@ -105,17 +95,11 @@ to download and will be used by Nomic AI to improve future GPT4All models. Nomic attribution information attached to your data and you will be credited as a contributor to any GPT4All model release that uses your data!") - color: theme.textColor - font.pixelSize: theme.fontSizeLarge focus: false readOnly: true Accessible.role: Accessible.Paragraph Accessible.name: qsTr("Terms for opt-in") Accessible.description: qsTr("Describes what will happen when you opt-in") - background: Rectangle { - color: theme.backgroundLight - radius: 10 - } } } diff --git a/gpt4all-chat/qml/Theme.qml b/gpt4all-chat/qml/Theme.qml index d500f629..127a2a90 100644 --- a/gpt4all-chat/qml/Theme.qml +++ b/gpt4all-chat/qml/Theme.qml @@ -4,24 +4,146 @@ import QtQuick.Controls.Basic import mysettings QtObject { - property color textColor: MySettings.chatTheme == "Dark" ? "#d1d5db" : "#2e2e34" - property color textAccent: MySettings.chatTheme == "Dark" ? "#8e8ea0" : "#71717f" - property color mutedTextColor: MySettings.chatTheme == "Dark" ? backgroundLightest : "#AFAFB5" - property color backgroundDarkest: MySettings.chatTheme == "Dark" ? "#1c1f21" : "#e3e3e5" - property color backgroundDarker: MySettings.chatTheme == "Dark" ? "#1e2123" : "#e0dedc" - property color backgroundDark: MySettings.chatTheme == "Dark" ? "#222527" : "#D2D1D5" - property color backgroundLight: MySettings.chatTheme == "Dark" ? "#343541" : "#FFFFFF" - property color backgroundLighter: MySettings.chatTheme == "Dark" ? "#444654" : "#F7F7F8" - property color backgroundLightest: MySettings.chatTheme == "Dark" ? "#7d7d8e" : "#82827a" - property color backgroundAccent: MySettings.chatTheme == "Dark" ? "#40414f" : "#E3E3E6" - property color buttonBorder: MySettings.chatTheme == "Dark" ? "#565869" : "#a9a9b0" - property color dialogBorder: MySettings.chatTheme == "Dark" ? "#d1d5db" : "#2e2e34" - property color userColor: MySettings.chatTheme == "Dark" ? "#ec86bf" : "#137382" - property color linkColor: MySettings.chatTheme == "Dark" ? "#55aaff" : "#aa5500" - property color tabBorder: MySettings.chatTheme == "Dark" ? backgroundLight : backgroundDark - property color assistantColor: "#10a37f" - property color textErrorColor: "red" - property real fontSizeLarge: MySettings.fontSize == "Small" ? Qt.application.font.pixelSize : MySettings.fontSize == "Medium" ? Qt.application.font.pixelSize + 5 : Qt.application.font.pixelSize + 10 - property real fontSizeLarger: MySettings.fontSize == "Small" ? Qt.application.font.pixelSize + 2 : MySettings.fontSize == "Medium" ? Qt.application.font.pixelSize + 7 : Qt.application.font.pixelSize + 12 -} + // black and white + property color black: Qt.hsla(231/360, 0.15, 0.19) + property color white: Qt.hsla(0, 0, 1) + + // dark mode black and white + property color darkwhite: Qt.hsla(0, 0, 0.85) + + // gray + property color gray0: white + property color gray50: Qt.hsla(25/360, 0.05, 0.97) + property color gray100: Qt.hsla(25/360,0.05, 0.95) + property color gray200: Qt.hsla(25/360, 0.05, 0.89) + property color gray300: Qt.hsla(25/360, 0.05, 0.82) + property color gray400: Qt.hsla(25/360, 0.05, 0.71) + property color gray500: Qt.hsla(25/360, 0.05, 0.60) + property color gray600: Qt.hsla(25/360, 0.05, 0.51) + property color gray700: Qt.hsla(25/360, 0.05, 0.42) + property color gray800: Qt.hsla(25/360, 0.05, 0.35) + property color gray900: Qt.hsla(25/360, 0.05, 0.31) + property color gray950: Qt.hsla(25/360, 0.05, 0.15) + + // darkmode + property color darkgray0: Qt.hsla(25/360, 0.05, 0.23) + property color darkgray50: Qt.hsla(25/360, 0.05, 0.21) + property color darkgray100: Qt.hsla(25/360, 0.05, 0.19) + property color darkgray200: Qt.hsla(25/360, 0.05, 0.17) + property color darkgray300: Qt.hsla(25/360, 0.05, 0.15) + property color darkgray400: Qt.hsla(25/360, 0.05, 0.13) + property color darkgray500: Qt.hsla(25/360, 0.05, 0.11) + property color darkgray600: Qt.hsla(25/360, 0.05, 0.09) + property color darkgray700: Qt.hsla(25/360, 0.05, 0.07) + property color darkgray800: Qt.hsla(25/360, 0.05, 0.05) + property color darkgray900: Qt.hsla(25/360, 0.05, 0.03) + property color darkgray950: Qt.hsla(25/360, 0.05, 0.01) + + // green + property color green50: Qt.hsla(120/360, 0.18, 0.97) + property color green100: Qt.hsla(120/360, 0.21, 0.93) + property color green200: Qt.hsla(124/360, 0.21, 0.85) + property color green300: Qt.hsla(122/360, 0.20, 0.73) + property color green400: Qt.hsla(122/360, 0.19, 0.58) + property color green500: Qt.hsla(121/360, 0.19, 0.45) + property color green600: Qt.hsla(122/360, 0.20, 0.33) + property color green700: Qt.hsla(122/360, 0.19, 0.29) + property color green800: Qt.hsla(123/360, 0.17, 0.24) + property color green900: Qt.hsla(124/360, 0.17, 0.20) + property color green950: Qt.hsla(125/360, 0.22, 0.10) + + // yellow + property color yellow50: Qt.hsla(47/360, 0.90, 0.96) + property color yellow100: Qt.hsla(46/360, 0.89, 0.89) + property color yellow200: Qt.hsla(45/360, 0.90, 0.77) + property color yellow300: Qt.hsla(44/360, 0.90, 0.66) + property color yellow400: Qt.hsla(41/360, 0.89, 0.56) + property color yellow500: Qt.hsla(36/360, 0.85, 0.50) + property color yellow600: Qt.hsla(30/360, 0.87, 0.44) + property color yellow700: Qt.hsla(24/360, 0.84, 0.37) + property color yellow800: Qt.hsla(21/360, 0.76, 0.31) + property color yellow900: Qt.hsla(20/360, 0.72, 0.26) + property color yellow950: Qt.hsla(19/360, 0.86, 0.14) + + // red + property color red50: Qt.hsla(0, 0.71, 0.97) + property color red100: Qt.hsla(0, 0.87, 0.94) + property color red200: Qt.hsla(0, 0.89, 0.89) + property color red300: Qt.hsla(0, 0.85, 0.77) + property color red400: Qt.hsla(0, 0.83, 0.71) + property color red500: Qt.hsla(0, 0.76, 0.60) + property color red600: Qt.hsla(0, 0.65, 0.51) + property color red700: Qt.hsla(0, 0.67, 0.42) + property color red800: Qt.hsla(0, 0.63, 0.35) + property color red900: Qt.hsla(0, 0.56, 0.31) + property color red950: Qt.hsla(0, 0.67, 0.15) + + // purple + property color purple400: Qt.hsla(279/360, 1.0, 0.73) + property color purple500: Qt.hsla(279/360, 1.0, 0.63) + property color purple600: Qt.hsla(279/360, 1.0, 0.53) + + property color yellowAccent: MySettings.chatTheme === "Dark" ? yellow300 : yellow300; + property color orangeAccent: MySettings.chatTheme === "Dark" ? yellow500 : yellow500; + + property color darkContrast: MySettings.chatTheme === "Dark" ? darkgray100 : gray100 + property color lightContrast: MySettings.chatTheme === "Dark" ? darkgray0 : gray0 + + property color controlBorder: MySettings.chatTheme === "Dark" ? darkgray0 : gray300 + property color controlBackground: MySettings.chatTheme === "Dark" ? darkgray100 : gray100 + property color disabledControlBackground: MySettings.chatTheme === "Dark" ? darkgray200 : gray200 + property color containerForeground: MySettings.chatTheme === "Dark" ? darkgray300 : gray300 + property color containerBackground: MySettings.chatTheme === "Dark" ? darkgray200 : gray200 + + property color progressForeground: yellowAccent + property color progressBackground: MySettings.chatTheme === "Dark" ? green600 : green600 + + property color buttonBackground: MySettings.chatTheme === "Dark" ? green700 : green700 + property color buttonBackgroundHovered: MySettings.chatTheme === "Dark" ? green500 : green500 + property color buttonBorder: MySettings.chatTheme === "Dark" ? yellow200 : yellow200 + + property color sendButtonBackground: yellowAccent + property color sendButtonBackgroundHovered: MySettings.chatTheme === "Dark" ? darkwhite : black + + property color conversationButtonBackground: MySettings.chatTheme === "Dark" ? darkgray100 : gray0 + property color conversationButtonBackgroundHovered: MySettings.chatTheme === "Dark" ? darkgray0 : gray100 + property color conversationButtonBorder: yellow200 + + property color iconBackgroundDark: MySettings.chatTheme === "Dark" ? green400 : green400 + property color iconBackgroundLight: MySettings.chatTheme === "Dark" ? darkwhite : white + property color iconBackgroundHovered: yellowAccent; + + property color slugBackground: MySettings.chatTheme === "Dark" ? darkgray300 : gray100 + + property color textColor: MySettings.chatTheme === "Dark" ? darkwhite : black + property color mutedTextColor: MySettings.chatTheme === "Dark" ? gray400 : gray600 + property color oppositeTextColor: MySettings.chatTheme === "Dark" ? darkwhite : white + property color oppositeMutedTextColor: MySettings.chatTheme === "Dark" ? darkwhite : white + property color textAccent: yellowAccent + property color textErrorColor: MySettings.chatTheme === "Dark" ? red400 : red400 + property color titleTextColor: MySettings.chatTheme === "Dark" ? green400 : green700 + + property color dialogBorder: MySettings.chatTheme === "Dark" ? darkgray0 : darkgray0 + property color linkColor: MySettings.chatTheme === "Dark" ? yellow600 : yellow600 + + property color mainHeader: MySettings.chatTheme === "Dark" ? green600 : green600 + property color mainComboBackground: MySettings.chatTheme === "Dark" ? green700 : green700 + property color sendGlow: MySettings.chatTheme === "Dark" ? green950 : green300 + + property color userColor: MySettings.chatTheme === "Dark" ? green700 : green700 + property color assistantColor: yellowAccent + + property real fontSizeFixedSmall: 16 + + property real fontSizeSmall: fontSizeLarge - 4 + property real fontSizeLarge: MySettings.fontSize === "Small" ? + Qt.application.font.pixelSize : MySettings.fontSize === "Medium" ? + Qt.application.font.pixelSize + 5 : Qt.application.font.pixelSize + 10 + property real fontSizeLarger: MySettings.fontSize === "Small" ? + Qt.application.font.pixelSize + 2 : MySettings.fontSize === "Medium" ? + Qt.application.font.pixelSize + 7 : Qt.application.font.pixelSize + 12 + property real fontSizeLargest: MySettings.fontSize === "Small" ? + Qt.application.font.pixelSize + 7 : MySettings.fontSize === "Medium" ? + Qt.application.font.pixelSize + 12 : Qt.application.font.pixelSize + 14 +} diff --git a/gpt4all-chat/qml/ThumbsDownDialog.qml b/gpt4all-chat/qml/ThumbsDownDialog.qml index cce91683..49f5831b 100644 --- a/gpt4all-chat/qml/ThumbsDownDialog.qml +++ b/gpt4all-chat/qml/ThumbsDownDialog.qml @@ -10,7 +10,6 @@ import llm MyDialog { id: thumbsDownDialog modal: true - opacity: 0.9 padding: 20 Theme { @@ -50,18 +49,9 @@ MyDialog { ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - TextArea { + MyTextArea { id: thumbsDownNewResponse - color: theme.textColor - padding: 20 - wrapMode: Text.Wrap - font.pixelSize: theme.fontSizeLarge placeholderText: qsTr("Please provide a better response...") - placeholderTextColor: theme.backgroundLightest - background: Rectangle { - color: theme.backgroundLighter - radius: 10 - } } } } @@ -70,15 +60,13 @@ MyDialog { padding: 20 alignment: Qt.AlignRight spacing: 10 - MyButton { + MySettingsButton { text: qsTr("Submit") - font.pixelSize: theme.fontSizeLarge Accessible.description: qsTr("Submits the user's response") DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole } - MyButton { + MySettingsButton { text: qsTr("Cancel") - font.pixelSize: theme.fontSizeLarge Accessible.description: qsTr("Closes the response dialog") DialogButtonBox.buttonRole: DialogButtonBox.RejectRole }