About
A self-contained chat interface with user/assistant/system message bubbles, text input, send button, typing indicator, and clear action. Events bubble up as custom events for the host application to handle.
Live Demo
Event Log
Theme Toggle
Usage
<ars-chat-panel
title="Support Chat"
subtitle="Ask us anything"
placeholder="Type your message..."
></ars-chat-panel>
<script>
const chat = document.querySelector('ars-chat-panel');
chat.messages = [
{ role: 'assistant', content: 'Hello! How can I help?' },
{ role: 'user', content: 'I need help with my order.' }
];
chat.addEventListener('ars-chat-panel:send', (e) => {
console.log('User sent:', e.detail.message);
});
</script>