feat: add button place and view type control

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -3,6 +3,7 @@ import { RiCloseLine } from '@remixicon/react'
 import TagsFilter from './tags-filter'
 import ActionButton from '@/app/components/base/action-button'
 import cn from '@/utils/classnames'
+import { RiAddLine } from '@remixicon/react'
 
 type SearchBoxProps = {
   search: string
@@ -13,6 +14,9 @@ type SearchBoxProps = {
   size?: 'small' | 'large'
   placeholder?: string
   locale?: string
+  supportAddCustomTool?: boolean
+  onShowAddCustomCollectionModal?: () => void
+  onAddedCustomTool?: () => void
 }
 const SearchBox = ({
   search,
@@ -23,6 +27,8 @@ const SearchBox = ({
   size = 'small',
   placeholder = '',
   locale,
+  supportAddCustomTool,
+  onShowAddCustomCollectionModal,
 }: SearchBoxProps) => {
   return (
     <div
@@ -63,6 +69,17 @@ const SearchBox = ({
         size={size}
         locale={locale}
       />
+      {supportAddCustomTool && (
+        <div className='flex items-center'>
+          <div className='mr-1.5 h-3.5 w-px  bg-divider-regular'></div>
+          <ActionButton
+            className='bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text'
+            onClick={onShowAddCustomCollectionModal}
+          >
+            <RiAddLine className='h-4 w-4' />
+          </ActionButton>
+        </div>
+      )}
     </div>
   )
 }

web/app/components/tools/edit-custom-collection-modal/modal.tsx

@@ -184,6 +184,7 @@ const EditCustomCollectionModal: FC<Props> = ({
         onClose={onHide}
         closable
         className='!h-[calc(100vh-16px)] !max-w-[630px] !p-0'
+        wrapperClassName='z-[1000]'
       >
         <div className='flex h-full flex-col'>
           <div className='ml-6 mt-6 text-base font-semibold text-text-primary'>

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

@@ -17,8 +17,6 @@ import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import PluginList, { type ListProps } from '@/app/components/workflow/block-selector/market-place-plugin/list'
-import ActionButton from '../../base/action-button'
-import { RiAddLine } from '@remixicon/react'
 import { PluginType } from '../../plugins/types'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
@@ -33,9 +31,6 @@ type AllToolsProps = {
   workflowTools: ToolWithProvider[]
   mcpTools: ToolWithProvider[]
   onSelect: OnSelectBlock
-  supportAddCustomTool?: boolean
-  onAddedCustomTool?: () => void
-  onShowAddCustomCollectionModal?: () => void
   selectedTools?: ToolValue[]
 }
 
@@ -51,8 +46,6 @@ const AllTools = ({
   workflowTools,
   customTools,
   mcpTools = [],
-  supportAddCustomTool,
-  onShowAddCustomCollectionModal,
   selectedTools,
 }: AllToolsProps) => {
   const language = useGetLanguage()
@@ -107,6 +100,7 @@ const AllTools = ({
 
   const pluginRef = useRef<ListRef>(null)
   const wrapElemRef = useRef<HTMLDivElement>(null)
+  const isSupportGroupView = [ToolTypeEnum.All, ToolTypeEnum.BuiltIn].includes(activeTab)
 
   return (
     <div className={cn(className)}>
@@ -128,17 +122,8 @@ const AllTools = ({
             ))
           }
         </div>
+        {isSupportGroupView && (
           <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
-        {supportAddCustomTool && (
-          <div className='flex items-center'>
-            <div className='mr-1.5 h-3.5 w-px  bg-divider-regular'></div>
-            <ActionButton
-              className='bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text'
-              onClick={onShowAddCustomCollectionModal}
-            >
-              <RiAddLine className='h-4 w-4' />
-            </ActionButton>
-          </div>
         )}
       </div>
       <div
@@ -151,7 +136,7 @@ const AllTools = ({
           showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}
           tools={tools}
           onSelect={onSelect}
-          viewType={activeView}
+          viewType={isSupportGroupView ? activeView : ViewType.flat}
           hasSearchText={!!searchText}
           selectedTools={selectedTools}
         />

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

@@ -152,6 +152,10 @@ const ToolPicker: FC<Props> = ({
               onTagsChange={setTags}
               size='small'
               placeholder={t('plugin.searchTools')!}
+              supportAddCustomTool={supportAddCustomTool}
+              onAddedCustomTool={handleAddedCustomTool}
+              onShowAddCustomCollectionModal={showEditCustomCollectionModal}
+
             />
           </div>
           <AllTools
@@ -164,9 +168,7 @@ const ToolPicker: FC<Props> = ({
             customTools={customToolList || []}
             workflowTools={workflowToolList || []}
             mcpTools={mcpTools || []}
-            supportAddCustomTool={supportAddCustomTool}
+
-            onAddedCustomTool={handleAddedCustomTool}
-            onShowAddCustomCollectionModal={showEditCustomCollectionModal}
             selectedTools={selectedTools}
           />
         </div>