UserMessage.swift

import ComposableArchitecture
import ChatService
import Foundation
import MarkdownUI
import SharedUIComponents
import SwiftUI
import Status
import Cache

struct UserMessage: View {
    var r: Double { messageBubbleCornerRadius }
    let id: String
    let text: String
    let chat: StoreOf<Chat>
    @Environment(\.colorScheme) var colorScheme
    @ObservedObject private var statusObserver = StatusObserver.shared
    
    struct AvatarView: View {
        @ObservedObject private var avatarViewModel = AvatarViewModel.shared
        
        var body: some View {
            if let avatarImage = avatarViewModel.avatarImage {
                avatarImage
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 24, height: 24)
                    .clipShape(Circle())
            } else {
                Image(systemName: "person.circle")
                    .resizable()
                    .frame(width: 24, height: 24)
            }
        }
    }

    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 8) {
                HStack(spacing: 4) {
                    AvatarView()

                    Text(statusObserver.authStatus.username ?? "")
                        .chatMessageHeaderTextStyle()
                        .padding(2)
                    
                    Spacer()
                }
                
                ThemedMarkdownText(text: text, chat: chat)
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .shadow(color: .black.opacity(0.05), radius: 6)
    }
}

#Preview {
    UserMessage(
        id: "A",
        text: #"""
        Please buy me a coffee!
        | Coffee | Milk |
        |--------|------|
        | Espresso | No |
        | Latte | Yes |
        ```swift
        func foo() {}
        ```
        ```objectivec
        - (void)bar {}
        ```
        """#,
        chat: .init(
            initialState: .init(history: [] as [DisplayedChatMessage], isReceivingMessage: false),
            reducer: { Chat(service: ChatService.service()) }
        )
    )
    .padding()
    .fixedSize(horizontal: true, vertical: true)
    .background(Color.yellow)
}