@adatechnology/conversations-ui 0.1.0 → 0.2.0

package/src/index.ts

@@ -254,11 +254,38 @@ export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
 export type { ConversationHeaderUtility } from './ConversationHeader'
 export { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
 export type { QuickReply } from './MessageComposer'
+// `QuickReply` já nomeia o chip; a mensagem pronta cadastrada sai como `SavedQuickReply` para não quebrar hosts.
+export type {
+  QuickReply as SavedQuickReply,
+  QuickReplyInput,
+  QuickReplyAttachment,
+  QueuedAttachment,
+  StoredAttachmentSendResult,
+  ConversationVariable,
+} from './quickReplies/quickReply.types'
+
+// Só o que o host precisa para montar a fila e ler seus tetos. O resto (validação de arquivo,
+// ordenação de envio, limite de concorrência de upload) é orquestração interna do pacote — expô-lo
+// convida o host a reimplementar o pipeline por fora em vez de usar `ConversationPane` (L2).
+export { QUICK_REPLY_ATTACHMENT_LIMIT } from './quickReplies/quickReply.types'
+export {
+  DEFAULT_MAX_ATTACHMENT_SIZE_BYTES,
+  resolveMaxAttachmentSizeBytes,
+  queuedAttachmentsFromQuickReply,
+} from './quickReplies/quickReplyAttachments'
+export type { MaxAttachmentSizeBytes, OutgoingItems } from './quickReplies/quickReplyAttachments'
+export type { AttachmentFileRejection, ValidateAttachmentFilesResult } from './quickReplies/quickReplyAttachmentUpload'
+export { QuickRepliesWorkspace, QuickRepliesPicker } from './quickReplies'
+export type { QuickRepliesWorkspaceProps, QuickRepliesPickerProps } from './quickReplies'
+export { DEFAULT_QUICK_REPLIES_PICKER_LABELS, DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS } from './quickReplies/labels'
+export type { QuickRepliesPickerLabels, QuickRepliesWorkspaceLabels } from './quickReplies/labels'
+export { normalizeForSearch, filterQuickReplies, highlightMatch } from './quickReplies/quickReplySearch'
+export type { FilterQuickRepliesParams, MatchSegment } from './quickReplies/quickReplySearch'
 
 // Tela de atendimento completa. Fica no export principal — e não num subpath — porque é a
 // composição padrão do pacote: quem instala conversas quer esta tela, e as peças continuam
 // exportadas ao lado para quem precisar montar outra.
-export { ConversationsWorkspace, ConversationPane, ConversationsInboxList } from './workspace'
+export { ConversationsWorkspace, ConversationPane, ConversationsInboxList, QueuedAttachmentsList } from './workspace'
 export { useConversationsInbox, CONVERSATIONS_PER_PAGE, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS } from './workspace'
 export type {
   ConversationsWorkspaceProps,

package/src/preview/createMockConversationsApi.ts

@@ -16,6 +16,7 @@ import type {
   ConversationsApi,
   ListConversationsParams,
 } from '../providers/types'
+import type { QuickReply, QuickReplyInput } from '../quickReplies/quickReply.types'
 import { PREVIEW_DOCUMENTS } from './previewFixtures'
 import { previewFileBase64, previewFileUrl } from './previewMediaSource'
 import type { PreviewStore } from './previewStore'
@@ -36,6 +37,38 @@ const PREVIEW_TEMPLATES: readonly ConversationTemplate[] = [
   { name: 'promocao_taxa', language: 'pt_BR', status: 'PENDING', category: 'MARKETING' },
 ]
 
+const PREVIEW_QUICK_REPLIES: QuickReply[] = [
+  { id: '1', title: 'Boas-vindas', shortcut: 'ola', body: 'Olá {{nome}}, bem-vindo!' },
+  {
+    id: '2',
+    title: 'Lista de documentos',
+    shortcut: 'documentos',
+    body: 'Segue a lista de documentos necessários para prosseguir com sua solicitação.',
+    attachments: [
+      { uploadId: 'upload-1', filename: 'Checklist de documentos.pdf', mimeType: 'application/pdf', sizeBytes: 245000 },
+      { uploadId: 'upload-2', filename: 'Tabela de taxas.png', mimeType: 'image/png', sizeBytes: 125000 },
+    ],
+  },
+  {
+    id: '3',
+    title: 'Prazo de análise',
+    shortcut: 'prazo',
+    body: 'Sua solicitação está em análise e o resultado sairá em até 48 horas.',
+  },
+  {
+    id: '4',
+    title: 'Agendar ligação',
+    shortcut: 'ligacao',
+    body: 'Olá {{nome}}, você gostaria de agendar uma ligação comigo? Que horas funcionam melhor para você?',
+  },
+  {
+    id: '5',
+    title: 'Encerramento',
+    shortcut: 'tchau',
+    body: 'Obrigado {{nome_completo}}, foi um prazer atender você. Qualquer dúvida, é só chamar!',
+  },
+]
+
 /**
  * O mock satisfaz `ConversationsApi`, mas com o retorno de `fetchConversations` ESTREITADO para a
  * forma paginada. Sem isto o contrato — que aceita array ou página — obrigaria todo consumidor do
@@ -267,5 +300,156 @@ export function createMockConversationsApi(params: CreateMockConversationsApiPar
     listTemplates(): Promise<ConversationTemplate[]> {
       return withLatency(() => [...PREVIEW_TEMPLATES])
     },
+
+    listQuickReplies(searchParams?: { search?: string }): Promise<QuickReply[]> {
+      return withLatency(() => {
+        let results = [...PREVIEW_QUICK_REPLIES]
+        if (searchParams?.search) {
+          const term = searchParams.search.toLowerCase()
+          results = results.filter(
+            (qr) =>
+              qr.title.toLowerCase().includes(term) ||
+              qr.shortcut.toLowerCase().includes(term) ||
+              qr.body.toLowerCase().includes(term),
+          )
+        }
+        return results
+      })
+    },
+
+    createQuickReply(input: QuickReplyInput): Promise<QuickReply> {
+      return withLatency(() => {
+        // Check for duplicate shortcut
+        if (PREVIEW_QUICK_REPLIES.some((qr) => qr.shortcut === input.shortcut)) {
+          const error = new Error('Atalho já existe') as unknown as {
+            code?: string
+            details?: unknown[]
+          }
+          error.code = 'QUICK_REPLY_SHORTCUT_TAKEN'
+          throw error
+        }
+        const newQuickReply: QuickReply = {
+          id: String(Date.now()),
+          title: input.title,
+          shortcut: input.shortcut,
+          body: input.body,
+        }
+        PREVIEW_QUICK_REPLIES.push(newQuickReply)
+        return newQuickReply
+      })
+    },
+
+    updateQuickReply(id: string, input: QuickReplyInput): Promise<QuickReply> {
+      return withLatency(() => {
+        const index = PREVIEW_QUICK_REPLIES.findIndex((qr) => qr.id === id)
+        if (index === -1) {
+          throw new Error('Mensagem pronta não encontrada')
+        }
+        // Check for duplicate shortcut (excluding current item)
+        if (PREVIEW_QUICK_REPLIES.some((qr) => qr.id !== id && qr.shortcut === input.shortcut)) {
+          const error = new Error('Atalho já existe') as unknown as {
+            code?: string
+            details?: unknown[]
+          }
+          error.code = 'QUICK_REPLY_SHORTCUT_TAKEN'
+          throw error
+        }
+        const updated: QuickReply = {
+          id,
+          title: input.title,
+          shortcut: input.shortcut,
+          body: input.body,
+        }
+        PREVIEW_QUICK_REPLIES[index] = updated
+        return updated
+      })
+    },
+
+    deleteQuickReply(id: string): Promise<void> {
+      return withLatency(() => {
+        const index = PREVIEW_QUICK_REPLIES.findIndex((qr) => qr.id === id)
+        if (index !== -1) {
+          PREVIEW_QUICK_REPLIES.splice(index, 1)
+        }
+      })
+    },
+
+    uploadQuickReplyAttachment(
+      file: File,
+      options: { readonly onProgress: (progress: number) => void; readonly signal: AbortSignal },
+    ): Promise<{ uploadId: string; filename: string; mimeType: string; sizeBytes: number }> {
+      return new Promise((resolve, reject) => {
+        if (options.signal.aborted) {
+          reject(new DOMException('Aborted', 'AbortError'))
+          return
+        }
+
+        const abortHandler = () => {
+          reject(new DOMException('Aborted', 'AbortError'))
+        }
+        options.signal.addEventListener('abort', abortHandler)
+
+        // Simulação de progresso ao longo de ~1.5s (1500ms)
+        const steps = 6
+        const stepDuration = 1500 / steps
+        let step = 0
+
+        const progressInterval = setInterval(() => {
+          if (options.signal.aborted) {
+            clearInterval(progressInterval)
+            options.signal.removeEventListener('abort', abortHandler)
+            reject(new DOMException('Aborted', 'AbortError'))
+            return
+          }
+
+          step += 1
+          const progress = step / steps
+          if (progress <= 1) {
+            options.onProgress(Math.round(progress * 100))
+          }
+
+          if (step >= steps) {
+            clearInterval(progressInterval)
+            options.signal.removeEventListener('abort', abortHandler)
+            resolve({
+              uploadId: `upload-${Date.now()}-${Math.random().toString(36).substring(7)}`,
+              filename: file.name,
+              mimeType: file.type,
+              sizeBytes: file.size,
+            })
+          }
+        }, stepDuration)
+      })
+    },
+
+    sendStoredAttachments(params: {
+      conversationId: string
+      uploadIds: readonly string[]
+      idempotencyKey: string
+    }): Promise<{ results: readonly { uploadId: string; status: 'sent' | 'failed' | 'skipped' }[] }> {
+      return withLatency(() => {
+        const results: { uploadId: string; status: 'sent' | 'failed' | 'skipped' }[] = []
+
+        for (let index = 0; index < params.uploadIds.length; index += 1) {
+          const uploadId = params.uploadIds[index] as string
+          // Simular falha para uploads cuja nome no preview contém "falha", e pular os seguintes
+          const isFailed = uploadId.includes('falha')
+          if (isFailed) {
+            results.push({ uploadId, status: 'failed' })
+            continue
+          }
+
+          // Se o anterior falhou, pular este
+          if (index > 0 && results[index - 1]?.status === 'failed') {
+            results.push({ uploadId, status: 'skipped' })
+            continue
+          }
+
+          results.push({ uploadId, status: 'sent' })
+        }
+
+        return { results }
+      })
+    },
   }
 }

package/src/providers/types.ts

@@ -1,3 +1,9 @@
+import type {
+  QuickReply,
+  QuickReplyAttachment,
+  QuickReplyInput,
+  StoredAttachmentSendResult,
+} from '../quickReplies/quickReply.types'
 import type { MessagePayload, MessageTranscription } from '../types'
 import type { ConversationChannel } from '../conversationChannel'
 
@@ -173,6 +179,34 @@ export interface ConversationsApi {
   markAllRead?(): Promise<void>
   listTemplates?(): Promise<ConversationTemplate[]>
 
+  /**
+   * Mensagens prontas do produto. Ausente, nada de mensagens prontas aparece; sem `create`,
+   * `update` e `delete` a tela de cadastro fica só leitura — a presença da função é a capacidade.
+   */
+  listQuickReplies?(params?: { search?: string }): Promise<QuickReply[]>
+  createQuickReply?(input: QuickReplyInput): Promise<QuickReply>
+  updateQuickReply?(id: string, input: QuickReplyInput): Promise<QuickReply>
+  deleteQuickReply?(id: string): Promise<void>
+  /**
+   * Sobe um anexo de mensagem pronta. O pacote não sabe COMO o host sobe (URL assinada, multipart):
+   * só precisa de progresso e cancelamento. Ausente, a tela de cadastro não oferece anexos.
+   * A miniatura de imagem reusa `getDocumentUrl(uploadId, 'inline')` — não há porta própria.
+   */
+  uploadQuickReplyAttachment?(
+    file: File,
+    options?: { onProgress?: (fraction: number) => void; signal?: AbortSignal },
+  ): Promise<QuickReplyAttachment>
+  /**
+   * Envia por referência anexos já guardados. A chave de idempotência protege o reenvio depois de
+   * queda de rede; o resultado vem por arquivo porque a falha é parcial. Ausente, mensagem pronta
+   * com anexo insere só o texto.
+   */
+  sendStoredAttachments?(params: {
+    conversationId: string
+    uploadIds: readonly string[]
+    idempotencyKey: string
+  }): Promise<{ results: readonly StoredAttachmentSendResult[] }>
+
   /**
    * Transcrição completa gerada pelo servidor. Existe ao lado de `buildTranscriptText`, que monta
    * a partir das mensagens já em memória: a tela costuma ter só a última página carregada, e

package/src/quickReplies/AttachmentsFormSection.tsx

@@ -0,0 +1,160 @@
+/**
+ * Seção de anexos do formulário de cadastro (QR-31), extraída de `QuickRepliesWorkspace`: lista de
+ * anexos já subidos (com reordenação), uploads em voo e recusas de arquivo. Some inteira quando o
+ * host não oferece `uploadQuickReplyAttachment` — a mesma regra de capacidade do resto do pacote.
+ */
+
+import { useRef } from 'react'
+import { Paperclip, X } from 'lucide-react'
+import { formatFileSize } from '../lib/format'
+import type { PendingAttachmentUpload } from './useQuickReplyAttachmentUploads'
+import type { AttachmentFileRejection } from './quickReplyAttachmentUpload'
+import type { QuickReplyAttachment } from './quickReply.types'
+import type { QuickRepliesWorkspaceLabels } from './labels'
+
+export type AttachmentsFormSectionProps = {
+  readonly labels: QuickRepliesWorkspaceLabels
+  readonly attachments: readonly QuickReplyAttachment[]
+  readonly pendingUploads: readonly PendingAttachmentUpload[]
+  readonly attachmentRejections: readonly AttachmentFileRejection[]
+  readonly onAddFiles: (files: FileList) => void
+  readonly onRetryUpload: (localId: string) => void
+  readonly onCancelUpload: (localId: string) => void
+  readonly onRemoveAttachment: (uploadId: string) => void
+  readonly onMoveAttachment: (index: number, direction: -1 | 1) => void
+  readonly onDismissRejections: () => void
+}
+
+export function AttachmentsFormSection({
+  labels: text,
+  attachments,
+  pendingUploads,
+  attachmentRejections,
+  onAddFiles,
+  onRetryUpload,
+  onCancelUpload,
+  onRemoveAttachment,
+  onMoveAttachment,
+  onDismissRejections,
+}: AttachmentsFormSectionProps) {
+  const attachmentFileInputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <div className="space-y-2">
+      <span className="block text-sm font-medium">{text.attachmentsTitle}</span>
+
+      {attachments.length === 0 && pendingUploads.length === 0 ? (
+        <p className="text-xs text-gray-500 dark:text-gray-400">{text.attachmentsEmpty}</p>
+      ) : (
+        <ul className="space-y-1">
+          {attachments.map((attachment, index) => (
+            <li
+              key={attachment.uploadId}
+              className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5 text-xs dark:border-gray-700"
+            >
+              <Paperclip aria-hidden="true" className="h-3.5 w-3.5 flex-none text-gray-400" />
+              <span className="min-w-0 flex-1 truncate">{attachment.filename}</span>
+              <span className="flex-none text-gray-400">{formatFileSize(attachment.sizeBytes)}</span>
+              <button
+                type="button"
+                disabled={index === 0}
+                aria-label={text.attachmentMoveUp}
+                onClick={() => onMoveAttachment(index, -1)}
+                className="flex-none disabled:opacity-30"
+              >
+                ↑
+              </button>
+              <button
+                type="button"
+                disabled={index === attachments.length - 1}
+                aria-label={text.attachmentMoveDown}
+                onClick={() => onMoveAttachment(index, 1)}
+                className="flex-none disabled:opacity-30"
+              >
+                ↓
+              </button>
+              <button
+                type="button"
+                aria-label={text.attachmentRemove}
+                onClick={() => onRemoveAttachment(attachment.uploadId)}
+                className="flex-none text-red-600 dark:text-red-400"
+              >
+                <X aria-hidden="true" className="h-3.5 w-3.5" />
+              </button>
+            </li>
+          ))}
+          {pendingUploads.map((pending) => (
+            <li
+              key={pending.localId}
+              className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5 text-xs dark:border-gray-700"
+              aria-busy={pending.status === 'uploading'}
+              aria-live="polite"
+            >
+              <Paperclip aria-hidden="true" className="h-3.5 w-3.5 flex-none text-gray-400" />
+              <span className="min-w-0 flex-1 truncate">{pending.file.name}</span>
+              {pending.status === 'uploading' ? (
+                <span className="flex-none text-gray-500 dark:text-gray-400">
+                  {text.attachmentUploading(Math.round(pending.progress * 100))}
+                </span>
+              ) : (
+                <>
+                  <span role="alert" className="flex-none text-red-600 dark:text-red-400">
+                    {pending.error}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => onRetryUpload(pending.localId)}
+                    className="flex-none font-medium text-blue-600 hover:underline dark:text-blue-400"
+                  >
+                    {text.attachmentRetry}
+                  </button>
+                </>
+              )}
+              <button
+                type="button"
+                aria-label={text.attachmentCancel}
+                onClick={() => onCancelUpload(pending.localId)}
+                className="flex-none text-gray-400"
+              >
+                <X aria-hidden="true" className="h-3.5 w-3.5" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {attachmentRejections.length > 0 ? (
+        <div role="alert" className="space-y-0.5 text-xs text-red-600 dark:text-red-400">
+          {attachmentRejections.map((rejection, index) => (
+            <p key={index}>
+              {rejection.reason === 'limit'
+                ? text.attachmentLimitReached
+                : text.attachmentTooLarge(rejection.file.name)}
+            </p>
+          ))}
+          <button type="button" onClick={onDismissRejections} className="hover:underline">
+            {text.cancel}
+          </button>
+        </div>
+      ) : null}
+
+      <input
+        ref={attachmentFileInputRef}
+        type="file"
+        multiple
+        hidden
+        onChange={(event) => {
+          if (event.target.files) onAddFiles(event.target.files)
+          event.target.value = ''
+        }}
+      />
+      <button
+        type="button"
+        onClick={() => attachmentFileInputRef.current?.click()}
+        className="text-xs font-medium text-blue-600 hover:underline dark:text-blue-400"
+      >
+        {text.attachmentsAdd}
+      </button>
+    </div>
+  )
+}

package/src/quickReplies/QuickRepliesPicker.test.tsx

@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { QuickRepliesPicker } from './QuickRepliesPicker'
+import type { QuickReply } from './quickReply.types'
+
+const ITEMS: QuickReply[] = [
+  { id: '1', title: 'Saudação', shortcut: 'ola', body: 'Olá!' },
+  { id: '2', title: 'Pedido de documento', shortcut: 'doc', body: 'Envie o RG.' },
+]
+
+const GREETING_WITH_VARIABLE: QuickReply = {
+  id: '3',
+  title: 'Boas-vindas',
+  shortcut: 'bv',
+  body: 'Olá {{nome}}, bem-vindo!',
+}
+
+describe('QuickRepliesPicker', () => {
+  it('mostra o estado vazio quando não há mensagens cadastradas', () => {
+    const markup = renderToStaticMarkup(
+      <QuickRepliesPicker
+        id="qr"
+        items={[]}
+        search=""
+        highlightedIndex={0}
+        isLoading={false}
+        onHover={() => {}}
+        onSelect={() => {}}
+      />,
+    )
+    expect(markup).toContain('Nenhuma mensagem pronta cadastrada ainda.')
+  })
+
+  it('mostra o estado de nenhum resultado quando a busca não acha nada', () => {
+    const markup = renderToStaticMarkup(
+      <QuickRepliesPicker
+        id="qr"
+        items={[]}
+        search="boleto"
+        highlightedIndex={0}
+        isLoading={false}
+        onHover={() => {}}
+        onSelect={() => {}}
+      />,
+    )
+    expect(markup).toContain('Nenhuma mensagem encontrada.')
+  })
+
+  it('mostra o carregamento antes da lista', () => {
+    const markup = renderToStaticMarkup(
+      <QuickRepliesPicker
+        id="qr"
+        items={[]}
+        search=""
+        highlightedIndex={0}
+        isLoading
+        onHover={() => {}}
+        onSelect={() => {}}
+      />,
+    )
+    expect(markup).toContain('Carregando mensagens prontas')
+  })
+
+  it('marca a opção destacada com aria-selected', () => {
+    const markup = renderToStaticMarkup(
+      <QuickRepliesPicker
+        id="qr"
+        items={ITEMS}
+        search=""
+        highlightedIndex={1}
+        isLoading={false}
+        onHover={() => {}}
+        onSelect={() => {}}
+      />,
+    )
+    expect(markup).toContain('id="qr-option-1"')
+    expect(markup).toMatch(/id="qr-option-1"[^>]*aria-selected="true"/)
+    expect(markup).toMatch(/id="qr-option-0"[^>]*aria-selected="false"/)
+  })
+
+  it('destaca o trecho buscado sem produzir HTML a partir do texto cadastrado', () => {
+    const markup = renderToStaticMarkup(
+      <QuickRepliesPicker
+        id="qr"
+        items={ITEMS}
+        search="doc"
+        highlightedIndex={0}
+        isLoading={false}
+        onHover={() => {}}
+        onSelect={() => {}}
+      />,
+    )
+    expect(markup).toContain('<mark')
+    expect(markup).toContain('Pedido de ')
+  })
+
+  it('mostra a prévia do corpo com a variável já resolvida (QR-04), nunca o marcador cru', () => {
+    const markup = renderToStaticMarkup(
+      <QuickRepliesPicker
+        id="qr"
+        items={[GREETING_WITH_VARIABLE]}
+        search=""
+        highlightedIndex={0}
+        isLoading={false}
+        onHover={() => {}}
+        onSelect={() => {}}
+        variables={{ nome: 'João' }}
+      />,
+    )
+    expect(markup).toContain('Olá João, bem-vindo!')
+    expect(markup).not.toContain('{{nome}}')
+  })
+})