8.0k New

Checkpoint

Previous Next

Marks a point in the conversation you can return to.

Epicenter

Local-first, open source apps

Special Sponsor
Rename the button component to action.

Renamed Button to Action in components/ui/button.tsx.

Button renamed
Update the docs to match.

Updated the Button page to say Action.

<script lang="ts">
  import { Chat } from "@ai-sdk/svelte";
  import * as Bubble from "$lib/components/ui/bubble/index.js";
  import * as Marker from "$lib/components/ui/marker/index.js";
  import * as Message from "$lib/components/ui/message/index.js";
  import { createChat, getMessageText } from "$lib/ai-sdk.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import type { UIMessage } from "ai";
 
  type ChatMessage = UIMessage<
    unknown,
    {
      checkpoint: {
        label: string;
      };
    }
  >;
 
  type CheckpointPart = Extract<
    ChatMessage["parts"][number],
    { type: "data-checkpoint" }
  >;
 
  const script = createChat<ChatMessage>()
    .user("Rename the button component to action.")
    .assistant(({ writer }) => {
      writer.text("Renamed Button to Action in components/ui/button.tsx.");
      writer.data({
        type: "data-checkpoint",
        id: "rename",
        data: { label: "Button renamed" }
      });
    })
    .user("Update the docs to match.")
    .assistant(({ writer }) => {
      writer.text("Updated the Button page to say Action.");
    });
 
  const transcript = script.get();
  const transport = script.transport({ delayMs: 20 });
 
  const chat = new Chat<ChatMessage>({ messages: transcript, transport });
  const nextMessage = $derived(script.next(chat.messages));
  const busy = $derived(
    chat.status === "submitted" || chat.status === "streaming"
  );
 
  function restore(messageId: string) {
    const index = chat.messages.findIndex(
      (message) => message.id === messageId
    );
 
    if (index === -1) {
      return;
    }
 
    chat.messages = chat.messages.slice(0, index + 1);
  }
</script>
 
<div class="flex min-h-72 w-full max-w-sm flex-col gap-4 py-6 text-sm">
  {#each chat.messages as message, index (message.id)}
    {@const checkpoint = message.parts.find(
      (part): part is CheckpointPart => part.type === "data-checkpoint"
    )}
    {@const canRestore = index < chat.messages.length - 1}
    {#if message.role === "user"}
      <Message.Root align="end">
        <Message.Content>
          <Bubble.Root align="end" variant="muted">
            <Bubble.Content>{getMessageText(message)}</Bubble.Content>
          </Bubble.Root>
        </Message.Content>
      </Message.Root>
    {:else}
      <Message.Root>
        <Message.Content>
          <p>{getMessageText(message)}</p>
        </Message.Content>
      </Message.Root>
    {/if}
    {#if checkpoint}
      <Marker.Root variant="separator">
        <Marker.Content class="inline-flex items-center gap-2">
          {checkpoint.data.label}
          {#if canRestore}
            <Button
              size="xs"
              variant="outline"
              aria-label="Restore to {checkpoint.data.label}"
              onclick={() => restore(message.id)}
            >
              Restore
            </Button>
          {/if}
        </Marker.Content>
      </Marker.Root>
    {/if}
  {/each}
  {#if !busy && nextMessage}
    <Button
      variant="outline"
      size="sm"
      class="mt-auto self-start"
      onclick={() => void chat.sendMessage(nextMessage)}
    >
      Continue
    </Button>
  {/if}
</div>

Checkpoint is a point in the conversation you can return to. It is a Marker after a turn, with a Restore button. Restore keeps that turn and drops every message after it.

Installation

Checkpoint is built with the Marker and Button components.

pnpm dlx shadcn-svelte@latest add marker button

Usage

Render a marker after the turn, with a button that restores it.

<Marker.Root variant="separator">
  <Marker.Content class="inline-flex items-center gap-2">
    {label}
    <Button size="xs" variant="outline" onclick={restore}>Restore</Button>
  </Marker.Content>
</Marker.Root>

See Marker.

AI SDK

Restore replaces the thread with the messages up to and including that turn. Every later turn is removed. Send a new message to continue from there.

const index = chat.messages.findIndex((message) => message.id === messageId);
chat.messages = chat.messages.slice(0, index + 1);

AI SDK Helper

To script a checkpoint with createChat, write it as a data part on the agent's turn. Send the same id again only when you mean to update that checkpoint.

const chat = createChat()
  .user("Rename the button component to action.")
  .assistant(({ writer }) => {
    writer.text("Renamed Button to Action in components/ui/button.tsx.");
    writer.data({
      type: "data-checkpoint",
      id: "rename",
      data: { label: "Button renamed" },
    });
  })
  .user("Update the docs to match.")
  .assistant(({ writer }) => {
    writer.text("Updated the Button page to say Action.");
  });