Chat

Chat bubbles for messaging interfaces. Supports avatars, headers, footers, and color variants.

const { default: Chat } = await import('/components/data-display/chat.js');

const { tags, $ } = Lightview;
const { div } = tags;

const conversation = div({},
    Chat({ position: 'start' },
        Chat.Image({ src: 'https://i.pravatar.cc/100?img=10' }),
        Chat.Header({}, 'Obi-Wan'),
        Chat.Bubble({}, "It's over Anakin, I have the high ground."),
        Chat.Footer({}, 'Delivered')
    ),
    Chat({ position: 'end' },
        Chat.Image({ src: 'https://i.pravatar.cc/100?img=11' }),
        Chat.Header({}, 'Anakin'),
        Chat.Bubble({}, 'You underestimate my power!'),
        Chat.Footer({}, 'Seen')
    )
);

$('#demo').insert(conversation);

const { default: Chat } = await import('/components/data-display/chat.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, input } = tags;

const messages = signal([
    { pos: 'start', text: 'Hey! How are you?', time: '10:00' }
]);
const inputVal = signal('');

const sendMessage = () => {
    if (!inputVal.value.trim()) return;
    messages.value = [...messages.value, 
        { pos: 'end', text: inputVal.value, time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) }
    ];
    inputVal.value = '';
};

const demo = div({ class: 'flex flex-col gap-4' },
    div({ class: 'h-48 overflow-y-auto' },
        () => messages.value.map(m => 
            Chat({ position: m.pos },
                Chat.Bubble({ color: m.pos === 'end' ? 'primary' : undefined }, m.text),
                Chat.Footer({}, m.time)
            )
        )
    ),
    div({ class: 'flex gap-2' },
        input({ 
            type: 'text', 
            class: 'input input-bordered flex-1',
            placeholder: 'Type a message...',
            value: () => inputVal.value,
            oninput: (e) => { inputVal.value = e.target.value; },
            onkeypress: (e) => { if(e.key === 'Enter') sendMessage(); }
        }),
        Button({ color: 'primary', onclick: sendMessage }, 'Send')
    )
);

$('#demo').insert(demo);

Chat Props

Sub-components

Bubble Colors