@adatechnology/conversations-ui 0.1.1 → 0.2.1

package/src/quickReplies/resolveConversationVariables.ts

@@ -0,0 +1,41 @@
+import type { RichComposerVariable } from '../RichMessageComposer'
+import type { ConversationVariable } from './quickReply.types'
+
+export type ResolveConversationVariablesParams = {
+  readonly conversationVariables?: readonly ConversationVariable[] | undefined
+  /** @deprecated Use `conversationVariables`. */
+  readonly quickReplyVariables?: Readonly<Record<string, string>> | undefined
+  /** @deprecated Use `conversationVariables`. */
+  readonly composerVariables?: readonly RichComposerVariable[] | undefined
+}
+
+export type ResolveConversationVariablesResult = {
+  readonly quickReplyVariables: Readonly<Record<string, string>> | undefined
+  readonly composerVariables: readonly RichComposerVariable[] | undefined
+}
+
+const MARKER_PATTERN = /^\{\{\s*([\w.]+)\s*\}\}$/
+
+/** Nome que `applyQuickReplyVariables` casa; marcador fora do formato cai no `id`. */
+function variableNameOf(variable: ConversationVariable): string {
+  return MARKER_PATTERN.exec(variable.marker)?.[1] ?? variable.id
+}
+
+/**
+ * Deriva os dois formatos antigos da lista nova. Quando a lista vem, ela manda — misturar as fontes
+ * faria o chip e o botão de variáveis mostrarem valores diferentes. Sem ela, as props antigas seguem
+ * valendo para os produtos que ainda não migraram.
+ */
+export function resolveConversationVariables({
+  conversationVariables,
+  quickReplyVariables,
+  composerVariables,
+}: ResolveConversationVariablesParams): ResolveConversationVariablesResult {
+  if (!conversationVariables) return { quickReplyVariables, composerVariables }
+  // Valor vazio não é oferecido: inserir o nada no texto só esconde que o dado falta.
+  const known = conversationVariables.filter((variable) => variable.value !== '')
+  return {
+    quickReplyVariables: Object.fromEntries(known.map((variable) => [variableNameOf(variable), variable.value])),
+    composerVariables: known.map(({ id, label, value }) => ({ id, label, value })),
+  }
+}

package/src/quickReplies/useQuickRepliesPicker.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'bun:test'
+
+import { nextHighlightedIndex } from './useQuickRepliesPicker'
+
+describe('nextHighlightedIndex', () => {
+  it('avança e roda para o começo no fim da lista (ArrowDown)', () => {
+    expect(nextHighlightedIndex(0, 3, 1)).toBe(1)
+    expect(nextHighlightedIndex(2, 3, 1)).toBe(0)
+  })
+
+  it('volta e roda para o fim no começo da lista (ArrowUp)', () => {
+    expect(nextHighlightedIndex(1, 3, -1)).toBe(0)
+    expect(nextHighlightedIndex(0, 3, -1)).toBe(2)
+  })
+
+  it('lista vazia sempre fica em zero', () => {
+    expect(nextHighlightedIndex(0, 0, 1)).toBe(0)
+    expect(nextHighlightedIndex(0, 0, -1)).toBe(0)
+  })
+})

