Baruh

Assistente de IA do GALES. Modal de chat para auxílio ao usuário com perguntas sobre o sistema. Estado inicial com sugestões e estado de conversação. Cores overlay. Dark mode automático.

components/baruh.cssAbrir no Figma

Exemplos

Clique nos botões para abrir o modal. Todos os componentes funcionam nativamente.

Estado inicial

Conversação

Propriedades

Classes disponíveis para configurar o Baruh.

Propriedade	Tipo	Default	Descrição
`.baruh-backdrop`	`classe`	—	Backdrop overlay. Adicione .is-open para exibir.
`.baruh`	`classe`	—	Modal container (720x520, radius 6px).
`.baruh-header`	`classe`	—	Header com logo centralizada e close button.
`.baruh-logo`	`classe`	—	Logo do Baruh.
`.baruh-close`	`classe`	—	Botão fechar (btn ghost xs, position absolute right).
`.baruh-content`	`classe`	—	Área de conteúdo (padding 56px lateral).
`.baruh-welcome`	`classe`	—	Estado inicial com título e sugestões.
`.baruh-suggestions`	`classe`	—	Container das 3 cards de sugestão.
`.baruh-suggestion`	`classe`	—	Card de sugestão (110px, radius 8px).
`.baruh-chat`	`classe`	—	Área de chat com scroll.
`.baruh-msg-user`	`classe`	—	Mensagem do usuário (alinhada à direita).
`.baruh-msg-user-bubble`	`classe`	—	Bubble do usuário (bg emphasis, radius 6px).
`.baruh-msg-ai`	`classe`	—	Resposta da IA (borda esquerda, padding 20px).
`.baruh-input`	`classe`	—	Área de input (input + send button).

Código

Snippets prontos para copiar e usar.

Estrutura básica

html

<!-- Backdrop -->
<div class="baruh-backdrop is-open">
    <div class="baruh">
        <!-- Header -->
        <div class="baruh-header">
            <div class="baruh-logo">
                <img src="/assets/logo-baruh.svg" alt="Baruh">
            </div>
            <button class="baruh-close btn btn-ghost btn-icon btn-xs">
                <span class="btn-icon-content"><!-- SVG close-small --></span>
            </button>
        </div>

        <!-- Content: Welcome ou Chat -->
        <div class="baruh-content">
            <!-- Welcome state -->
            <div class="baruh-welcome">
                <div class="baruh-welcome-text">
                    <span class="baruh-welcome-title">Olá!</span>
                    <span class="baruh-welcome-subtitle">Como posso te ajudar hoje?</span>
                </div>
                <div class="baruh-suggestions">
                    <div class="baruh-suggestion">
                        <span class="baruh-suggestion-icon"><!-- SVG --></span>
                        <span class="baruh-suggestion-text">Pergunta sugerida</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Input -->
        <div class="baruh-input">
            <input type="text" class="input" placeholder="Digite aqui sua dúvida">
            <button class="btn btn-filled btn-icon">
                <span class="btn-icon-content"><!-- SVG send --></span>
            </button>
        </div>
    </div>
</div>

Tokens utilizados

Variáveis semânticas overlay aplicadas ao componente.

Token	Uso
`--surface-overlay-neutral-backdrop`	Fundo escuro atrás do modal
`--surface-overlay-neutral-container-default`	Background do modal e cards
`--surface-overlay-neutral-container-emphasis`	Bubble do usuário
`--surface-overlay-neutral-container-hover`	Hover nas sugestões
`--border-overlay-neutral-default`	Borda do modal, cards, resposta IA
`--text-overlay-neutral-default`	Texto principal
`--text-overlay-neutral-secondary`	Subtítulo
`--text-overlay-neutral-subtle`	Placeholder
`--icon-overlay-brand-default`	Ícones das sugestões (accent)
`--radius-default`	Border-radius (6px)
`--radius-md`	Border-radius cards (8px)

Baruh ​

Exemplos ​

Propriedades ​

Código ​