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

package/src/documents/labels.ts

@@ -0,0 +1,92 @@
+/**
+ * Vocabulário da biblioteca de arquivos. Sobrescrevível campo a campo: o produto troca "cliente"
+ * por "lead" ou o idioma inteiro sem manter uma cópia da tela para isso.
+ */
+
+export interface DocumentsWorkspaceLabels {
+  readonly title: string
+  readonly subtitle: (total: number) => string
+  readonly searchPlaceholder: string
+  readonly empty: string
+  readonly noResults: string
+  readonly loading: string
+  readonly failure: string
+  readonly view: string
+  readonly download: string
+  readonly remove: string
+  readonly removeConfirm: (filename: string) => string
+  readonly openConversation: string
+  readonly sourceFilter: string
+  readonly categoryFilter: string
+  readonly startDate: string
+  readonly endDate: string
+  readonly clearFilters: string
+  readonly selectAllPage: string
+  readonly selectRow: string
+  readonly bulkSelected: (count: number) => string
+  readonly bulkClear: string
+  readonly bulkDownloadZip: string
+  readonly bulkRemove: (count: number) => string
+  readonly bulkRemoveConfirm: (count: number) => string
+  readonly upload: string
+  readonly uploadError: string
+  readonly columnFilename: string
+  readonly columnContact: string
+  readonly columnType: string
+  readonly columnSize: string
+  readonly columnSource: string
+  readonly columnDate: string
+  readonly columnActions: string
+  readonly sourceLabels: Readonly<Record<string, string>>
+  readonly categoryLabels: Readonly<Record<string, string>>
+  readonly show: string
+  readonly perPage: string
+  readonly total: (count: number) => string
+  readonly page: (current: number, last: number) => string
+  readonly previousPage: string
+  readonly nextPage: string
+}
+
+export const DEFAULT_DOCUMENTS_WORKSPACE_LABELS: DocumentsWorkspaceLabels = {
+  title: 'Documentos',
+  subtitle: (total) => `${total} arquivo${total === 1 ? '' : 's'} trocado${total === 1 ? '' : 's'}`,
+  searchPlaceholder: 'Buscar por nome do arquivo ou telefone',
+  empty: 'Nenhum arquivo trocado ainda.',
+  noResults: 'Nenhum arquivo encontrado para os filtros aplicados.',
+  loading: 'Carregando arquivos…',
+  failure: 'Não foi possível carregar os arquivos.',
+  view: 'Visualizar',
+  download: 'Baixar',
+  remove: 'Excluir',
+  removeConfirm: (filename) => `Excluir "${filename}"?`,
+  openConversation: 'Abrir conversa',
+  sourceFilter: 'Origem',
+  categoryFilter: 'Tipo',
+  startDate: 'De',
+  endDate: 'Até',
+  clearFilters: 'Limpar filtros',
+  selectAllPage: 'Selecionar todos desta página',
+  selectRow: 'Selecionar arquivo',
+  bulkSelected: (count) => `${count} selecionado${count === 1 ? '' : 's'}`,
+  bulkClear: 'Limpar seleção',
+  bulkDownloadZip: 'Baixar em zip',
+  bulkRemove: (count) => `Excluir ${count}`,
+  bulkRemoveConfirm: (count) => `Excluir ${count} arquivo${count === 1 ? '' : 's'}?`,
+  upload: 'Enviar documento',
+  uploadError: 'Não foi possível enviar o arquivo.',
+  columnFilename: 'Arquivo',
+  columnContact: 'Contato',
+  columnType: 'Tipo',
+  columnSize: 'Tamanho',
+  columnSource: 'Origem',
+  columnDate: 'Recebido em',
+  columnActions: 'Ações',
+  sourceLabels: { customer: 'Cliente', agent: 'Atendente', bot: 'Bot' },
+  categoryLabels: { document: 'Documento', image: 'Imagem', audio: 'Áudio', video: 'Vídeo' },
+  show: 'Mostrar',
+  perPage: 'por página',
+  total: (count) => `${count} no total`,
+  page: (current, last) => `${current} / ${last}`,
+  previousPage: 'Página anterior',
+  nextPage: 'Próxima página',
+}

