Add Markdown & Code Syntax Highlighting to iOS target

Author: alfianlosari

README.MD

@@ -4,6 +4,7 @@
 
 This is a native iOS, macOS, watchOS, tvOS App for interacting with ChatGPT built using SwiftUI and OpenAPI API. It's using Official ChatGPT endpoint with `gpt-3.5-turbo` model.
 
+It is also able to render response with markdown and code syntax highlighting.
 
 ## Video tutorial
 - [iOS YouTube](https://youtu.be/PLEgTCT20zU)

Shared/CodeBlockView.swift

@@ -0,0 +1,111 @@
+//
+//  CodeBlockView.swift
+//  XCAChatGPT
+//
+//  Created by Alfian Losari on 19/04/23.
+//
+
+import SwiftUI
+import Markdown
+
+enum HighlighterConstants {
+    static let color = Color(red: 38/255, green: 38/255, blue: 38/255)
+}
+
+struct CodeBlockView: View {
+    
+    let parserResult: ParserResult
+    @State var isCopied = false
+    
+    var body: some View {
+        VStack(alignment: .leading) {
+            header
+                .padding(.horizontal)
+                .padding(.vertical, 8)
+                .background(Color(red: 9/255, green: 49/255, blue: 69/255))
+            
+            ScrollView(.horizontal, showsIndicators: true) {
+                Text(parserResult.attributedString)
+                    .padding(.horizontal, 16)
+                    .textSelection(.enabled)
+            }
+        }
+        .background(HighlighterConstants.color)
+        .cornerRadius(8)
+    }
+    
+    var header: some View {
+        HStack {
+            if let codeBlockLanguage = parserResult.codeBlockLanguage {
+                Text(codeBlockLanguage.capitalized)
+                    .font(.headline.monospaced())
+                    .foregroundColor(.white)
+            }
+            Spacer()
+            button
+        }
+    }
+    
+    @ViewBuilder
+    var button: some View {
+        if isCopied {
+            HStack {
+                Text("Copied")
+                    .foregroundColor(.white)
+                    .font(.subheadline.monospaced().bold())
+                Image(systemName: "checkmark.circle.fill")
+                    .imageScale(.large)
+                    .symbolRenderingMode(.multicolor)
+            }
+            .frame(alignment: .trailing)
+        } else {
+            Button {
+                let string = NSAttributedString(parserResult.attributedString).string
+                UIPasteboard.general.string = string
+                withAnimation {
+                    isCopied = true
+                }
+                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
+                    withAnimation {
+                        isCopied = false
+                    }
+                }
+            } label: {
+                Image(systemName: "doc.on.doc")
+            }
+            .foregroundColor(.white)
+        }
+    }
+}
+
+struct CodeBlockView_Previews: PreviewProvider {
+    
+    static var markdownString = """
+    ```swift
+    let api = ChatGPTAPI(apiKey: "API_KEY")
+
+    Task {
+        do {
+            let stream = try await api.sendMessageStream(text: "What is ChatGPT?")
+            for try await line in stream {
+                print(line)
+            }
+        } catch {
+            print(error.localizedDescription)
+        }
+    }
+    ```
+    """
+    
+    static let parserResult: ParserResult = {
+        let document = Document(parsing: markdownString)
+        var parser = MarkdownAttributedStringParser()
+        return parser.parserResults(from: document)[0]
+    }()
+    
+    static var previews: some View {
+        CodeBlockView(parserResult: parserResult)
+    }
+}
+
+