Flowbite Blazor

Chatbot

Compose conversational UIs with Flowbite's chat building blocks: conversations, message bubbles, reasoning drawers, citations, and a prompt toolbar that mirrors the AI Elements experience.

AI chat experience #

Wrap streamed messages inside Conversation, then wire PromptInput to collect text, attachments, and model settings.

Can you explain how React hooks work effectively?

You

Hi there! I'm your Flowbite AI assistant. Ask about building chat interfaces and I'll walk you through the pieces.

Engage the user with a friendly greeting and invite a question about chat UI.

Regenerate

Copy response


<Conversation Class="h-[420px] overflow-hidden rounded-3xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
    <ConversationContent AutoScrollBehavior="ConversationAutoScrollBehavior.StickToBottom">
        @foreach (var message in messages)
        {
            <ChatMessage @key="message.Id"
                         From="message.Role"
                         AvatarInitials="@(message.Role == ChatMessageRole.Assistant ? "AI" : "You")">
                <ChatMessageContent>
                    <ChatResponse Text="@message.Text" />
                </ChatMessageContent>
            </ChatMessage>
        }
    </ConversationContent>
    <ConversationScrollButton />
</Conversation>

<PromptInput OnSubmit="HandleSubmitAsync">
    <PromptInputHeader>
        <PromptInputAttachments>
            <ChildContent Context="file">
                <PromptInputAttachment Data="file" />
            </ChildContent>
        </PromptInputAttachments>
    </PromptInputHeader>
    <PromptInputBody>
        <PromptInputTextarea Placeholder="Ask the assistant..." />
    </PromptInputBody>
    <PromptInputFooter>
        <PromptInputTools>
            <PromptInputActionMenu>
                <PromptInputActionMenuTrigger>
                    <PlusIcon class="h-4 w-4" />
                </PromptInputActionMenuTrigger>
                <PromptInputActionMenuContent>
                    <PromptInputActionAddAttachments />
                </PromptInputActionMenuContent>
            </PromptInputActionMenu>
            <PromptInputButton Variant="PromptInputButtonVariant.Ghost">
                <MicrophoneIcon class="h-4 w-4" />
            </PromptInputButton>
            <PromptInputButton Variant="PromptInputButtonVariant.Ghost">
                <GlobeIcon class="h-4 w-4" />
                <span>Search</span>
            </PromptInputButton>
            <PromptInputModelSelect Value="openai/gpt-4o">
                <PromptInputModelSelectTrigger>
                    <PromptInputModelSelectValue />
                </PromptInputModelSelectTrigger>
                <PromptInputModelSelectContent>
                    <PromptInputModelSelectItem Value="openai/gpt-4o" Label="GPT 4o" />
                </PromptInputModelSelectContent>
            </PromptInputModelSelect>
        </PromptInputTools>
        <PromptInputSubmit>
            <PaperPlaneIcon class="h-4 w-4" />
        </PromptInputSubmit>
    </PromptInputFooter>
</PromptInput>