@adatechnology/conversations-ui 0.1.0-rc.20 → 0.1.0-rc.22

package/src/styles.css

@@ -155,3 +155,125 @@
     max-width: calc(100vw - 1.5rem);
   }
 }
+
+/**
+ * Scrollbar fina — paridade com `.scrollbar-thin` de
+ * financiamento-imobiliario-bot/apps/web/src/index.css.
+ *
+ * Prefixo `cv-` porque o host pode ter a própria `.scrollbar-thin` (plugin do Tailwind ou CSS
+ * próprio): colidir no nome faria o painel herdar regra alheia sem ninguém entender por quê.
+ *
+ * Usada onde a área rola dentro de um bloco de altura limitada, como o grid de "Suas Seleções":
+ * a barra padrão do sistema ocupa ~15px e, num card de 3 colunas, come uma coluna inteira.
+ */
+.cv-scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+.cv-scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
+.cv-scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+.cv-scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 2px; }
+.cv-scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
+.dark .cv-scrollbar-thin { scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
+.dark .cv-scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
+.dark .cv-scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
+
+/**
+ * Mãozinha no que é clicável.
+ *
+ * O Preflight do Tailwind v3 punha `cursor: pointer` em `button`; o v4 removeu, e sem regra
+ * explícita o botão herda o `cursor: default` do browser — os componentes deste pacote deixam de
+ * parecer clicáveis num host v4. São 91 botões aqui: carimbar a classe em cada um seria ruído que o
+ * próximo componente esqueceria de repetir.
+ *
+ * `:where()` zera a especificidade de propósito: a regra vence o UA stylesheet (autor sempre vence)
+ * mas perde de qualquer regra do host, então quem quiser outro cursor não precisa de `!important`.
+ */
+:where(button:not(:disabled), [role='button']:not(:disabled), summary) {
+  cursor: pointer;
+}
+
+/**
+ * Simulador de cliente. Largura fixa porque é painel auxiliar: a thread ao lado é que deve
+ * ganhar o espaço restante quando a janela encolhe.
+ */
+.cv-simulator-panel {
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  flex-shrink: 0;
+  border-left: 1px solid rgb(229 231 235);
+  background: #fff;
+}
+
+.cv-simulator-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+
+.cv-simulator-panel__heading { min-width: 0; }
+
+.cv-simulator-panel__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(17 24 39);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cv-simulator-panel__subtitle {
+  font-size: 0.75rem;
+  color: rgb(156 163 175);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cv-simulator-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cv-simulator-panel__close {
+  display: inline-flex;
+  padding: 0.375rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: rgb(156 163 175);
+  transition: color 150ms, background-color 150ms;
+}
+
+.cv-simulator-panel__close:hover {
+  color: rgb(55 65 81);
+  background: rgb(243 244 246);
+}
+
+/* `min-height: 0` para o transcript rolar dentro do painel em vez de esticar o `<aside>`. */
+.cv-simulator-panel__body { flex: 1; min-height: 0; }
+
+.dark .cv-simulator-panel {
+  border-left-color: rgb(31 41 55);
+  background: rgb(17 24 39);
+}
+.dark .cv-simulator-panel__header { border-bottom-color: rgb(31 41 55); }
+.dark .cv-simulator-panel__title { color: rgb(243 244 246); }
+.dark .cv-simulator-panel__subtitle { color: rgb(107 114 128); }
+.dark .cv-simulator-panel__close:hover { color: rgb(229 231 235); background: rgb(31 41 55); }
+
+/* Painel auxiliar não cabe ao lado da thread em tela estreita: vira sobreposição de tela cheia. */
+@media (max-width: 1023px) {
+  .cv-simulator-panel {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    z-index: 40;
+    border-left: 0;
+  }
+}

package/src/types.ts

@@ -84,6 +84,32 @@ export interface MessagePayload {
    * diferente de avaliado e limpo.
    */
   moderation?: { isOffensive: boolean; terms: string[] } | null
+  /**
+   * Transcrição do áudio, vinda do backend — a UI só exibe, nunca transcreve. Rodar STT no browser
+   * exigiria baixar modelo por aba e daria resultado diferente por versão de cliente.
+   *
+   * `null`/ausente = não avaliado, que é diferente de `'done'` com texto vazio (áudio em silêncio,
+   * já processado). É essa distinção que decide se o balão oferece "transcrever" ou "sem fala
+   * detectada".
+   */
+  transcription?: MessageTranscription | null
   isFirstInGroup?: boolean
   isLastInGroup?: boolean
 }
+
+export type TranscriptionStatus = 'pending' | 'done' | 'failed' | 'unsupported'
+
+/**
+ * Quando transcrever, escolhido nas configurações da empresa. Espelha o
+ * `TranscriptionMode` de `@adatechnology/meta-whatsapp-contracts`; declarado aqui para o pacote de
+ * UI não obrigar quem só desenha telas a instalar os contratos do backend.
+ */
+export type TranscriptionMode = 'auto' | 'onDemand'
+
+export interface MessageTranscription {
+  status: TranscriptionStatus
+  text?: string | null
+  /** ISO 639-1 ou nome do idioma, conforme o engine. Exibido como dica, não interpretado. */
+  language?: string | null
+  engine?: string | null
+}