@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/Stacks.tsx

@@ -1,16 +1,24 @@
-import { Button } from '@citric/core'
-import { Search } from '@citric/icons'
+import { Button, Tab } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { aiClient } from '@stack-spot/portal-network'
-import { GetAiStackResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
-import { IconInput } from '../components/IconInput'
+import { RightPanelContentList } from '../components/RightPanelContentList'
 import { RightPanelTabs } from '../components/RightPanelTabs'
+import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
+import { Scope } from '../features'
 import { useRightPanel } from '../right-panel/hooks'
+import { ChatProperties } from '../state/ChatState'
+import { checkIsTrial } from '../utils/check-is-trial'
 
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
 export const Stacks = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -27,59 +35,160 @@ export const Stacks = () => {
   return null
 }
 
-const StacksPanel = () => {
+const StacksPanel =  () => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
-  
-  return <RightPanelTabs key={chat.id} tabs={[
-    { title: t.personal, content: <StacksTab key="personal" visibility="personal" /> },
-    { title: t.shared, content: <StacksTab key="shared" visibility="shared" /> },
-    { title: t.account, content: <StacksTab key="account" visibility="account" /> },
-  ]} />
+  const isTrial = checkIsTrial()
+  const stack = useRef(chat.get('stack'))
+  const features = useWidgetState('features')
+  const isGroupResourcesByScope = features?.groupResourcesByScope
+  const scopes = features?.scopes ?? []
+  const spotId = features?.workspaceId
+
+  useEffect(() => {
+    stack.current = chat.get('stack')
+  }, [chat])
+
+  const allTabsMap: Partial<Record<Scope, Omit<Tab, 'key'>>> = {
+    favorite: { label: t.favorites, content: <StacksTab key="favorites" visibility="favorite" stack={stack} /> },
+    personal: { label: t.personal, content: <StacksTab key="personal" visibility="personal" stack={stack} /> },
+    shared: { label: t.shared, content: <StacksTab key="shared" visibility="shared" stack={stack} /> },
+    workspace: { label: t.spots, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
+    account: { label: t.account, content: <StacksTab key="account" visibility="account" stack={stack} /> },
+  }
+  const defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
+
+  const rawScopes: Scope[] = scopes?.length ? scopes : defaultScopes
+
+  const scopesToRender: Scope[] = isTrial
+    ? ['favorite', 'personal']
+    : rawScopes
+
+  const tabs = scopesToRender
+    .map(scope => scope in allTabsMap ? { key: scope, ...allTabsMap[scope] } : undefined)
+    .filter(Boolean) as Tab[]
+
+  return (isGroupResourcesByScope ? (
+    <RightPanelTabs key={chat.id} tabs={tabs} />
+  ) : (
+    <RightPanelContentList><StacksTab stack={stack} workspaceId={spotId} /></RightPanelContentList>
+  ))
+}
+
+export interface StacksTabProps {
+  visibility?: VisibilityLevelEnum,
+  workspaceId?: string,
+  stack: React.MutableRefObject<ChatProperties['stack']>,
+  showSubmitButton?: boolean,
 }
 
-const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
+export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = true }: StacksTabProps) => {
   const t = useTranslate(dictionary)
   const { close } = useRightPanel()
   const chat = useCurrentChat()
-  const [filter, setFilter] = useState('')
-  const stacks = aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
-  const [value, setValue] = useState<GetAiStackResponse | undefined>(stacks.find(s => s.id === chat.get('stack')?.id))
-  const filtered = useMemo(
-    () => filter ? stacks.filter(s => s === value || s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : stacks,
-    [stacks, filter, value],
-  )
+  const listFavorites = aiClient.aiStacks.useQuery({ visibility: 'favorite' })
+  const [addFavorite, pendingAddFav] = aiClient.addFavoriteStackAi.useMutation()
+  const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteStackAi.useMutation()
+  const [submitEnabled, setSubmitEnabled] = useState(false)
+
+  const removeFavoriteStack = async (idOrSlug: string) => {
+    try {
+      await removeFavorite({ stackId: idOrSlug })
+      await aiClient.aiStacks.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onRemoveFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await removeFavoriteStack(idOrSlug)
+      if (!pendingRemoveFav){
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    } 
+  })
+
+  const addFavoriteStack = async (idOrSlug: string) => {
+    try {
+      await addFavorite({ stackId: idOrSlug })
+      await aiClient.aiStacks.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onAddFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await addFavoriteStack(idOrSlug)
+      if (!pendingAddFav){
+        resolve(true)
+      }
+
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    } 
+  })
+
+  const stacks = workspaceId
+    ? workspaceAiClient.getStackFromWorkspaceAi.useQuery({ workspaceId })
+    //@ts-ignore
+    : aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
+
+  const initialValue = useMemo(() => {
+    const currentStackId = stack.current ? stack.current.id : chat.get('stack')?.id
+    const initial = stacks.find(s => s.id === currentStackId)
+    if (initial) setSubmitEnabled(true)
+    return initial
+  }, [stacks])
 
   function submit() {
-    if (value) chat.set('stack', { id: value.id, label: value.name })
+    if (stack.current) chat.set('stack', stack.current)
     close()
   }
 
   return (
     <>
       <div className="content">
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-        {!!filtered.length && <DescribedRadioGroup
-          options={filtered}
-          keygen={s => s.id}
-          value={value}
-          onChange={setValue}
-          renderLabel={s => s.name}
-          renderDescription={s => s.use_case}
-          optionClassName={s => (s === value && filter && !s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />}
-        {!!stacks.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
-        {!stacks.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+        <DescribedRadioGroup
+          options={stacks}
+          initialValue={initialValue}
+          data={s => ({ idOrSlug: s.id, description: s.use_case, name: s.name, listFavorites, onAddFavorite, onRemoveFavorite })}
+          emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder"/>}
+          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
+          onChange={(s) => {
+            stack.current = s ? { ...s, label: s.name } : undefined
+            setSubmitEnabled(true)
+          }}
+        />
       </div>
-      <Button onClick={submit} disabled={!value}>{t.apply}</Button>
+      {!!stacks.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
     </>
   )
 }
 
+function StacksTabWorkspace({ stack, visibility, showSubmitButton }: StacksTabProps) {
+  const workspaceTabComponents = useMemo(() => ({ stack: StacksTab }), [stack])
+
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
+    component: 'stack',
+    props: { visibility, workspaceId: workspace.id, stack, showSubmitButton },
+  }) 
+
+  return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
+}
+
 const dictionary = {
   en: {
     title: 'Stacks AI',
@@ -92,6 +201,8 @@ const dictionary = {
     noSearchResultsDescription: 'Please, try another search term.',
     noData: 'There are no stacks in this category yet.',
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new stacks.',
+    favorites: 'Favorites',
+    spots: 'Spots',
   },
   pt: {
     title: 'Stacks AI',
@@ -104,5 +215,7 @@ const dictionary = {
     noSearchResultsDescription: 'Por favor, tente outra busca.',
     noData: 'Ainda não há stacks nesta categoria.',
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novas stacks.',
+    favorites: 'Favoritos',
+    spots: 'Spots',
   },
 } satisfies Dictionary

package/src/views/Steps/FlowChart/HandleGroup.tsx

@@ -0,0 +1,14 @@
+import { Handle, Position } from '@xyflow/react'
+
+interface Props {
+  renderSource?: boolean,
+  renderTarget?: boolean,
+  targetPosition?: Position,
+  sourcePosition?: Position,
+}
+export const HandleGroup = ({ renderSource = true, renderTarget = true, targetPosition, sourcePosition }: Props) => (
+  <>
+    {renderTarget && <Handle type="target" position={targetPosition || Position.Left} isConnectable className="target-handle" />}
+    {renderSource && <Handle type="source" position={sourcePosition || Position.Right} isConnectable className="source-handle" />}
+  </>
+)

package/src/views/Steps/FlowChart/NodeDynamic.tsx

@@ -0,0 +1,97 @@
+import { Icon, WithIcon } from '@stack-spot/citric-icons'
+import { Avatar, Column, IconBox, Row, Skeleton, Text } from '@stack-spot/citric-react'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ChatAgentTool } from '@stack-spot/portal-network'
+import { listToClass } from '@stack-spot/portal-theme'
+import { Position } from '@xyflow/react'
+import { useChatEntry } from '../../../context/hooks'
+import { useStepsDictionary } from '../dictionary'
+import { getTitle, getTypeIcon } from '../utils'
+import { HandleGroup } from './HandleGroup'
+import { useResizeObserver } from './hooks'
+import { NodeData } from './types'
+
+const ToolItem = ({ tool, index, onClick }: { tool: ChatAgentTool, index: number, onClick?: (index: number) => void }) => {
+  const { name, image, input, status } = tool
+
+  if (status === 'running') {
+    return <Skeleton height="48px" bgLevel={600} />
+  }
+
+  return (
+    <div className="tool" onClick={() => onClick?.(index)}>
+      <Row gap="4px" alignItems="center" mb={2}>
+        {image
+          ? <Avatar size="xxs" image={image} name={name} />
+          : <Icon icon="Cog" group="outline" />
+        }
+        <Text weight="500" className="title">{name}</Text>
+      </Row>
+      <Text nowrapEllipsis color="light.700">{input}</Text>
+    </div>
+  )
+}
+
+export const ListTools = ({ tools, onClick }: { tools: ChatAgentTool[], onClick?: (toolIndex?: number) => void }) => (
+  <AnimatedHeight>
+    <Column gap="8px">
+      {tools.map((tool, index) => (
+        <Column key={`${tool.id}-${index}`} className="wrapper-tool">
+          <ToolItem tool={tool} index={index} onClick={onClick} />
+        </Column>
+      ))}
+    </Column>
+  </AnimatedHeight>
+)
+
+const NodeBox = ({ title, icon, content, onClick }: { title: string, icon: WithIcon, content?: string, onClick?: () => void }) => (
+  <Column onClick={onClick} style={{ cursor: onClick ? 'pointer' : 'default' }}>
+    <Row gap="4px" alignItems="center">
+      <IconBox {...icon} appearance="none" colorScheme="light" size="sm" />
+      <Text className="step-index" weight="500">{title}</Text>
+    </Row>
+    <Text nowrapEllipsis color="light.700">
+      {content}
+    </Text>
+  </Column>
+)
+
+interface Props {
+  data: NodeData,
+  targetPosition?: Position,
+  sourcePosition?: Position,
+}
+
+export const NodeDynamic = ({ data, ...props }: Props) => {
+  const { step, index, onClick, onResize, message } = data
+  const content = useChatEntry(message)?.content
+  const t = useStepsDictionary()
+  const ref = useResizeObserver(onResize)
+
+  const tools = step.type === 'step' ? step?.attempts?.[0]?.tools : undefined
+
+  const renderContent = () => {
+    if (step.type === 'planning') {
+      return <NodeBox title={t.userPrompt} content={step.user_question} icon={{ ...getTypeIcon(step.type) }} />
+    }
+
+    if (step.type === 'step') {
+      return tools?.length ? <ListTools onClick={onClick} tools={tools} /> : null
+    }
+
+    if (step.type === 'answer') {
+      return <Column p={3} bg="light.400" onClick={() => onClick?.(index)}>
+        <NodeBox onClick={onClick} title={t.finalAnswer} content={content} icon={{ ...getTypeIcon(step.type) }} />     
+      </Column> 
+    }
+  }
+
+  return (
+    <div ref={ref} aria-label={getTitle(t, step, index)}>
+      <div className={listToClass(['chart-node', null, step.status])} >
+        {renderContent()}
+        <HandleGroup  {...props} renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />
+      </div>
+    </div>
+  )
+}

package/src/views/Steps/FlowChart/NodeStep.tsx

@@ -0,0 +1,49 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { Text } from '@stack-spot/citric-react'
+import { listToClass } from '@stack-spot/portal-theme'
+import { Position } from '@xyflow/react'
+import { StackedBadge } from '../../../components/StackedBadge'
+import { useStepsDictionary } from '../dictionary'
+import { getStatusIcon, getTitle, getTypeIcon } from '../utils'
+import { HandleGroup } from './HandleGroup'
+import { NodeData } from './types'
+
+interface Props {
+  data: NodeData,
+  targetPosition?: Position,
+  sourcePosition?: Position,
+}
+
+export const NodeStep = ({ data: { step, index, nextStatus, onClick }, ...props }: Props) => {
+  const t = useStepsDictionary()
+
+  return (
+    <div
+      className={listToClass(['chart-node', step.type, nextStatus])}
+      onClick={() => onClick?.()}
+      onKeyDown={e => e.key === 'Enter' && onClick?.()}
+      tabIndex={0}
+      role="button"
+      aria-label={getTitle(t, step, index)}
+    >
+      <header>
+        <Icon {...getTypeIcon(step.type)} />
+        <Text className="step-index">{getTitle(t, step, index)}</Text>
+        {getStatusIcon(step.status)}
+      </header>
+      {step.type === 'planning' && <Text className="step-title">{step.goal}</Text>}
+      {step.type === 'step' && step.input && <Text className="step-title">{step.input}</Text>}
+      {step.type === 'step' && <div className="step-details">
+        <Text className={listToClass(['step-description', !!step.attempts[0].tools?.length && 'with-tools'])}>
+          {step.output}
+        </Text>
+        {!!step.attempts[0].tools?.length && <StackedBadge
+          label={t.tools}
+          images={step.attempts[0].tools?.slice(0, 3).map(
+            tool => ({ key: tool.id, name: tool.name ?? '', url: tool.image, icon: <Icon icon="Cog" /> }),
+          )}
+        />}
+      </div>}
+      <HandleGroup {...props} renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />    </div>
+  )
+}

package/src/views/Steps/FlowChart/hooks.ts

@@ -0,0 +1,41 @@
+import { debounce } from 'lodash'
+import { useEffect, useRef } from 'react'
+
+interface Size {
+  width: number,
+  height: number,
+}
+
+export const useResizeObserver = (callback?: (size: Size) => void, delay = 50) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const previousSizeRef = useRef<Size | null>(null)
+
+  useEffect(() => {
+    if (!ref.current || !callback) return
+
+    const debouncedCallback = debounce((newSize: Size) => {
+      const prevSize = previousSizeRef.current
+      const hasChanged = !prevSize || prevSize.width !== newSize.width || prevSize.height !== newSize.height
+
+      if (hasChanged) {
+        previousSizeRef.current = newSize
+        callback(newSize)
+      }
+    }, delay)
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (!entries.length) return
+      const { width, height } = entries[0].contentRect
+      debouncedCallback({ width, height })
+    })
+
+    resizeObserver.observe(ref.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      debouncedCallback.cancel()
+    }
+  }, [callback])
+
+  return ref
+}

package/src/views/Steps/FlowChart/index.tsx

@@ -0,0 +1,111 @@
+import { ChatStep } from '@stack-spot/portal-network'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { Background, Controls, Edge, MarkerType, ReactFlow, ReactFlowProvider, useReactFlow } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { last } from 'lodash'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useChatEntry } from '../../../context/hooks'
+import { ChatEntry } from '../../../state/ChatEntry'
+import { LayoutDirection, useLayoutedElements } from './layout'
+import { NodeDynamic } from './NodeDynamic'
+import { NodeStep } from './NodeStep'
+import { FlowChartBox } from './styled'
+import { NodeFullProps } from './types'
+
+interface Props {
+  message: ChatEntry,
+  onClick: (step: ChatStep, toolIndex?: number) => void,
+  direction?: LayoutDirection,
+}
+
+const NODE_TYPES = {
+  step: { planning: NodeStep, step: NodeStep, answer: NodeStep },
+  stepDynamic: { planning: NodeDynamic, step: NodeDynamic, answer: NodeDynamic },
+}
+
+const Flow = ({ message, onClick, direction = 'LR' }: Props) => {
+  const steps = useChatEntry(message).steps
+  const [nodeSizes, setNodeSizes] = useState<Record<string, { width: number, height: number }>>({})
+  const reactFlowInstance = useReactFlow()
+
+  const isDynamic = useMemo(() => steps?.some((step) => step.id === 'dynamic'), [steps])
+  const nodeTypes = useMemo(() => NODE_TYPES[isDynamic ? 'stepDynamic' : 'step'], [isDynamic])
+
+  const handleNodeSizeChange = useCallback((id: string, size: { width: number, height: number }) => {
+    setNodeSizes((prev) => {
+      const current = prev[id]
+      if (current?.width === size.width && current?.height === size.height) return prev
+      return { ...prev, [id]: size }
+    })
+  }, [])
+
+  const baseElements = useMemo(() => {
+    const nodes = steps?.map((s, index) => {
+      const nodeSize = nodeSizes[s.id]
+      return {
+        id: s.id,
+        type: s.type,
+        focusable: false,
+        ...(nodeSize && { width: nodeSize.width, height: nodeSize.height }),
+        origin: [1, 0],
+        data: {
+          message,
+          step: s,
+          index,
+          nextStatus: steps[index + 1]?.status,
+          onClick: (toolIndex) => onClick(s, toolIndex),
+          onResize: (size) => handleNodeSizeChange(s.id, size),
+        },
+      }
+    }) as NodeFullProps[] ?? []
+    const edges: Edge[] = []
+    for (let i = 0; i < nodes.length - 1; i++) {
+      edges.push({
+        id: `${nodes[i].id}-${nodes[i + 1].id}`,
+        source: nodes[i].id,
+        target: nodes[i + 1].id,
+        className: listToClass(['edge', nodes[i]?.data?.nextStatus ?? 'pending']),
+        focusable: false,
+        markerEnd: {
+          type: MarkerType.Arrow,
+          strokeWidth: 2,
+          color: theme.color.light[700],
+        },
+      })
+    }
+    return { nodes, edges }
+  }, [steps, nodeSizes, message, onClick, handleNodeSizeChange])
+
+  const { nodes, edges } = useLayoutedElements(baseElements.nodes, baseElements.edges, direction)
+
+  useEffect(() => {
+    const lastNode = last(nodes)
+    const isRunning = lastNode?.data?.step?.status === 'running'
+    const shouldFitView = nodes.length > 2 && isRunning || (lastNode?.height ?? 0 > 180) && isRunning
+    if (shouldFitView) {
+      reactFlowInstance.fitView({ duration: 1000,  padding: { bottom: '120px', top: '20px' } })
+    }
+  }, [nodes, edges, reactFlowInstance])
+
+  return (
+    <FlowChartBox>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        snapToGrid={true}
+        fitView
+        maxZoom={1}
+      >
+        <Controls orientation="horizontal" className="controls" showInteractive={false} />
+        <Background />
+      </ReactFlow>
+    </FlowChartBox>
+  )
+}
+
+export const FlowChart = (props: Props) => (
+  <ReactFlowProvider>
+    <Flow {...props} />
+  </ReactFlowProvider>
+)

