feat: support scroll into letter

web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx

@@ -6,31 +6,53 @@ import type { BlockEnum } from '../../../types'
 import type { ToolDefaultValue } from '../../types'
 import Tool from '../tool'
 import { ViewType } from '../../view-type-select'
+import { useMemo } from 'react'
 
 type Props = {
   payload: ToolWithProvider[]
   isShowLetterIndex: boolean
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  letters: string[]
+  toolRefs: any
 }
 
 const ToolViewFlatView: FC<Props> = ({
+  letters,
   payload,
   isShowLetterIndex,
   hasSearchText,
   onSelect,
+  toolRefs,
 }) => {
+  const firstLetterToolIds = useMemo(() => {
+    const res: Record<string, string> = {}
+    letters.forEach((letter) => {
+      const firstToolId = payload.find(tool => tool.letter === letter)?.id
+      if (firstToolId)
+        res[firstToolId] = letter
+    })
+    return res
+  }, [payload, letters])
   return (
     <div>
       {payload.map(tool => (
-        <Tool
+        <div
           key={tool.id}
-          payload={tool}
-          viewType={ViewType.flat}
-          isShowLetterIndex={isShowLetterIndex}
-          hasSearchText={hasSearchText}
-          onSelect={onSelect}
-        />
+          ref={(el) => {
+            const letter = firstLetterToolIds[tool.id]
+            if (letter)
+              toolRefs.current[letter] = el
+          }}
+        >
+          <Tool
+            payload={tool}
+            viewType={ViewType.flat}
+            isShowLetterIndex={isShowLetterIndex}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+          />
+        </div>
       ))}
     </div>
   )