lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
547 lines (511 loc) • 25.9 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Chat' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Chat</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Chat bubbles for messaging interfaces.
Supports avatars, headers, footers, and color variants.
</p>
<!-- Basic Usage -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Example</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Simple chat conversation</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('object')">Object
DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 200,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/chat.js');
const { tags, $ } = Lightview;
const { div, Chat } = 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')
)
);
$('#example').content(conversation);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 200
});
</script><code contenteditable="true">await import('/components/data-display/chat.js');
const { $, tags } = Lightview;
const { Chat, div } = tags;
const conversation = {
tag: div,
children: [
{
tag: Chat,
attributes: { position: 'start' },
children: [
{ tag: Chat.Image, attributes: { src: 'https://i.pravatar.cc/100?img=10' } },
{ tag: Chat.Header, children: ['Obi-Wan'] },
{ tag: Chat.Bubble, children: ["It's over Anakin, I have the high ground."] },
{ tag: Chat.Footer, children: ['Delivered'] }
]
},
{
tag: Chat,
attributes: { position: 'end' },
children: [
{ tag: Chat.Image, attributes: { src: 'https://i.pravatar.cc/100?img=11' } },
{ tag: Chat.Header, children: ['Anakin'] },
{ tag: Chat.Bubble, children: ['You underestimate my power!'] },
{ tag: Chat.Footer, children: ['Seen'] }
]
}
]
};
$('#example').content(conversation);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 200
});
</script><code contenteditable="true">await import('/components/data-display/chat.js');
const { $ } = Lightview;
const conversation = {
div: {
children: [
{
Chat: {
position: 'start',
children: [
{ ChatImage: { src: 'https://i.pravatar.cc/100?img=10' } },
{ ChatHeader: { children: ['Obi-Wan'] } },
{ ChatBubble: { children: ["It's over Anakin, I have the high ground."] } },
{ ChatFooter: { children: ['Delivered'] } }
]
}
},
{
Chat: {
position: 'end',
children: [
{ ChatImage: { src: 'https://i.pravatar.cc/100?img=11' } },
{ ChatHeader: { children: ['Anakin'] } },
{ ChatBubble: { children: ['You underestimate my power!'] } },
{ ChatFooter: { children: ['Seen'] } }
]
}
}
]
}
};
$('#example').content(conversation);</code></pre>
</div>
</div>
</div>
<!-- Reactive Example -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Typing Indicator</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Chat with reactive message
sending</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
const contentEl = document.getElementById(`reactive-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="reactive-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 300
});
</script><code contenteditable="true">await import('/components/data-display/chat.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, input, Chat, Button } = 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({ style: 'display: flex; flex-direction: column; gap: 1rem' },
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({ style: 'display: flex; gap: 0.5rem' },
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')
)
);
$('#example').content(demo);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="reactive-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 300
});
</script><code contenteditable="true">await import('/components/data-display/chat.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { Chat, Button, 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 = {
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem' },
children: [
{
tag: div,
attributes: { class: 'h-48 overflow-y-auto' },
children: [
() => messages.value.map(m => ({
tag: Chat,
attributes: { position: m.pos },
children: [
{ tag: Chat.Bubble, attributes: { color: m.pos === 'end' ? 'primary' : undefined }, children: [m.text] },
{ tag: Chat.Footer, children: [m.time] }
]
}))
]
},
{
tag: div,
attributes: { style: 'display: flex; gap: 0.5rem' },
children: [
{
tag: input,
attributes: {
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(); }
}
},
{
tag: Button,
attributes: { color: 'primary', onclick: sendMessage },
children: ['Send']
}
]
}
]
};
$('#example').content(demo);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="reactive-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 300
});
</script><code contenteditable="true">await import('/components/data-display/chat.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;
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: {
style: 'display: flex; flex-direction: column; gap: 1rem',
children: [
{
div: {
class: 'h-48 overflow-y-auto',
children: [
() => messages.value.map(m => ({
Chat: {
position: m.pos,
children: [
{ ChatBubble: { color: m.pos === 'end' ? 'primary' : undefined, children: [m.text] } },
{ ChatFooter: { children: [m.time] } }
]
}
}))
]
}
},
{
div: {
style: 'display: flex; gap: 0.5rem',
children: [
{
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,
children: ['Send']
}
}
]
}
}
]
}
};
$('#example').content(demo);</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Chat Props</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>position</code></td>
<td>string</td>
<td>'start'</td>
<td>'start' (left) | 'end' (right)</td>
</tr>
</tbody>
</table>
</div>
<!-- Sub-components -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Component</th>
<th>Props</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Chat.Image</code></td>
<td>src, alt</td>
<td>Avatar image</td>
</tr>
<tr>
<td><code>Chat.Header</code></td>
<td>-</td>
<td>Name/timestamp header</td>
</tr>
<tr>
<td><code>Chat.Bubble</code></td>
<td>color</td>
<td>Message bubble</td>
</tr>
<tr>
<td><code>Chat.Footer</code></td>
<td>-</td>
<td>Read status/time</td>
</tr>
</tbody>
</table>
</div>
<!-- Colors -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Bubble Colors</h2>
<div style="margin-bottom: 2rem;">
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-primary">Primary</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-secondary">Secondary</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-accent">Accent</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-info">Info</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-success">Success</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-warning">Warning</div>
</div>
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-error">Error</div>
</div>
</div>
</div>
</div>
</div>
</div>