package/src/flows/FlowConnectionEdge.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * A aresta do editor, com o botão de desligar em cima dela.
+ *
+ * Existe porque desligar um fio não tinha caminho nenhum no canvas: as arestas são derivadas do
+ * grafo a cada render, então clicar e apertar Delete não tem onde guardar a seleção. O botão no
+ * hover resolve sem estado de seleção — e é o único lugar em que a pessoa já está olhando quando
+ * quer trocar o destino.
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from '@xyflow/react'
+import { X } from 'lucide-react'
+
+/** Folga para o ponteiro sair do traço e alcançar o botão sem que ele desapareça no caminho. */
+const HIDE_DELAY_MS = 320
+
+export type FlowConnectionEdgeData = {
+  /** Ausente em aresta que não se desliga daqui (salto entre fluxos via portal). */
+  readonly onDisconnect?: (() => void) | undefined
+  readonly disconnectLabel: string
+}
+
+export function FlowConnectionEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+  data,
+  interactionWidth,
+}: EdgeProps) {
+  const [hovered, setHovered] = useState(false)
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const { onDisconnect, disconnectLabel } = (data ?? {}) as FlowConnectionEdgeData
+
+  // Sair do traço não esconde o botão na hora: entre o fio e o botão há um vão de alguns pixels, e
+  // esconder no `mouseleave` seco fazia o alvo fugir do mouse a caminho dele.
+  function show() {
+    if (hideTimer.current) clearTimeout(hideTimer.current)
+    setHovered(true)
+  }
+
+  function scheduleHide() {
+    if (hideTimer.current) clearTimeout(hideTimer.current)
+    hideTimer.current = setTimeout(() => setHovered(false), HIDE_DELAY_MS)
+  }
+
+  useEffect(() => () => clearTimeout(hideTimer.current), [])
+
+  const [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  })
+
+  return (
+    <>
+      <BaseEdge id={id} path={path} markerEnd={markerEnd} style={style} interactionWidth={interactionWidth ?? 20} />
+
+      {/* Faixa invisível larga por cima do traço: o traço tem ~1,5px e mirar nele com o mouse é
+          tarefa de precisão que ninguém deveria ter. */}
+      <path
+        d={path}
+        fill="none"
+        strokeWidth={22}
+        stroke="transparent"
+        className="react-flow__edge-interaction"
+        onMouseEnter={show}
+        onMouseLeave={scheduleHide}
+      />
+
+      {onDisconnect && hovered && (
+        <EdgeLabelRenderer>
+          <button
+            type="button"
+            data-cv-tooltip={disconnectLabel}
+            aria-label={disconnectLabel}
+            onMouseEnter={show}
+            onMouseLeave={scheduleHide}
+            onClick={(event) => {
+              event.stopPropagation()
+              onDisconnect()
+            }}
+            style={{ transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` }}
+            className="nodrag nopan pointer-events-auto absolute flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 shadow-sm hover:border-red-400 hover:text-red-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
+          >
+            <X size={12} strokeWidth={2.5} />
+          </button>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  )
+}
+
+export const flowEdgeTypes = { flowConnection: FlowConnectionEdge }

package/src/flows/FlowGroupHeader.tsx

@@ -18,10 +18,20 @@ export function FlowGroupHeader({ data }: NodeProps) {
   return (
     <div className="flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap">
       <span>{label}</span>
-      <button type="button" onClick={onFocus} title={labels.flowGroup.focus} className="hover:text-blue-600 dark:hover:text-blue-400">
+      <button
+        type="button"
+        onClick={onFocus}
+        data-cv-tooltip={labels.flowGroup.focus} aria-label={labels.flowGroup.focus}
+        className="hover:text-blue-600 dark:hover:text-blue-400"
+      >
         <Maximize2 size={12} />
       </button>
-      <button type="button" onClick={onClose} title={labels.flowGroup.close} className="hover:text-red-600 dark:hover:text-red-400">
+      <button
+        type="button"
+        onClick={onClose}
+        data-cv-tooltip={labels.flowGroup.close} aria-label={labels.flowGroup.close}
+        className="hover:text-red-600 dark:hover:text-red-400"
+      >
         <X size={12} />
       </button>
     </div>

package/src/flows/FlowLegend.tsx

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * Legenda do canvas.
+ *
+ * O editor distingue os tipos de ligação só por cor e traço — opção escolhida, fallback, salto entre
+ * fluxos, conversa viva — e nada na tela dizia o que era o quê. Quem não desenhou o fluxo lia um
+ * emaranhado colorido; a cor sem chave não informa, decora.
+ *
+ * Os contornos e marcas do card entram na mesma chave: card solto, início do fluxo e o ícone de
+ * repetição são vocabulário do editor tanto quanto as cores dos fios.
+ *
+ * Recolhida por padrão: em canvas cheio, uma caixa fixa cobre card. Quem já conhece o vocabulário
+ * não paga o espaço, e quem não conhece está a um clique.
+ */
+
+import { useState } from 'react'
+import { ChevronDown, ChevronUp, RotateCcw } from 'lucide-react'
+
+import type { FlowEditorLabels } from './labels'
+import type { FlowNodeType } from './flowGraph'
+
+export type FlowLegendEdgeSample = {
+  readonly color: string
+  readonly dash?: string | undefined
+  readonly label: string
+}
+
+export type FlowLegendProps = {
+  readonly labels: FlowEditorLabels
+  readonly edgeSamples: readonly FlowLegendEdgeSample[]
+  /** Classe de cor por tipo de card — a mesma que o `FlowNodeCard` usa, para a chave bater. */
+  readonly nodeSwatches: readonly { readonly type: FlowNodeType; readonly className: string }[]
+}
+
+function EdgeSample({ sample }: { sample: FlowLegendEdgeSample }) {
+  return (
+    <li className="flex items-center gap-2">
+      <svg width="28" height="12" viewBox="0 0 28 12" aria-hidden="true" className="shrink-0">
+        <line
+          x1="2"
+          y1="6"
+          x2="26"
+          y2="6"
+          stroke={sample.color}
+          strokeWidth="1.75"
+          {...(sample.dash ? { strokeDasharray: sample.dash } : {})}
+        />
+      </svg>
+      <span className="text-[11px] leading-tight text-gray-600 dark:text-gray-300">{sample.label}</span>
+    </li>
+  )
+}
+
+export function FlowLegend({ labels, edgeSamples, nodeSwatches }: FlowLegendProps) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white/95 shadow-sm backdrop-blur dark:border-gray-700 dark:bg-gray-800/95">
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        data-cv-tooltip={labels.legendPanel.title}
+        aria-label={labels.legendPanel.title}
+        aria-expanded={open}
+        className="flex w-full items-center justify-between gap-2 px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+      >
+        {labels.legendPanel.title}
+        {open ? <ChevronDown size={13} /> : <ChevronUp size={13} />}
+      </button>
+
+      {open && (
+        <div className="max-h-72 w-64 overflow-y-auto border-t border-gray-100 px-2.5 py-2 dark:border-gray-700">
+          <p className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
+            {labels.legendPanel.connections}
+          </p>
+          <ul className="space-y-1.5">
+            {edgeSamples.map((sample) => (
+              <EdgeSample key={sample.label} sample={sample} />
+            ))}
+          </ul>
+
+          <p className="mb-1 mt-3 text-[10px] font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
+            {labels.legendPanel.nodes}
+          </p>
+          <ul className="space-y-1.5">
+            {nodeSwatches.map((swatch) => (
+              <li key={swatch.type} className="flex items-center gap-2">
+                <span className={`h-3 w-5 shrink-0 rounded border-2 ${swatch.className}`} aria-hidden="true" />
+                <span className="text-[11px] leading-tight text-gray-600 dark:text-gray-300">
+                  {labels.legend[swatch.type]}
+                </span>
+              </li>
+            ))}
+            <li className="flex items-center gap-2">
+              <span
+                className="h-3 w-5 shrink-0 rounded border-2 border-dashed border-amber-400"
+                aria-hidden="true"
+              />
+              <span className="text-[11px] leading-tight text-gray-600 dark:text-gray-300">
+                {labels.legendPanel.detached}
+              </span>
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex h-3 w-5 shrink-0 items-center justify-center" aria-hidden="true">
+                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+              </span>
+              <span className="text-[11px] leading-tight text-gray-600 dark:text-gray-300">
+                {labels.legendPanel.startNode}
+              </span>
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex h-3 w-5 shrink-0 items-center justify-center text-gray-400" aria-hidden="true">
+                <RotateCcw size={12} strokeWidth={2.5} />
+              </span>
+              <span className="text-[11px] leading-tight text-gray-600 dark:text-gray-300">
+                {labels.legendPanel.selfLoop}
+              </span>
+            </li>
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/flows/FlowMapCanvas.tsx

@@ -27,18 +27,21 @@ export function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverr
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey])
 
   const nodes = useMemo<Node[]>(
-    () => Object.values(graphs).map((g): Node => ({
-      id: g.key,
-      type: 'flowMapNode',
-      position: positions[g.key] ?? { x: 0, y: 0 },
-      data: {
-        label: g.label,
-        nodeCount: Object.keys(g.nodes).length,
-        isRoot: g.key === rootKey,
-        labels,
-        onOpen: () => onOpenFlow(g.key),
-      } satisfies FlowMapNodeData,
-    })),
+    () =>
+      Object.values(graphs).map(
+        (g): Node => ({
+          id: g.key,
+          type: 'flowMapNode',
+          position: positions[g.key] ?? { x: 0, y: 0 },
+          data: {
+            label: g.label,
+            nodeCount: Object.keys(g.nodes).length,
+            isRoot: g.key === rootKey,
+            labels,
+            onOpen: () => onOpenFlow(g.key),
+          } satisfies FlowMapNodeData,
+        }),
+      ),
     [graphs, positions, rootKey, onOpenFlow, labels],
   )
 

package/src/flows/FlowMapNode.tsx

@@ -21,10 +21,13 @@ export function FlowMapNode({ data }: NodeProps) {
       <div className="flex items-center gap-1.5 text-emerald-700 dark:text-emerald-300">
         <GitBranch size={14} />
         <span className="text-sm font-semibold truncate">{label}</span>
-        {isRoot && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" title={labels.startNodeTooltip} />}
+        {isRoot && (
+          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" data-cv-tooltip={labels.startNodeTooltip} />
+        )}
       </div>
       <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{labels.flowMap.nodeCount(nodeCount)}</p>
       <button
+        data-cv-tooltip={labels.flowMap.openFlow} aria-label={labels.flowMap.openFlow}
         type="button"
         onClick={onOpen}
         className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline"