@adatechnology/conversations-ui 0.1.0-rc.8 → 0.1.0

package/src/settings/TranscriptionSettingsForm.tsx

@@ -0,0 +1,190 @@
+import type { FormEvent } from 'react'
+import { AudioLines, Save } from 'lucide-react'
+import type { TranscriptionMode } from '../types'
+
+export interface TranscriptionSettingsFormLabels {
+  sectionTitle: string
+  enabled: string
+  enabledHint: string
+  modeTitle: string
+  modeAuto: string
+  modeAutoHint: string
+  modeOnDemand: string
+  modeOnDemandHint: string
+  unavailable: string
+  save: string
+  saving: string
+  saveSuccess: string
+}
+
+const DEFAULT_LABELS: TranscriptionSettingsFormLabels = {
+  sectionTitle: 'Transcrição de áudio',
+  enabled: 'Transcrever notas de voz',
+  enabledHint: 'Converte o áudio do cliente em texto, que o atendente lê e copia direto da conversa.',
+  modeTitle: 'Quando transcrever',
+  modeAuto: 'Automaticamente',
+  modeAutoHint: 'Toda nota de voz recebida é transcrita na hora. Mais cômodo, consome mais cota.',
+  modeOnDemand: 'Quando o atendente pedir',
+  modeOnDemandHint: 'Transcreve só ao clicar no botão da conversa. Consome cota apenas com áudio que alguém vai ler.',
+  unavailable: 'Transcrição não está disponível neste ambiente — fale com quem administra a instalação.',
+  save: 'Salvar',
+  saving: 'Salvando...',
+  saveSuccess: 'Configuração de transcrição salva.',
+}
+
+export interface TranscriptionSettingsFormProps {
+  enabled: boolean
+  onEnabledChange: (value: boolean) => void
+  mode: TranscriptionMode
+  onModeChange: (value: TranscriptionMode) => void
+  onSave: (event: FormEvent) => void
+  /**
+   * A capacidade existe no servidor (engine e credencial configurados)?
+   *
+   * Distinto de `enabled`: isto é "o ambiente consegue", aquilo é "esta empresa quer". Sem a
+   * distinção, um lojista ligaria o interruptor num ambiente sem engine e concluiria que o produto
+   * está quebrado — o texto nunca apareceria e nada explicaria por quê.
+   */
+  isAvailable?: boolean
+  saving?: boolean
+  saveSuccess?: boolean
+  labels?: Partial<TranscriptionSettingsFormLabels>
+}
+
+/**
+ * Interruptor de transcrição por empresa, para a tela de configurações.
+ *
+ * Puramente apresentacional, como os outros forms daqui: quem persiste é o host. O pacote não sabe a
+ * rota, e a política vive nas configurações do módulo (`settings.transcriptionEnabled`), não em
+ * variável de ambiente — mudar de ideia sobre transcrever não deveria exigir deploy.
+ */
+export function TranscriptionSettingsForm({
+  enabled,
+  onEnabledChange,
+  mode,
+  onModeChange,
+  onSave,
+  isAvailable = true,
+  saving = false,
+  saveSuccess = false,
+  labels: labelsOverride,
+}: TranscriptionSettingsFormProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelsOverride }
+
+  return (
+    <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <div className="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
+        <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-1.5">
+          <AudioLines size={14} className="text-blue-600 dark:text-blue-400" />
+          {labels.sectionTitle}
+        </h2>
+      </div>
+
+      <form onSubmit={onSave} className="p-6 space-y-5">
+        {!isAvailable && (
+          <div className="bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-xl px-4 py-3 text-sm text-amber-800 dark:text-amber-300">
+            {labels.unavailable}
+          </div>
+        )}
+
+        <label className="flex items-start gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onChange={(event) => onEnabledChange(event.target.checked)}
+            disabled={!isAvailable}
+            className="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
+          />
+          <span>
+            <span className="block text-sm font-medium text-gray-700 dark:text-gray-300">{labels.enabled}</span>
+            <span className="block text-xs text-gray-500 dark:text-gray-400">{labels.enabledHint}</span>
+          </span>
+        </label>
+
+        {/* O modo só aparece quando ligado: escolher "quando transcrever" sem transcrever nada é uma
+            pergunta sem consequência, e ler as duas opções gasta atenção do operador à toa. */}
+        {enabled && (
+          <fieldset disabled={!isAvailable} className="space-y-2.5">
+            <legend className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{labels.modeTitle}</legend>
+
+            <ModeOption
+              value="onDemand"
+              current={mode}
+              onSelect={onModeChange}
+              title={labels.modeOnDemand}
+              hint={labels.modeOnDemandHint}
+            />
+            <ModeOption
+              value="auto"
+              current={mode}
+              onSelect={onModeChange}
+              title={labels.modeAuto}
+              hint={labels.modeAutoHint}
+            />
+          </fieldset>
+        )}
+
+        {saveSuccess && (
+          <div className="bg-green-50 dark:bg-green-950/40 border border-green-200 dark:border-green-800 rounded-xl px-4 py-3 text-sm text-green-700 dark:text-green-400">
+            {labels.saveSuccess}
+          </div>
+        )}
+
+        <div className="flex justify-end">
+          <button
+            data-cv-tooltip={saving ? labels.saving : labels.save} aria-label={saving ? labels.saving : labels.save}
+            type="submit"
+            disabled={saving || !isAvailable}
+            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"
+          >
+            {saving ? (
+              <span className="w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" />
+            ) : (
+              <Save size={14} />
+            )}
+            {saving ? labels.saving : labels.save}
+          </button>
+        </div>
+      </form>
+    </section>
+  )
+}
+
+function ModeOption({
+  value,
+  current,
+  onSelect,
+  title,
+  hint,
+}: {
+  value: TranscriptionMode
+  current: TranscriptionMode
+  onSelect: (value: TranscriptionMode) => void
+  title: string
+  hint: string
+}) {
+  const isSelected = current === value
+
+  return (
+    <label
+      className={`flex items-start gap-3 cursor-pointer rounded-xl border px-4 py-3 transition-colors ${
+        isSelected
+          ? 'border-blue-500 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/30'
+          : 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600'
+      }`}
+    >
+      <input
+        type="radio"
+        name="transcription-mode"
+        value={value}
+        checked={isSelected}
+        onChange={() => onSelect(value)}
+        className="mt-0.5 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+      />
+      <span>
+        <span className="block text-sm font-medium text-gray-700 dark:text-gray-300">{title}</span>
+        <span className="block text-xs text-gray-500 dark:text-gray-400">{hint}</span>
+      </span>
+    </label>
+  )
+}

