Padrões de tela
Conversa com o Assistente
A tela de conversa com a IA da clínica: um fio só, centrado e estreito, sobre o fundo do app. Sua fala numa bolha discreta à direita; a resposta sem bolha, em texto corrido. A cor da IA aparece só como sinal, em seis lugares e em nenhum outro: o ponto da pílula “pensa com a chave da clínica”, o ponto de “consultei”, a moldura e o título do cartão de ação, o botão que confirma nele e o botão de enviar. Nenhum bloco grande de cor.
components/assistente/assistente-view.tsxcomponents/assistente/cartao-de-acao.tsxcomponents/assistente/historico-dialog.tsxcomponents/assistente/botao-da-conferencia.tsx
Anatomia
Barra da tela, o fio, o compositor. A lista de conversas não é coluna: é um modal atrás do botão Histórico. É a única tela do app sem PageBar: a barra dela é própria (Histórico, Nova conversa, o botão da conferência), porque o título aqui é a saudação do vazio.
Assistentepensa com a chave da clínicaHistórico ⌘K · · Confirma antes de gravar
Boa tarde, Bia.
Pergunte da agenda, de um cadastro, do WhatsApp, ou peça uma ação.
Como está a agenda hoje?Quem está esperando no WhatsApp?Como foi o mês?
como está a agenda de hoje?
Consultei a agenda · 11
Hoje são 11 compromissos entre 8:00 e 18:30. O próximo é a Maria Souza Ferreira, limpeza às 14:00.
Pergunte ou peça algo pra clínica…
Enter envia · Shift+Enter quebra linha
| Peça | Medida | Classe copiada do código |
|---|---|---|
| Fio | 48rem, centrado | mx-auto max-w-3xl |
| Bolha de quem pergunta | canto inferior direito reto | rounded-2xl rounded-br-sm bg-ink-100 px-3.5 py-2 |
| Resposta | sem bolha, 15px | text-[15px] leading-relaxed |
| Barra | min-h-14, quebra no celular | flex min-h-14 shrink-0 flex-wrap items-center gap-2 px-3 py-2 |
| Compositor | cresce até 168px (umas 7 linhas), Enter envia | mx-auto max-w-3xl rounded-2xl border border-border bg-surface p-3 shadow-xs |
| Linha de consulta | ponto da IA + texto 12px | size-2 rounded-full bg-ia |
| Botão da conferência | contorno que mostra o único ajuste: escudo verde “Confirma antes de gravar” ou raio âmbar “Grava direto”; ligado sem o segredo no servidor, alerta âmbar “Escrita desligada”; o clique troca o estado, sem abrir nada, e o aviso diz o novo; a dica do mouse diz o que o clique faz; abaixo de xl, só o ícone | border-warning-fio bg-warning-soft text-warning-strong |
| Histórico | a janela da casa (Dialog), a mesma do ⌘K do app e da busca do Atendimento; ancorada no alto, porque a lista filtra a cada tecla | top-[10%] max-w-xl translate-y-0 |
O cartão de ação
A única peça da conversa com moldura, e a moldura é da cor da IA: é onde ela pede permissão pra mexer no dado da clínica.
Vou marcar
Maria Souza Ferreira · Limpeza (40 min) · quinta-feira, 12 de setembro, 14:00 às 14:40 · com Dra. Ana Beatriz
ConfirmarCancelar
| Tempo | Título | O que mostra |
|---|---|---|
| Pedindo | Vou marcar | a frase montada no servidor, com data por extenso, e os dois botões |
| Gravando | Vou marcar | o giro na cor da IA; os botões somem |
| Feito | Marcado | o resumo, o link pra tela certa e o Desfazer, quando a ação tem |
| Incerto | Não sei se marcou | a moldura vira vermelha: a função disse não deu com a linha no banco |
| Recusado | Nada gravado | moldura neutra, sem botão |
| Vencido | Cartão vencido | a conversa seguiu sem o toque; só a última resposta é retomável |
NotaDesfazer é compensação, e o cartão diz isso
Agendar desfaz como “cancelar pela clínica” e conta no mês; remarcar desfaz de verdade; mudar situação volta o estado, não os carimbos; cadastrar exclui como a tela; anotar não tem Desfazer. O aviso mora embaixo do botão, em 12px, e vale por dez minutos.
Estados e faixa
O que impede o chat de responder aparece numa faixa acima do fio, fora da rolagem, com o atalho pra resolver. Bloqueio trava o compositor e as sugestões; aviso (limite do dia, ainda respondendo) só avisa. Nunca um toast com JSON.
| Motivo | Quem vê o botão | Pra onde |
|---|---|---|
| Sem chave, sem provedor | só quem administra | Atendente, bloco Avançado |
| Assistente desligado | só quem administra | Atendente, bloco Avançado |
| Teto do mês ou do setor | só quem administra | o teto, no mesmo bloco |
| Limite de perguntas do dia | ninguém | volta amanhã; ponto âmbar, não vermelho |
| Escrita sem o segredo | todo mundo, no próprio botão da conferência (âmbar, “Escrita desligada”) | quem cuida da instalação configura AI_TOOL_APPROVAL_SECRET |
| Erro do provedor | ninguém | a frase de saldo ou de chave, a mesma do Atendente |
O operador nunca vê botão morto: a frase dele diz a quem pedir. A prontidão (chat ligado, provedor ativo, chave válida) é decidida no servidor antes de a pessoa digitar; a rota confirma no envio.
Teclado e rolagem
Três atalhos e uma regra de rolagem.
| Gesto | Faz |
|---|---|
| ⌘K | abre o histórico (o mesmo atalho da busca do Atendimento) |
| ⌘⇧O | conversa nova (o ⌘N é do navegador) |
| Enter · Shift+Enter | envia · quebra linha |
| Subir pra reler | o fio para de puxar e aparece Continuar lendo, também depois da resposta; um toque devolve o fim |
| Tab no histórico | gira dentro da janela (o Radix prende o foco); Esc fecha (ou cancela o gesto aberto) |
| Leitor de tela | uma linha invisível anuncia quando a resposta começa e quando termina |