From 0e5c16d0c281f088e176c4acf2b794e971e3b750 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Sat, 12 Oct 2024 18:15:11 +0800
Subject: [PATCH] feat: view to ui and fix some ui promblem

---
 .../workflow/block-selector/all-tools.tsx     |  1 +
 .../workflow/block-selector/index-bar.tsx     |  5 +--
 .../workflow/block-selector/tool-item.tsx     | 33 +++++++++++--------
 .../workflow/block-selector/tools.tsx         | 16 ++++++---
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 1338f4ef1a..f8947ad52a 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -75,6 +75,7 @@ const AllTools = ({
         showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}
         tools={tools}
         onSelect={onSelect}
+        viewType={activeView}
       />
     </div>
   )
diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index 7432358c9c..8068d9ecbc 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -47,9 +47,10 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className="index-bar absolute right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500">
+    <div className="index-bar absolute right-4 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary ">
+      <div className='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="hover:text-gray-900 cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
+        <div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
           {letter}
         </div>
       ))}
diff --git a/web/app/components/workflow/block-selector/tool-item.tsx b/web/app/components/workflow/block-selector/tool-item.tsx
index a5e1639392..5ee3b399a5 100644
--- a/web/app/components/workflow/block-selector/tool-item.tsx
+++ b/web/app/components/workflow/block-selector/tool-item.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { RiArrowRightSLine } from '@remixicon/react'
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import BlockIcon from '../block-icon'
 import type { ToolWithProvider } from '../types'
@@ -10,8 +10,10 @@ 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
@@ -19,6 +21,7 @@ type Props = {
 }
 
 const ToolItem: FC<Props> = ({
+  className,
   isToolPlugin,
   provider,
   payload,
@@ -27,7 +30,9 @@ const ToolItem: FC<Props> = ({
   const language = useGetLanguage()
   const [isFold, {
     toggle: toggleFold,
-  }] = useBoolean(true)
+  }] = useBoolean(false)
+
+  const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
 
   const actions = [
     'DuckDuckGo AI Search',
@@ -52,9 +57,9 @@ const ToolItem: FC<Props> = ({
         </div>
       )}
     >
-      <div>
+      <div className={cn(className)}>
         <div
-          className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+          className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer'
           onClick={() => {
             if (isToolPlugin) {
               toggleFold()
@@ -70,22 +75,24 @@ const ToolItem: FC<Props> = ({
             })
           }}
         >
+          <div className='flex 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 min-w-0 truncate'>{payload.label[language]}</div>
+          </div>
           {isToolPlugin && (
-            <RiArrowRightSLine className='mr-1 w-4 h-4 text-text-quaternary shrink-0' />
+            <FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
           )}
-          <BlockIcon
-            className='mr-2 shrink-0'
-            type={BlockEnum.Tool}
-            toolIcon={provider.icon}
-          />
-          <div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{payload.label[language]}</div>
         </div>
         {(!isFold && isToolPlugin) && (
           <div>
             {actions.map(action => (
               <div
                 key={action}
-                className='rounded-lg pl-[37px] hover:bg-state-base-hover cursor-pointer'
+                className='rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
                 onClick={() => {
                   onSelect(BlockEnum.Tool, {
                     provider_id: provider.id,
@@ -97,7 +104,7 @@ const ToolItem: FC<Props> = ({
                   })
                 }}
               >
-                <div className='h-8 leading-8 border-l-2 border-divider-subtle pl-[19px] truncate text-text-secondary system-sm-medium'>{action}</div>
+                <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>
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index a81378dd2d..43f44bf882 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -9,6 +9,7 @@ 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'
 
@@ -16,14 +17,18 @@ type ToolsProps = {
   showWorkflowEmpty: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   tools: ToolWithProvider[]
+  viewType: ViewType
 }
 const Blocks = ({
   showWorkflowEmpty,
   onSelect,
   tools,
+  viewType,
 }: ToolsProps) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
+  const isListView = viewType === ViewType.list
+  const isTreeView = viewType === ViewType.tree
 
   const { letters, groups: groupedTools } = groupItems(tools, tool => tool.label[language][0])
   const toolRefs = useRef({})
@@ -36,13 +41,16 @@ const Blocks = ({
         key={toolWithProvider.id}
         className='mb-1 last-of-type:mb-0'
       >
-        <div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
-          {toolWithProvider.label[language]}
-        </div>
+        {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={isListView && 'mr-6'}
               isToolPlugin={toolWithProvider.type === CollectionType.builtIn}
               provider={toolWithProvider}
               payload={tool}
@@ -79,7 +87,7 @@ const Blocks = ({
         </div>
       )}
       {!!tools.length && letters.map(renderLetterGroup)}
-      {tools.length > 10 && <IndexBar letters={letters} itemRefs={toolRefs} />}
+      {isListView && tools.length > 10 && <IndexBar letters={letters} itemRefs={toolRefs} />}
     </div>
   )
 }