Componente

Message

Uma linha de mensagem de chat componível. Alinhe-a para qualquer lado, adicione um avatar com status, e empilhe cabeçalho, balão, anexos, rodapé e ações de hover dentro da coluna de conteúdo.

Avatar, cabeçalho e rodapé

Ana Silva · 10:32

Walked through the Black Forest this morning — the oaks are turning.

Delivered

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbMessageImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-message-basic',
  imports: [HbMessageImports],
  template: `
    <hb-message hbAlign="start" class="max-w-md">
      <hb-message-avatar hbName="Ana Silva" hbStatus="online" />
      <hb-message-content>
        <hb-message-header>Ana Silva · 10:32</hb-message-header>
        <div class="w-fit rounded-lg rounded-bl-sm bg-muted px-3 py-2 text-sm">
          Walked through the Black Forest this morning — the oaks are turning.
        </div>
        <hb-message-footer>Delivered</hb-message-footer>
      </hb-message-content>
    </hb-message>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoMessageBasicComponent {}

Conversa alinhada

Where did you take it?

In the Black Forest, near Freiburg.

10:27

Anexos e ações

Herbst Bot · shared a file

Here is the photo from the Black Forest trip.

black-forest.pdf

Just now · unread

Referência de API

hb-message

Propriedade	Descrição	Tipo	Padrão
[hbAlign]	Em que lado a linha fica. start é entrada; end espelha para saída.	'start' \| 'end'	'start'
hb-message-group [hbAlign]	Wrapper opcional para empilhar várias mensagens, com um alinhamento padrão para o conjunto.	'start' \| 'end'	'start'

hb-message-avatar

Propriedade	Descrição	Tipo	Padrão
[hbSrc] / [hbName]	URL da imagem, e um nome usado para o texto alt e o fallback de iniciais gerado automaticamente.	string	''
[hbSize] / [hbShape] / [hbStatus]	Tamanho do avatar (preset ou número em px), forma, e um badge de presença.	size \| number / 'circle' \| 'square' / 'online' \| 'offline' \| 'away' \| 'busy'	'sm' / 'circle' / —

Content parts

Propriedade	Descrição	Tipo	Padrão
hb-message-content	A coluna que contém o balão e suas partes; alinha ao lado da mensagem.	component	—
hb-message-header / hb-message-footer	Uma legenda acima do balão (nome, hora) e uma linha abaixo (status, timestamp).	component	—
hb-message-attachments	Um slot para arquivos, imagens ou prévias de link abaixo do balão.	component	—
hb-message-actions	Controles ao final (copiar, encaminhar, reagir), normalmente exibidos no hover.	component	—