dify

dify/web/app/components/workflow/header/scroll-to-selected-node-button.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react'
+import { useCallback } from 'react'
+import { useNodes } from 'reactflow'
+import { useTranslation } from 'react-i18next'
+import type { CommonNodeType } from '../types'
+import { scrollToWorkflowNode } from '../utils/node-navigation'
+import cn from '@/utils/classnames'
+
+const ScrollToSelectedNodeButton: FC = () => {
+  const { t } = useTranslation()
+  const nodes = useNodes<CommonNodeType>()
+  const selectedNode = nodes.find(node => node.data.selected)
+
+  const handleScrollToSelectedNode = useCallback(() => {
+    if (!selectedNode) return
+    scrollToWorkflowNode(selectedNode.id)
+  }, [selectedNode])
+
+  if (!selectedNode)
+    return null
+
+  return (
+    <div
+      className={cn(
+        'system-xs-medium flex h-6 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-3 text-text-tertiary shadow-lg backdrop-blur-sm transition-colors duration-200 hover:text-text-accent',
+      )}
+      onClick={handleScrollToSelectedNode}
+    >
+      {t('workflow.panel.scrollToSelectedNode')}
+    </div>
+  )
+}
+
+export default ScrollToSelectedNodeButton