package/src/views/Steps/FlowChart/layout.ts

@@ -0,0 +1,73 @@
+import dagre from '@dagrejs/dagre'
+import { Edge, Position } from '@xyflow/react'
+import { useMemo } from 'react'
+import { answerNodeSize, planningNodeSize, stepNodeSize } from './styled'
+import { NodeFullProps } from './types'
+
+const nodesSizes = {
+  step: stepNodeSize,
+  planning: planningNodeSize,
+  answer: answerNodeSize,
+  tool: stepNodeSize,
+}
+
+export type LayoutDirection = 'TB' | 'BT' | 'LR' | 'RL'
+
+const getHandlePositions = (direction: LayoutDirection) => {
+  switch (direction) {
+    case 'TB':
+      return { target: Position.Top, source: Position.Bottom }
+    case 'BT':
+      return { target: Position.Bottom, source: Position.Top }
+    case 'LR':
+      return { target: Position.Left, source: Position.Right }
+    case 'RL':
+      return { target: Position.Right, source: Position.Left }
+  }
+}
+
+export function useLayoutedElements(nodes: NodeFullProps[], edges: Edge[], direction: LayoutDirection = 'LR') {
+  const dagreGraph = useMemo(() => new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), [])
+
+  return useMemo(() => {
+    dagreGraph.setGraph({ rankdir: direction })
+
+    nodes.forEach((node) => {
+      const { width, height } = nodesSizes[node.type]
+      const nodeWidth = node.width ?? width
+      const nodeHeight = node.height ?? height
+      dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight })
+    })
+
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target)
+    })
+
+    dagre.layout(dagreGraph)
+
+    const { target, source } = getHandlePositions(direction)
+
+    const newNodes: NodeFullProps[] = nodes.map((node) => {
+      const { width, height } = nodesSizes[node.type]
+      const nodeWidth = node?.width ?? width
+      const nodeHeight = node.height ?? height
+      const nodeWithPosition = dagreGraph.node(node.id)
+      const newNode = {
+        ...node,
+        targetPosition: target,
+        sourcePosition: source,
+        // We are shifting the dagre node position (anchor=center center) to the top left
+        // so it matches the React Flow node anchor point (top left).
+        position: {
+          x: nodeWithPosition.x - nodeWidth / 2,
+          y: nodeWithPosition.y - nodeHeight / 2,
+        },
+      }
+
+      return newNode
+    })
+
+    return { nodes: newNodes, edges }
+  }, [nodes, edges])
+}
+