CitationChipexperimental

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

  // Standalone reference list — no streamed message required. Each chip opens a
  // popover with the title, snippet, and a policy-checked outbound link.
  const sources: CitationSource[] = [
    {
      id: '1',
      title: 'Attention Is All You Need',
      url: 'https://arxiv.org/abs/1706.03762',
      snippet: 'The Transformer, based solely on attention mechanisms.'
    },
    {
      id: '2',
      title: 'Scaling Laws for Neural Language Models',
      url: 'https://arxiv.org/abs/2001.08361',
      snippet: 'Quality improves smoothly with model size, dataset size, and compute.'
    },
    {
      id: '3',
      title: 'Training language models to follow instructions',
      url: 'https://arxiv.org/abs/2203.02155',
      snippet: 'Human feedback aligns models with user intent.'
    }
  ];
</script>

<div class="flex flex-wrap items-center gap-2">
  <span class="text-text-tertiary text-sm">Sources:</span>
  {#each sources as source, i (source.id)}
    <CitationChip {source} index={i + 1} />
  {/each}
</div>

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

  const source: CitationSource = {
    id: '1',
    title: 'Attention Is All You Need',
    url: 'https://arxiv.org/abs/1706.03762',
    snippet: 'The Transformer, based solely on attention mechanisms.'
  };
</script>

<div class="flex flex-wrap items-center gap-3">
  <!-- numeric: a compact footnote pill for dense inline citations. -->
  <CitationChip {source} index={1} citationStyle="numeric" />
  <!-- label: the (truncated) title, for named sources in a footer or sidebar. -->
  <CitationChip {source} index={1} citationStyle="label" />
</div>

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

  // In a streamed answer you rarely construct chips yourself: StreamingMarkdown
  // wires them up from its `sources` prop. Each in-text [id] marker whose id
  // matches a source becomes a CitationChip automatically.
  const sources: CitationSource[] = [
    {
      id: '1',
      title: 'Attention Is All You Need',
      url: 'https://arxiv.org/abs/1706.03762',
      snippet: 'The Transformer, based solely on attention mechanisms.'
    }
  ];

  const content = 'Self-attention replaced recurrence in sequence models [1].';
</script>

<StreamingMarkdown {content} {sources} headingLevelStart={3} />