chat: major UI redesign for v3.0.0 (#2396)

Signed-off-by: Adam Treat <treat.adam@gmail.com>
Signed-off-by: Jared Van Bortel <jared@nomic.ai>
Co-authored-by: Jared Van Bortel <jared@nomic.ai>

gpt4all-chat/qml/Theme.qml

@@ -4,7 +4,6 @@ import QtQuick.Controls.Basic
 import mysettings
 
 QtObject {
-
     // black and white
     property color black: Qt.hsla(231/360, 0.15, 0.19)
     property color white: Qt.hsla(0, 0, 1)
@@ -26,6 +25,18 @@ QtObject {
     property color gray900: Qt.hsla(25/360, 0.05, 0.31)
     property color gray950: Qt.hsla(25/360, 0.05, 0.15)
 
+    property color grayRed0: Qt.hsla(0/360, 0.108, 0.89)
+    property color grayRed50: Qt.hsla(0/360, 0.108, 0.85)
+    property color grayRed100: Qt.hsla(0/360, 0.108, 0.80)
+    property color grayRed200: Qt.hsla(0/360, 0.108, 0.76)
+    property color grayRed300: Qt.hsla(0/360, 0.108, 0.72)
+    property color grayRed400: Qt.hsla(0/360, 0.108, 0.68)
+    property color grayRed500: Qt.hsla(0/360, 0.108, 0.60)
+    property color grayRed600: Qt.hsla(0/360, 0.108, 0.56)
+    property color grayRed700: Qt.hsla(0/360, 0.108, 0.52)
+    property color grayRed800: Qt.hsla(0/360, 0.108, 0.48)
+    property color grayRed900: Qt.hsla(0/360, 0.108, 0.42)
+
     // darkmode
     property color darkgray0: Qt.hsla(25/360, 0.05, 0.23)
     property color darkgray50: Qt.hsla(25/360, 0.05, 0.21)
@@ -54,6 +65,7 @@ QtObject {
     property color green950: Qt.hsla(125/360, 0.22, 0.10)
 
     // yellow
+    property color yellow25: Qt.hsla(47/360, 0.90, 0.98)
     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)
@@ -98,6 +110,7 @@ QtObject {
     property color blue400: "#444654"
     property color blue500: "#343541"
     property color blue600: "#2c2d37"
+    property color blue700: "#26272f"
     property color blue800: "#232628"
     property color blue900: "#222527"
     property color blue950: "#1c1f21"
@@ -152,7 +165,7 @@ QtObject {
             case "LegacyDark":
                 return blue950;
             case "Dark":
-                return darkgray100;
+                return darkgray300;
             default:
                 return gray100;
         }
@@ -169,12 +182,47 @@ QtObject {
         }
     }
 
-    property color conversationBackground: {
+    property color dividerColor: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
-                return blue500;
+                return blue950;
+            case "Dark":
+                return darkgray200;
             default:
-                return containerBackground;
+                return grayRed0;
+        }
+    }
+
+    property color conversationDivider: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue900;
+            case "Dark":
+                return darkgray100;
+            default:
+                return gray100;
+        }
+    }
+
+    property color settingsDivider: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return dividerColor
+            case "Dark":
+                return darkgray400;
+            default:
+                return grayRed500;
+        }
+    }
+
+    property color viewBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue600;
+            case "Dark":
+                return darkgray100;
+            default:
+                return gray50;
         }
     }
 
@@ -196,7 +244,18 @@ QtObject {
             case "Dark":
                 return darkgray200;
             default:
-                return gray200;
+                return gray100;
+        }
+    }
+
+    property color viewBarBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray400;
+            default:
+                return gray100;
         }
     }
 
@@ -207,7 +266,7 @@ QtObject {
             case "Dark":
                 return accentColor;
             default:
-                return accentColor;
+                return green600;
         }
     }
 
@@ -218,18 +277,34 @@ QtObject {
             case "Dark":
                 return green600;
             default:
-                return green600;
+                return green100;
         }
     }
 
-    property color progressText: {
+    property color altProgressForeground: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
-                return "#ffffff";
-            case "Dark":
-                return "#000000";
+                return progressForeground;
             default:
-                return "#000000";
+                return "#fcf0c9";
+        }
+    }
+
+    property color altProgressBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return progressBackground;
+            default:
+                return "#fff9d2";
+        }
+    }
+
+    property color altProgressText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return textColor;
+            default:
+                return "#d16f0e";
         }
     }
 
@@ -249,7 +324,7 @@ QtObject {
             case "LegacyDark":
                 return accentColor;
             case "Dark":
-                return green600;
+                return green300;
             default:
                 return green600;
         }
@@ -260,9 +335,9 @@ QtObject {
             case "LegacyDark":
                 return blue950;
             case "Dark":
-                return green700;
+                return darkgray300;
             default:
-                return green700;
+                return green600;
         }
     }
 
@@ -271,18 +346,161 @@ QtObject {
             case "LegacyDark":
                 return blue900;
             case "Dark":
-                return green500;
+                return darkgray400;
             default:
                 return green500;
         }
     }
 
