Imperative API

Name: Svelte Virtual Chat
Rating: 5 (0 reviews)
Author: Humanspeak, Inc.

Bind the component instance to access these methods:

<script lang="ts">
    import SvelteVirtualChat from '@humanspeak/svelte-virtual-chat'
    let chat: ReturnType<typeof SvelteVirtualChat>
</script>

<SvelteVirtualChat bind:this={chat} ... />

<script lang="ts">
    import SvelteVirtualChat from '@humanspeak/svelte-virtual-chat'
    let chat: ReturnType<typeof SvelteVirtualChat>
</script>

<SvelteVirtualChat bind:this={chat} ... />

`scrollToBottom(options?)`

Scrolls the viewport to the bottom.

chat.scrollToBottom()                    // instant
chat.scrollToBottom({ smooth: true })    // smooth animation

chat.scrollToBottom()                    // instant
chat.scrollToBottom({ smooth: true })    // smooth animation

Option	Type	Default	Description
`smooth`	`boolean`	`false`	Use smooth scrolling animation

`scrollToMessage(id, options?)`

Scrolls to a specific message by its ID.

chat.scrollToMessage('msg-42')
chat.scrollToMessage('msg-42', { smooth: true })

chat.scrollToMessage('msg-42')
chat.scrollToMessage('msg-42', { smooth: true })

Param	Type	Description
`id`	`string`	The message ID (as returned by `getMessageId`)
`smooth`	`boolean`	Use smooth scrolling animation

If the message ID is not found, this is a no-op.

`isAtBottom()`

Returns whether the viewport is currently in follow-bottom state.

if (chat.isAtBottom()) {
    // Safe to assume user sees the latest message
}

if (chat.isAtBottom()) {
    // Safe to assume user sees the latest message
}

`getDebugInfo()`

Returns a snapshot of the current internal state.

const info = chat.getDebugInfo()
console.log(info.totalMessages)    // 1000
console.log(info.renderedCount)    // 18 (DOM nodes)
console.log(info.isFollowingBottom) // true

const info = chat.getDebugInfo()
console.log(info.totalMessages)    // 1000
console.log(info.renderedCount)    // 18 (DOM nodes)
console.log(info.isFollowingBottom) // true

`SvelteVirtualChatDebugInfo`

Field	Type	Description
`totalMessages`	`number`	Total messages in the array
`renderedCount`	`number`	Messages currently in the DOM
`measuredCount`	`number`	Messages with measured heights
`startIndex`	`number`	First rendered index
`endIndex`	`number`	Last rendered index
`totalHeight`	`number`	Calculated total content height (px)
`scrollTop`	`number`	Current scroll position (px)
`viewportHeight`	`number`	Viewport height (px)
`isFollowingBottom`	`boolean`	Whether viewport is pinned to bottom
`averageHeight`	`number`	Average measured message height (px)