public List<AIChatUploadFileInfo> Files { get; }

<DxAIChat CssClass="demo-chat" Initialized="ChatInitialized">
    <MessageTemplate>
        <div class="@GetMessageClasses(context)">
            @if(context.Typing) {
                <span>Loading...</span>
            } else {
                <div class="demo-chat-content">
                    @context.Content
                        <div>
                            @if(context.Files != null && context.Files.Count > 0) {
                                foreach(var file in context.Files) {
                                    if(file.Type != null && file.Type.Contains("image")) {
                                        <div>
                                            
                                        </div>
                                    }
                                }
                            }
                        </div>
                </div>
            }
        </div>
    </MessageTemplate>
</DxAIChat>

@code {
    string GetMessageClasses(BlazorChatMessage message) {
        if(message.Role == ChatMessageRole.Assistant) {
            return "demo-chat-message demo-assistant-message";
        } else if(message.Role == ChatMessageRole.User) {
            return "demo-chat-message demo-user-message";
        } else if(message.Role == ChatMessageRole.Error) {
            return "demo-chat-message demo-error-message";
        }
        return "demo-chat-message";
    }

    private string GetImageSrc(AIChatUploadFileInfo file) {
        var base64 = Convert.ToBase64String(file.Data.ToArray());
        return $"data:{file.Type};base64,{base64}";
    }

    void ChatInitialized(IAIChat chat) {
        var filePath = "C:\\Users\\Public\\images\\flowers.jpg";

        var fileBytes = File.ReadAllBytes(filePath);

        var attachedFiles = new List<AIChatUploadFileInfo> {
            new AIChatUploadFileInfo(
                name: Path.GetFileName(filePath),
                type: "image/jpeg",
                size: fileBytes.Length,
                data: new ReadOnlyMemory<byte>(fileBytes)
            )
        };
        chat.LoadMessages(new[] {
            new BlazorChatMessage(Microsoft.Extensions.AI.ChatRole.User, "Hello, AI!"),
            new BlazorChatMessage(Microsoft.Extensions.AI.ChatRole.Assistant, "Hey there, human! What's on your mind? 😊", attachedFiles)
        });
    }
}

.demo-chat {
    width: 100%;
    height: 400px;
}

.demo-chat .demo-chat-message {
    padding: 10px;
    border-radius: 10px;
    width: calc(100% - 60px);
    box-shadow: 0px 2px 6px -2px;
}

.demo-chat .demo-chat-message.demo-assistant-message {
    background-color: rgba(76, 255, 0, 0.2);
    align-self: self-start;
}

.demo-chat .demo-chat-message.demo-user-message {
    background-color: #FFF;
    align-self: self-end;
}

.demo-chat .demo-chat-message.demo-error-message {
    background-color: rgb(255, 0, 0, 0.2);
    align-self: center;
}

.image-style {
    max-width: 100px; 
    max-height: 100px;
}