Merge branch 'feat/mcp-frontend' into deploy/dev

web/app/components/workflow/block-selector/index-bar.tsx

@@ -74,17 +74,16 @@ type IndexBarProps = {
   letters: string[]
   itemRefs: RefObject<{ [key: string]: HTMLElement | null }>
   className?: string
-  hasScrollBar: boolean
 }
 
-const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className, hasScrollBar }) => {
+const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
   const handleIndexClick = (letter: string) => {
     const element = itemRefs.current?.[letter]
     if (element)
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className={classNames('index-bar absolute right-0 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary', hasScrollBar && 'right-3', className)}>
+    <div className={classNames('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
       <div className={classNames('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
       {letters.map(letter => (
         <div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>

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

@@ -11,6 +11,7 @@ import { useMemo } from 'react'
 type Props = {
   payload: ToolWithProvider[]
   isShowLetterIndex: boolean
+  indexBar: React.ReactNode
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   canNotSelectMultiple?: boolean
@@ -25,6 +26,7 @@ const ToolViewFlatView: FC<Props> = ({
   letters,
   payload,
   isShowLetterIndex,
+  indexBar,
   hasSearchText,
   onSelect,
   canNotSelectMultiple,
@@ -43,7 +45,8 @@ const ToolViewFlatView: FC<Props> = ({
     return res
   }, [payload, letters])
   return (
-    <div>
+    <div className='flex w-full'>
+      <div className='mr-1 grow'>
         {payload.map(tool => (
           <div
             key={tool.id}
@@ -56,7 +59,6 @@ const ToolViewFlatView: FC<Props> = ({
             <Tool
               payload={tool}
               viewType={ViewType.flat}
-            isShowLetterIndex={isShowLetterIndex}
               hasSearchText={hasSearchText}
               onSelect={onSelect}
               canNotSelectMultiple={canNotSelectMultiple}
@@ -67,6 +69,8 @@ const ToolViewFlatView: FC<Props> = ({
           </div>
         ))}
       </div>
+      {isShowLetterIndex && indexBar}
+    </div>
   )
 }
 

web/app/components/workflow/block-selector/tool/tool.tsx

@@ -21,7 +21,6 @@ type Props = {
   className?: string
   payload: ToolWithProvider
   viewType: ViewType
-  isShowLetterIndex: boolean
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   canNotSelectMultiple?: boolean
@@ -34,7 +33,6 @@ const Tool: FC<Props> = ({
   className,
   payload,
   viewType,
-  isShowLetterIndex,
   hasSearchText,
   onSelect,
   canNotSelectMultiple,
@@ -145,7 +143,7 @@ const Tool: FC<Props> = ({
   return (
     <div
       key={payload.id}
-      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
+      className={cn('mb-1 last-of-type:mb-0')}
       ref={ref}
     >
       <div className={cn(className)}>

web/app/components/workflow/block-selector/tools.tsx

@@ -43,7 +43,6 @@ const Blocks = ({
   indexBarClassName,
   selectedTools,
   canChooseMCPTool,
-  hasScrollBar,
 }: ToolsProps) => {
   // const tools: any = []
   const { t } = useTranslation()
@@ -127,6 +126,7 @@ const Blocks = ({
             onSelectMultiple={onSelectMultiple}
             selectedTools={selectedTools}
             canChooseMCPTool={canChooseMCPTool}
+            indexBar={<IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
           />
         ) : (
           <ToolListTreeView
@@ -140,8 +140,6 @@ const Blocks = ({
           />
         )
       )}
-
-      {isShowLetterIndex && <IndexBar hasScrollBar={!!hasScrollBar} letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
     </div>
   )
 }