Message

A comprehensive suite of components for displaying chat messages, including message rendering, branching, actions, and markdown responses.

Demo

Full-featured example with attachments, branching, and actions.

Preview Code

How does Svelte 5 runes system work and when should I use them?

Svelte 5 Runes Guide

Svelte 5 introduces runes - a powerful new reactivity system using special $ prefixed functions. Here's what you need to know:$

Core Runes

Creates reactive state in your components:

svelte

<script lang="ts">  let count = $state(0);</script>​<button onclick={() => count++}>  Count: {count}</button>

Computes values that automatically update when dependencies change:

svelte

<script lang="ts">  let count = $state(0);  let doubled = $derived(count * 2);  let message = $derived.by(() => {    return count > 10 ? 'High!' : 'Low';  });</script>

When to Use Runes

• ✅ Component state - Use $state for reactive variables$
• ✅ Computed values - Use $derived for values based on state$
• ✅ Side effects - Use $effect when needed (but prefer watch() from runed)$
• ✅ Props - Use $props() to declare component props$

Key Benefits

1. Explicit reactivity - Clear what's reactive vs static
2. Works everywhere - Runes work in .svelte.ts files too
3. Better TypeScript - Improved type inference

Would you like to explore $effect, $props, or $bindable?$

Svelte 5 runes are special compiler directives that make reactivity explicit. The most common ones are:

• $state - for creating reactive state$
• $derived - for computed values$
• $props - for component props$
• $effect - for side effects (use sparingly)$

Here's a simple example:

svelte

<script lang="ts">  let count = $state(0);</script>​<button onclick={() => count++}>  Clicked {count} times</button>

Which specific rune would you like to learn more about?

Absolutely! Svelte 5 runes are a major evolution in how Svelte handles reactivity. They solve several problems:

Key Benefits

1. Explicit reactivity - Clear what triggers updates
2. Universal - Works in .svelte and .svelte.ts files
3. Better DX - Improved TypeScript and tooling support

Most Popular Runes

Rune	Purpose
	Create reactive state
	Compute derived values
	Declare component props
	Handle side effects
	Two-way binding props
	Debug reactive values

The beauty of runes is they make Svelte's "magic" explicit while keeping the syntax clean. Want to dive into a specific rune?

Retry Like Dislike Copy

Basic Usage

Simple user and assistant messages with markdown content.

<script lang="ts">  let count = $state(0);  let doubled = $derived(count * 2);</script>​<button onclick={() => count++}>  Count: {count}, Doubled: {doubled}</button>

Installation

If you prefer using jsrepo, please install via the command below:

Features

• Displays messages from both user and AI assistant with distinct styling and automatic alignment
• Minimalist flat design with user messages in secondary background and assistant messages full-width
• Response branching with navigation controls to switch between multiple AI versions
• File attachments display with file type icons, names, and sizes
• Action buttons with tooltips for common actions like copy, retry, like, dislike
• Built-in markdown rendering with syntax highlighting via svelte-streamdown
• Automatic dark/light theme support via mode-watcher
• Svelte 5 runes with class-based context for state management

Component Structure

Visual representation of how components are composed together:

With Attachments

Messages with file attachments like images and documents.

Preview Code

Can you review these files and explain how the component architecture works?

I've analyzed your files. Here's what I found:

File Analysis

📷 svelte-5-runes-demo.jpg

A visual demonstration of the new runes syntax with code examples showing $state and $derived patterns.

📄 component-architecture.pdf

Key Sections:

• Component hierarchy diagram
• State management patterns
• Props flow documentation

📝 notes.txt

Contains quick reference notes for the implementation.

Recommendations

1. Consider using $props for better type safety$
2. The component structure follows best practices
3. State is properly encapsulated

Would you like me to explain any specific part in more detail?

With Branching

Navigate between multiple AI response versions using branch selector.

<script>  let count = $state(0);</script>​<button onclick={() => count++}>  Clicks: {count}</button>

<script>  let count = $state(0);  let doubled = $derived(count * 2);  let isEven = $derived(count % 2 === 0);</script>​<p>Count: {count} | Doubled: {doubled}</p><p>{isEven ? 'Even' : 'Odd'}</p>

// counter.svelte.tsexport class Counter {  count = $state(0);  doubled = $derived(this.count * 2);​  increment() { this.count++; }  reset() { this.count = 0; }}

<script>  import { Counter } from './counter.svelte.ts';  let counter = new Counter();</script>

With Actions

Action buttons for copy, regenerate, like, and dislike.

<script lang="ts">  let name = $state('World');  let greeting = $derived('Hello, ' + name + '!');</script>​<div class="card">  <h1>{greeting}</h1>  <input bind:value={name} placeholder="Enter name" /></div>

Usage with AI SDK

Integrate with Vercel AI SDK v5's Chat class for real-time streaming responses.

Add the following component to your frontend:

Add the following route to your backend:

Props