package/src/settings/WelcomeFarewellForm.tsx

@@ -104,6 +104,7 @@ export function WelcomeFarewellForm({
 
         <div className="flex justify-end">
           <button
+            data-cv-tooltip={saving ? labels.saving : labels.save} aria-label={saving ? labels.saving : labels.save}
             type="submit"
             disabled={saving}
             className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"

package/src/settings/WhatsAppCreateTemplateForm.tsx

@@ -297,6 +297,7 @@ export function WhatsAppCreateTemplateForm({
 
         <div className="flex justify-end">
           <button
+            data-cv-tooltip={submitting ? labels.sending : labels.sendForApproval} aria-label={submitting ? labels.sending : labels.sendForApproval}
             type="submit"
             disabled={submitting || !value.name || !value.bodyText}
             className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"

package/src/settings/WhatsAppTemplateSettingsForm.tsx

@@ -132,6 +132,7 @@ export function WhatsAppTemplateSettingsForm({
           <div className="flex items-center justify-between mb-1.5">
             <label className="text-sm font-medium text-gray-700 dark:text-gray-300">{labels.templateLabel}</label>
             <button
+              data-cv-tooltip={labels.refreshList} aria-label={labels.refreshList}
               type="button"
               onClick={onRefreshTemplates}
               disabled={loadingTemplates}
@@ -180,6 +181,7 @@ export function WhatsAppTemplateSettingsForm({
           <div className="flex items-center justify-between mb-1.5">
             <label className="text-sm font-medium text-gray-700 dark:text-gray-300">{labels.variablesLabel}</label>
             <button
+              data-cv-tooltip={labels.addVariable} aria-label={labels.addVariable}
               type="button"
               onClick={() => onVariablesChange([...variables, ''])}
               className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline"
@@ -198,7 +200,7 @@ export function WhatsAppTemplateSettingsForm({
                     key={available.token}
                     type="button"
                     onClick={() => insertVariable(available.token)}
-                    title={`Inserir ${available.token}`}
+                    data-cv-tooltip={`Inserir ${available.token}`} aria-label={`Inserir ${available.token}`}
                     className="inline-flex items-center gap-1 rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
                   >
                     <code className="text-blue-600 dark:text-blue-300">{available.token}</code>
@@ -233,7 +235,7 @@ export function WhatsAppTemplateSettingsForm({
                   type="button"
                   onClick={() => removeVariable(index)}
                   className="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors flex-shrink-0"
-                  title={labels.removeVariable}
+                  data-cv-tooltip={labels.removeVariable} aria-label={labels.removeVariable}
                 >
                   <Trash2 size={14} />
                 </button>
@@ -250,6 +252,7 @@ export function WhatsAppTemplateSettingsForm({
 
         <div className="flex justify-end">
           <button
+            data-cv-tooltip={saving ? labels.saving : labels.save} aria-label={saving ? labels.saving : labels.save}
             type="submit"
             disabled={saving || !selectedTemplateName.trim()}
             className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"

package/src/settings/WhatsAppTemplatesSettings.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { WhatsAppTemplatesSettings } from './WhatsAppTemplatesSettings'
+import type { WhatsAppTemplatesSettingsProps } from './WhatsAppTemplatesSettings'
+
+function render(overrides: Partial<WhatsAppTemplatesSettingsProps> = {}): string {
+  return renderToStaticMarkup(
+    <WhatsAppTemplatesSettings
+      templates={[]}
+      selectedTemplateName=""
+      onSelectTemplate={() => {}}
+      variables={[]}
+      onVariablesChange={() => {}}
+      onSave={() => {}}
+      {...overrides}
+    />,
+  )
+}
+
+describe('WhatsAppTemplatesSettings', () => {
+  it('renderiza os formulários extras de papel na aba de seleção', () => {
+    const markup = render({ extraRoleForms: <div>MARCADOR_PAPEL_EXTRA</div> })
+
+    expect(markup).toContain('MARCADOR_PAPEL_EXTRA')
+  })
+
+  it('sem extraRoleForms, o comportamento é idêntico ao de antes', () => {
+    const markup = render()
+
+    expect(markup).not.toContain('MARCADOR_PAPEL_EXTRA')
+  })
+
+  it('aceita previewCompanyName e variableExamples em create sem quebrar a tipagem', () => {
+    const markup = render({
+      create: {
+        value: {
+          name: '',
+          category: 'UTILITY',
+          language: 'pt_BR',
+          headerType: 'NONE',
+          headerText: '',
+          bodyText: '',
+          footerText: '',
+        },
+        onChange: () => {},
+        onSubmit: () => {},
+        previewCompanyName: 'Empresa Teste',
+        variableExamples: ['João', '123'],
+      },
+    })
+
+    expect(markup).toContain('Criar template')
+  })
+
+  it('sem create, a aba de criação não aparece', () => {
+    const markup = render()
+
+    expect(markup).not.toContain('Criar template')
+  })
+})

package/src/settings/WhatsAppTemplatesSettings.tsx

@@ -8,14 +8,16 @@
  * Segue presentacional: nenhuma chamada de rede aqui. Templates, estado e handlers vêm por props.
  */
 
-import { useState, type FormEvent } from 'react'
+import { useState, type FormEvent, type ReactNode } from 'react'
 import {
   WhatsAppTemplateSettingsForm,
   type WhatsAppTemplateSummary,
   type WhatsAppTemplateVariableSuggestion,
+  type WhatsAppTemplateSettingsFormLabels,
 } from './WhatsAppTemplateSettingsForm'
 import {
   WhatsAppCreateTemplateForm,
+  type WhatsAppCreateTemplateFormLabels,
   type WhatsAppCreateTemplateResult,
   type WhatsAppCreateTemplateState,
 } from './WhatsAppCreateTemplateForm'
@@ -56,13 +58,26 @@ export interface WhatsAppTemplatesSettingsProps {
     onSubmit: (event: FormEvent) => void
     submitting?: boolean
     result?: WhatsAppCreateTemplateResult | null
+    labels?: Partial<WhatsAppCreateTemplateFormLabels>
+    /** Nome exibido na prévia do template criado; sem isto o form usa seu próprio fallback. */
+    previewCompanyName?: string
+    variableExamples?: readonly string[]
   }
   labels?: Partial<WhatsAppTemplatesSettingsLabels>
+  /** Vocabulário do formulário de seleção — separado de `labels`, que nomeia só as abas daqui. */
+  settingsLabels?: Partial<WhatsAppTemplateSettingsFormLabels>
+  /**
+   * Formulários extras de seleção (um por papel adicional de template, ex.: despedida), empilhados
+   * abaixo do principal na mesma sub-aba. Ausente = só o papel principal, comportamento de sempre.
+   */
+  extraRoleForms?: ReactNode
 }
 
 export function WhatsAppTemplatesSettings({
   labels: labelsOverride,
+  settingsLabels,
   create,
+  extraRoleForms,
   ...settingsProps
 }: WhatsAppTemplatesSettingsProps) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride }
@@ -72,6 +87,7 @@ export function WhatsAppTemplatesSettings({
     <div className="space-y-4">
       <nav className="flex gap-1 border-b" role="tablist">
         <button
+          data-cv-tooltip={labels.selectTab} aria-label={labels.selectTab}
           type="button"
           role="tab"
           aria-selected={tab === TEMPLATE_SETTINGS_TAB.SELECT}
@@ -85,6 +101,7 @@ export function WhatsAppTemplatesSettings({
             que não leva a nada. */}
         {create ? (
           <button
+            data-cv-tooltip={labels.createTab} aria-label={labels.createTab}
             type="button"
             role="tab"
             aria-selected={tab === TEMPLATE_SETTINGS_TAB.CREATE}
@@ -97,7 +114,10 @@ export function WhatsAppTemplatesSettings({
       </nav>
 
       {tab === TEMPLATE_SETTINGS_TAB.SELECT ? (
-        <WhatsAppTemplateSettingsForm {...settingsProps} />
+        <div className="space-y-6">
+          <WhatsAppTemplateSettingsForm {...settingsProps} {...(settingsLabels ? { labels: settingsLabels } : {})} />
+          {extraRoleForms}
+        </div>
       ) : create ? (
         <WhatsAppCreateTemplateForm {...create} />
       ) : null}