feat: Add new component `chat`

This commit is contained in:
Pouya Saadeghi 2022-11-24 01:54:12 +03:00
parent 0d3f5520c8
commit 522bc5ebf4
8 changed files with 513 additions and 408 deletions

View File

@ -242,7 +242,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
[jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
[build-url]: https://github.com/saadeghi/daisyui/actions
[tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
[number-of-components]: https://badgen.net/badge/total%20components/47/green
[number-of-components]: https://badgen.net/badge/total%20components/49/green
[docs-url-install]: https://daisyui.com/docs/install
[docs-url]: https://daisyui.com/
[logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg

View File

@ -1,115 +0,0 @@
.bubble {
/* default */
& {
--bubble-bg: hsl(var(--n));
@apply text-neutral-content;
}
/* brand colors */
&-primary {
--bubble-bg: hsl(var(--p));
@apply text-primary-content;
}
&-secondary {
--bubble-bg: hsl(var(--s));
@apply text-secondary-content;
}
&-accent {
--bubble-bg: hsl(var(--a));
@apply text-accent-content;
}
/* state colors */
&-info {
--bubble-bg: hsl(var(--in));
@apply text-info-content;
}
&-success {
--bubble-bg: hsl(var(--su));
@apply text-success-content;
}
&-warning {
--bubble-bg: hsl(var(--wa));
@apply text-warning-content;
}
&-error {
--bubble-bg: hsl(var(--er));
@apply text-error-content;
}
&-left {
[dir="ltr"] & {
@apply mr-auto rounded-r-xl;
margin-left: var(--bubble-radius, 0.75rem);
&:before {
--circle-pos: top left;
left: calc(var(--bubble-radius, 0.75rem) * -1);
background-image: var(--tab-corner-bg);
}
}
[dir="rtl"] & {
@apply ml-auto rounded-l-xl;
margin-right: var(--bubble-radius, 0.75rem);
&:after {
--circle-pos: top right;
right: calc(var(--bubble-radius, 0.75rem) * -1);
background-image: var(--tab-corner-bg);
}
}
}
&-right {
[dir="ltr"] & {
@apply ml-auto rounded-l-xl;
margin-right: var(--bubble-radius, 0.75rem);
&:after {
right: calc(var(--bubble-radius, 0.75rem) * -1);
--circle-pos: top right;
background-image: var(--tab-corner-bg);
}
}
[dir="rtl"] & {
@apply mr-auto rounded-r-xl;
margin-left: var(--bubble-radius, 0.75rem);
&:before {
left: calc(var(--bubble-radius, 0.75rem) * -1);
--circle-pos: top left;
background-image: var(--tab-corner-bg);
}
}
}
&-topbar {
@apply flex items-center;
@apply mb-1;
&-author {
@apply font-medium;
}
&-time {
@apply text-xs italic;
@apply mx-2;
}
&-action {
[dir="ltr"] & {
@apply ml-auto;
}
[dir="rtl"] & {
@apply mr-auto;
}
}
}
&-action {
[dir="ltr"] & {
@apply ml-auto;
}
[dir="rtl"] & {
@apply mr-auto;
}
}
}

View File

@ -0,0 +1,51 @@
.chat {
&-bubble {
@apply rounded-box;
min-height: 2.75rem;
min-width: 2.75rem;
/* default */
& {
@apply bg-neutral text-neutral-content;
}
/* brand colors */
&-primary {
@apply bg-primary text-primary-content;
}
&-secondary {
@apply bg-secondary text-secondary-content;
}
&-accent {
@apply bg-accent text-accent-content;
}
/* state colors */
&-info {
@apply bg-info text-info-content;
}
&-success {
@apply bg-success text-success-content;
}
&-warning {
@apply bg-warning text-warning-content;
}
&-error {
@apply bg-error text-error-content;
}
}
&-start .chat-bubble {
@apply rounded-bl-none;
&:before {
left: -0.75rem;
}
}
&-end .chat-bubble {
@apply rounded-br-none;
&:before {
left: 100%;
}
}
}

View File

@ -1,19 +0,0 @@
.bubble {
--bubble-radius: 0.75rem;
@apply inline-block;
@apply px-4 py-2 my-2 rounded-t-xl relative;
@apply font-light;
background-color: var(--bubble-bg);
max-width: 60%;
&:before,
&:after {
content: "";
position: absolute;
width: var(--bubble-radius, 0.75rem);
height: var(--bubble-radius, 0.75rem);
bottom: 0;
--tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent 68%, transparent 68%, transparent calc(68% + 1px), var(--bubble-bg) 68%);
}
}

View File

@ -0,0 +1,62 @@
.chat {
@apply grid grid-cols-2 gap-x-3 py-1;
&-image {
@apply self-end row-span-2;
}
&-header {
@apply text-sm row-start-1;
}
&-footer {
@apply text-sm row-start-3;
}
&-bubble {
@apply block w-fit px-4 py-2 relative;
max-width: 90%;
&:before {
@apply w-3 h-3 absolute bottom-0;
background-color: inherit;
content: "";
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
}
&-start {
@apply place-items-start;
grid-template-columns: auto 1fr;
.chat-header {
@apply col-start-2;
}
.chat-footer {
@apply col-start-2;
}
.chat-image {
@apply col-start-1;
}
.chat-bubble {
@apply col-start-2;
&:before {
mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
}
}
}
&-end {
@apply place-items-end;
grid-template-columns: 1fr auto;
.chat-header {
@apply col-start-1;
}
.chat-footer {
@apply col-start-1;
}
.chat-image {
@apply col-start-2;
}
.chat-bubble {
@apply col-start-1;
&:before {
mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
}
}
}
}

View File

@ -1,8 +1,8 @@
export let siteStats = {
components: "48",
components: "49",
themes: "29",
githubStars: "+12,000",
npmInstalls: "+1,000,000",
githubStars: "+15,000",
npmInstalls: "+2,000,000",
}
export let siteData = {
@ -391,6 +391,13 @@ export let pages = [
icon: "",
badge: "",
},
{
name: "Chat bubble",
tags: "chat bubble dialog message messenger",
href: "/components/chat",
icon: "",
badge: "New",
},
{
name: "Collapse",
tags: "collapse accordion",

View File

@ -1,270 +0,0 @@
---
title: Chat bubble
desc: It's a awesome chat bubble!
published: true
---
<script>
import Component from "@components/Component.svelte"
import ClassTable from "@components/ClassTable.svelte"
import { prefix } from '$lib/stores';
import { replace } from '$lib/actions';
</script>
<ClassTable
data="{[
{ type:'component', class: 'bubble', desc: 'Bubble' },
{ type:'modifier', class: 'bubble-primary', desc: 'Bubble with `secondary` background' },
{ type:'modifier', class: 'bubble-secondary', desc: 'Bubble with `secondary` background' },
{ type:'modifier', class: 'bubble-accent', desc: 'Bubble with `accent` background' },
{ type:'modifier', class: 'bubble-info', desc: 'Bubble with `info` background' },
{ type:'modifier', class: 'bubble-success', desc: 'Bubble with `success` background' },
{ type:'modifier', class: 'bubble-warning', desc: 'Bubble with `warning` background' },
{ type:'modifier', class: 'bubble-error', desc: 'Bubble with `error` background' },
{ type:'modifier', class: 'bubble-left', desc: 'Left side bubble' },
{ type:'modifier', class: 'bubble-right', desc: 'Right side bubble' },
{ type:'modifier', class: 'bubble-topbar-author', desc: 'Showing author name' },
{ type:'modifier', class: 'bubble-topbar-time', desc: 'Showing message time' },
{ type:'modifier', class: 'bubble-topbar-action', desc: 'Using for more actions' },
]}"
/>
<div class="alert alert-info text-sm">
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info-content flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Using dir="ltr" or dir="rtl" is required.
</div>
</div>
<Component title="Chat Bubble">
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="bubble bubble-left">Thank you 😊<br/> See you soon 👋</div>
<div class="bubble bubble-right">Thank you 😊<br/> See you soon 👋</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="$$bubble $$bubble-left">Thank you 😊<br/> See you soon 👋</div>
<div class="$$bubble $$bubble-right">Thank you 😊<br/> See you soon 👋</div>
</div>`
}</pre>
</Component>
<Component title="Chat Bubble with brand colors">
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="bubble bubble-left bubble-primary">Thank you 😊<br/> See you soon 👋</div>
<div class="bubble bubble-right bubble-secondary">Thank you 😊<br/> see you soon 👋</div>
<div class="bubble bubble-left bubble-accent">Thank you 😊<br/> See you soon 👋</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="$$bubble $$bubble-left $$bubble-primary">Thank you 😊<br/> See you soon 👋</div>
<div class="$$bubble $$bubble-right $$bubble-secondary">Thank you 😊<br/> See you soon 👋</div>
<div class="$$bubble $$bubble-left $$bubble-accent">Thank you 😊<br/> See you soon 👋</div>
</div>`
}</pre>
</Component>
<Component title="Chat Bubble with state colors">
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="bubble bubble-left bubble-info">Thank you 😊<br/> See you soon 👋</div>
<div class="bubble bubble-right bubble-success">Thank you 😊<br/> See you soon 👋</div>
<div class="bubble bubble-left bubble-warning">Thank you 😊<br/> See you soon 👋</div>
<div class="bubble bubble-right bubble-error">Thank you 😊<br/> See you soon 👋</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="$$bubble $$bubble-left $$bubble-info">Thank you 😊<br/> See you soon 👋</div>
<div class="$$bubble $$bubble-right $$bubble-success">Thank you 😊<br/> See you soon 👋</div>
<div class="$$bubble $$bubble-left $$bubble-warning">Thank you 😊<br/> See you soon 👋</div>
<div class="$$bubble $$bubble-right $$bubble-error">Thank you 😊<br/> See you soon 👋</div>
</div>`
}</pre>
</Component>
<Component title="Chat Bubble with author">
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="bubble bubble-left">
<div class="bubble-topbar">
<div class="bubble-topbar-author">Iman</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
<div class="bubble bubble-right">
<div class="bubble-topbar">
<div class="bubble-topbar-author">Amin</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="$$bubble $$bubble-left">
<div class="$$bubble-topbar">
<div class="$$bubble-topbar-author">Iman</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
<div class="$$bubble $$bubble-right">
<div class="$$bubble-topbar">
<div class="$$bubble-topbar-author">Amin</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
</div>`
}</pre>
</Component>
<Component title="Chat Bubble with time">
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="bubble bubble-left">
<div class="bubble-topbar">
<div class="bubble-topbar-author">Iman</div>
<div class="bubble-topbar-time">1 min</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
<div class="bubble bubble-right">
<div class="bubble-topbar">
<div class="bubble-topbar-author">Amin</div>
<div class="bubble-topbar-time">30 sec</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="$$bubble $$bubble-left">
<div class="$$bubble-topbar">
<div class="$$bubble-topbar-author">Iman</div>
<div class="$$bubble-topbar-time">1 min</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
<div class="$$bubble $$bubble-right">
<div class="$$bubble-topbar">
<div class="$$bubble-topbar-author">Amin</div>
<div class="$$bubble-topbar-time">30 sec</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
</div>`
}</pre>
</Component>
<Component title="Chat Bubble with action">
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="bubble bubble-left">
<div class="bubble-topbar">
<div class="bubble-topbar-author">Iman</div>
<div class="bubble-topbar-time">1 min</div>
<div class="bubble-topbar-action">
<div class="dropdown">
<label
tabindex="0"
class="btn btn-circle btn-ghost btn-xs text-base"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</label>
<ul
tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
>
<li><a>Reply</a></li>
<li><a>Forward</a></li>
</ul>
</div>
</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
<div class="bubble bubble-right">
<div class="bubble-topbar">
<div class="bubble-topbar-author">Amin</div>
<div class="bubble-topbar-time">30 sec</div>
<div class="bubble-topbar-action">
<div class="dropdown dropdown-end">
<label
tabindex="0"
class="btn btn-circle btn-ghost btn-xs text-base"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</label>
<ul
tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
>
<li><a>Reply</a></li>
<li><a>Forward</a></li>
</ul>
</div>
</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
<div class="$$bubble $$bubble-left">
<div class="$$bubble-topbar">
<div class="$$bubble-topbar-author">Iman</div>
<div class="$$bubble-topbar-time">1 min</div>
<div class="$$bubble-topbar-action">
<div class="dropdown">
<label
tabindex="0"
class="btn btn-circle btn-ghost btn-xs text-base"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</label>
<ul
tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
>
<li><a>Reply</a></li>
<li><a>Forward</a></li>
</ul>
</div>
</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
<div class="$$bubble $$bubble-right">
<div class="$$bubble-topbar">
<div class="$$bubble-topbar-author">Amin</div>
<div class="$$bubble-topbar-time">30 sec</div>
<div class="$$bubble-topbar-action">
<div class="dropdown dropdown-end">
<label
tabindex="0"
class="btn btn-circle btn-ghost btn-xs text-base"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</label>
<ul
tabindex="0"
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
>
<li><a>Reply</a></li>
<li><a>Forward</a></li>
</ul>
</div>
</div>
</div>
Thank you 😊<br/> See you soon 👋
</div>
</div>`
}</pre>
</Component>
<Component title="Chat Bubble RTL">
<div dir="rtl" class="container mx-auto py-4 flex flex-col">
<div class="bubble bubble-left">Thank you 😊<br/> See you soon 👋</div>
<div class="bubble bubble-right">Thank you 😊<br/> See you soon 👋</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div dir="rtl" class="container mx-auto py-4 flex flex-col">
<div class="$$bubble $$bubble-left">Thank you 😊<br/> See you soon 👋</div>
<div class="$$bubble $$bubble-right">Thank you 😊<br/> See you soon 👋</div>
</div>`
}</pre>
</Component>

View File

@ -0,0 +1,389 @@
---
title: Chat bubble
desc: Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.
published: true
---
<script>
import Component from "@components/Component.svelte"
import ClassTable from "@components/ClassTable.svelte"
import { prefix } from '$lib/stores';
import { replace } from '$lib/actions';
</script>
<ClassTable
data="{[
{ type:'component', class: 'chat', desc: 'Container for one line of conversation and all its data' },
{ type:'modifier', class: 'chat-start', desc: 'Aligns `chat` to left (required)' },
{ type:'modifier', class: 'chat-end', desc: 'Aligns `chat` to end (required)' },
{ type:'component', class: 'chat-image', desc: 'For the author image' },
{ type:'component', class: 'chat-header', desc: 'For the line above the chat bubble' },
{ type:'component', class: 'chat-footer', desc: 'For the line below the chat bubble' },
{ type:'component', class: 'chat-bubble', desc: 'For the content of chat' },
{ type:'modifier', class: 'chat-bubble-primary', desc: 'sets `secondary` color for the `chat-bubble`' },
{ type:'modifier', class: 'chat-bubble-secondary', desc: 'sets `secondary` color for the `chat-bubble`' },
{ type:'modifier', class: 'chat-bubble-accent', desc: 'sets `accent` color for the `chat-bubble`' },
{ type:'modifier', class: 'chat-bubble-info', desc: 'sets `info` color for the `chat-bubble`' },
{ type:'modifier', class: 'chat-bubble-success', desc: 'sets `success` color for the `chat-bubble`' },
{ type:'modifier', class: 'chat-bubble-warning', desc: 'sets `warning` color for the `chat-bubble`' },
{ type:'modifier', class: 'chat-bubble-error', desc: 'sets `error` color for the `chat-bubble`' },
]}"
/>
<Component title="chat-start and chat-end">
<div class="w-full">
<div class="chat chat-start">
<div class="chat-bubble">It's over Anakin, <br/>I have the high ground.</div>
</div>
<div class="chat chat-end">
<div class="chat-bubble">You underestimate my power!</div>
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$chat $$chat-start">
<div class="$$chat-bubble">It's over Anakin, <br/>I have the high ground.</div>
</div>
<div class="$$chat $$chat-end">
<div class="$$chat-bubble">You underestimate my power!</div>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$chat $$chat-start">
<div className="$$chat-bubble">It's over Anakin, <br/>I have the high ground.</div>
</div>
<div className="$$chat $$chat-end">
<div className="$$chat-bubble">You underestimate my power!</div>
</div>`
}</pre>
</Component>
<Component title="Chat with image">
<div class="w-full">
<div class="chat chat-start">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
</div>
<div class="chat chat-start">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="chat-bubble">It was you who would bring balance to the Force</div>
</div>
<div class="chat chat-start">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="chat-bubble">Not leave it in Darkness</div>
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$chat $$chat-start">
<div class="$$chat-image $$avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="$$chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
</div>
<div class="$$chat $$chat-start">
<div class="$$chat-image $$avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="$$chat-bubble">It was you who would bring balance to the Force</div>
</div>
<div class="$$chat $$chat-start">
<div class="$$chat-image $$avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="$$chat-bubble">Not leave it in Darkness</div>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$chat $$chat-start">
<div className="$$chat-image $$avatar">
<div className="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div className="$$chat-bubble">It was said that you would, destroy the Sith, not join them.</div>
</div>
<div className="$$chat $$chat-start">
<div className="$$chat-image $$avatar">
<div className="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div className="$$chat-bubble">It was you who would bring balance to the Force</div>
</div>
<div className="$$chat $$chat-start">
<div className="$$chat-image $$avatar">
<div className="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div className="$$chat-bubble">Not leave it in Darkness</div>
</div>`
}</pre>
</Component>
<Component title="Chat with image, header and footer">
<div class="w-full">
<div class="chat chat-start">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">12:45</time>
</div>
<div class="chat-bubble">You were the Chosen One!</div>
<div class="chat-footer opacity-50">
Delivered
</div>
</div>
<div class="chat chat-end">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="chat-header">
Anakin
<time class="text-xs opacity-50">12:46</time>
</div>
<div class="chat-bubble">I hate you!</div>
<div class="chat-footer opacity-50">
Seen at 12:46
</div>
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$chat $$chat-start">
<div class="$$chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="$$chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">12:45</time>
</div>
<div class="$$chat-bubble">You were the Chosen One!</div>
<div class="$$chat-footer opacity-50">
Delivered
</div>
</div>
<div class="$$chat $$chat-end">
<div class="$$chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div class="$$chat-header">
Anakin
<time class="text-xs opacity-50">12:46</time>
</div>
<div class="$$chat-bubble">I hate you!</div>
<div class="$$chat-footer opacity-50">
Seen at 12:46
</div>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$chat $$chat-start">
<div className="$$chat-image avatar">
<div className="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div className="$$chat-header">
Obi-Wan Kenobi
<time className="text-xs opacity-50">12:45</time>
</div>
<div className="$$chat-bubble">You were the Chosen One!</div>
<div className="$$chat-footer opacity-50">
Delivered
</div>
</div>
<div className="$$chat $$chat-end">
<div className="$$chat-image avatar">
<div className="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div className="$$chat-header">
Anakin
<time className="text-xs opacity-50">12:46</time>
</div>
<div className="$$chat-bubble">I hate you!</div>
<div className="$$chat-footer opacity-50">
Seen at 12:46
</div>
</div>`
}</pre>
</Component>
<Component title="Chat with header and footer">
<div class="w-full">
<div class="chat chat-start">
<div class="chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">2 hours ago</time>
</div>
<div class="chat-bubble">You were my brother, Anakin.</div>
<div class="chat-footer opacity-50">
Seen
</div>
</div>
<div class="chat chat-start">
<div class="chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">2 hour ago</time>
</div>
<div class="chat-bubble">I loved you.</div>
<div class="chat-footer opacity-50">
Delivered
</div>
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$chat $$chat-start">
<div class="$$chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">2 hours ago</time>
</div>
<div class="$$chat-bubble">You were the Chosen One!</div>
<div class="$$chat-footer opacity-50">
Seen
</div>
</div>
<div class="$$chat $$chat-start">
<div class="$$chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">2 hour ago</time>
</div>
<div class="$$chat-bubble">I loved you.</div>
<div class="$$chat-footer opacity-50">
Delivered
</div>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$chat $$chat-start">
<div className="$$chat-image avatar">
<div className="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div className="$$chat-header">
Obi-Wan Kenobi
<time className="text-xs opacity-50">2 hours ago</time>
</div>
<div className="$$chat-bubble">You were the Chosen One!</div>
<div className="$$chat-footer opacity-50">
Seen
</div>
</div>
<div className="$$chat $$chat-start">
<div className="$$chat-image avatar">
<div className="w-10 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
<div className="$$chat-header">
Obi-Wan Kenobi
<time className="text-xs opacity-50">2 hour ago</time>
</div>
<div className="$$chat-bubble">I loved you.</div>
<div className="$$chat-footer opacity-50">
Delivered
</div>
</div>`
}</pre>
</Component>
<Component title="Chat Bubble with colors">
<div class="w-full">
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-primary">What kind of nonsense is this</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
</div>
<div class="chat chat-end">
<div class="chat-bubble chat-bubble-info">Calm down, Anakin.</div>
</div>
<div class="chat chat-end">
<div class="chat-bubble chat-bubble-success">You have been given a great honor.</div>
</div>
<div class="chat chat-end">
<div class="chat-bubble chat-bubble-warning">To be on the Council at your age.</div>
</div>
<div class="chat chat-end">
<div class="chat-bubble chat-bubble-error">It's never happened before.</div>
</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$chat $$chat-start">
<div class="$$chat-bubble $$chat-bubble-primary">What kind of nonsense is this</div>
</div>
<div class="$$chat $$chat-start">
<div class="$$chat-bubble $$chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
</div>
<div class="$$chat $$chat-start">
<div class="$$chat-bubble $$chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
</div>
<div class="$$chat $$chat-end">
<div class="$$chat-bubble $$chat-bubble-info">Calm down, Anakin.</div>
</div>
<div class="$$chat $$chat-end">
<div class="$$chat-bubble $$chat-bubble-success">You have been given a great honor.</div>
</div>
<div class="$$chat $$chat-end">
<div class="$$chat-bubble $$chat-bubble-warning">To be on the Council at your age.</div>
</div>
<div class="$$chat $$chat-end">
<div class="$$chat-bubble $$chat-bubble-error">It's never happened before.</div>
</div>`
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`<div className="$$chat $$chat-start">
<div className="$$chat-bubble $$chat-bubble-primary">What kind of nonsense is this</div>
</div>
<div className="$$chat $$chat-start">
<div className="$$chat-bubble $$chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
</div>
<div className="$$chat $$chat-start">
<div className="$$chat-bubble $$chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
</div>
<div className="$$chat $$chat-end">
<div className="$$chat-bubble $$chat-bubble-info">Calm down, Anakin.</div>
</div>
<div className="$$chat $$chat-end">
<div className="$$chat-bubble $$chat-bubble-success">You have been given a great honor.</div>
</div>
<div className="$$chat $$chat-end">
<div className="$$chat-bubble $$chat-bubble-warning">To be on the Council at your age.</div>
</div>
<div className="$$chat $$chat-end">
<div className="$$chat-bubble $$chat-bubble-error">It's never happened before.</div>
</div>`
}</pre>
</Component>