# Basic Chat > Interactive basic chat example with follow-bottom behavior, scroll-away detection, and virtualized message rendering powered by @humanspeak/svelte-virtual-chat. **Source:** [https://virtualchat.svelte.page/examples/basic-chat](https://virtualchat.svelte.page/examples/basic-chat) **Markdown mirror:** [https://virtualchat.svelte.page/examples/basic-chat.md](https://virtualchat.svelte.page/examples/basic-chat.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: basic chat. Send and receive messages with follow-bottom behavior, scroll-away detection, bulk loading, and live virtualization stats. **Metadata:** tag: `CHAT` | mode: `follow-bottom` ### Notes - Messages are stored oldest-first and rendered top-to-bottom — normal chronological order, no inverted geometry. Identity comes from `getMessageId`, not array indices. - Two states only: following the bottom, or scrolled away. Send a message while pinned and the viewport tracks it; scroll up and it holds your position. - Only the messages inside the viewport (plus overscan) live in the DOM. Add 100 messages and watch In-DOM stay small while Total climbs. - Heights are measured with ResizeObserver and cached as prefix sums, so scroll positioning stays smooth even across hundreds of variable-height rows. ### Source #### BasicChat.svelte Source file: [src/lib/examples/basic-chat/demos/BasicChat.svelte](https://github.com/humanspeak/svelte-virtual-chat/blob/main/docs/src/lib/examples/basic-chat/demos/BasicChat.svelte) ```svelte
file · BasicChat.svelte messages {messages.length} {#if isFollowing}● FOLLOWING{:else}○ SCROLLED{/if}
msg.id} estimatedMessageHeight={80} followBottomThresholdPx={48} overscan={6} onFollowBottomChange={(following: boolean) => (isFollowing = following)} onDebugInfo={(info: SvelteVirtualChatDebugInfo) => (debugInfo = info)} containerClass="h-[500px]" viewportClass="h-full" testId="basic-chat" > {#snippet renderMessage(message: Message)}
{message.role === 'user' ? 'you' : 'assistant'} {formatTime(message.timestamp)}
{message.content}
{/snippet}
{ e.preventDefault() sendMessage() }} >
{#if debugInfo}
total · {debugInfo.totalMessages}
in-dom · {debugInfo.renderedCount}
measured · {debugInfo.measuredCount}
range · {debugInfo.startIndex}–{debugInfo.endIndex}
height · {Math.round(debugInfo.totalHeight)}px
following · {debugInfo.isFollowingBottom ? 'yes' : `${Math.round(debugInfo.scrollTop)}px`}
{/if}
```