✨ Chat UI improvements: no more vibrant colors

Renset · Jul 5, 2024 · 5a90e26 · 5a90e26
1 parent a26c5f2
commit 5a90e26
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/macai.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved b/macai.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -33,8 +33,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/sparkle-project/Sparkle",
       "state" : {
-        "revision" : "b456fd404954a9e13f55aa0c88cd5a40b8399638",
-        "version" : "2.6.3"
+        "revision" : "0ef1ee0220239b3776f433314515fd849025673f",
+        "version" : "2.6.4"
       }
     },
     {

diff --git a/macai/UI/Chat/ChatBubbleView.swift b/macai/UI/Chat/ChatBubbleView.swift
@@ -28,19 +28,19 @@ struct ChatBubbleView: View {
     @State private var wobbleAmount = 0.0
     @Environment(\.colorScheme) var colorScheme
 
-    #if os(macOS)
-        var outgoingBubbleColor = NSColor.systemBlue
-        var incomingBubbleColor = NSColor.windowBackgroundColor
-        var incomingLabelColor = NSColor.labelColor
-    #else
-        var outgoingBubbleColor = UIColor.systemBlue
-        var incomingBubbleColor = UIColor.secondarySystemBackground
-        var incomingLabelColor = UIColor.label
-    #endif
+
+    var outgoingBubbleColorLight = Color(red: 0.92, green: 0.92, blue: 0.92)
+    var outgoingBubbleColorDark = Color(red: 0.3, green: 0.3, blue: 0.3)
+    var incomingBubbleColorLight = Color.clear
+    var incomingBubbleColorDark = Color.clear
+    var incomingLabelColor = NSColor.labelColor
+
 
     var body: some View {
         HStack {
             if own {
+                Color.clear
+                    .frame(width: 80)
                 Spacer()
             }
 
@@ -90,7 +90,7 @@ struct ChatBubbleView: View {
                                 let systemFont = NSFont.systemFont(ofSize: NSFont.systemFontSize)
                                 mutableAttributedString.addAttribute(.font, value: systemFont, range: fullRange)
 
-                                mutableAttributedString.addAttribute(.foregroundColor, value: own ? NSColor(Color(.white)) : NSColor.textColor, range: fullRange)
+                                mutableAttributedString.addAttribute(.foregroundColor, value: own ? NSColor.textColor : NSColor.textColor, range: fullRange)
 
                                 return mutableAttributedString
                             }()
@@ -122,14 +122,16 @@ struct ChatBubbleView: View {
                     }
                 }
             }
-            .foregroundColor(error ? Color(.white) : Color(own ? .white : incomingLabelColor))
+            .foregroundColor(error ? Color(.white) : Color(own ? incomingLabelColor : incomingLabelColor))
             .multilineTextAlignment(.leading)
             .padding(.horizontal, 12)
             .padding(.vertical, 8)
             .background(
                 error
                     ? Color(.red)
-                    : initialMessage ? Color(.systemOrange) : Color(own ? outgoingBubbleColor : incomingBubbleColor)
+                : initialMessage 
+                    ? Color(.systemOrange)
+                : colorScheme == .dark ? (own ? outgoingBubbleColorDark : incomingBubbleColorDark) : (own ? outgoingBubbleColorLight : incomingBubbleColorLight)
             )
             .cornerRadius(16)
             if !own {
@@ -143,7 +145,9 @@ struct ChatBubbleView: View {
                 Label("Copy raw message", systemImage: "doc.on.doc")
             }
         }
+        .padding(.vertical, 8)
     }
+
 
     private func copyMessageToClipboard() {
         let pasteboard = NSPasteboard.general

diff --git a/macai/UI/Chat/CodeView.swift b/macai/UI/Chat/CodeView.swift
@@ -16,6 +16,9 @@ struct CodeView: View {
     @State private var isCopied = false
     var isHovered = true
     @Environment(\.colorScheme) var colorScheme
+
+    private let borderColorDark = Color(red: 0.25, green: 0.25, blue: 0.25)
+    private let borderColorLight = Color(red: 0.86, green: 0.86, blue: 0.86)
 
     var body: some View {
         VStack {
@@ -51,8 +54,8 @@ struct CodeView: View {
                 }
                 .background(
                     colorScheme == .dark
-                        ? Color(NSColor(red: 30 / 255, green: 30 / 255, blue: 30 / 255, alpha: 1))
-                    : Color(NSColor(red: 220 / 255, green: 220 / 255, blue: 220 / 255, alpha: 1))
+                        ? borderColorDark
+                    : borderColorLight
                 )
 
                 AttributedText(code ?? NSAttributedString(string: ""))
@@ -63,10 +66,18 @@ struct CodeView: View {
                     .padding(.bottom, 12)
 
             }
+//            .background(
+//                colorScheme == .dark
+//                    ? Color(NSColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1))
+//                    : .white
+//            )
             .background(
-                colorScheme == .dark
-                    ? Color(NSColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1))
-                    : .white
+                RoundedRectangle(cornerRadius: 8.0)
+                    .stroke(
+                        colorScheme == .dark ? borderColorDark : borderColorLight,
+                        lineWidth: 2
+                    )
+                    .clipShape(RoundedRectangle(cornerRadius: 8.0))
             )
             .cornerRadius(8)
         }

diff --git a/macai/UI/Chat/MessageInputView.swift b/macai/UI/Chat/MessageInputView.swift
@@ -21,7 +21,7 @@ struct MessageInputView: View {
     private let lineWidthOnFocus = 3.0
     private let lineColorOnBlur = Color.gray.opacity(0.5)
     private let lineColorOnFocus = Color.blue.opacity(0.8)
-    private let cornerRadius = 8.0
+    private let cornerRadius = 16.0
     private let inputPlaceholderText = "Type your prompt here"
 
     enum Focus {