@adatechnology/conversations-ui 0.1.0-rc.21 → 0.1.0-rc.23

package/src/styles.css

@@ -192,3 +192,545 @@
 :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;
+  }
+}
+
+/**
+ * Workspace de atendimento: a grade da tela inteira (lista · conversa · simulador).
+ *
+ * Cada coluna é um cartão sobre fundo neutro, com respiro entre elas — separação por espaço lê mais
+ * rápido que por borda. Todas as alturas presas em `min-height: 0` porque, em grid e flex, o padrão
+ * é não encolher abaixo do conteúdo: sem isso o scroll interno nunca ativa e quem rola é a página.
+ */
+.cv-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.cv-workspace-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);
+}
+.dark .cv-workspace-header { border-color: rgb(51 65 85); }
+
+.cv-workspace-header__titles { min-width: 0; }
+.cv-workspace-header__titles h1 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-workspace-header__titles p {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+.cv-workspace-header__waiting { color: rgb(217 119 6); }
+.dark .cv-workspace-header__waiting { color: rgb(251 191 36); }
+
+.cv-workspace-header__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cv-workspace-toggle {
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  /* 44px de área de toque em mobile — abaixo disso o dedo erra o alvo. */
+  min-height: 2.75rem;
+}
+.cv-workspace-toggle:disabled { opacity: 0.5; }
+.cv-workspace-toggle--on { background: rgb(37 99 235); color: #fff; border-color: rgb(37 99 235); }
+.dark .cv-workspace-toggle { border-color: rgb(71 85 105); color: rgb(226 232 240); }
+
+.cv-workspace-failure {
+  border-bottom: 1px solid rgb(253 230 138);
+  background: rgb(255 251 235);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(146 64 14);
+}
+.dark .cv-workspace-failure { background: rgb(69 26 3); color: rgb(253 230 138); border-color: rgb(120 53 15); }
+
+.cv-workspace-grid {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgb(243 244 246);
+}
+.dark .cv-workspace-grid { background: rgb(17 24 39); }
+
+.cv-workspace-list,
+.cv-workspace-detail,
+.cv-workspace-simulator {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+.dark .cv-workspace-list,
+.dark .cv-workspace-detail,
+.dark .cv-workspace-simulator { background: rgb(31 41 55); border-color: rgb(51 65 85); }
+
+/* Em linha, e não em coluna: o painel do simulador não tem teto de altura — empilhado ele cresce
+   com o transcript e transborda o cartão; em linha herda a altura da faixa e rola por dentro. */
+.cv-workspace-simulator { flex-direction: row; }
+
+/* Master/detail abaixo de 1024px: com conversa aberta, some a lista; sem ela, some o detalhe.
+   Empilhar os dois na mesma altura fixa dava duas fatias inúteis. */
+@media (max-width: 1023px) {
+  .cv-workspace-grid[data-detail='open'] .cv-workspace-list { display: none; }
+  .cv-workspace-grid[data-detail='closed'] .cv-workspace-detail { display: none; }
+}
+
+@media (min-width: 1024px) {
+  .cv-workspace-grid { grid-template-columns: 360px minmax(0, 1fr); }
+  /* Entre `lg` e `xl` as três não cabem — sobrariam ~100px para a conversa e o texto quebraria uma
+     palavra por linha. Enquanto se testa UMA conversa, é a lista que menos importa. */
+  .cv-workspace-grid--with-simulator { grid-template-columns: minmax(0, 1fr) 24rem; }
+  .cv-workspace-grid--with-simulator .cv-workspace-list { display: none; }
+}
+
+@media (min-width: 1280px) {
+  .cv-workspace-grid--with-simulator { grid-template-columns: 320px minmax(0, 1fr) 24rem; }
+  .cv-workspace-grid--with-simulator .cv-workspace-list { display: flex; }
+}
+
+.cv-workspace-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.cv-workspace-transcript {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.75rem 1rem;
+}
+
+.cv-workspace-failure__link {
+  text-decoration: underline;
+}
+
+.cv-workspace-selection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid #bfdbfe;
+  background: #eff6ff;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: #1d4ed8;
+}
+
+.cv-workspace-selection__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.cv-workspace-selection__actions button {
+  min-height: 2.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid #bfdbfe;
+  padding: 0 0.625rem;
+}
+
+.dark .cv-workspace-selection {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+
+.dark .cv-workspace-selection__actions button {
+  border-color: #1e40af;
+}
+
+.cv-workspace-notice {
+  border-top: 1px solid var(--cv-border, #e5e7eb);
+  background: #f3f4f6;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.dark .cv-workspace-notice {
+  border-top-color: #374151;
+  background: #1f2937;
+  color: #9ca3af;
+}
+
+.cv-workspace-alert {
+  border-top: 1px solid rgb(254 202 202);
+  background: rgb(254 242 242);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(185 28 28);
+}
+.dark .cv-workspace-alert { background: rgb(69 10 10); color: rgb(252 165 165); border-color: rgb(127 29 29); }
+
+.cv-workspace-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.dark .cv-workspace-filters { border-color: rgb(51 65 85); }
+
+.cv-workspace-search {
+  width: 100%;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: transparent;
+}
+.dark .cv-workspace-search { border-color: rgb(71 85 105); color: rgb(226 232 240); }
+
+.cv-workspace-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-chips__legend { color: rgb(107 114 128); }
+.cv-workspace-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-chip--on { background: rgb(229 231 235); }
+.dark .cv-workspace-chip--on { background: rgb(51 65 85); }
+.cv-workspace-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }
+
+.cv-workspace-selectall {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.cv-workspace-rows { flex: 1; min-height: 0; overflow-y: auto; }
+
+.cv-workspace-empty { padding: 1rem; font-size: 0.875rem; color: rgb(107 114 128); }
+
+.cv-workspace-bulk {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgb(191 219 254);
+  background: rgb(239 246 255);
+  font-size: 0.75rem;
+}
+.dark .cv-workspace-bulk { background: rgb(23 37 84); border-color: rgb(30 58 138); }
+.cv-workspace-bulk__count { font-weight: 500; color: rgb(29 78 216); }
+.dark .cv-workspace-bulk__count { color: rgb(147 197 253); }
+.cv-workspace-bulk__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.cv-workspace-bulk__actions button {
+  border: 1px solid rgb(191 219 254);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-bulk__actions button:disabled { opacity: 0.5; }
+
+.cv-workspace-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid rgb(229 231 235);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: rgb(107 114 128);
+}
+.dark .cv-workspace-pager { border-color: rgb(51 65 85); }
+.cv-workspace-pager__buttons { display: flex; align-items: center; gap: 0.25rem; }
+.cv-workspace-pager__buttons button { padding: 0 0.5rem; }
+.cv-workspace-pager__buttons button:disabled { opacity: 0.4; }
+
+/* Modal de template do envio em lote. Sobre a tela inteira e não dentro da coluna da lista: a
+   escolha vale para todas as conversas marcadas, e ancorado na lista parecia filtro dela. */
+.cv-workspace-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgb(0 0 0 / 50%);
+}
+
+.cv-workspace-modal__box {
+  display: flex;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 80vh;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 25%);
+}
+
+.cv-workspace-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 1.25rem;
+}
+
+.cv-workspace-modal__header h3 {
+  font-weight: 600;
+}
+
+.cv-workspace-modal__header p {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.cv-workspace-modal__search {
+  border-bottom: 1px solid #f3f4f6;
+  padding: 0.75rem 1rem;
+}
+
+.cv-workspace-modal__search input {
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.cv-workspace-modal__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.cv-workspace-modal__item {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.125rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+.cv-workspace-modal__item:hover {
+  background: #f9fafb;
+}
+
+.cv-workspace-modal__item--on {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.cv-workspace-modal__item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.cv-workspace-modal__item-meta {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+.cv-workspace-modal__warning {
+  border-top: 1px solid #fde68a;
+  background: #fffbeb;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  color: #b45309;
+}
+
+.cv-workspace-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+  padding: 0.75rem 1rem;
+}
+
+.cv-workspace-modal__footer button {
+  min-height: 2.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0 0.875rem;
+  font-size: 0.875rem;
+}
+
+.cv-workspace-modal__footer button:last-child {
+  border-color: transparent;
+  background: #2563eb;
+  color: #fff;
+}
+
+.cv-workspace-modal__footer button:disabled {
+  opacity: 0.5;
+}
+
+.dark .cv-workspace-modal__box {
+  border-color: #374151;
+  background: #1f2937;
+}
+
+.dark .cv-workspace-modal__header,
+.dark .cv-workspace-modal__footer {
+  border-color: #374151;
+}
+
+.dark .cv-workspace-modal__search {
+  border-color: #374151;
+}
+
+.dark .cv-workspace-modal__search input {
+  border-color: #4b5563;
+  background: #374151;
+  color: #f3f4f6;
+}
+
+.dark .cv-workspace-modal__item:hover {
+  background: rgb(55 65 81 / 50%);
+}
+
+.dark .cv-workspace-modal__item--on {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+
+.dark .cv-workspace-modal__warning {
+  border-color: #92400e;
+  background: rgb(69 26 3 / 40%);
+  color: #fbbf24;
+}
+
+.dark .cv-workspace-modal__footer button {
+  border-color: #4b5563;
+  color: #f3f4f6;
+}

package/src/workspace/BulkTemplateModal.tsx

@@ -0,0 +1,130 @@
+/**
+ * Escolha do template para o envio em lote.
+ *
+ * Fora da janela de 24h só template abre conversa, e a lista aprovada muda por conta da Meta — daí
+ * a busca: quem tem trinta templates não acha o certo rolando. Só aparece quando o host implementa
+ * `listTemplates`; sem a listagem não há o que escolher, e o envio cai no template padrão.
+ *
+ * O aviso de "nenhuma selecionada está fora da janela" existe porque o envio parecia falhar em
+ * silêncio: dentro da janela a Meta recusa o template, e a tela não dizia por quê.
+ */
+
+import { useEffect, useMemo, useState } from 'react'
+
+import { useConversations } from '../providers/ConversationsProvider'
+import type { ConversationTemplate } from '../providers/types'
+import type { ConversationsWorkspaceLabels } from './labels'
+
+export interface BulkTemplateModalProps {
+  readonly labels: ConversationsWorkspaceLabels
+  /** Quantas das selecionadas estão fora da janela — as únicas que o template atinge. */
+  readonly expiredCount: number
+  readonly sending: boolean
+  readonly onClose: () => void
+  readonly onSend: (templateName: string | undefined) => void
+}
+
+export function BulkTemplateModal({
+  labels,
+  expiredCount,
+  sending,
+  onClose,
+  onSend,
+}: BulkTemplateModalProps) {
+  const context = useConversations()
+  if (!context) {
+    throw new Error('BulkTemplateModal requires an ancestor <ConversationsProvider>')
+  }
+  const { api } = context
+
+  const [templates, setTemplates] = useState<readonly ConversationTemplate[]>([])
+  const [search, setSearch] = useState('')
+  const [selected, setSelected] = useState('')
+
+  useEffect(() => {
+    let active = true
+    void api
+      .listTemplates?.()
+      .then((loaded) => {
+        if (active) setTemplates(loaded)
+      })
+      .catch(() => {
+        // Lista vazia já comunica o que houve; um alerta a mais competiria com o atendimento.
+      })
+    return () => {
+      active = false
+    }
+  }, [api])
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase()
+    if (!term) return templates
+    return templates.filter((template) => template.name.toLowerCase().includes(term))
+  }, [templates, search])
+
+  return (
+    <div className="cv-workspace-modal" role="dialog" aria-modal="true" aria-label={labels.templateModalTitle}>
+      <div className="cv-workspace-modal__box">
+        <header className="cv-workspace-modal__header">
+          <div>
+            <h3>{labels.templateModalTitle}</h3>
+            <p>{labels.templateModalAvailable(templates.length)}</p>
+          </div>
+          <button type="button" onClick={onClose} aria-label={labels.templateModalCancel}>
+            ✕
+          </button>
+        </header>
+
+        <div className="cv-workspace-modal__search">
+          <input
+            type="search"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={labels.templateModalSearch}
+            autoFocus
+          />
+        </div>
+
+        <div className="cv-workspace-modal__list">
+          {filtered.length === 0 ? <p className="cv-workspace-empty">{labels.templateModalEmpty}</p> : null}
+          {filtered.map((template) => (
+            <button
+              key={template.name}
+              type="button"
+              // Reclicar desmarca: sem isso não havia como voltar ao template padrão depois de
+              // escolher um por engano.
+              onClick={() => setSelected(template.name === selected ? '' : template.name)}
+              aria-pressed={template.name === selected}
+              className={`cv-workspace-modal__item${
+                template.name === selected ? ' cv-workspace-modal__item--on' : ''
+              }`}
+            >
+              <span className="cv-workspace-modal__item-name">{template.name}</span>
+              <span className="cv-workspace-modal__item-meta">
+                {template.language}
+                {template.category ? ` · ${template.category.toLowerCase()}` : ''}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {expiredCount === 0 ? (
+          <p className="cv-workspace-modal__warning">{labels.templateModalNoneExpired}</p>
+        ) : null}
+
+        <footer className="cv-workspace-modal__footer">
+          <button type="button" onClick={onClose}>
+            {labels.templateModalCancel}
+          </button>
+          <button
+            type="button"
+            disabled={sending || expiredCount === 0}
+            onClick={() => onSend(selected || undefined)}
+          >
+            {sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)}
+          </button>
+        </footer>
+      </div>
+    </div>
+  )
+}