Chat bubble

A message in an assistant chat. The assistant's answers sit on the page with the mark and their sources; the person's messages are inverse bubbles on the right.

What did people say about onboarding?

09:41

Nine of twelve interviewees raised onboarding. Most wanted a shorter first setup; three asked for sample data.

interviews-q3.pdfsurvey-results.xlsx

09:41

Usage

use hydroxy_leptos::chat_bubble::{ChatBubble, ChatRole};
use leptos::prelude::*;

pub fn demo() -> AnyView {
    view! {
        <div style="display: grid; gap: var(--space-7); max-width: 560px;">
            <ChatBubble role=ChatRole::User time="09:41">"What did people say about onboarding?"</ChatBubble>
            <ChatBubble sources=vec!["interviews-q3.pdf".to_string(), "survey-results.xlsx".to_string()] time="09:41">
                "Nine of twelve interviewees raised onboarding. Most wanted a shorter first setup; three asked for sample data."
            </ChatBubble>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::chat_bubble::{ChatBubble, ChatRole};

#[component]
pub fn ChatBubbleDemo() -> Element {
    rsx! {
        div { style: "display: grid; gap: var(--space-7); max-width: 560px;",
            ChatBubble { role: ChatRole::User, time: "09:41", "What did people say about onboarding?" }
            ChatBubble {
                sources: vec!["interviews-q3.pdf".to_string(), "survey-results.xlsx".to_string()],
                time: "09:41",
                "Nine of twelve interviewees raised onboarding. Most wanted a shorter first setup; three asked for sample data."
            }
        }
    }
}

Anatomy

Component	data-part	Renders
`ChatBubble`	—	div[data-role=assistant\|user]
	avatar	The mark, assistant messages only
	message	The text; an inverse bubble for the person
	time	Optional time

Props

Prop	Type	Notes
`role`	ChatRole	Assistant (default) or User
`sources`	Vec<String>	File names behind an answer
`time`	String	When it was sent
`children`	View	The message