Message

---
import {
  Avatar,
  Bubble,
  Message
} from '@santi020k/lumen-astro'
---

<Message from="assistant">
  <Avatar fallback="LU" />
  <Bubble>Lumen components are installed and ready.</Bubble>
</Message>
<Message from="user">
  <Avatar fallback="SM" />
  <Bubble from="user">Show me the Button docs.</Bubble>
</Message>

import { Avatar, Bubble, Message } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Message from="assistant">
      <Avatar fallback="LU" />
      <Bubble>Lumen components are installed and ready.</Bubble>
    </Message>
    <Message from="user">
      <Avatar fallback="SM" />
      <Bubble from="user">Show me the Button docs.</Bubble>
    </Message>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-message from="assistant">
  <lumen-avatar fallback="LU"></lumen-avatar>
  <lumen-bubble>Lumen components are installed and ready.</lumen-bubble>
</lumen-message>
<lumen-message from="user">
  <lumen-avatar fallback="SM"></lumen-avatar>
  <lumen-bubble from="user">Show me the Button docs.</lumen-bubble>
</lumen-message>