package/src/quickReplies/useQuickRepliesPicker.ts

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { filterQuickReplies } from './quickReplySearch'
+import type { QuickReply } from './quickReply.types'
+
+export type UseQuickRepliesPickerParams = {
+  readonly isOpen: boolean
+  readonly search: string
+  readonly listQuickReplies?: (params?: { search?: string }) => Promise<QuickReply[]>
+  readonly quickReplyVariables?: Readonly<Record<string, string>>
+  readonly onSelect: (quickReply: QuickReply) => void
+  readonly onClose: () => void
+}
+
+/** Extraída para ser testável sem montar o hook: a aritmética do círculo é o que a tecla decide. */
+export function nextHighlightedIndex(current: number, length: number, delta: 1 | -1): number {
+  if (length === 0) return 0
+  return (current + delta + length) % length
+}
+
+export type UseQuickRepliesPickerResult = {
+  readonly items: readonly QuickReply[]
+  readonly isLoading: boolean
+  /** Sinalizador puro — a mensagem exibida é sempre a do rótulo do host, nunca `caught.message` cru. */
+  readonly hasError: boolean
+  readonly highlightedIndex: number
+  readonly setHighlightedIndex: (index: number) => void
+  readonly handleKeyDown: (event: { key: string; preventDefault: () => void }) => void
+  /** Refaz a busca ignorando o cache — usado quando o host quer forçar atualização da lista. */
+  readonly refetch: () => void
+}
+
+/**
+ * Estado do picker do atalho `/` e do botão de raio. A lista é da instalação inteira, não por
+ * conversa — carregada uma vez por instância do hook (`cacheRef`, sobrevive a fechar/abrir o
+ * picker) e nunca reconsultada só porque a conversa mudou. `requestIdRef` descarta resposta de
+ * pedido antigo: trocar de conversa ou reabrir rápido não pode deixar `isLoading` preso em `true`
+ * nem aplicar um resultado que não é mais o mais recente.
+ */
+export function useQuickRepliesPicker({
+  isOpen,
+  search,
+  listQuickReplies,
+  quickReplyVariables,
+  onSelect,
+  onClose,
+}: UseQuickRepliesPickerParams): UseQuickRepliesPickerResult {
+  const cacheRef = useRef<QuickReply[] | undefined>(undefined)
+  const requestIdRef = useRef(0)
+  const [items, setItems] = useState<QuickReply[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasError, setHasError] = useState(false)
+  const [highlightedIndex, setHighlightedIndex] = useState(0)
+
+  const load = useCallback(() => {
+    if (!listQuickReplies) return
+    const requestId = ++requestIdRef.current
+    setIsLoading(true)
+    setHasError(false)
+    listQuickReplies()
+      .then((result) => {
+        if (requestIdRef.current !== requestId) return
+        cacheRef.current = result
+        setItems(result)
+        setIsLoading(false)
+      })
+      .catch(() => {
+        if (requestIdRef.current !== requestId) return
+        setHasError(true)
+        setIsLoading(false)
+      })
+  }, [listQuickReplies])
+
+  useEffect(() => {
+    if (!isOpen || !listQuickReplies) return
+    if (cacheRef.current) {
+      setItems(cacheRef.current)
+      return
+    }
+    load()
+  }, [isOpen, listQuickReplies, load])
+
+  const refetch = useCallback(() => {
+    cacheRef.current = undefined
+    load()
+  }, [load])
+
+  const filtered = filterQuickReplies({ quickReplies: items, search, variables: quickReplyVariables })
+
+  useEffect(() => {
+    setHighlightedIndex(0)
+  }, [search, filtered.length])
+
+  const handleKeyDown = useCallback(
+    (event: { key: string; preventDefault: () => void }) => {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setHighlightedIndex((index) => nextHighlightedIndex(index, filtered.length, 1))
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setHighlightedIndex((index) => nextHighlightedIndex(index, filtered.length, -1))
+        return
+      }
+      if (event.key === 'Enter') {
+        const selected = filtered[highlightedIndex]
+        if (!selected) return
+        event.preventDefault()
+        onSelect(selected)
+        return
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        onClose()
+      }
+    },
+    [filtered, highlightedIndex, onSelect, onClose],
+  )
+
+  return { items: filtered, isLoading, hasError, highlightedIndex, setHighlightedIndex, handleKeyDown, refetch }
+}

package/src/quickReplies/useQuickRepliesWorkspace.test.ts

