[iOS] Image + Circle + frame

struct ChatMessage: Identifiable {
    let id = UUID()
    let text: String
    let isMe: Bool
    let avatar: String  // 画像名（URLの場合もOK）
}

struct ChatRow: View {
    let message: ChatMessage

    var body: some View {
        HStack(alignment: .bottom, spacing: 10) {

            // 左側に相手のアバター
            if !message.isMe {
                avatarView
            }

            // メッセージバブル
            Text(message.text)
                .padding()
                .background(message.isMe ? Color.blue : Color.gray.opacity(0.2))
                .foregroundColor(message.isMe ? .white : .black)
                .cornerRadius(12)

            // 右側に自分のアバター
            if message.isMe {
                avatarView
            }
        }
        .padding(.horizontal)
    }

    // アバター
    private var avatarView: some View {
        Image(message.avatar)
            .resizable()
            .scaledToFill()
            .frame(width: 40, height: 40)
            .clipShape(Circle())
    }
}

struct ChatView: View {
    let messages = [
        ChatMessage(text: "こんにちは！", isMe: false, avatar: "avatar1"),
        ChatMessage(text: "こんにちは〜！", isMe: true, avatar: "myAvatar"),
        ChatMessage(text: "調子どう？", isMe: false, avatar: "avatar1")
    ]

    var body: some View {
        ScrollView {
            VStack(spacing: 12) {
                ForEach(messages) { msg in
                    ChatRow(message: msg)
                }
            }
        }
    }
}