Sources

Painel recolhível de "fontes usadas" para respostas RAG, com um trigger mostrando a contagem e uma lista de links Source.

Visão geral

Sources é o painel global de citações de um turno do assistant. Onde InlineCitation anexa uma citação a uma frase específica, Sources lista cada documento em que a resposta se apoiou, recolhido por padrão com um resumo de contagem ("Used 4 sources").

Use sob a resposta do assistant (tipicamente dentro de MessageContent depois de MessageResponse) para fluxos de RAG, busca na web e embasamento em documentos.

Preview

'use client';import {  Source,  Sources,  SourcesContent,  SourcesTrigger,} from '@gremorie/rx-ai';export function SourcesPreview() {  return (    <Sources>      <SourcesTrigger count={3} />      <SourcesContent>        <Source href="#" title="Registry README">          Registry README        </Source>        <Source href="#" title="Migration guide">          Migration guide        </Source>        <Source href="#" title="v2.0 release notes">          v2.0 release notes        </Source>      </SourcesContent>    </Sources>  );}

Anatomia

Sources
├─ SourcesTrigger   toggle "Used N sources"
└─ SourcesContent
   └─ Source         um link citado por fonte

Instalação

bash npx gremorie@latest add rx-sources

bash pnpm dlx gremorie@latest add rx-sources

bash yarn dlx gremorie@latest add rx-sources

bash bunx --bun gremorie@latest add rx-sources

Uso

import { Sources, SourcesTrigger, SourcesContent, Source } from "@gremorie/rx-ai";

export function Example({ sources }) {
  return (
    <Sources>
      <SourcesTrigger count={sources.length} />
      <SourcesContent>
        {sources.map((s) => (
          <Source key={s.url} href={s.url} title={s.title} />
        ))}
      </SourcesContent>
    </Sources>
  );
}

npx gremorie@latest add ng-sources

Pré-requisito

Os componentes Angular emitem classes utilitárias do Tailwind e não embarcam CSS compilado. Sem o setup abaixo em src/styles.css, o componente monta mas renderiza sem estilo nenhum. Requer Tailwind CSS v4.

@import 'tailwindcss';@import '@gremorie/tokens/theme.css';/* Required. Tailwind v4 skips node_modules by default, so without this line   the components' utility classes never reach your compiled CSS and every   Gremorie component renders unstyled. */@source '../node_modules/@gremorie';

A linha @source é obrigatória: o Tailwind v4 ignora node_modules por padrão. Ajuste o caminho relativo se o seu stylesheet não estiver em src/styles.css. Setup completo em Instalação.

import { Component, input } from '@angular/core';
import {
  Sources,
  SourcesTrigger,
  SourcesContent,
  Source,
} from '@gremorie/ng-ai';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [Sources, SourcesTrigger, SourcesContent, Source],
  template: `
    <sources>
      <sources-trigger [count]="sources().length" />
      <sources-content>
        @for (s of sources(); track s.url) {
          <source [href]="s.url" [title]="s.title" />
        }
      </sources-content>
    </sources>
  `,
})
export class ExampleComponent {
  readonly sources = input<Array<{ url: string; title: string }>>([]);
}

Prop	Type	Default	Description
`count`	`number`	-	Obrigatório. Usado no label padrão ("Used N sources").
`children`	`ReactNode`	-	Opcional. Substitui completamente o label + chevron padrão.

Estende ComponentProps<typeof CollapsibleTrigger>.

`<SourcesContent>`

Corpo recolhível com animação de slide-in / fade-in.

Estende ComponentProps<typeof CollapsibleContent>.

`<Source>`

Prop	Type	Default	Description
`href`	`string`	-	Obrigatório. URL da fonte. Abre em uma nova aba com `rel="noreferrer"`.
`title`	`string`	-	Título da fonte (renderizado ao lado do ícone de livro por padrão).
`children`	`ReactNode`	-	Opcional. Substitui completamente o ícone + título padrão (use para favicons customizados, trechos, etc).

Renderiza como <a>.

Composição

<Sources> detém o estado do collapsible.
<SourcesTrigger> é o toggle ("Used 4 sources" + chevron).
<SourcesContent> é o corpo expandido.
<Source> é uma citação. Empilhe quantas forem necessárias.

Variações

Lista padrão

O caso de 90%: ícone de livro + título, abre externamente.

<Sources>
  <SourcesTrigger count={sources.length} />
  <SourcesContent>
    {sources.map((s) => (
      <Source key={s.url} href={s.url} title={s.title} />
    ))}
  </SourcesContent>
</Sources>

Fonte customizada com favicon

Substitua o conteúdo padrão por Source para mostrar o favicon do site e o hostname.

<Source href={s.url}>
  <img
    src={`https://www.google.com/s2/favicons?domain=${new URL(s.url).hostname}`}
    alt=""
    className="size-4"
  />
  <span className="block font-medium">{new URL(s.url).hostname}</span>
</Source>

Texto de trigger customizado

Substitua o label de contagem por texto customizado (localização, badges de modo, etc.).

<SourcesTrigger count={sources.length}>
  <p className="font-medium">{sources.length} fontes referenciadas</p>
  <ChevronDownIcon className="h-4 w-4" />
</SourcesTrigger>

Acessibilidade

Teclado: o trigger é um CollapsibleTrigger, alternando com Enter / Space.
ARIA: o Radix Collapsible conecta aria-expanded / aria-controls. Source é um <a> de verdade, então anuncia como um link.
Leitores de tela: links externos abrem com target="_blank" rel="noreferrer". Mantenha title preenchido para que o texto do link seja significativo (não apenas "clique aqui").
Movimento reduzido: animações de abrir / fechar são orientadas por data-state e respeitam prefers-reduced-motion.

Relacionados

InlineCitation - citações no nível de frase dentro da resposta
Message - turno do assistant que tipicamente hospeda o painel de sources
Chain of Thought - hits de busca por passo durante o reasoning