diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
new file mode 100644
index 00000000000000..f485384969c2db
--- /dev/null
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -0,0 +1,54 @@
+import { pinyin } from 'pinyin-pro'
+
+export const groupItems = (items, getFirstChar) => {
+ const groups = items.reduce((acc, item) => {
+ const firstChar = getFirstChar(item)
+ if (!firstChar || firstChar.length === 0)
+ return acc
+
+ let letter
+
+ // transform Chinese to pinyin
+ if (/[\u4E00-\u9FA5]/.test(firstChar))
+ letter = pinyin(firstChar, { pattern: 'first', toneType: 'none' })[0].toUpperCase()
+ else
+ letter = firstChar.toUpperCase()
+
+ if (!/[A-Z]/.test(letter))
+ letter = '#'
+
+ if (!acc[letter])
+ acc[letter] = []
+
+ acc[letter].push(item)
+ return acc
+ }, {})
+
+ const letters = Object.keys(groups).sort()
+ // move '#' to the end
+ const hashIndex = letters.indexOf('#')
+ if (hashIndex !== -1) {
+ letters.splice(hashIndex, 1)
+ letters.push('#')
+ }
+ return { letters, groups }
+}
+
+const IndexBar = ({ letters, itemRefs }) => {
+ const handleIndexClick = (letter) => {
+ const element = itemRefs.current[letter]
+ if (element)
+ element.scrollIntoView({ behavior: 'smooth' })
+ }
+ return (
+
+ {letters.map(letter => (
+
handleIndexClick(letter)}>
+ {letter}
+
+ ))}
+
(toolRefs.current[letter] = el)}
+ >
+ {tools.map(renderGroup)}
+
+ )
+ }
+
return (
{
@@ -90,12 +107,11 @@ const Blocks = ({
}
{!tools.length && showWorkflowEmpty && (
-
+
)}
- {
- !!tools.length && tools.map(renderGroup)
- }
+ {!!tools.length && letters.map(renderLetterGroup)}
+ {tools.length > 10 &&
}