Prevent re-parsing markdown on scroll

Author: intitni

Core/Sources/ChatGPTChatTab/Chat.swift

@@ -1,6 +1,7 @@
 import ChatService
 import ComposableArchitecture
 import Foundation
+import MarkdownUI
 import OpenAIService
 import Preferences
 import Terminal
@@ -40,12 +41,14 @@ public struct DisplayedChatMessage: Equatable {
     public var id: String
     public var role: Role
     public var text: String
+    public var markdownContent: MarkdownContent
     public var references: [Reference] = []
 
     public init(id: String, role: Role, text: String, references: [Reference]) {
         self.id = id
         self.role = role
         self.text = text
+        self.markdownContent = .init(text)
         self.references = references
     }
 }
@@ -151,7 +154,7 @@ struct Chat {
             case let .setIsEnabled(isEnabled):
                 state.isEnabled = isEnabled
                 return .none
-            
+
             case .sendButtonTapped:
                 guard !state.typedMessage.isEmpty else { return .none }
                 let message = state.typedMessage
@@ -213,11 +216,11 @@ struct Chat {
                         await openURL(url)
                     }
                 }
-                
+
             case .manuallyScrolledUp:
                 state.isPinnedToBottom = false
                 return .none
-                
+
             case .scrollToBottomButtonTapped:
                 state.isPinnedToBottom = true
                 return .none
@@ -248,7 +251,7 @@ struct Chat {
                     let debouncedHistoryChange = TimedDebounceFunction(duration: 0.2) {
                         await send(.historyChanged)
                     }
-                    
+
                     for await _ in stream {
                         await debouncedHistoryChange()
                     }
@@ -502,9 +505,10 @@ private actor TimedDebounceFunction {
             }
         }
     }
-    
+
     func fire() async {
         lastFireTime = Date()
         await block()
     }
 }
+

Core/Sources/ChatGPTChatTab/ChatPanel.swift

@@ -283,20 +283,27 @@ struct ChatHistoryItem: View {
     var body: some View {
         WithPerceptionTracking {
             let text = message.text
+            let markdownContent = message.markdownContent
             switch message.role {
             case .user:
-                UserMessage(id: message.id, text: text, chat: chat)
-                    .listRowInsets(EdgeInsets(
-                        top: 0,
-                        leading: -8,
-                        bottom: 0,
-                        trailing: -8
-                    ))
-                    .padding(.vertical, 4)
+                UserMessage(
+                    id: message.id,
+                    text: text,
+                    markdownContent: markdownContent,
+                    chat: chat
+                )
+                .listRowInsets(EdgeInsets(
+                    top: 0,
+                    leading: -8,
+                    bottom: 0,
+                    trailing: -8
+                ))
+                .padding(.vertical, 4)
             case .assistant:
                 BotMessage(
                     id: message.id,
                     text: text,
+                    markdownContent: markdownContent,
                     references: message.references,
                     chat: chat
                 )

Core/Sources/ChatGPTChatTab/Views/BotMessage.swift

@@ -8,6 +8,7 @@ struct BotMessage: View {
     var r: Double { messageBubbleCornerRadius }
     let id: String
     let text: String
+    let markdownContent: MarkdownContent
     let references: [DisplayedChatMessage.Reference]
     let chat: StoreOf<Chat>
     @Environment(\.colorScheme) var colorScheme
@@ -43,7 +44,7 @@ struct BotMessage: View {
                     }
                 }
 
-                ThemedMarkdownText(text)
+                ThemedMarkdownText(markdownContent)
             }
             .frame(alignment: .trailing)
             .padding()
@@ -209,14 +210,16 @@ struct ReferenceIcon: View {
 }
 
 #Preview("Bot Message") {
-    BotMessage(
-        id: "1",
-        text: """
+    let text = """
         **Hey**! What can I do for you?**Hey**! What can I do for you?**Hey**! What can I do for you?**Hey**! What can I do for you?
         ```swift
         func foo() {}
         ```
-        """,
+        """
+    return BotMessage(
+        id: "1",
+        text: text,
+        markdownContent: .init(text),
         references: .init(repeating: .init(
             title: "ReferenceList",
             subtitle: "/Core/Sources/ChatGPTChatTab/Views/BotMessage.swift:100",

Core/Sources/ChatGPTChatTab/Views/ThemedMarkdownText.swift

@@ -12,14 +12,18 @@ struct ThemedMarkdownText: View {
     @AppStorage(\.chatCodeFont) var chatCodeFont
     @Environment(\.colorScheme) var colorScheme
 
-    let text: String
+    let content: MarkdownContent
 
     init(_ text: String) {
-        self.text = text
+        self.content = .init(text)
+    }
+    
+    init(_ content: MarkdownContent) {
+        self.content = content
     }
 
     var body: some View {
-        Markdown(text)
+        Markdown(content)
             .textSelection(.enabled)
             .markdownTheme(.custom(
                 fontSize: chatFontSize,

Core/Sources/ChatGPTChatTab/Views/UserMessage.swift

@@ -7,11 +7,12 @@ struct UserMessage: View {
     var r: Double { messageBubbleCornerRadius }
     let id: String
     let text: String
+    let markdownContent: MarkdownContent
     let chat: StoreOf<Chat>
     @Environment(\.colorScheme) var colorScheme
 
     var body: some View {
-        ThemedMarkdownText(text)
+        ThemedMarkdownText(markdownContent)
             .frame(alignment: .leading)
             .padding()
             .background {
@@ -50,21 +51,24 @@ struct UserMessage: View {
 }
 
 #Preview {
-    UserMessage(
+    let text = #"""
+    Please buy me a coffee!
+    | Coffee | Milk |
+    |--------|------|
+    | Espresso | No |
+    | Latte | Yes |
+    ```swift
+    func foo() {}
+    ```
+    ```objectivec
+    - (void)bar {}
+    ```
+    """#
+
+    return UserMessage(
         id: "A",
-        text: #"""
-        Please buy me a coffee!
-        | Coffee | Milk |
-        |--------|------|
-        | Espresso | No |
-        | Latte | Yes |
-        ```swift
-        func foo() {}
-        ```
-        ```objectivec
-        - (void)bar {}
-        ```
-        """#,
+        text: text,
+        markdownContent: .init(text),
         chat: .init(
             initialState: .init(history: [] as [DisplayedChatMessage], isReceivingMessage: false),
             reducer: { Chat(service: .init()) }