# Chat Bubble

## Example

```svelte
<script>
	import { Box, ChatBubble, ImageContainer } from '@foxui/all';

	import cute from '$lib/assets/images/cute.webp';
</script>

<Box class="not-prose flex flex-col gap-3">
	<ChatBubble side="right">
		<p>Hello there</p>
	</ChatBubble>

	<ChatBubble>
		<p>General Kenobi</p>
	</ChatBubble>

	<ChatBubble side="right">
		<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
	</ChatBubble>
	<ChatBubble>
		<p>
			This is another really long message that should wrap around the chat bubble and not overflow
		</p>
	</ChatBubble>

	<ChatBubble side="right">
		<p>This is me sending you an image</p>

		<ImageContainer src={cute} alt="cute cat" containerClasses="-mx-1.5 rounded-xl" />
	</ChatBubble>
</Box>
```

## Documentation

## Usage

```svelte
<ChatBubble side="right">
	<p>Hello there</p>
</ChatBubble>

<ChatBubble>
	<p>General Kenobi</p>
</ChatBubble>
```

## API Reference

### ChatBubble
A chat message bubble with left/right alignment for conversations.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| side | `'left' | 'right'` | `'left'` | Which side the bubble appears on. Left for received messages, right for sent. |
| variant | `string` | `-` | The visual variant. Defaults to "primary" for left and "secondary" for right. |
| size | `'sm' | 'md' | 'lg'` | `'md'` | The size of the chat bubble. |
| children | `Snippet` | `-` | The message content. (required) |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLSpanElement` | `-` | The underlying DOM element. (bindable) |