feat: Improve answer streaming and text rendering efficiency

This commit improves the efficiency of answer streaming and text rendering, significantly reducing the bottleneck on the main thread.

The changes include:

- Stream answers every 1 second: Implemented a mechanism to stream the generated answer in 1-second intervals, providing a continuous update to the user. This avoids rendering the entire answer at once, improving perceived responsiveness.
- Utilize TextEditor for long text strings: Replaced the @State property used for displaying the answer with a TextEditor(text: Binding<String>). This allows TextEditor to efficiently handle long text strings, preventing layout issues and improving rendering performance.
- Optimized text rendering: The TextEditor component is now used to display the answer, offering a more robust and performant solution for handling extended text content.

This optimization will result in faster response times and a smoother user experience, especially when generating long answers.

Author: hellotunamayo

macLlama/Views/ConversationView/ChatBubbleView.swift

@@ -15,8 +15,9 @@ struct ChatBubbleView: View {
     @State private var messageAnimationFactor: CGFloat = 0.0
     @State private var messageAnimated: Bool = false
     @State private var isMarkdownEnabled: Bool = false
+    @State private var chatMessage: String = ""
 
-    let chatData: (isUser: Bool, modelName: String, message: String)
+    @Binding var chatData: (isUser: Bool, modelName: String, message: String)
 
     var body: some View {
         HStack(alignment: .top) {
@@ -103,7 +104,7 @@ struct ChatBubbleView: View {
                 VStack {
                     if isMarkdownEnabled {
                         Markdown {
-                            MarkdownContent(chatData.message)
+                            MarkdownContent(chatMessage)
                         }
                         .markdownTextStyle(\.code) {
                             FontFamilyVariant(.monospaced)
@@ -115,18 +116,31 @@ struct ChatBubbleView: View {
                         .textSelection(.enabled)
                         .markdownTheme(.gitHub)
                     } else {
-                        Text(chatData.message)
-                            .font(.system(size: CGFloat(chatFontSize)))
-                            .lineSpacing(CGFloat(chatFontSize / 3))
-                            .textSelection(.enabled)
-                            .frame(alignment: chatData.isUser ? .trailing : .leading)
+                        if !chatData.isUser {
+                            TextEditor(text: $chatMessage)
+                                .font(.system(size: CGFloat(chatFontSize)))
+                                .lineSpacing(CGFloat(chatFontSize / 3))
+                                .scrollDisabled(true)
+                                .textSelection(.enabled)
+                                .scrollContentBackground(.hidden)
+                                .frame(minHeight: 50, alignment: .leading)
+                        } else {
+                            Text(chatData.message)
+                                .font(.system(size: CGFloat(chatFontSize)))
+                                .lineSpacing(CGFloat(chatFontSize / 3))
+                                .textSelection(.enabled)
+                                .frame(alignment: .trailing)
+                        }
                     }
                 }
                 .padding(.horizontal, chatData.isUser ? Units.normalGap * 1.3 : 0)
                 .padding(.vertical, chatData.isUser ? Units.normalGap / 1.5 : 0)
                 .background(chatData.isUser ? .black.opacity(0.15) : .clear)
                 .clipShape(chatData.isUser ? RoundedRectangle(cornerRadius: 8) : RoundedRectangle(cornerRadius: 0))
                 .frame(maxWidth: .infinity, alignment: chatData.isUser ? .trailing : .leading)
+                .onChange(of: self.chatData.message) { _, newValue in
+                    self.chatMessage = newValue
+                }
             }
 
             //Remains for future features (User's chat avatar)

macLlama/Views/ConversationView/ConversationChatView.swift

@@ -6,6 +6,7 @@
 //
 
 import SwiftUI
+import Combine
 
 struct ConversationChatView: View {
     @Environment(\.colorScheme) var colorScheme
@@ -62,7 +63,7 @@ struct ConversationChatView: View {
                         ForEach(0..<self.history.count, id: \.self) { index in
                             LazyVStack {
                                 if history[index].message != "" {
-                                    ChatBubbleView(isThinking: self.$isThinking, chatData: history[index])
+                                    ChatBubbleView(isThinking: self.$isThinking, chatData: $history[index])
                                         .padding()
                                         .id(index)
 
@@ -164,9 +165,19 @@ extension ConversationChatView {
 
             //Start stream from model
             Task {
+                var cancellable: Set<AnyCancellable> = []
+                let timer = Timer.publish(every: 0.5, on: .main, in: .common).autoconnect()
+                var count: Int = 0
+                timer.sink { _ in
+                    count += 1
+                }.store(in: &cancellable)
+                
                 let stream = try await chatService.sendMessage(model: model, userInput: prompt, images: images)
                 for await update in stream {
-                    self.history[self.history.count - 1].message = update
+                    let outputText = update
+                    if count % 2 == 0 { //update stream in every 2 seconds
+                        self.history[self.history.count - 1].message = outputText
+                    }
                 }
 
                 //Save last response to history