Components

Here’s an overview of Svelte’s component syntax as well as our own, primary components.

Syntax

Components are written in Svelte 5 and stored in web/src/lib/components.

<script>
  // can import from npm here

  // memory can be mutated now and will "react" everywhere
  import {getMemory} from '$lib/memory.svelte'
  const memory = getMemory()

  const { somethingFromAbove } = $props()

  const count = $state(0) // reactive state
  const double = $derived(count * 2)

  function greet() {
    console.log('hello');
    count = count + 1 // direct assignment is allowed
  }

  $effect(() => {
    console.log('count changed', count)
  })
</script>

<!-- event handlers are written like this -->
<button onclick={greet}>click me</button>

<style>
    /* styles are scoped, else use app.css */
  button {
    font-size: 2em;
  }
</style>

Global memory state

Most components interact with the global memory state object.

Memory system

The primary components

MessageForm

A <MessageForm> component that is able to create a Message, and get a response from the (AI) API.

It does not store the message in memory. You have to handle that yourself.

If you pass it a level number it’ll add include it on any created messages.

<MessageForm level={6} onMessage={handleMessage} />

MessageList

Renders a list of messages.

ChatInterface

Combines MessageForm and MessageList in a chat interface.

Be sure to instruct the <ChatInterface> component to use the relevant promts and context. Only then will it automatically make sure new messages are added to the level, and the list only displays messages from the current level.

ChatInterface Example

<ChatInterface level systemPrompt onMessage>
    <MessageList
        messages={memory.messages}
        filter={level ? levelFilter(level) : undefined}
        showThoughts
    />
    <MessageForm
        system={createExamplePrompt(memory)}
        messages={memory.messages.filter(msg => msg.level === level)}
        onMessage
    />

ButtonTts

A button that can be used to trigger text-to-speech.

Feelometer

A UI component that visualizes (on a meter) some value with a label`.