s-m-r-t
Open the s-m-r-t source on GitHub Switch to dark color scheme
← All UI components

Messages · Components

MessageList

Unified message list with selection and filtering

Public export

typescript 
import { MessageList } from '@happyvertical/smrt-messages/svelte';
Import path
@happyvertical/smrt-messages/svelte
Props
13
Props described
13 of 13
Bindable state
0
Callback events
3
Verified release
0.44.0

Props

NameTypeRequiredDescription
messagesMessageData[]YesArray of messages to render in the list.
selectedSet<string>NoSet of currently selected message IDs.
activeMessageIdstringNoID of the currently active or open message.
accountsAccountData[]NoAccounts for matching senders to display information.
loadingbooleanNoShows a loading indicator while fetching messages.
emptyMessagestringNoText to display when the list is empty.
onmessageclick(message: MessageData) => voidNoCalled when user clicks on a message to open it.
onselect(message: MessageData) => voidNoCalled when user selects a message with checkbox.
onflag(message: MessageData) => voidNoCalled when the user flags or unflags a message.
showTypebooleanNoShows the message type badge on each row.
showAccountbooleanNoShows the sender's account on each row.
compactbooleanNoUses condensed layout for compact display.
cardSnippet<[{ message: MessageData; }]>NoCustom snippet to render message cards.

Bindable state

This component has no bindable public state.

Callback events

  • onmessageclick(message: MessageData) => void
  • onselect(message: MessageData) => void
  • onflag(message: MessageData) => void

Examples and explanation

UI showcase Read the curated UI story for mechanism and usage guidance. smrt-messages package reference See package status, version, limitations, and all public subpaths.