feat: can add tree view

web/app/(commonLayout)/plugins/test/tools-picker/page.tsx

@@ -22,7 +22,8 @@ const ToolsPicker = () => {
       setCustomTools(customTools)
       setWorkflowTools(workflowTools)
     })()
-  })
+  }, [])
+
   return (
     <div className="relative mt-5 mx-auto w-[320px] bg-white">
       <AllTools

web/app/components/tools/types.ts

@@ -1,4 +1,5 @@
 import type { TypeWithI18N } from '../header/account-setting/model-provider-page/declarations'
+
 export enum LOC {
   tools = 'tools',
   app = 'app',
@@ -16,10 +17,10 @@ export enum AuthHeaderPrefix {
 }
 
 export type Credential = {
-  'auth_type': AuthType
+  auth_type: AuthType
-  'api_key_header'?: string
+  api_key_header?: string
-  'api_key_value'?: string
+  api_key_value?: string
-  'api_key_header_prefix'?: AuthHeaderPrefix
+  api_key_header_prefix?: AuthHeaderPrefix
 }
 
 export enum CollectionType {
@@ -66,6 +67,7 @@ export type ToolParameter = {
   max?: number
 }
 
+// Action
 export type Tool = {
   name: string
   author: string

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

@@ -33,7 +33,7 @@ const AllTools = ({
   const language = useGetLanguage()
   const tabs = useToolTabs()
   const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
-  const [activeView, setActiveView] = useState<ViewType>(ViewType.list)
+  const [activeView, setActiveView] = useState<ViewType>(ViewType.flat)
 
   const tools = useMemo(() => {
     let mergedTools: ToolWithProvider[] = []

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

@@ -1,8 +1,25 @@
 import { pinyin } from 'pinyin-pro'
 import type { FC, RefObject } from 'react'
+import type { ToolWithProvider } from '../types'
+import { CollectionType } from '../../tools/types'
 
-export const groupItems = (items: Array<any>, getFirstChar: (item: string) => string) => {
+/*
-  const groups = items.reduce((acc, item) => {
+{
+  A: {
+    'google': [ // plugin organize name
+      ...tools
+    ],
+    'custom': [ // custom tools
+      ...tools
+    ],
+    'workflow': [ // workflow as tools
+      ...tools
+    ]
+  }
+}
+*/
+export const groupItems = (items: ToolWithProvider[], getFirstChar: (item: ToolWithProvider) => string) => {
+  const groups = items.reduce((acc: Record<string, Record<string, ToolWithProvider[]>>, item) => {
     const firstChar = getFirstChar(item)
     if (!firstChar || firstChar.length === 0)
       return acc
@@ -19,9 +36,21 @@ export const groupItems = (items: Array<any>, getFirstChar: (item: string) => st
       letter = '#'
 
     if (!acc[letter])
-      acc[letter] = []
+      acc[letter] = {}
+
+    let groupName: string = ''
+    if (item.type === CollectionType.builtIn)
+      groupName = item.author
+    else if (item.type === CollectionType.custom)
+      groupName = 'custom'
+    else
+      groupName = 'workflow'
+
+    if (!acc[letter][groupName])
+      acc[letter][groupName] = []
+
+    acc[letter][groupName].push(item)
 
-    acc[letter].push(item)
     return acc
   }, {})
 

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -54,7 +54,7 @@ const List = ({
     window.open(urlWithSearchText, '_blank')
   }
 
-  if (!hasSearchText) {
+  if (hasSearchText) {
     return (
       <Link
         className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur  shadow-lg text-text-accent-light-mode-only cursor-pointer'

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

@@ -1,117 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
-import BlockIcon from '../block-icon'
-import type { ToolWithProvider } from '../types'
-import { BlockEnum } from '../types'
-import type { ToolDefaultValue } from './types'
-import Tooltip from '@/app/components/base/tooltip'
-import type { Tool } from '@/app/components/tools/types'
-import { useGetLanguage } from '@/context/i18n'
-import cn from '@/utils/classnames'
-
-type Props = {
-  className?: string
-  isToolPlugin: boolean // Tool plugin should choose action
-  provider: ToolWithProvider
-  payload: Tool
-  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
-}
-
-const ToolItem: FC<Props> = ({
-  className,
-  isToolPlugin,
-  provider,
-  payload,
-  onSelect,
-}) => {
-  const language = useGetLanguage()
-  const [isFold, {
-    toggle: toggleFold,
-  }] = useBoolean(false)
-
-  const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
-
-  const actions = [
-    'DuckDuckGo AI Search',
-    'DuckDuckGo Connect',
-  ]
-
-  return (
-    <Tooltip
-      key={payload.name}
-      position='right'
-      popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
-      popupContent={(
-        <div>
-          <BlockIcon
-            size='md'
-            className='mb-2'
-            type={BlockEnum.Tool}
-            toolIcon={provider.icon}
-          />
-          <div className='mb-1 text-sm leading-5 text-gray-900'>{payload.label[language]}</div>
-          <div className='text-xs text-gray-700 leading-[18px]'>{payload.description[language]}</div>
-        </div>
-      )}
-    >
-      <div className={cn(className)}>
-        <div
-          className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer'
-          onClick={() => {
-            if (isToolPlugin) {
-              toggleFold()
-              return
-            }
-            onSelect(BlockEnum.Tool, {
-              provider_id: provider.id,
-              provider_type: provider.type,
-              provider_name: provider.name,
-              tool_name: payload.name,
-              tool_label: payload.label[language],
-              title: payload.label[language],
-            })
-          }}
-        >
-          <div className='flex grow items-center h-8'>
-            <BlockIcon
-              className='shrink-0'
-              type={BlockEnum.Tool}
-              toolIcon={provider.icon}
-            />
-            <div className='ml-2 text-sm text-gray-900 flex-1 w-0 grow truncate'>{payload.label[language]}</div>
-          </div>
-          {isToolPlugin && (
-            <FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
-          )}
-        </div>
-        {(!isFold && isToolPlugin) && (
-          <div>
-            {actions.map(action => (
-              <div
-                key={action}
-                className='rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
-                onClick={() => {
-                  onSelect(BlockEnum.Tool, {
-                    provider_id: provider.id,
-                    provider_type: provider.type,
-                    provider_name: provider.name,
-                    tool_name: payload.name,
-                    tool_label: payload.label[language],
-                    title: payload.label[language],
-                  })
-                }}
-              >
-                <div className='h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium'>{action}</div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-    </Tooltip>
-  )
-}
-export default React.memo(ToolItem)

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

@@ -0,0 +1,64 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../types'
+import { BlockEnum } from '../../types'
+import type { ToolDefaultValue } from '../types'
+import Tooltip from '@/app/components/base/tooltip'
+import type { Tool } from '@/app/components/tools/types'
+import { useGetLanguage } from '@/context/i18n'
+import BlockIcon from '../../block-icon'
+
+type Props = {
+  className?: string
+  provider: ToolWithProvider
+  payload: Tool
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+}
+
+const ToolItem: FC<Props> = ({
+  className,
+  provider,
+  payload,
+  onSelect,
+}) => {
+  const language = useGetLanguage()
+
+  return (
+    <Tooltip
+      key={payload.name}
+      position='right'
+      popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+      popupContent={(
+        <div>
+          <BlockIcon
+            size='md'
+            className='mb-2'
+            type={BlockEnum.Tool}
+            toolIcon={provider.icon}
+          />
+          <div className='mb-1 text-sm leading-5 text-gray-900'>{payload.label[language]}</div>
+          <div className='text-xs text-gray-700 leading-[18px]'>{payload.description[language]}</div>
+        </div>
+      )}
+    >
+      <div
+        key={payload.name}
+        className='rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
+        onClick={() => {
+          onSelect(BlockEnum.Tool, {
+            provider_id: provider.id,
+            provider_type: provider.type,
+            provider_name: provider.name,
+            tool_name: payload.name,
+            tool_label: payload.label[language],
+            title: payload.label[language],
+          })
+        }}
+      >
+        <div className='h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium'>{payload.name}</div>
+      </div>
+    </Tooltip >
+  )
+}
+export default React.memo(ToolItem)

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

@@ -0,0 +1,16 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+
+}
+
+const ToolViewFlatView: FC<Props> = () => {
+  return (
+    <div>
+      list...
+    </div>
+  )
+}
+export default React.memo(ToolViewFlatView)

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

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../../types'
+import Tool from '../tool'
+import type { BlockEnum } from '../../../types'
+import { ViewType } from '../../view-type-select'
+import type { ToolDefaultValue } from '../../types'
+
+type Props = {
+  groupName: string
+  toolList: ToolWithProvider[]
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+}
+
+const Item: FC<Props> = ({
+  groupName,
+  toolList,
+  onSelect,
+}) => {
+  return (
+    <div>
+      <div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
+        {groupName}
+      </div>
+      <div>
+        {toolList.map((tool: ToolWithProvider) => (
+          <Tool
+            key={tool.id}
+            payload={tool}
+            viewType={ViewType.tree}
+            isShowLetterIndex
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Item)

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

@@ -0,0 +1,33 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../../types'
+import type { BlockEnum } from '../../../types'
+import type { ToolDefaultValue } from '../../types'
+import Item from './item'
+
+type Props = {
+  payload: Record<string, ToolWithProvider[]>
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+}
+
+const OrgTools: FC<Props> = ({
+  payload,
+  onSelect,
+}) => {
+  if (!payload) return null
+
+  return (
+    <div>
+      {Object.keys(payload).map(groupName => (
+        <Item
+          key={groupName}
+          groupName={groupName}
+          toolList={payload[groupName]}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  )
+}
+export default React.memo(OrgTools)

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

@@ -0,0 +1,95 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
+import { useGetLanguage } from '@/context/i18n'
+import { CollectionType } from '../../../tools/types'
+import type { ToolWithProvider } from '../../types'
+import { BlockEnum } from '../../types'
+import type { ToolDefaultValue } from '../types'
+import { ViewType } from '../view-type-select'
+import ActonItem from './action-item'
+import BlockIcon from '../../block-icon'
+
+import { useBoolean } from 'ahooks'
+
+type Props = {
+  className?: string
+  payload: ToolWithProvider
+  viewType: ViewType
+  isShowLetterIndex: boolean
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+}
+
+const Tool: FC<Props> = ({
+  className,
+  payload,
+  viewType,
+  isShowLetterIndex,
+  onSelect,
+}) => {
+  const language = useGetLanguage()
+  const isTreeView = viewType === ViewType.tree
+  const actions = payload.tools
+  const isToolPlugin = payload.type === CollectionType.builtIn
+  const [isFold, {
+    toggle: toggleFold,
+  }] = useBoolean(false)
+  const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
+  const {
+    label,
+  } = payload
+
+  return (
+    <div
+      key={payload.id}
+      className='mb-1 last-of-type:mb-0'
+    >
+      <div className={cn(className)}>
+        <div
+          className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer'
+        // onClick={() => {
+        //   if (isToolPlugin) {
+        //     toggleFold()
+        //     return
+        //   }
+        //   onSelect(BlockEnum.Tool, {
+        //     provider_id: provider.id,
+        //     provider_type: provider.type,
+        //     provider_name: provider.name,
+        //     tool_name: payload.name,
+        //     tool_label: payload.label[language],
+        //     title: payload.label[language],
+        //   })
+        // }}
+        >
+          <div className='flex grow items-center h-8'>
+            <BlockIcon
+              className='shrink-0'
+              type={BlockEnum.Tool}
+              toolIcon={payload.icon}
+            />
+            <div className='ml-2 text-sm text-gray-900 flex-1 w-0 grow truncate'>{payload.label[language]}</div>
+          </div>
+          {isToolPlugin && (
+            <FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
+          )}
+        </div>
+
+        {isToolPlugin && (
+          actions.map(action => (
+            <ActonItem
+              key={action.name}
+              className={cn(isShowLetterIndex && 'mr-6')}
+              provider={payload}
+              payload={action}
+              onSelect={onSelect}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(Tool)

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

@@ -1,18 +1,17 @@
 import {
   memo,
-  useCallback,
+  useMemo,
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { BlockEnum, ToolWithProvider } from '../types'
-import { CollectionType } from '../../tools/types'
 import IndexBar, { groupItems } from './index-bar'
 import type { ToolDefaultValue } from './types'
-import ToolItem from './tool-item'
 import { ViewType } from './view-type-select'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { useGetLanguage } from '@/context/i18n'
-import cn from '@/utils/classnames'
+import ToolListTreeView from './tool/tool-list-tree-view/list'
+import ToolListFlatView from './tool/tool-list-flat-view/list'
 
 type ToolsProps = {
   showWorkflowEmpty: boolean
@@ -28,52 +27,41 @@ const Blocks = ({
 }: ToolsProps) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
-  const isListView = viewType === ViewType.list
+  const isFlatView = viewType === ViewType.flat
   const isTreeView = viewType === ViewType.tree
+  const isShowLetterIndex = isFlatView && tools.length > 10
 
-  const { letters, groups: groupedTools } = groupItems(tools, tool => (tool as any).label[language][0])
+  /*
-  const toolRefs = useRef({})
+  treeViewToolsData:
-
+  {
-  const renderGroup = useCallback((toolWithProvider: ToolWithProvider) => {
+    A: {
-    const list = toolWithProvider.tools
+      'google': [ // plugin organize name
+        ...tools
+      ],
+      'custom': [ // custom tools
+        ...tools
+      ],
+      'workflow': [ // workflow as tools
+        ...tools
+      ]
+    }
+  }
+  */
+  const { letters, groups: withLetterAndGroupViewToolsData } = groupItems(tools, tool => (tool as any).label[language][0])
+  const treeViewToolsData = useMemo(() => {
+    const result: Record<string, ToolWithProvider[]> = {}
+    Object.keys(withLetterAndGroupViewToolsData).forEach((letter) => {
+      Object.keys(withLetterAndGroupViewToolsData[letter]).forEach((groupName) => {
+        if (!result[groupName])
+          result[groupName] = []
 
-    return (
+        result[groupName].push(...withLetterAndGroupViewToolsData[letter][groupName])
-      <div
+      })
-        key={toolWithProvider.id}
+    })
-        className='mb-1 last-of-type:mb-0'
+    return result
-      >
+  }, [withLetterAndGroupViewToolsData])
-        {isTreeView && (
-          <div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
-            {toolWithProvider.label[language]}
-          </div>
-        )}
-        {
-          list.map(tool => (
-            <ToolItem
-              key={tool.name}
-              className={cn(isListView && 'mr-6')}
-              isToolPlugin={toolWithProvider.type === CollectionType.builtIn}
-              provider={toolWithProvider}
-              payload={tool}
-              onSelect={onSelect}
-            />
-          ))
-        }
-      </div>
-    )
-  }, [onSelect, language])
 
-  const renderLetterGroup = (letter: string) => {
+  const toolRefs = useRef({})
-    const tools = groupedTools[letter]
-    return (
-      <div
-        key={letter}
-        ref={el => ((toolRefs as any).current[letter] = el) as any}
-      >
-        {tools.map(renderGroup)}
-      </div>
-    )
-  }
 
   return (
     <div className='p-1 max-w-[320px]'>
@@ -87,8 +75,19 @@ const Blocks = ({
           <Empty />
         </div>
       )}
-      {!!tools.length && letters.map(renderLetterGroup)}
+      {!!tools.length && (
-      {isListView && tools.length > 10 && <IndexBar letters={letters} itemRefs={toolRefs} />}
+        isFlatView ? (
+          <ToolListFlatView
+          />
+        ) : (
+          <ToolListTreeView
+            payload={treeViewToolsData}
+            onSelect={onSelect}
+          />
+        )
+      )}
+
+      {isShowLetterIndex && <IndexBar letters={letters} itemRefs={toolRefs} />}
     </div>
   )
 }

web/app/components/workflow/block-selector/view-type-select.tsx

@@ -5,7 +5,7 @@ import { RiNodeTree, RiSortAlphabetAsc } from '@remixicon/react'
 import cn from '@/utils/classnames'
 
 export enum ViewType {
-  list = 'list',
+  flat = 'flat',
   tree = 'tree',
 }
 
@@ -31,12 +31,12 @@ const ViewTypeSelect: FC<Props> = ({
       <div
         className={
           cn('p-[3px] rounded-lg',
-            viewType === ViewType.list
+            viewType === ViewType.flat
               ? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
               : 'text-text-tertiary cursor-pointer',
           )
         }
-        onClick={handleChange(ViewType.list)}
+        onClick={handleChange(ViewType.flat)}
       >
         <RiSortAlphabetAsc className='w-4 h-4' />
       </div>