Plan

<script lang="ts">
  import CircleIcon from "@lucide/svelte/icons/circle";
  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
  import CircleDotIcon from "@lucide/svelte/icons/circle-dot";
  import RouteIcon from "@lucide/svelte/icons/route";
  import { Chat } from "@ai-sdk/svelte";
  import * as Bubble from "$lib/components/ui/bubble/index.js";
  import * as Message from "$lib/components/ui/message/index.js";
  import * as Trace from "$lib/components/ui/trace/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,
    {
      plan: {
        title: string;
        steps: { title: string; status: "done" | "running" | "pending" }[];
      };
    }
  >;
 
  type PlanPart = Extract<ChatMessage["parts"][number], { type: "data-plan" }>;
 
  const STEPS = [
    "Install @base-ui/react",
    "Replace the Radix imports",
    "Rename asChild to render",
    "Run the type checker"
  ];
 
  function planAt(current: number) {
    return {
      title: "Plan: migrate to Base UI",
      steps: STEPS.map((title, index) => ({
        title,
        status:
          index < current ? "done" : index === current ? "running" : "pending"
      }))
    } satisfies PlanPart["data"];
  }
 
  const script = createChat<ChatMessage>()
    .user("Migrate the dialog components to Base UI.")
    .assistant(({ writer }) => {
      STEPS.forEach((_, index) => {
        writer
          .data({ type: "data-plan", id: "plan", data: planAt(index) })
          .sleep(1200);
      });
      writer.data({
        type: "data-plan",
        id: "plan",
        data: planAt(STEPS.length)
      });
      writer.text("Migrated Dialog and AlertDialog. The type checker passes.");
    });
 
  const transcript = script.get();
  const [question] = script.get(1);
  const transport = script.transport({ delayMs: 20 });
 
  const chat = new Chat<ChatMessage>({ messages: transcript, transport });
  const busy = $derived(
    chat.status === "submitted" || chat.status === "streaming"
  );
</script>
 
{#snippet planRow(plan: PlanPart["data"], streaming: boolean)}
  {@const done = plan.steps.filter((step) => step.status === "done").length}
  {@const running = streaming && done < plan.steps.length}
  <Trace.Collapsible open>
    <Trace.CollapsibleTrigger>
      <Trace.Line status={running ? "running" : undefined}>
        <Trace.Icon>
          <RouteIcon />
        </Trace.Icon>
        <Trace.Title>{plan.title}</Trace.Title>
        <Trace.Description>
          {done} of {plan.steps.length} done
        </Trace.Description>
      </Trace.Line>
    </Trace.CollapsibleTrigger>
    <Trace.CollapsibleContent>
      <Trace.Root>
        {#each plan.steps as step, index (index)}
          <Trace.Line
            status={step.status === "pending"
              ? "pending"
              : streaming && step.status === "running"
                ? "running"
                : undefined}
          >
            <Trace.Icon>
              {#if step.status === "done"}
                <CircleCheckIcon />
              {:else if step.status === "running"}
                <CircleDotIcon />
              {:else}
                <CircleIcon />
              {/if}
            </Trace.Icon>
            <Trace.Title>{step.title}</Trace.Title>
          </Trace.Line>
        {/each}
      </Trace.Root>
    </Trace.CollapsibleContent>
  </Trace.Collapsible>
{/snippet}
 
<div class="flex min-h-72 w-full max-w-sm flex-col gap-4 py-6 text-sm">
  {#each chat.messages as message (message.id)}
    {#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}
      {@const streaming = busy && message === chat.messages.at(-1)}
      {@const plan = message.parts.find((part) => part.type === "data-plan")}
      {@const text = getMessageText(message)}
      <Message.Root>
        <Message.Content class="gap-4">
          {#if plan}
            <Trace.Root>
              {@render planRow(plan.data, streaming)}
            </Trace.Root>
          {/if}
          {#if text}
            <p>{text}</p>
          {/if}
        </Message.Content>
      </Message.Root>
    {/if}
  {/each}
  {#if !busy}
    <Button
      variant="outline"
      size="sm"
      class="mt-auto self-start"
      onclick={() => {
        chat.messages = [];
        void chat.sendMessage(question);
      }}
    >
      Replay
    </Button>
  {/if}
</div>

<script lang="ts">
  import CircleIcon from "@lucide/svelte/icons/circle";
  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
  import RouteIcon from "@lucide/svelte/icons/route";
  import * as Trace from "$lib/components/ui/trace/index.js";
 
  const steps = [
    "Add a dark variant to the theme tokens",
    "Read the theme from a cookie on the server",
    "Add a toggle to the settings page",
    "Check contrast on the charts"
  ];
</script>
 
<Trace.Root class="max-w-sm">
  <Trace.Collapsible open>
    <Trace.CollapsibleTrigger>
      <Trace.Line>
        <Trace.Icon>
          <RouteIcon />
        </Trace.Icon>
        <Trace.Title>Plan: add dark mode</Trace.Title>
        <Trace.Description>1 of {steps.length} done</Trace.Description>
      </Trace.Line>
    </Trace.CollapsibleTrigger>
    <Trace.CollapsibleContent class="flex flex-col gap-3">
      <p>
        Store the theme in a cookie so the server renders the right one and the
        page does not flash on load.
      </p>
      <Trace.Root>
        {#each steps as step, index (index)}
          <Trace.Line status={index > 0 ? "pending" : undefined}>
            <Trace.Icon>
              {#if index === 0}
                <CircleCheckIcon />
              {:else}
                <CircleIcon />
              {/if}
            </Trace.Icon>
            <Trace.Title>{step}</Trace.Title>
          </Trace.Line>
        {/each}
      </Trace.Root>
    </Trace.CollapsibleContent>
  </Trace.Collapsible>
</Trace.Root>