From cab8c6c5a74ae839f8f38a77d2026480a3ed4845 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 31 Dec 2024 15:41:21 +0800
Subject: [PATCH] feat: support scroll into letter

---
 web/app/components/tools/types.ts             |  1 +
 .../tool/tool-list-flat-view/list.tsx         | 36 +++++++++++++++----
 .../workflow/block-selector/tools.tsx         |  9 ++++-
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts
index 19432f4217..32c468cde8 100644
--- a/web/app/components/tools/types.ts
+++ b/web/app/components/tools/types.ts
@@ -49,6 +49,7 @@ export type Collection = {
   allow_delete: boolean
   labels: string[]
   plugin_id?: string
+  letter?: string
 }
 
 export type ToolParameter = {
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
index 8e07eb5650..04622cabff 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/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>
   )
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index c19eecf88b..060f6dfa2c 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -71,7 +71,12 @@ const Blocks = ({
     const result: ToolWithProvider[] = []
     letters.forEach((letter) => {
       Object.keys(withLetterAndGroupViewToolsData[letter]).forEach((groupName) => {
-        result.push(...withLetterAndGroupViewToolsData[letter][groupName])
+        result.push(...withLetterAndGroupViewToolsData[letter][groupName].map((item) => {
+          return {
+            ...item,
+            letter,
+          }
+        }))
       })
     })
 
@@ -95,6 +100,8 @@ const Blocks = ({
       {!!tools.length && (
         isFlatView ? (
           <ToolListFlatView
+            toolRefs={toolRefs}
+            letters={letters}
             payload={listViewToolData}
             isShowLetterIndex={isShowLetterIndex}
             hasSearchText={hasSearchText}