@@ -0,0 +1,222 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  insertAtCursor,
+  submitQuickReply,
+  validateQuickReplyInput,
+  type QuickRepliesWorkspaceApi,
+  type QuickRepliesWorkspaceEditing,
+} from './useQuickRepliesWorkspace'
+import { DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS } from './labels'
+import type { QuickReply } from './quickReply.types'
+
+const LABELS = DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS
+
+const VALID_EDITING: QuickRepliesWorkspaceEditing = {
+  id: null,
+  title: 'Saudação',
+  shortcut: 'ola',
+  body: 'Olá!',
+  attachments: [],
+}
+const SAVED: QuickReply = { id: '1', title: 'Saudação', shortcut: 'ola', body: 'Olá!' }
+
+describe('validateQuickReplyInput', () => {
+  it('aceita título, atalho e corpo dentro do limite', () => {
+    expect(validateQuickReplyInput({ title: 'Saudação', shortcut: 'ola', body: 'Olá!' }, LABELS)).toEqual({})
+  })
+
+  it('rejeita título vazio ou maior que 40 caracteres', () => {
+    expect(validateQuickReplyInput({ title: '', shortcut: 'ola', body: 'Olá!' }, LABELS).title).toBeDefined()
+    expect(
+      validateQuickReplyInput({ title: 'x'.repeat(41), shortcut: 'ola', body: 'Olá!' }, LABELS).title,
+    ).toBeDefined()
+  })
+
+  it('rejeita atalho com maiúscula, espaço ou acento', () => {
+    expect(validateQuickReplyInput({ title: 'T', shortcut: 'Ola', body: 'B' }, LABELS).shortcut).toBeDefined()
+    expect(validateQuickReplyInput({ title: 'T', shortcut: 'ol a', body: 'B' }, LABELS).shortcut).toBeDefined()
+    expect(validateQuickReplyInput({ title: 'T', shortcut: 'olá', body: 'B' }, LABELS).shortcut).toBeDefined()
+  })
+
+  it('aceita atalho com hífen e número', () => {
+    expect(validateQuickReplyInput({ title: 'T', shortcut: 'doc-2', body: 'B' }, LABELS).shortcut).toBeUndefined()
+  })
+
+  it('rejeita corpo vazio ou maior que 1000 caracteres', () => {
+    expect(validateQuickReplyInput({ title: 'T', shortcut: 'ola', body: '' }, LABELS).body).toBeDefined()
+    expect(validateQuickReplyInput({ title: 'T', shortcut: 'ola', body: 'x'.repeat(1001) }, LABELS).body).toBeDefined()
+  })
+})
+
+describe('submitQuickReply', () => {
+  it('cria quando id é null e chama createQuickReply', async () => {
+    const api: QuickRepliesWorkspaceApi = { createQuickReply: async () => SAVED }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({ outcome: 'saved', quickReply: SAVED })
+  })
+
+  it('atualiza quando há id e chama updateQuickReply com ele', async () => {
+    let calledWith: string | undefined
+    const api: QuickRepliesWorkspaceApi = {
+      updateQuickReply: async (id) => {
+        calledWith = id
+        return SAVED
+      },
+    }
+    const result = await submitQuickReply({ api, editing: { ...VALID_EDITING, id: '1' }, labels: LABELS })
+    expect(result).toEqual({ outcome: 'saved', quickReply: SAVED })
+    expect(calledWith).toBe('1')
+  })
+
+  it('manda attachmentUploadIds só quando o host tem a porta de upload (QR-30)', async () => {
+    let receivedInput: unknown
+    const withUpload: QuickRepliesWorkspaceApi = {
+      createQuickReply: async (input) => {
+        receivedInput = input
+        return SAVED
+      },
+      uploadQuickReplyAttachment: async () => ({ uploadId: 'x', filename: 'x', mimeType: 'x', sizeBytes: 1 }),
+    }
+    const editingWithAttachments = {
+      ...VALID_EDITING,
+      attachments: [{ uploadId: 'a', filename: 'a.pdf', mimeType: 'application/pdf', sizeBytes: 1 }],
+    }
+    await submitQuickReply({ api: withUpload, editing: editingWithAttachments, labels: LABELS })
+    expect((receivedInput as { attachmentUploadIds?: readonly string[] }).attachmentUploadIds).toEqual(['a'])
+
+    const withoutUpload: QuickRepliesWorkspaceApi = {
+      createQuickReply: async (input) => {
+        receivedInput = input
+        return SAVED
+      },
+    }
+    await submitQuickReply({ api: withoutUpload, editing: editingWithAttachments, labels: LABELS })
+    expect((receivedInput as { attachmentUploadIds?: readonly string[] }).attachmentUploadIds).toBeUndefined()
+  })
+
+  it('não chama a api quando a validação falha', async () => {
+    let called = false
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        called = true
+        return SAVED
+      },
+    }
+    const result = await submitQuickReply({ api, editing: { ...VALID_EDITING, title: '' }, labels: LABELS })
+    expect(result.outcome).toBe('invalid')
+    expect(called).toBe(false)
+  })
+
+  it('409 com code QUICK_REPLY_SHORTCUT_TAKEN vira erro no campo atalho', async () => {
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        throw { code: 'QUICK_REPLY_SHORTCUT_TAKEN' }
+      },
+    }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({ outcome: 'rejected', fieldErrors: { shortcut: LABELS.shortcutTaken } })
+  })
+
+  it('error.details[] com vários campos aponta cada um no seu campo', async () => {
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        throw {
+          details: [
+            { field: 'title', message: 'Título repetido' },
+            { field: 'shortcut', message: 'Atalho em uso' },
+          ],
+        }
+      },
+    }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({
+      outcome: 'rejected',
+      fieldErrors: { title: 'Título repetido', shortcut: 'Atalho em uso' },
+    })
+  })
+
+  it('erro sem details vira o rótulo do formulário, nunca a mensagem crua da exceção', async () => {
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        throw new Error('ECONNRESET: socket hang up')
+      },
+    }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({ outcome: 'rejected', fieldErrors: {}, formError: LABELS.saveError })
+  })
+
+  it('409 com code aninhado em error.response.data.error (axios) vira erro no atalho', async () => {
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        throw {
+          response: {
+            data: {
+              error: {
+                code: 'QUICK_REPLY_SHORTCUT_TAKEN',
+                message: 'Atalho já existe',
+                details: [{ field: 'shortcut', message: 'Atalho já existe' }],
+              },
+            },
+          },
+        }
+      },
+    }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({ outcome: 'rejected', fieldErrors: { shortcut: 'Atalho já existe' } })
+  })
+
+  it('erro aninhado em error.error (envelope { error: {...} }) vira erro no atalho', async () => {
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        throw {
+          error: {
+            code: 'QUICK_REPLY_SHORTCUT_TAKEN',
+            message: 'Atalho já existe',
+            details: [{ field: 'shortcut', message: 'Atalho já existe' }],
+          },
+        }
+      },
+    }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({ outcome: 'rejected', fieldErrors: { shortcut: 'Atalho já existe' } })
+  })
+
+  it('erro aninhado em error.body.error vira erro no atalho', async () => {
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        throw { body: { error: { code: 'QUICK_REPLY_SHORTCUT_TAKEN' } } }
+      },
+    }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({ outcome: 'rejected', fieldErrors: { shortcut: LABELS.shortcutTaken } })
+  })
+
+  it('erro que se referencia (error.error === error) não trava em recursão infinita', async () => {
+    const circular: Record<string, unknown> = {}
+    circular.error = circular
+    const api: QuickRepliesWorkspaceApi = {
+      createQuickReply: async () => {
+        throw circular
+      },
+    }
+    const result = await submitQuickReply({ api, editing: VALID_EDITING, labels: LABELS })
+    expect(result).toEqual({ outcome: 'rejected', fieldErrors: {}, formError: LABELS.saveError })
+  })
+
+  it('editando sem updateQuickReply na porta, rejeita com saveUnavailable em vez de fingir sucesso', async () => {
+    const api: QuickRepliesWorkspaceApi = {}
+    const result = await submitQuickReply({ api, editing: { ...VALID_EDITING, id: '1' }, labels: LABELS })
+    expect(result).toEqual({ outcome: 'rejected', fieldErrors: {}, formError: LABELS.saveUnavailable })
+  })
+})
+
+describe('insertAtCursor', () => {
+  it('insere o marcador na posição do cursor', () => {
+    expect(insertAtCursor('Olá !', 4, 4, '{{nome}}')).toEqual({ text: 'Olá {{nome}}!', caret: 12 })
+  })
+
+  it('troca a seleção pelo marcador', () => {
+    expect(insertAtCursor('Olá NOME!', 4, 8, '{{nome}}')).toEqual({ text: 'Olá {{nome}}!', caret: 12 })
+  })
+})