Markstream Angular

Visão Geral

Adicione Markstream ao Angular 20+ preservando padrões de componentes standalone, bindings compatíveis com signals, padrões seguros de renderização e dependências opcionais explícitas. Use markstream-install para seleção de framework; use esta funcionalidade apenas após a confirmação do Angular.

Quando Usar

Use para imports standalone específicos do Angular, CSS, signals, tags ou componentes customizados, streaming de estado e peers opcionais. Não use abaixo do Angular 20 ou quando a aplicação não puder aceitar uma API de renderização alpha.

Fluxo de Trabalho

Inspecione o gerenciador de pacotes existente, a versão do pacote instalado e as convenções do projeto. Uma integração com escopo solicitado já autoriza edições rotineiras de código fonte/dependências; busque aprovação apenas para uma expansão de escopo material ou decisão de adoção de beta/alpha não resolvida.

1. Confirme Angular 20+ e registre que markstream-angular é alpha.
2. Instale o pacote mais apenas os peers solicitados. Importe markstream-angular/index.css; adicione KaTeX CSS apenas para matemática.
3. Importe MarkstreamAngularComponent no imports do componente standalone.
4. Comece com [content] e [smoothStreaming]="'auto'". Use nodes mais final apenas quando outra camada possuir o AST.
5. Para chat ao vivo use [fade]="false" e opte por [typewriter]="true". Ao concluir defina [final]="true", desabilite pacing/cursor e habilite fade apenas se desejado.
6. Use [customHtmlTags] e [customComponents] apenas para fluxos de trabalho de tags confiáveis.
7. Mantenha [htmlPolicy]="'safe'" e o modo strict do Mermaid a menos que uma superfície legada confiável de escopo restrito exija o contrário.
8. Valide com o menor build do Angular, typecheck ou comando de desenvolvimento.

Exemplo

import { Component, signal } from '@angular/core'
import { MarkstreamAngularComponent } from 'markstream-angular'
import 'markstream-angular/index.css'

@Component({
  selector: 'app-answer',
  standalone: true,
  imports: [MarkstreamAngularComponent],
  template: `
    <markstream-angular
      [content]="markdown()"
      [final]="done()"
      [fade]="done()"
      [typewriter]="!done()"
      [smoothStreaming]="done() ? false : 'auto'"
      [htmlPolicy]="'safe'"
    />
  `,
})
export class AnswerComponent {
  markdown = signal('# Streaming answer')
  done = signal(false)
}

Limitações

• Requer Angular 20+ e um pacote alpha.
• Peers com uso intensivo de navegador podem precisar de trabalho no bundler ou na fronteira do cliente.
• Esta funcionalidade não projeta a arquitetura do chat host ou o sistema visual.

Notas de Segurança e Proteção

Revise as alterações de dependência antes da instalação. Nunca amplie as configurações de confiança de HTML ou Mermaid para saída de modelo não confiável.

Verifique props, caminhos de exportação e intervalos de peers contra o pacote instalado, não um upstream main mutável. Teste streams parciais e completos, Markdown malformado/não confiável, links e URLs de imagem, cancelamento e redução de movimento. HTML seguro e diagramas estritos reduzem a exposição, mas não garantem por si só a privacidade de URL/rede ou as permissões de componentes da aplicação.