feat: support view choose

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

@@ -9,6 +9,7 @@ import type {
 import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
+import ViewTypeSelect, { ViewType } from './view-type-select'
 import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 
@@ -29,6 +30,7 @@ const AllTools = ({
   const language = useGetLanguage()
   const tabs = useToolTabs()
   const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
+  const [activeView, setActiveView] = useState<ViewType>(ViewType.list)
 
   const tools = useMemo(() => {
     let mergedTools: ToolWithProvider[] = []
@@ -49,22 +51,25 @@ const AllTools = ({
   }, [activeTab, buildInTools, customTools, workflowTools, searchText, language])
   return (
     <div>
-      <div className='flex items-center px-3 h-8 space-x-1 bg-gray-25 border-b-[0.5px] border-black/[0.08] shadow-xs'>
-        {
-          tabs.map(tab => (
-            <div
-              className={cn(
-                'flex items-center px-2 h-6 rounded-md hover:bg-gray-100 cursor-pointer',
-                'text-xs font-medium text-gray-700',
-                activeTab === tab.key && 'bg-gray-200',
-              )}
-              key={tab.key}
-              onClick={() => setActiveTab(tab.key)}
-            >
-              {tab.name}
-            </div>
-          ))
-        }
+      <div className='flex items-center justify-between px-3 bg-background-default-hover border-b-[0.5px] border-black/[0.08] shadow-xs'>
+        <div className='flex items-center h-8 space-x-1'>
+          {
+            tabs.map(tab => (
+              <div
+                className={cn(
+                  'flex items-center px-2 h-6 rounded-md hover:bg-gray-100 cursor-pointer',
+                  'text-xs font-medium text-gray-700',
+                  activeTab === tab.key && 'bg-gray-200',
+                )}
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+              >
+                {tab.name}
+              </div>
+            ))
+          }
+        </div>
+        <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
       </div>
       <Tools
         showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}

web/app/components/workflow/block-selector/hooks.ts

@@ -41,7 +41,7 @@ export const useToolTabs = () => {
     },
     {
       key: ToolTypeEnum.BuiltIn,
-      name: t('workflow.tabs.builtInTool'),
+      name: t('workflow.tabs.plugin'),
     },
     {
       key: ToolTypeEnum.Custom,

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

@@ -5,6 +5,7 @@ import {
 } 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'
@@ -42,7 +43,7 @@ const Blocks = ({
           list.map(tool => (
             <ToolItem
               key={tool.name}
-              isToolPlugin={toolWithProvider.type === 'builtin'}
+              isToolPlugin={toolWithProvider.type === CollectionType.builtIn}
               provider={toolWithProvider}
               payload={tool}
               onSelect={onSelect}

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

@@ -0,0 +1,58 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { RiNodeTree, RiSortAlphabetAsc } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+export enum ViewType {
+  list = 'list',
+  tree = 'tree',
+}
+
+type Props = {
+  viewType: ViewType
+  onChange: (viewType: ViewType) => void
+}
+
+const ViewTypeSelect: FC<Props> = ({
+  viewType,
+  onChange,
+}) => {
+  const handleChange = useCallback((nextViewType: ViewType) => {
+    return () => {
+      if (nextViewType === viewType)
+        return
+      onChange(nextViewType)
+    }
+  }, [viewType, onChange])
+
+  return (
+    <div className='flex items-center rounded-lg bg-components-segmented-control-bg-normal p-px'>
+      <div
+        className={
+          cn('p-[3px] rounded-lg',
+            viewType === ViewType.list
+              ? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
+              : 'text-text-tertiary cursor-pointer',
+          )
+        }
+        onClick={handleChange(ViewType.list)}
+      >
+        <RiSortAlphabetAsc className='w-4 h-4' />
+      </div>
+      <div
+        className={
+          cn('p-[3px] rounded-lg',
+            viewType === ViewType.tree
+              ? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
+              : 'text-text-tertiary cursor-pointer',
+          )
+        }
+        onClick={handleChange(ViewType.tree)}
+      >
+        <RiNodeTree className='w-4 h-4 ' />
+      </div>
+    </div>
+  )
+}
+export default React.memo(ViewTypeSelect)

web/i18n/zh-Hans/workflow.ts

@@ -197,7 +197,7 @@ const translation = {
     'searchTool': '搜索工具',
     'tools': '工具',
     'allTool': '全部',
-    'builtInTool': '内置',
+    'plugin': '插件',
     'customTool': '自定义',
     'workflowTool': '工作流',
     'question-understand': '问题理解',