+    property color lightButtonText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return textColor;
+            case "Dark":
+                return textColor;
+            default:
+                return green600;
+        }
+    }
+
+    property color lightButtonMutedText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return mutedTextColor;
+            case "Dark":
+                return mutedTextColor;
+            default:
+                return green300;
+        }
+    }
+
+    property color lightButtonBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBackground;
+            case "Dark":
+                return buttonBackground;
+            default:
+                return green100;
+        }
+    }
+
+    property color lightButtonBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBackgroundHovered;
+            case "Dark":
+                return buttonBackgroundHovered;
+            default:
+                return green200;
+        }
+    }
+
+    property color darkButtonText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return textColor;
+            case "Dark":
+                return textColor;
+            default:
+                return red600;
+        }
+    }
+
+    property color darkButtonMutedText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return mutedTextColor;
+            case "Dark":
+                return mutedTextColor;
+            default:
+                return red300;
+        }
+    }
+
+    property color darkButtonBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBackground;
+            case "Dark":
+                return buttonBackground;
+            default:
+                return red200;
+        }
+    }
+
+    property color darkButtonBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBackgroundHovered;
+            case "Dark":
+                return buttonBackgroundHovered;
+            default:
+                return red300;
+        }
+    }
+
+    property color lighterButtonForeground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return textColor;
+            case "Dark":
+                return textColor;
+            default:
+                return green600;
+        }
+    }
+
+    property color lighterButtonBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBackground;
+            case "Dark":
+                return buttonBackground;
+            default:
+                return green100;
+        }
+    }
+
+    property color lighterButtonBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBackgroundHovered;
+            case "Dark":
+                return buttonBackgroundHovered;
+            default:
+                return green50;
+        }
+    }
+
+    property color sourcesBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return lighterButtonBackground;
+            case "Dark":
+                return lighterButtonBackground;
+            default:
+                return gray100;
+        }
+    }
+
+    property color sourcesBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return lighterButtonBackgroundHovered;
+            case "Dark":
+                return lighterButtonBackgroundHovered;
+            default:
+                return gray200;
+        }
+    }
+
     property color buttonBorder: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
                 return accentColor;
             case "Dark":
-                return yellow200;
+                return controlBorder;
             default:
                 return yellow200;
         }
@@ -310,6 +528,17 @@ QtObject {
         }
     }
 
+    property color selectedBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue700;
+            case "Dark":
+                return darkgray200;
+            default:
+                return gray0;
+        }
+    }
+
     property color conversationButtonBackground: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -320,6 +549,27 @@ QtObject {
                 return gray0;
         }
     }
+   property color conversationBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue500;
+            case "Dark":
+                return darkgray50;
+            default:
+                return white;
+        }
+    }
+
+    property color conversationProgress: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple400;
+            case "Dark":
+                return green400;
+            default:
+                return green400;
+        }
+    }
 
     property color conversationButtonBackgroundHovered: {
         switch (MySettings.chatTheme) {
@@ -343,6 +593,141 @@ QtObject {
         }
     }
 
+    property color conversationHeader: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple400;
+            case "Dark":
+                return green400;
+            default:
+                return green500;
+        }
+    }
+
+    property color collectionsButtonText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return black;
+            case "Dark":
+                return black;
+            default:
+                return white;
+        }
+    }
+
+    property color collectionsButtonProgress: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple400;
+            case "Dark":
+                return darkgray400
+            default:
+                return green400;
+        }
+    }
+
+    property color collectionsButtonForeground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple400;
+            case "Dark":
+                return green300;
+            default:
+                return green600;
+        }
+    }
+
+    property color collectionsButtonBackground: {
+        switch (MySettings.chatTheme) {
+            default:
+                return lighterButtonBackground;
+        }
+    }
+
+    property color collectionsButtonBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            default:
+                return lighterButtonBackgroundHovered;
+        }
+    }
+
+    property color welcomeButtonBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBackground;
+            case "Dark":
+                return buttonBackground;
+            default:
+                return lighterButtonBackground;
+        }
+    }
+
+    property color welcomeButtonBorder: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return buttonBorder;
+            case "Dark":
+                return buttonBorder;
+            default:
+                return green300;
+        }
+    }
+
+    property color welcomeButtonBorderHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple200;
+            case "Dark":
+                return darkgray100;
+            default:
+                return green400;
+        }
+    }
+
+    property color welcomeButtonText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return textColor
+            case "Dark":
+                return textColor
+            default:
+                return green700;
+        }
+    }
+
+    property color welcomeButtonTextHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple200
+            case "Dark":
+                return gray400
+            default:
+                return green800;
+        }
+    }
+
+    property color fancyLinkText: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return textColor
+            case "Dark":
+                return textColor
+            default:
+                return grayRed900;
+        }
+    }
+
+    property color fancyLinkTextHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return mutedTextColor
+            case "Dark":
+                return mutedTextColor
+            default:
+                return textColor;
+        }
+    }
+
     property color iconBackgroundDark: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -361,7 +746,7 @@ QtObject {
             case "Dark":
                 return darkwhite;
             default:
-                return white;
+                return gray500;
         }
     }
 
