Chat thread and message list

Grouped messages, safe inline formatting, timestamps, own-message alignment, and a long virtualized history with fictional people.

chat-thread · chat/thread

chat thread

Props

currentUserId
draft
locale
messages
onSend
typing

Live example loads in an isolated same-origin preview frame.

Source (chat-thread/entry.ts)

import { defineExample } from '../registry.ts';

export const chatThreadExample = defineExample({
  id: 'chat-thread',
  title: 'Chat thread and message list',
  description:
    'Grouped messages, safe inline formatting, timestamps, own-message alignment, and a long virtualized history with fictional people.',
  tags: ['chat', 'thread', 'messages', 'virtualization', 'a11y'],
  component: 'chat/thread',
  props: ['messages', 'currentUserId', 'typing', 'draft', 'onSend', 'locale'],
  load: () => import('./ChatThreadDemo.svelte'),
});