Adjust chat panel UI

Author: intitni

Core/Sources/ChatGPTChatTab/ChatPanel.swift

@@ -18,7 +18,7 @@ public struct ChatPanel: View {
             Divider()
             ChatPanelInputArea(chat: chat)
         }
-        .background(.regularMaterial)
+        .background(.clear)
         .onAppear { chat.send(.appear) }
     }
 }
@@ -86,13 +86,23 @@ struct ChatPanelMessages: View {
                     }
                     .modify { view in
                         if #available(macOS 13.0, *) {
-                            view.listRowSeparator(.hidden).listSectionSeparator(.hidden)
+                            view
+                                .listRowSeparator(.hidden)
+                                .listSectionSeparator(.hidden)
                         } else {
                             view
                         }
                     }
                 }
                 .listStyle(.plain)
+                .listRowBackground(EmptyView())
+                .modify { view in
+                    if #available(macOS 13.0, *) {
+                        view.scrollContentBackground(.hidden)
+                    } else {
+                        view
+                    }
+                }
                 .coordinateSpace(name: scrollSpace)
                 .preference(
                     key: ListHeightPreferenceKey.self,

Core/Sources/ChatGPTChatTab/Styles.swift

@@ -9,7 +9,7 @@ extension Color {
             if appearance.isDarkMode {
                 return #colorLiteral(red: 0.1580096483, green: 0.1730263829, blue: 0.2026666105, alpha: 1)
             }
-            return .white
+            return #colorLiteral(red: 0.9896564803, green: 0.9896564803, blue: 0.9896564803, alpha: 1)
         }))
     }
 
@@ -18,7 +18,7 @@ extension Color {
             if appearance.isDarkMode {
                 return #colorLiteral(red: 0.2284317913, green: 0.2145925438, blue: 0.3214019983, alpha: 1)
             }
-            return #colorLiteral(red: 0.896820749, green: 0.8709097223, blue: 0.9766687925, alpha: 1)
+            return #colorLiteral(red: 0.957824412, green: 0.947133649, blue: 0.9906365955, alpha: 1)
         }))
     }
 }
@@ -92,6 +92,60 @@ extension MarkdownUI.Theme {
         }
     }
 
+    static func instruction(fontSize: Double) -> MarkdownUI.Theme {
+        .gitHub.text {
+            ForegroundColor(.primary)
+            BackgroundColor(Color.clear)
+            FontSize(fontSize)
+        }
+        .code {
+            FontFamilyVariant(.monospaced)
+            FontSize(.em(0.85))
+            BackgroundColor(Color.secondary.opacity(0.2))
+        }
+        .codeBlock { configuration in
+            let wrapCode = UserDefaults.shared.value(for: \.wrapCodeInChatCodeBlock)
+
+            if wrapCode {
+                configuration.label
+                    .codeBlockLabelStyle()
+                    .codeBlockStyle(configuration)
+            } else {
+                ScrollView(.horizontal) {
+                    configuration.label
+                        .codeBlockLabelStyle()
+                }
+                .workaroundForVerticalScrollingBugInMacOS()
+                .codeBlockStyle(configuration)
+            }
+        }
+        .table { configuration in
+            configuration.label
+                .fixedSize(horizontal: false, vertical: true)
+                .markdownTableBorderStyle(.init(
+                    color: .init(nsColor: .separatorColor),
+                    strokeStyle: .init(lineWidth: 1)
+                ))
+                .markdownTableBackgroundStyle(
+                    .alternatingRows(Color.secondary.opacity(0.1), Color.secondary.opacity(0.2))
+                )
+                .markdownMargin(top: 0, bottom: 16)
+        }
+        .tableCell { configuration in
+            configuration.label
+                .markdownTextStyle {
+                    if configuration.row == 0 {
+                        FontWeight(.semibold)
+                    }
+                    BackgroundColor(nil)
+                }
+                .fixedSize(horizontal: false, vertical: true)
+                .padding(.vertical, 6)
+                .padding(.horizontal, 13)
+                .relativeLineSpacing(.em(0.25))
+        }
+    }
+
     static func functionCall(fontSize: Double) -> MarkdownUI.Theme {
         .gitHub.text {
             ForegroundColor(.secondary)

Core/Sources/ChatGPTChatTab/Views/BotMessage.swift

@@ -66,7 +66,7 @@ struct BotMessage: View {
                     .stroke(Color(nsColor: .separatorColor), lineWidth: 1)
             }
             .padding(.leading, 8)
-            .shadow(color: .black.opacity(0.1), radius: 2)
+            .shadow(color: .black.opacity(0.05), radius: 6)
             .contextMenu {
                 Button("Copy") {
                     NSPasteboard.general.clearContents()

Core/Sources/ChatGPTChatTab/Views/Instructions.swift

@@ -71,7 +71,7 @@ struct Instruction: View {
         func body(content: Content) -> some View {
             content
                 .textSelection(.enabled)
-                .markdownTheme(.custom(fontSize: chatFontSize))
+                .markdownTheme(.instruction(fontSize: chatFontSize))
                 .opacity(0.8)
                 .frame(maxWidth: .infinity, alignment: .leading)
                 .padding()

Core/Sources/ChatGPTChatTab/Views/UserMessage.swift

@@ -34,7 +34,7 @@ struct UserMessage: View {
             }
             .padding(.leading)
             .padding(.trailing, 8)
-            .shadow(color: .black.opacity(0.1), radius: 2)
+            .shadow(color: .black.opacity(0.05), radius: 6)
             .frame(maxWidth: .infinity, alignment: .trailing)
             .contextMenu {
                 Button("Copy") {

Core/Sources/SuggestionWidget/ChatWindowView.swift

@@ -43,7 +43,6 @@ struct ChatWindowView: View {
             }
             .xcodeStyleFrame(cornerRadius: 10)
             .ignoresSafeArea(edges: .top)
-            .background(.regularMaterial)
             .onChange(of: viewStore.state.isPanelDisplayed) { isDisplayed in
                 toggleVisibility(isDisplayed)
             }