@@ -370,12 +755,45 @@ QtObject {
             case "LegacyDark":
                 return blue0;
             case "Dark":
-                return accentColor;
+                return gray400;
             default:
                 return accentColor;
         }
     }
 
+    property color iconBackgroundViewBar: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return iconBackgroundLight;
+            case "Dark":
+                return iconBackgroundLight;
+            default:
+                return green500;
+        }
+    }
+
+    property color iconBackgroundViewBarToggled: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return iconBackgroundLight;
+            case "Dark":
+                return darkgray50;
+            default:
+                return green200;
+        }
+    }
+
+    property color iconBackgroundViewBarHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return iconBackgroundHovered;
+            case "Dark":
+                return iconBackgroundHovered;
+            default:
+                return green600;
+        }
+    }
+
     property color slugBackground: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -398,6 +816,27 @@ QtObject {
         }
     }
 
+    // lighter contrast
+    property color mutedLighterTextColor: {
+        switch (MySettings.chatTheme) {
+//            case "LegacyDark":
+//            case "Dark":
+            default:
+                return gray300;
+        }
+    }
+
+    // light contrast
+    property color mutedLightTextColor: {
+        switch (MySettings.chatTheme) {
+//            case "LegacyDark":
+//            case "Dark":
+            default:
+                return gray400;
+        }
+    }
+
+    // normal contrast
     property color mutedTextColor: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -405,7 +844,29 @@ QtObject {
             case "Dark":
                 return gray400;
             default:
-                return gray600;
+                return gray500;
+        }
+    }
+
+    // dark contrast
+    property color mutedDarkTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return mutedTextColor;
+            case "Dark":
+                return mutedTextColor;
+            default:
+                return grayRed500;
+        }
+    }
+
+    // dark contrast hovered
+    property color mutedDarkTextColorHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue400;
+            default:
+                return grayRed900;
         }
     }
 
@@ -458,9 +919,9 @@ QtObject {
             case "LegacyDark":
                 return blue100;
             case "Dark":
-                return green400;
+                return green200;
             default:
-                return green700;
+                return black;
         }
     }
 
@@ -469,12 +930,56 @@ QtObject {
             case "LegacyDark":
                 return purple400;
             case "Dark":
-                return green400;
+                return green300;
             default:
                 return green700;
         }
     }
 
+    property color titleTextColor2: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return darkwhite;
+            case "Dark":
+                return green200;
+            default:
+                return green700;
+        }
+    }
+
+    property color titleInfoTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue200;
+            case "Dark":
+                return gray400;
+            default:
+                return gray600;
+        }
+    }
+
+    property color styledTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple100
+            case "Dark":
+                return yellow25
+            default:
+                return grayRed900;
+        }
+    }
+
+    property color styledTextColor2: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue0;
+            case "Dark":
+                return yellow50
+            default:
+                return green500;
+        }
+    }
+
     property color dialogBorder: {
         switch (MySettings.chatTheme) {
             case "LegacyDark":
@@ -510,12 +1015,8 @@ QtObject {
 
     property color mainComboBackground: {
         switch (MySettings.chatTheme) {
-            case "LegacyDark":
-                return blue950;
-            case "Dark":
-                return green700;
             default:
-                return green700;
+                return "transparent";
         }
     }
 
@@ -552,18 +1053,19 @@ QtObject {
         }
     }
 
-    property real fontSizeFixedSmall: 16
-    property real fontSize: Qt.application.font.pixelSize
+    property real fontSizeLargeCapped: MySettings.fontSize === "Small"  ? 12 : 17
 
-    property real fontSizeSmaller: fontSizeLarge - 4
-    property real fontSizeSmall: fontSizeLarge - 2
-    property real  fontSizeLarge: MySettings.fontSize === "Small" ?
-        fontSize : MySettings.fontSize === "Medium" ?
-            fontSize + 5 : fontSize + 10
-    property real  fontSizeLarger: MySettings.fontSize === "Small" ?
-        fontSize + 2 : MySettings.fontSize === "Medium" ?
-            fontSize + 7 : fontSize + 12
-    property real  fontSizeLargest: MySettings.fontSize === "Small" ?
-        fontSize + 7 : MySettings.fontSize === "Medium" ?
-            fontSize + 12 : fontSize + 14
+    property real fontSizeLarge:       MySettings.fontSize === "Small"  ? 12 :
+                                       MySettings.fontSize === "Medium" ? 17 :
+                                                                          22
+
+    property real fontSizeLargest:     MySettings.fontSize === "Small"  ? 19 :
+                                       MySettings.fontSize === "Medium" ? 24 :
+                                                                          26
+
+    property real fontSizeSmaller:     fontSizeLarge   -  4
+    property real fontSizeSmall:       fontSizeLarge   -  2
+    property real fontSizeLarger:      fontSizeLarge   +  2
+    property real fontSizeBannerSmall: fontSizeLargest + 10
+    property real fontSizeBanner:      fontSizeLargest + 40
 }