From 1ce2c7f3e8d947fde27ea91c7e30f5572f503ec3 Mon Sep 17 00:00:00 2001 From: GuanMu Date: Tue, 22 Apr 2025 13:57:45 +0800 Subject: [PATCH] refactor: improve layout and structure of ProviderDetail component (#18523) --- web/app/components/tools/provider/detail.tsx | 189 ++++++++++--------- 1 file changed, 95 insertions(+), 94 deletions(-) diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx index 21ea8bc464..20c7017ded 100644 --- a/web/app/components/tools/provider/detail.tsx +++ b/web/app/components/tools/provider/detail.tsx @@ -236,27 +236,29 @@ const ProviderDetail = ({ positionCenter={false} panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')} > -
-
- -
-
- + <div className='flex h-full flex-col p-4'> + <div className="shrink-0"> + <div className='mb-3 flex'> + <Icon src={collection.icon} /> + <div className="ml-3 w-0 grow"> + <div className="flex h-5 items-center"> + <Title title={collection.label[language]} /> + </div> + <div className='mb-1 flex h-4 items-center justify-between'> + <OrgInfo + className="mt-0.5" + packageNameClassName='w-auto' + orgName={collection.author} + packageName={collection.name} + /> + </div> </div> - <div className='mb-1 flex h-4 items-center justify-between'> - <OrgInfo - className="mt-0.5" - packageNameClassName='w-auto' - orgName={collection.author} - packageName={collection.name} - /> + <div className='flex gap-1'> + <ActionButton onClick={onHide}> + <RiCloseLine className='h-4 w-4' /> + </ActionButton> </div> </div> - <div className='flex gap-1'> - <ActionButton onClick={onHide}> - <RiCloseLine className='h-4 w-4' /> - </ActionButton> - </div> </div> {!!collection.description[language] && ( <Description text={collection.description[language]} descriptionLineRows={2}></Description> @@ -292,85 +294,84 @@ const ProviderDetail = ({ </> )} </div> - {/* Tools */} - <div className='pt-3'> + <div className='flex min-h-0 flex-1 flex-col pt-3'> {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>} - {/* Builtin type */} - {!isDetailLoading && (collection.type === CollectionType.builtIn) && isAuthed && ( - <div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'> - {t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })} - {needAuth && ( - <Button - variant='secondary' - size='small' - onClick={() => { - if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model) - showSettingAuthModal() - }} - disabled={!isCurrentWorkspaceManager} - > - <Indicator className='mr-2' color={'green'} /> - {t('tools.auth.authorized')} - </Button> - )} - </div> - )} - {!isDetailLoading && (collection.type === CollectionType.builtIn) && needAuth && !isAuthed && ( - <> - <div className='system-sm-semibold-uppercase text-text-secondary'> - <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span> - <span className='px-1'>·</span> - <span className='text-util-colors-orange-orange-600'>{t('tools.auth.setup').toLocaleUpperCase()}</span> - </div> - <Button - variant='primary' - className={cn('my-3 w-full shrink-0')} - onClick={() => { - if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model) - showSettingAuthModal() - }} - disabled={!isCurrentWorkspaceManager} - > - {t('tools.auth.unauthorized')} - </Button> - </> - )} - {/* Custom type */} - {!isDetailLoading && (collection.type === CollectionType.custom) && ( - <div className='system-sm-semibold-uppercase text-text-secondary'> - <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span> - </div> - )} - {/* Workflow type */} - {!isDetailLoading && (collection.type === CollectionType.workflow) && ( - <div className='system-sm-semibold-uppercase text-text-secondary'> - <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span> - </div> - )} {!isDetailLoading && ( - <div className='mt-1 py-2'> - {collection.type !== CollectionType.workflow && toolList.map(tool => ( - <ToolItem - key={tool.name} - disabled={false} - // disabled={needAuth && (isBuiltIn || isModel) && !isAuthed} - collection={collection} - tool={tool} - isBuiltIn={isBuiltIn} - isModel={isModel} - /> - ))} - {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => ( - <div key={item.name} className='mb-1 py-1'> - <div className='mb-1 flex items-center gap-2'> - <span className='code-sm-semibold text-text-secondary'>{item.name}</span> - <span className='system-xs-regular text-text-tertiary'>{item.type}</span> - <span className='system-xs-medium text-text-warning-secondary'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span> + <> + <div className="shrink-0"> + {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && ( + <div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'> + {t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })} + {needAuth && ( + <Button + variant='secondary' + size='small' + onClick={() => { + if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model) + showSettingAuthModal() + }} + disabled={!isCurrentWorkspaceManager} + > + <Indicator className='mr-2' color={'green'} /> + {t('tools.auth.authorized')} + </Button> + )} </div> - <div className='system-xs-regular text-text-tertiary'>{item.llm_description}</div> - </div> - ))} - </div> + )} + {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && !isAuthed && ( + <> + <div className='system-sm-semibold-uppercase text-text-secondary'> + <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span> + <span className='px-1'>·</span> + <span className='text-util-colors-orange-orange-600'>{t('tools.auth.setup').toLocaleUpperCase()}</span> + </div> + <Button + variant='primary' + className={cn('my-3 w-full shrink-0')} + onClick={() => { + if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model) + showSettingAuthModal() + }} + disabled={!isCurrentWorkspaceManager} + > + {t('tools.auth.unauthorized')} + </Button> + </> + )} + {(collection.type === CollectionType.custom) && ( + <div className='system-sm-semibold-uppercase text-text-secondary'> + <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span> + </div> + )} + {(collection.type === CollectionType.workflow) && ( + <div className='system-sm-semibold-uppercase text-text-secondary'> + <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span> + </div> + )} + </div> + <div className='mt-1 flex-1 overflow-y-auto py-2'> + {collection.type !== CollectionType.workflow && toolList.map(tool => ( + <ToolItem + key={tool.name} + disabled={false} + collection={collection} + tool={tool} + isBuiltIn={isBuiltIn} + isModel={isModel} + /> + ))} + {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => ( + <div key={item.name} className='mb-1 py-1'> + <div className='mb-1 flex items-center gap-2'> + <span className='code-sm-semibold text-text-secondary'>{item.name}</span> + <span className='system-xs-regular text-text-tertiary'>{item.type}</span> + <span className='system-xs-medium text-text-warning-secondary'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span> + </div> + <div className='system-xs-regular text-text-tertiary'>{item.llm_description}</div> + </div> + ))} + </div> + </> )} </div> {showSettingAuth && (