From 19dc983d3092acb06922a0588b3020048830365d Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 13 Nov 2024 14:54:27 +0800 Subject: [PATCH] feat: support toggle set tool when the texts changes --- .../workflow/block-selector/all-tools.tsx | 1 + .../tool/tool-list-flat-view/list.tsx | 16 +++++++++++++++- .../tool/tool-list-tree-view/item.tsx | 16 +++++++++++++++- .../tool/tool-list-tree-view/list.tsx | 3 +++ .../workflow/block-selector/tool/tool.tsx | 16 ++++++++-------- .../components/workflow/block-selector/tools.tsx | 4 ++++ 6 files changed, 46 insertions(+), 10 deletions(-) diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index 566950782a..b93d68c019 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -131,6 +131,7 @@ const AllTools = ({ tools={tools} onSelect={onSelect} viewType={activeView} + hasSearchText={!!searchText} /> {/* Plugins from marketplace */} void } const ToolViewFlatView: FC = ({ payload, isShowLetterIndex, + hasSearchText, onSelect, }) => { + const [fold, setFold] = React.useState(true) + useEffect(() => { + if (hasSearchText && fold) { + setFold(false) + return + } + if (!hasSearchText && !fold) + setFold(true) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hasSearchText]) return (
{payload.map(tool => ( @@ -26,6 +38,8 @@ const ToolViewFlatView: FC = ({ payload={tool} viewType={ViewType.flat} isShowLetterIndex={isShowLetterIndex} + isFold={fold} + onFoldChange={setFold} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx index 156bede917..f74602c901 100644 --- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx +++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx @@ -1,6 +1,6 @@ 'use client' import type { FC } from 'react' -import React from 'react' +import React, { useEffect } from 'react' import type { ToolWithProvider } from '../../../types' import Tool from '../tool' import type { BlockEnum } from '../../../types' @@ -10,14 +10,26 @@ import type { ToolDefaultValue } from '../../types' type Props = { groupName: string toolList: ToolWithProvider[] + hasSearchText: boolean onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void } const Item: FC = ({ groupName, toolList, + hasSearchText, onSelect, }) => { + const [fold, setFold] = React.useState(true) + useEffect(() => { + if (hasSearchText && fold) { + setFold(false) + return + } + if (!hasSearchText && !fold) + setFold(true) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hasSearchText]) return (
@@ -30,6 +42,8 @@ const Item: FC = ({ payload={tool} viewType={ViewType.tree} isShowLetterIndex={false} + isFold={fold} + onFoldChange={setFold} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx index 1b0dbddca6..8bf5095833 100644 --- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx +++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx @@ -10,11 +10,13 @@ import { CUSTOM_GROUP_NAME, WORKFLOW_GROUP_NAME } from '../../index-bar' type Props = { payload: Record + hasSearchText: boolean onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void } const ToolListTreeView: FC = ({ payload, + hasSearchText, onSelect, }) => { const { t } = useTranslation() @@ -37,6 +39,7 @@ const ToolListTreeView: FC = ({ key={groupName} groupName={getI18nGroupName(groupName)} toolList={payload[groupName]} + hasSearchText={hasSearchText} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx index 3ce6bdcf7d..658bccd630 100644 --- a/web/app/components/workflow/block-selector/tool/tool.tsx +++ b/web/app/components/workflow/block-selector/tool/tool.tsx @@ -11,8 +11,6 @@ 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' import { useTranslation } from 'react-i18next' type Props = { @@ -20,6 +18,8 @@ type Props = { payload: ToolWithProvider viewType: ViewType isShowLetterIndex: boolean + isFold: boolean + onFoldChange: (fold: boolean) => void onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void } @@ -28,6 +28,8 @@ const Tool: FC = ({ payload, viewType, isShowLetterIndex, + isFold, + onFoldChange, onSelect, }) => { const { t } = useTranslation() @@ -35,10 +37,8 @@ const Tool: FC = ({ const isFlatView = viewType === ViewType.flat const actions = payload.tools const hasAction = true // Now always support actions - const [isFold, { - toggle: toggleFold, - }] = useBoolean(false) - const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine + + const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine const groupName = useMemo(() => { if (payload.type === CollectionType.builtIn) @@ -63,7 +63,7 @@ const Tool: FC = ({ className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer select-none' onClick={() => { if (hasAction) - toggleFold() + onFoldChange(!isFold) // Now always support actions // if (payload.parameters) { @@ -101,7 +101,7 @@ const Tool: FC = ({
- {hasAction && isFold && ( + {hasAction && !isFold && ( actions.map(action => ( void tools: ToolWithProvider[] viewType: ViewType + hasSearchText: boolean } const Blocks = ({ showWorkflowEmpty, onSelect, tools, viewType, + hasSearchText, }: ToolsProps) => { const { t } = useTranslation() const language = useGetLanguage() @@ -89,11 +91,13 @@ const Blocks = ({ ) : ( )