ChatMessageexperimental

<script lang="ts">
  import { ChatMessage, type ChatMessageData } from '@urbicon-ui/blocks';

  // A single assistant message whose ordered parts exercise the whole dispatch:
  // reasoning → tool-call → text, with two sources collected into the footer.
  const message: ChatMessageData = {
    id: 'agentic-1',
    role: 'assistant',
    parts: [
      {
        type: 'reasoning',
        text: 'The user wants sources. Look up the attention paper and the scaling-laws work, then cite both inline.',
        durationMs: 2400
      },
      {
        type: 'tool-call',
        id: 'tc-search',
        name: 'search_papers',
        state: 'complete',
        input: { query: 'transformer attention scaling laws' },
        output: { hits: 2 }
      },
      {
        type: 'text',
        text: 'The Transformer replaced recurrence with self-attention [1], and later work showed its performance scales predictably with compute [2].'
      },
      {
        type: 'source',
        id: '1',
        title: 'Attention Is All You Need',
        url: 'https://arxiv.org/abs/1706.03762',
        snippet: 'We propose a new simple network architecture, the Transformer.'
      },
      {
        type: 'source',
        id: '2',
        title: 'Scaling Laws for Neural Language Models',
        url: 'https://arxiv.org/abs/2001.08361',
        snippet: 'Performance improves smoothly with model size, data and compute.'
      }
    ],
    createdAt: new Date('2026-01-01T09:41:00'),
    status: 'complete'
  };
</script>

<div class="w-full max-w-2xl">
  <ChatMessage {message} layout="plain" onRegenerate={() => {}} />
</div>

<script lang="ts">
  import { ChatMessage, type ChatMessageData, type ChatToolCallPart } from '@urbicon-ui/blocks';

  const message: ChatMessageData = {
    id: 'custom-tool-1',
    role: 'assistant',
    parts: [
      {
        type: 'tool-call',
        id: 'tc-weather',
        name: 'get_weather',
        state: 'complete',
        input: { city: 'Berlin' },
        output: { tempC: 7, condition: 'Overcast' }
      },
      { type: 'text', text: "It's **7 °C** and overcast in Berlin right now." }
    ],
    createdAt: new Date('2026-01-01T09:41:00'),
    status: 'complete'
  };
</script>

<!--
  partRenderers swaps the built-in tool-call presentation for your own, keyed by
  the part `type`. The snippet receives the fully-typed tool-call part.
-->
{#snippet toolCall(part: ChatToolCallPart)}
  <div
    class="border-border-subtle bg-surface-base rounded-modify flex items-center gap-2 border px-3 py-2 text-sm"
  >
    <span class="bg-success size-2 rounded-full"></span>
    <span class="text-text-primary font-medium">{part.name}</span>
    <span class="text-text-tertiary">→ {part.state}</span>
  </div>
{/snippet}

<div class="w-full max-w-2xl">
  <ChatMessage {message} layout="plain" partRenderers={{ 'tool-call': toolCall }} />
</div>

<script lang="ts">
  import { ChatMessage, type ChatMessageData } from '@urbicon-ui/blocks';

  // `status: 'error'` switches the message to its failure presentation: the
  // partial text stays, and an Alert appears with a Retry button wired to onRetry.
  let attempt = $state(1);

  const message: ChatMessageData = {
    id: 'error-1',
    role: 'assistant',
    parts: [{ type: 'text', text: 'Let me pull the latest figures for you' }],
    createdAt: new Date('2026-01-01T09:41:00'),
    status: 'error'
  };
</script>

<div class="w-full max-w-2xl">
  <ChatMessage
    {message}
    layout="plain"
    onRetry={() => (attempt += 1)}
    errorLabel="Couldn't reach the model"
  />
  <p class="text-text-tertiary mt-2 text-xs">Retry pressed {attempt - 1}×</p>
</div>