BlazorChatMessage.Files Property

Returns a collection of uploaded files.

Namespace: DevExpress.AIIntegration.Blazor.Chat

Assembly: DevExpress.AIIntegration.Blazor.Chat.v25.1.dll

NuGet Package: DevExpress.AIIntegration.Blazor.Chat

Declaration

public List<AIChatUploadFileInfo> Files { get; }

Property Value

Type	Description
List<AIChatUploadFileInfo>	The collection of uploaded files.

Remarks

Use the Files property to obtain information about the files attached to a message.

Razor

<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>
                                            <img src="@GetImageSrc(file)" style="max-width: 100px; max-height: 100px;" />
                                        </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)
        });
    }
}

CSS

 .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;
        }