@adatechnology/conversations-ui 0.1.0-rc.40 → 0.1.0-rc.41

package/dist/flows/index.js

@@ -1869,6 +1869,9 @@ var CHAIN_FRAME_PADDING = 36;
 var QUICK_ADD_COLUMN_GAP = 320;
 var FLOW_KEY_PATTERN = /^[a-z0-9_]{2,40}$/;
 var EDGE_COLOR_LINEAR = "#94a3b8";
+var FOCUS_MAX_ZOOM = 1;
+var FOCUS_PADDING = 0.2;
+var FOCUS_DURATION_MS = 400;
 var EDGE_COLOR_BRANCH = "#8b5cf6";
 var EDGE_COLOR_FALLBACK = "#cbd5e1";
 var EDGE_COLOR_LIVE = "#3b82f6";
@@ -1937,6 +1940,7 @@ function FlowsWorkspace({
   const [rfNodes, setRfNodes] = useState6([]);
   const [flowInstance, setFlowInstance] = useState6(null);
   const [pendingFocusNodeId, setPendingFocusNodeId] = useState6(null);
+  const [pendingFocusFlowKey, setPendingFocusFlowKey] = useState6(null);
   const reloadGraphs = useCallback(async () => {
     try {
       const loaded = await api.getGraphs();
@@ -2030,6 +2034,7 @@ function FlowsWorkspace({
       if (others.some(isFlowDirty) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return;
       setOpenFlowKeys(graphs ? mergedFlowKeysFrom(key, graphs) : [key]);
       if (editingRef && editingRef.flowKey !== key) setEditingRef(null);
+      setPendingFocusFlowKey(key);
     },
     [openFlowKeys, isFlowDirty, editingRef, graphs, labels]
   );
@@ -2222,6 +2227,18 @@ function FlowsWorkspace({
     flowInstance.setCenter(target.position.x + NODE_CARD_WIDTH / 2, target.position.y, { zoom: 1, duration: 400 });
     setPendingFocusNodeId(null);
   }, [pendingFocusNodeId, flowInstance, rfNodes]);
+  useEffect3(() => {
+    if (!pendingFocusFlowKey || !flowInstance) return;
+    const flowNodes = rfNodes.filter((node) => parseNamespacedId(node.id).flowKey === pendingFocusFlowKey);
+    if (flowNodes.length === 0) return;
+    void flowInstance.fitView({
+      nodes: flowNodes.map((node) => ({ id: node.id })),
+      maxZoom: FOCUS_MAX_ZOOM,
+      padding: FOCUS_PADDING,
+      duration: FOCUS_DURATION_MS
+    });
+    setPendingFocusFlowKey(null);
+  }, [pendingFocusFlowKey, flowInstance, rfNodes]);
   const onNodesChange = useCallback((changes) => {
     setRfNodes((current) => applyNodeChanges(changes, current));
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.40",
+  "version": "0.1.0-rc.41",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/flows/FlowsWorkspace.tsx

@@ -98,6 +98,11 @@ const QUICK_ADD_COLUMN_GAP = 320
 const FLOW_KEY_PATTERN = /^[a-z0-9_]{2,40}$/
 
 const EDGE_COLOR_LINEAR = '#94a3b8'
+
+/** Enquadramento ao focar um fluxo pela aba. */
+const FOCUS_MAX_ZOOM = 1
+const FOCUS_PADDING = 0.2
+const FOCUS_DURATION_MS = 400
 const EDGE_COLOR_BRANCH = '#8b5cf6'
 const EDGE_COLOR_FALLBACK = '#cbd5e1'
 const EDGE_COLOR_LIVE = '#3b82f6'
@@ -262,6 +267,7 @@ export function FlowsWorkspace({
   const [rfNodes, setRfNodes] = useState<Node[]>([])
   const [flowInstance, setFlowInstance] = useState<ReactFlowInstance | null>(null)
   const [pendingFocusNodeId, setPendingFocusNodeId] = useState<string | null>(null)
+  const [pendingFocusFlowKey, setPendingFocusFlowKey] = useState<string | null>(null)
 
   const reloadGraphs = useCallback(async () => {
     try {
@@ -379,6 +385,10 @@ export function FlowsWorkspace({
       if (others.some(isFlowDirty) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return
       setOpenFlowKeys(graphs ? mergedFlowKeysFrom(key, graphs) : [key])
       if (editingRef && editingRef.flowKey !== key) setEditingRef(null)
+      // Trocar o fluxo primário não movia a câmera: a aba acendia, o canvas continuava onde
+      // estava e o fluxo escolhido ficava fora da tela — clicar em "Consórcio" parecia não fazer
+      // nada. O enquadramento espera os cards existirem (ver o efeito abaixo).
+      setPendingFocusFlowKey(key)
     },
     [openFlowKeys, isFlowDirty, editingRef, graphs, labels],
   )
@@ -637,6 +647,22 @@ export function FlowsWorkspace({
     setPendingFocusNodeId(null)
   }, [pendingFocusNodeId, flowInstance, rfNodes])
 
+  // Enquadra o fluxo recém-focado. `fitView` restrito aos cards DELE, e não o `fitView` geral:
+  // o canvas mostra o fecho transitivo inteiro, e enquadrar tudo devolveria a mesma visão de
+  // sempre. `maxZoom` evita que um fluxo de dois nós encha a tela.
+  useEffect(() => {
+    if (!pendingFocusFlowKey || !flowInstance) return
+    const flowNodes = rfNodes.filter((node) => parseNamespacedId(node.id).flowKey === pendingFocusFlowKey)
+    if (flowNodes.length === 0) return
+    void flowInstance.fitView({
+      nodes: flowNodes.map((node) => ({ id: node.id })),
+      maxZoom: FOCUS_MAX_ZOOM,
+      padding: FOCUS_PADDING,
+      duration: FOCUS_DURATION_MS,
+    })
+    setPendingFocusFlowKey(null)
+  }, [pendingFocusFlowKey, flowInstance, rfNodes])
+
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     setRfNodes((current) => applyNodeChanges(changes, current))
   }, [])

package/src/flows/workspaceContract.test.ts

@@ -93,3 +93,34 @@ describe('contrato de customização', () => {
     }
   })
 })
+
+describe('focar um fluxo leva a câmera até ele', () => {
+  /**
+   * `focusFlow` trocava o fluxo primário e remesclava o canvas, mas nunca movia a viewport: a aba
+   * acendia, a tela continuava onde estava e o fluxo escolhido ficava fora do campo de visão — em
+   * "Consórcio", parado no início com o fluxo lá embaixo, clicar parecia não fazer nada.
+   *
+   * Teste de fonte, como os demais deste arquivo: não prova o enquadramento na tela, prova que o
+   * clique pede o enquadramento e que ele é restrito ao fluxo clicado.
+   */
+  it('focar um fluxo agenda o enquadramento dele', async () => {
+    const content = await Bun.file(WORKSPACE_SOURCE).text()
+
+    expect(content).toContain('setPendingFocusFlowKey(key)')
+  })
+
+  it('enquadra apenas os cards do fluxo focado, não o canvas inteiro', async () => {
+    // O canvas mostra o fecho transitivo inteiro. Um `fitView()` sem `nodes` devolveria a mesma
+    // visão de sempre — que é exatamente o defeito relatado.
+    const content = await Bun.file(WORKSPACE_SOURCE).text()
+
+    expect(content).toMatch(/fitView\(\{[\s\S]*?nodes: flowNodes\.map/)
+    expect(content).toMatch(/flowKey === pendingFocusFlowKey/)
+  })
+
+  it('limita o zoom, para um fluxo de dois nós não encher a tela', async () => {
+    const content = await Bun.file(WORKSPACE_SOURCE).text()
+
+    expect(content).toContain('maxZoom: FOCUS_MAX_ZOOM')
+  })
+})