Make code blocks in chat horizontally scrollable

Author: intitni

Core/Sources/ChatGPTChatTab/Styles.swift

@@ -41,31 +41,34 @@ extension MarkdownUI.Theme {
             FontSize(fontSize)
         }
         .codeBlock { configuration in
-            configuration.label
-                .relativeLineSpacing(.em(0.225))
-                .markdownTextStyle {
-                    FontFamilyVariant(.monospaced)
-                    FontSize(.em(0.85))
-                }
-                .padding(16)
-                .padding(.top, 14)
-                .background(Color(nsColor: .textBackgroundColor).opacity(0.7))
-                .clipShape(RoundedRectangle(cornerRadius: 6))
-                .overlay(alignment: .top) {
-                    HStack(alignment: .center) {
-                        Text(configuration.language ?? "code")
-                            .foregroundStyle(.tertiary)
-                            .font(.callout)
-                            .padding(.leading, 8)
-                            .lineLimit(1)
-                        Spacer()
-                        CopyButton {
-                            NSPasteboard.general.clearContents()
-                            NSPasteboard.general.setString(configuration.content, forType: .string)
-                        }
+            ScrollView(.horizontal) {
+                configuration.label
+                    .relativeLineSpacing(.em(0.225))
+                    .markdownTextStyle {
+                        FontFamilyVariant(.monospaced)
+                        FontSize(.em(0.85))
+                    }
+                    .padding(16)
+                    .padding(.top, 14)
+            }
+            .workaroundForVerticalScrollingBugInMacOS()
+            .background(Color(nsColor: .textBackgroundColor).opacity(0.7))
+            .clipShape(RoundedRectangle(cornerRadius: 6))
+            .overlay(alignment: .top) {
+                HStack(alignment: .center) {
+                    Text(configuration.language ?? "code")
+                        .foregroundStyle(.tertiary)
+                        .font(.callout)
+                        .padding(.leading, 8)
+                        .lineLimit(1)
+                    Spacer()
+                    CopyButton {
+                        NSPasteboard.general.clearContents()
+                        NSPasteboard.general.setString(configuration.content, forType: .string)
                     }
                 }
-                .markdownMargin(top: 4, bottom: 16)
+            }
+            .markdownMargin(top: 4, bottom: 16)
         }
     }
 
@@ -98,3 +101,38 @@ extension MarkdownUI.Theme {
     }
 }
 
+final class VerticalScrollingFixHostingView<Content>: NSHostingView<Content> where Content: View {
+    override func wantsForwardedScrollEvents(for axis: NSEvent.GestureAxis) -> Bool {
+        return axis == .vertical
+    }
+}
+
+struct VerticalScrollingFixViewRepresentable<Content>: NSViewRepresentable where Content: View {
+    let content: Content
+
+    func makeNSView(context: Context) -> NSHostingView<Content> {
+        return VerticalScrollingFixHostingView<Content>(rootView: content)
+    }
+
+    func updateNSView(_ nsView: NSHostingView<Content>, context: Context) {}
+}
+
+struct VerticalScrollingFixWrapper<Content>: View where Content: View {
+    let content: () -> Content
+
+    init(@ViewBuilder content: @escaping () -> Content) {
+        self.content = content
+    }
+
+    var body: some View {
+        VerticalScrollingFixViewRepresentable(content: self.content())
+    }
+}
+
+extension View {
+    /// https://stackoverflow.com/questions/64920744/swiftui-nested-scrollviews-problem-on-macos
+    @ViewBuilder func workaroundForVerticalScrollingBugInMacOS() -> some View {
+        VerticalScrollingFixWrapper { self }
+    }
+}
+