Sources

<script lang="ts">
  import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
  import GlobeIcon from "@lucide/svelte/icons/globe";
  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";
 
  const script = createChat()
    .user("How do I start an Astro project with pnpm?")
    .assistant(({ writer }) => {
      writer.text(
        "Run pnpm create astro@latest and follow the prompts. It scaffolds the project and installs the dependencies."
      );
      writer.sourceUrl({
        url: "https://docs.astro.build/en/install-and-setup/",
        title: "Install Astro | docs.astro.build"
      });
      writer.sourceUrl({
        url: "https://www.npmjs.com/package/create-astro",
        title: "create-astro | npmjs.com"
      });
      writer.sourceUrl({
        url: "https://docs.astro.build/en/install-and-setup/",
        title: "Install Astro | docs.astro.build"
      });
      writer.sourceUrl({
        url: "https://pnpm.io/cli/create",
        title: "pnpm create | pnpm.io"
      });
    });
 
  const transcript = script.get();
  const [question] = script.get(1);
  const transport = script.transport({ delayMs: 20 });
 
  type SourcePart = Extract<UIMessage["parts"][number], { type: "source-url" }>;
 
  const chat = new Chat({ messages: transcript, transport });
  const busy = $derived(
    chat.status === "submitted" || chat.status === "streaming"
  );
</script>
 
{#snippet sourcesLine(sources: SourcePart[])}
  <Trace.Root>
    <Trace.Collapsible open>
      <Trace.CollapsibleTrigger>
        <Trace.Line>
          <Trace.Icon>
            <GlobeIcon />
          </Trace.Icon>
          <Trace.Title>Used {sources.length} sources</Trace.Title>
        </Trace.Line>
      </Trace.CollapsibleTrigger>
      <Trace.CollapsibleContent>
        <Trace.Root>
          {#each sources as source (source.sourceId)}
            <a href={source.url} target="_blank" rel="noreferrer">
              <Trace.Line>
                <Trace.Title>
                  {source.title ?? new URL(source.url).hostname}
                  <span class="sr-only"> (opens in a new tab)</span>
                </Trace.Title>
                <Trace.Icon>
                  <ArrowUpRightIcon />
                </Trace.Icon>
              </Trace.Line>
            </a>
          {/each}
        </Trace.Root>
      </Trace.CollapsibleContent>
    </Trace.Collapsible>
  </Trace.Root>
{/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 sources = message.parts
        .filter((part) => part.type === "source-url")
        .filter(
          (part, index, all) =>
            all.findIndex((other) => other.url === part.url) === index
        )}
      {@const text = getMessageText(message)}
      <Message.Root>
        <Message.Content class="gap-4">
          {#if text}
            <p>{text}</p>
          {/if}
          {#if sources.length > 0}
            {@render sourcesLine(sources)}
          {/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>