8.0k New

Message

Previous Next

One turn. The person's message, and the agent's reply with its actions.

Epicenter

Local-first, open source apps

Special Sponsor
How do I add a settings dialog? It should open from the gear icon in the header.

Install Dialog, then open it from the gear button in site-header.tsx.

bash
npx shadcn@latest add dialog

Wrap the button in a DialogTrigger and put the settings form in DialogContent. Focus moves into the dialog when it opens, and Esc closes it.

<script lang="ts">
  import CheckIcon from "@lucide/svelte/icons/check";
  import CopyIcon from "@lucide/svelte/icons/copy";
  import PencilIcon from "@lucide/svelte/icons/pencil";
  import RefreshCcwIcon from "@lucide/svelte/icons/refresh-ccw";
  import ThumbsDownIcon from "@lucide/svelte/icons/thumbs-down";
  import ThumbsUpIcon from "@lucide/svelte/icons/thumbs-up";
  import { onDestroy, type Snippet } from "svelte";
  import * as Bubble from "$lib/components/ui/bubble/index.js";
  import * as Message from "$lib/components/ui/message/index.js";
  import * as Tooltip from "$lib/components/ui/tooltip/index.js";
  import Markdown from "$lib/components/markdown/markdown.svelte";
  import { Button } from "$lib/components/ui/button/index.js";
 
  const reply = `Install Dialog, then open it from the gear button in `site-header.tsx`.
 
```bash
npx shadcn@latest add dialog
```
 
Wrap the button in a `DialogTrigger` and put the settings form in `DialogContent`. Focus moves into the dialog when it opens, and **Esc** closes it.`;
 
  let copied = $state(false);
  let feedback = $state<"like" | "dislike" | null>(null);
  let timeout: ReturnType<typeof setTimeout> | undefined;
 
  function copy() {
    void navigator.clipboard.writeText(reply);
    copied = true;
    clearTimeout(timeout);
    timeout = setTimeout(() => (copied = false), 2000);
  }
 
  onDestroy(() => clearTimeout(timeout));
</script>
 
{#snippet messageAction(
  label: string,
  icon: Snippet,
  onclick?: () => void,
  pressed?: boolean
)}
  <Tooltip.Root>
    <Tooltip.Trigger>
      {#snippet child({ props })}
        <Button
          {...props}
          variant="ghost"
          size="icon-sm"
          aria-label={label}
          aria-pressed={pressed}
          {onclick}
        >
          {@render icon()}
        </Button>
      {/snippet}
    </Tooltip.Trigger>
    <Tooltip.Content>
      <p>{label}</p>
    </Tooltip.Content>
  </Tooltip.Root>
{/snippet}
 
{#snippet copyIcon()}
  <CopyIcon />
{/snippet}
 
{#snippet copyStateIcon()}
  {#if copied}
    <CheckIcon />
  {:else}
    <CopyIcon />
  {/if}
{/snippet}
 
{#snippet editIcon()}
  <PencilIcon />
{/snippet}
 
{#snippet likeIcon()}
  <ThumbsUpIcon class={feedback === "like" ? "fill-current" : undefined} />
{/snippet}
 
{#snippet dislikeIcon()}
  <ThumbsDownIcon class={feedback === "dislike" ? "fill-current" : undefined} />
{/snippet}
 
{#snippet retryIcon()}
  <RefreshCcwIcon />
{/snippet}
 
<div class="mx-auto flex w-full max-w-md flex-col gap-8 py-6 text-sm">
  <Message.Root align="end">
    <Message.Content class="gap-2">
      <Bubble.Root align="end" variant="muted">
        <Bubble.Content>
          How do I add a settings dialog? It should open from the gear icon in
          the header.
        </Bubble.Content>
      </Bubble.Root>
      <Message.Footer>
        {@render messageAction("Copy", copyIcon)}
        {@render messageAction("Edit", editIcon)}
      </Message.Footer>
    </Message.Content>
  </Message.Root>
  <Message.Root>
    <Message.Content class="gap-2">
      <Markdown content={reply} />
      <Message.Footer class="px-0">
        {@render messageAction(copied ? "Copied" : "Copy", copyStateIcon, copy)}
        {@render messageAction(
          "Good response",
          likeIcon,
          () => (feedback = feedback === "like" ? null : "like"),
          feedback === "like"
        )}
        {@render messageAction(
          "Bad response",
          dislikeIcon,
          () => (feedback = feedback === "dislike" ? null : "dislike"),
          feedback === "dislike"
        )}
        {@render messageAction("Retry", retryIcon)}
      </Message.Footer>
    </Message.Content>
  </Message.Root>
</div>

Use Message for one turn in a thread. The person's text is a Bubble on a Message with align="end". The agent's reply is markdown on a Message, with actions under it. A thread of these turns is Chat.

Installation

Message is built with the Message, Bubble, and Tooltip components.

pnpm dlx shadcn-svelte@latest add message bubble tooltip

Usage 

<script lang="ts">
  import CopyIcon from "@lucide/svelte/icons/copy";
  import * as Bubble from "$lib/components/ui/bubble/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Message from "$lib/components/ui/message/index.js";
</script>
<Message.Root align="end">
  <Message.Content>
    <Bubble.Root align="end" variant="muted">
      <Bubble.Content>How do I add a settings dialog?</Bubble.Content>
    </Bubble.Root>
  </Message.Content>
</Message.Root>
<Message.Root>
  <Message.Content class="gap-2">
    <p>Install Dialog, then open it from the gear button.</p>
    <Message.Footer>
      <Button variant="ghost" size="icon-sm" aria-label="Copy">
        <CopyIcon />
      </Button>
    </Message.Footer>
  </Message.Content>
</Message.Root>

See Message.

Actions

Put actions in Message.Footer. It follows the message alignment, so on the person's turn the actions sit on the right. Use ghost icon buttons with a tooltip for each.

  • Copy writes the reply to the clipboard and swaps to a check for two seconds.
  • Good response and Bad response are toggles. Set aria-pressed so screen readers announce the state.
  • Retry runs the turn again.
  • Edit on the person's turn puts the text back in the field.

Markdown

The reply streams as markdown. Render it with svelte-streamdown and route fenced code to a Code Block, so code in the reply gets line numbers and a copy button.

AI SDK

Branch on the message role. The person's turn is the bubble. The agent's turn is the reply, and chat.regenerate with the message id runs it again.

<script lang="ts">
  import { Chat } from "@ai-sdk/svelte";
 
  const chat = new Chat({});
</script>
 
{#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}
    <Message.Root>
      <Message.Content class="gap-2">
        <Streamdown content={getMessageText(message)} />
        <Message.Footer>
          <Button
            variant="ghost"
            size="icon-sm"
            aria-label="Retry"
            onclick={() => chat.regenerate({ messageId: message.id })}
          >
            <RefreshCcwIcon />
          </Button>
        </Message.Footer>
      </Message.Content>
    </Message.Root>
  {/if}
{/each}