From 15dd79e822d9402772dd1e193aea94f1d64409bc Mon Sep 17 00:00:00 2001 From: JzoNg Date: Sat, 19 Oct 2024 20:52:46 +0800 Subject: [PATCH] provider detail data binding --- web/app/components/tools/provider-list.tsx | 1 - web/app/components/tools/provider/detail.tsx | 62 +++++++++++-------- .../components/tools/provider/tool-item.tsx | 6 +- web/i18n/en-US/tools.ts | 2 +- web/i18n/zh-Hans/tools.ts | 2 +- 5 files changed, 41 insertions(+), 32 deletions(-) diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx index 4ca28991cc..3f2593020e 100644 --- a/web/app/components/tools/provider-list.tsx +++ b/web/app/components/tools/provider-list.tsx @@ -91,7 +91,6 @@ const ProviderList = () => {
{filteredCollectionList.map(collection => (
-
-
-
- {typeof collection.icon === 'string' && ( -
- )} - {typeof collection.icon !== 'string' && ( - +
+ +
+
+ + </div> + <div className='mb-1 flex justify-between items-center h-4'> + <OrgInfo + className="mt-0.5" + packageNameClassName='w-auto' + orgName={collection.author} + packageName={collection.name} /> - )} - </div> - <div className='grow w-0 py-[1px]'> - <div className='flex items-center text-md leading-6 font-semibold text-gray-900'> - <div className='truncate' title={collection.label[language]}>{collection.label[language]}</div> </div> </div> + <div className='flex gap-1'> + <ActionButton onClick={onHide}> + <RiCloseLine className='w-4 h-4' /> + </ActionButton> + </div> </div> - <div className='mt-2 min-h-[36px] text-gray-500 text-sm leading-[18px]'>{collection.description[language]}</div> + <Description className='mt-3' text={collection.description[language]} descriptionLineRows={2}></Description> <div className='flex gap-1 border-b-[0.5px] border-black/5'> {(collection.type === CollectionType.builtIn) && needAuth && ( <Button @@ -297,7 +307,7 @@ const ProviderDetail = ({ <div className='pt-3'> {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>} {!isDetailLoading && ( - <div className='text-xs font-medium leading-6 text-gray-500'> + <div className='text-text-secondary system-sm-semibold-uppercase'> {collection.type === CollectionType.workflow && <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>} {collection.type !== CollectionType.workflow && <span className=''>{t('tools.includeToolNum', { num: toolList.length }).toLocaleUpperCase()}</span>} {needAuth && (isBuiltIn || isModel) && !isAuthed && ( @@ -309,7 +319,7 @@ const ProviderDetail = ({ </div> )} {!isDetailLoading && ( - <div className='mt-1'> + <div className='mt-1 py-2'> {collection.type !== CollectionType.workflow && toolList.map(tool => ( <ToolItem key={tool.name} @@ -321,13 +331,13 @@ const ProviderDetail = ({ /> ))} {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => ( - <div key={item.name} className='mb-2 px-4 py-3 rounded-xl bg-gray-25 border-[0.5px] border-gray-200'> - <div className='flex items-center gap-2'> - <span className='font-medium text-sm text-gray-900'>{item.name}</span> - <span className='text-xs leading-[18px] text-gray-500'>{item.type}</span> - <span className='font-medium text-xs leading-[18px] text-[#ec4a0a]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span> + <div key={item.name} className='mb-1 py-1'> + <div className='mb-1 flex items-center gap-2'> + <span className='text-text-secondary code-sm-semibold'>{item.name}</span> + <span className='text-text-tertiary system-xs-regular'>{item.type}</span> + <span className='text-text-warning-secondary system-xs-medium'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span> </div> - <div className='h-[18px] leading-[18px] text-gray-500 text-xs'>{item.llm_description}</div> + <div className='text-text-tertiary system-xs-regular'>{item.llm_description}</div> </div> ))} </div> diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx index 2133f9221a..537f43c1b6 100644 --- a/web/app/components/tools/provider/tool-item.tsx +++ b/web/app/components/tools/provider/tool-item.tsx @@ -29,11 +29,11 @@ const ToolItem = ({ return ( <> <div - className={cn('mb-2 px-4 py-3 rounded-xl bg-gray-25 border-[0.5px] border-gary-200 shadow-xs cursor-pointer', disabled && 'opacity-50 !cursor-not-allowed')} + className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover', disabled && 'opacity-50 !cursor-not-allowed')} onClick={() => !disabled && setShowDetail(true)} > - <div className='text-gray-800 font-semibold text-sm leading-5'>{tool.label[language]}</div> - <div className='mt-0.5 text-xs leading-[18px] text-gray-500 line-clamp-2' title={tool.description[language]}>{tool.description[language]}</div> + <div className='pb-0.5 text-text-secondary system-md-semibold'>{tool.label[language]}</div> + <div className='text-text-tertiary system-xs-regular line-clamp-2' title={tool.description[language]}>{tool.description[language]}</div> </div> {showDetail && ( <SettingBuiltInTool diff --git a/web/i18n/en-US/tools.ts b/web/i18n/en-US/tools.ts index 64555e24ff..d3572eb317 100644 --- a/web/i18n/en-US/tools.ts +++ b/web/i18n/en-US/tools.ts @@ -21,7 +21,7 @@ const translation = { setupModalTitle: 'Set Up Authorization', setupModalTitleDescription: 'After configuring credentials, all members within the workspace can use this tool when orchestrating applications.', }, - includeToolNum: '{{num}} tools included', + includeToolNum: '{{num}} actions included', addTool: 'Add Tool', addToolModal: { type: 'type', diff --git a/web/i18n/zh-Hans/tools.ts b/web/i18n/zh-Hans/tools.ts index 4d42aa60fd..4c3b48b287 100644 --- a/web/i18n/zh-Hans/tools.ts +++ b/web/i18n/zh-Hans/tools.ts @@ -21,7 +21,7 @@ const translation = { setupModalTitle: '设置授权', setupModalTitleDescription: '配置凭据后，工作区中的所有成员都可以在编排应用程序时使用此工具。', }, - includeToolNum: '包含 {{num}} 个工具', + includeToolNum: '包含 {{num}} 个 action', addTool: '添加工具', addToolModal: { type: '类型',