Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -36,11 +36,11 @@ const ProviderCard = ({
|
||||
}, [collection.labels, labelList, language])
|
||||
|
||||
return (
|
||||
<div className={cn('group col-span-1 bg-white border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg', active && '!border-primary-400')} onClick={onSelect}>
|
||||
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
|
||||
<div className={cn('group col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-2 border-solid border-transparent bg-white shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg', active && '!border-primary-400')} onClick={onSelect}>
|
||||
<div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
|
||||
<div className='relative shrink-0'>
|
||||
{typeof collection.icon === 'string' && (
|
||||
<div className='w-10 h-10 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
|
||||
<div className='h-10 w-10 rounded-md bg-cover bg-center bg-no-repeat' style={{ backgroundImage: `url(${collection.icon})` }} />
|
||||
)}
|
||||
{typeof collection.icon !== 'string' && (
|
||||
<AppIcon
|
||||
@@ -50,18 +50,18 @@ const ProviderCard = ({
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className='grow w-0 py-[1px]'>
|
||||
<div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
|
||||
<div className='w-0 grow py-[1px]'>
|
||||
<div className='flex items-center text-sm font-semibold leading-5 text-gray-800'>
|
||||
<div className='truncate' title={collection.label[language]}>{collection.label[language]}</div>
|
||||
</div>
|
||||
<div className='flex items-center text-[10px] leading-[18px] text-gray-500 font-medium'>
|
||||
<div className='flex items-center text-[10px] font-medium leading-[18px] text-gray-500'>
|
||||
<div className='truncate'>{t('tools.author')} {collection.author}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-gray-500',
|
||||
'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-gray-500',
|
||||
collection.labels?.length ? 'line-clamp-2' : 'line-clamp-4',
|
||||
collection.labels?.length > 0 && 'group-hover:line-clamp-2 group-hover:max-h-[36px]',
|
||||
)}
|
||||
@@ -70,10 +70,10 @@ const ProviderCard = ({
|
||||
{collection.description[language]}
|
||||
</div>
|
||||
{collection.labels?.length > 0 && (
|
||||
<div className='flex items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]'>
|
||||
<div className='relative w-full flex items-center gap-1 py-[7px] rounded-md text-gray-500' title={labelContent}>
|
||||
<Tag01 className='shrink-0 w-3 h-3' />
|
||||
<div className='grow text-xs text-start leading-[18px] font-normal truncate'>{labelContent}</div>
|
||||
<div className='mt-1 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
|
||||
<div className='relative flex w-full items-center gap-1 rounded-md py-[7px] text-gray-500' title={labelContent}>
|
||||
<Tag01 className='h-3 w-3 shrink-0' />
|
||||
<div className='grow truncate text-start text-xs font-normal leading-[18px]'>{labelContent}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -17,22 +17,22 @@ const Contribute: FC = () => {
|
||||
href='https://github.com/langgenius/dify/blob/main/api/core/tools/README.md'
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className="group flex col-span-1 bg-white bg-cover bg-no-repeat bg-[url('~@/app/components/tools/provider/grid_bg.svg')] border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg"
|
||||
className="group col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-2 border-solid border-transparent bg-white bg-[url('~@/app/components/tools/provider/grid_bg.svg')] bg-cover bg-no-repeat shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg"
|
||||
>
|
||||
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
|
||||
<div className='relative shrink-0 flex items-center'>
|
||||
<div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600'/></div>
|
||||
<div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]'/></div>
|
||||
<div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
|
||||
<div className='relative flex shrink-0 items-center'>
|
||||
<div className='z-10 flex rounded-[10px] border-[0.5px] border-primary-100 bg-white p-3 shadow-md'><RiHammerFill className='h-4 w-4 text-primary-600'/></div>
|
||||
<div className='flex -translate-x-2 rounded-[10px] border-[0.5px] border-[#FCE7F6] bg-[#FEF6FB] p-3 shadow-md'><Heart02 className='h-4 w-4 text-[#EE46BC]'/></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mb-3 px-[14px] text-[15px] leading-5 font-semibold'>
|
||||
<div className='mb-3 px-[14px] text-[15px] font-semibold leading-5'>
|
||||
<div className='text-gradient'>{t('tools.contribute.line1')}</div>
|
||||
<div className='text-gradient'>{t('tools.contribute.line2')}</div>
|
||||
</div>
|
||||
<div className='px-4 py-3 border-t-[0.5px] border-black/5 flex items-center space-x-1 text-[#155EEF]'>
|
||||
<BookOpen01 className='w-3 h-3' />
|
||||
<div className='grow leading-[18px] text-xs font-normal'>{t('tools.contribute.viewGuide')}</div>
|
||||
<ArrowUpRight className='w-3 h-3' />
|
||||
<div className='flex items-center space-x-1 border-t-[0.5px] border-black/5 px-4 py-3 text-[#155EEF]'>
|
||||
<BookOpen01 className='h-3 w-3' />
|
||||
<div className='grow text-xs font-normal leading-[18px]'>{t('tools.contribute.viewGuide')}</div>
|
||||
<ArrowUpRight className='h-3 w-3' />
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
@@ -45,20 +45,20 @@ const Contribute = ({ onRefreshData }: Props) => {
|
||||
return (
|
||||
<>
|
||||
{isCurrentWorkspaceManager && (
|
||||
<div className='flex flex-col col-span-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-divider-subtle rounded-xl min-h-[135px] transition-all duration-200 ease-in-out cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg'>
|
||||
<div className='col-span-1 flex min-h-[135px] cursor-pointer flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-on-panel-item-bg transition-all duration-200 ease-in-out hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg'>
|
||||
<div className='group grow rounded-t-xl hover:bg-background-body' onClick={() => setIsShowEditCustomCollectionModal(true)}>
|
||||
<div className='shrink-0 flex items-center p-4 pb-3'>
|
||||
<div className='w-10 h-10 flex items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg rounded-lg group-hover:border-components-option-card-option-border-hover group-hover:bg-components-option-card-option-bg-hover'>
|
||||
<RiAddLine className='w-4 h-4 text-text-tertiary group-hover:text-text-accent'/>
|
||||
<div className='flex shrink-0 items-center p-4 pb-3'>
|
||||
<div className='flex h-10 w-10 items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg group-hover:border-components-option-card-option-border-hover group-hover:bg-components-option-card-option-bg-hover'>
|
||||
<RiAddLine className='h-4 w-4 text-text-tertiary group-hover:text-text-accent'/>
|
||||
</div>
|
||||
<div className='ml-3 text-sm font-semibold leading-5 text-text-primary group-hover:text-text-accent'>{t('tools.createCustomTool')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 py-3 rounded-b-xl border-t-[0.5px] border-divider-regular text-text-tertiary hover:text-text-accent hover:bg-background-body'>
|
||||
<div className='rounded-b-xl border-t-[0.5px] border-divider-regular px-4 py-3 text-text-tertiary hover:bg-background-body hover:text-text-accent'>
|
||||
<a href={linkUrl} target='_blank' rel='noopener noreferrer' className='flex items-center space-x-1'>
|
||||
<BookOpen01 className='shrink-0 w-3 h-3' />
|
||||
<div className='grow leading-[18px] text-xs font-normal truncate' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
|
||||
<ArrowUpRight className='shrink-0 w-3 h-3' />
|
||||
<BookOpen01 className='h-3 w-3 shrink-0' />
|
||||
<div className='grow truncate text-xs font-normal leading-[18px]' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
|
||||
<ArrowUpRight className='h-3 w-3 shrink-0' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -233,16 +233,16 @@ const ProviderDetail = ({
|
||||
footer={null}
|
||||
mask={false}
|
||||
positionCenter={false}
|
||||
panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
|
||||
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='p-4'>
|
||||
<div className='mb-3 flex'>
|
||||
<Icon src={collection.icon} />
|
||||
<div className="ml-3 w-0 grow">
|
||||
<div className="flex items-center h-5">
|
||||
<div className="flex h-5 items-center">
|
||||
<Title title={collection.label[language]} />
|
||||
</div>
|
||||
<div className='mb-1 flex justify-between items-center h-4'>
|
||||
<div className='mb-1 flex h-4 items-center justify-between'>
|
||||
<OrgInfo
|
||||
className="mt-0.5"
|
||||
packageNameClassName='w-auto'
|
||||
@@ -253,7 +253,7 @@ const ProviderDetail = ({
|
||||
</div>
|
||||
<div className='flex gap-1'>
|
||||
<ActionButton onClick={onHide}>
|
||||
<RiCloseLine className='w-4 h-4' />
|
||||
<RiCloseLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,10 +263,10 @@ const ProviderDetail = ({
|
||||
<div className='flex gap-1 border-b-[0.5px] border-divider-subtle'>
|
||||
{collection.type === CollectionType.custom && !isDetailLoading && (
|
||||
<Button
|
||||
className={cn('shrink-0 my-3 w-full')}
|
||||
className={cn('my-3 w-full shrink-0')}
|
||||
onClick={() => setIsShowEditCustomCollectionModal(true)}
|
||||
>
|
||||
<Settings01 className='mr-1 w-4 h-4 text-text-tertiary' />
|
||||
<Settings01 className='mr-1 h-4 w-4 text-text-tertiary' />
|
||||
<div className='system-sm-medium text-text-secondary'>{t('tools.createTool.editAction')}</div>
|
||||
</Button>
|
||||
)}
|
||||
@@ -274,15 +274,15 @@ const ProviderDetail = ({
|
||||
<>
|
||||
<Button
|
||||
variant='primary'
|
||||
className={cn('shrink-0 my-3 w-[183px]')}
|
||||
className={cn('my-3 w-[183px] shrink-0')}
|
||||
>
|
||||
<a className='flex items-center text-text-primary' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
|
||||
<a className='flex items-center' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
|
||||
<div className='system-sm-medium'>{t('tools.openInStudio')}</div>
|
||||
<LinkExternal02 className='ml-1 w-4 h-4' />
|
||||
<LinkExternal02 className='ml-1 h-4 w-4' />
|
||||
</a>
|
||||
</Button>
|
||||
<Button
|
||||
className={cn('shrink-0 my-3 w-[183px]')}
|
||||
className={cn('my-3 w-[183px] shrink-0')}
|
||||
onClick={() => setIsShowEditWorkflowToolModal(true)}
|
||||
disabled={!isCurrentWorkspaceManager}
|
||||
>
|
||||
@@ -296,7 +296,7 @@ const ProviderDetail = ({
|
||||
{isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
|
||||
{/* Builtin type */}
|
||||
{!isDetailLoading && (collection.type === CollectionType.builtIn) && isAuthed && (
|
||||
<div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
|
||||
<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
|
||||
@@ -316,14 +316,14 @@ const ProviderDetail = ({
|
||||
)}
|
||||
{!isDetailLoading && (collection.type === CollectionType.builtIn) && needAuth && !isAuthed && (
|
||||
<>
|
||||
<div className='text-text-secondary system-sm-semibold-uppercase'>
|
||||
<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('shrink-0 my-3 w-full')}
|
||||
className={cn('my-3 w-full shrink-0')}
|
||||
onClick={() => {
|
||||
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
|
||||
showSettingAuthModal()
|
||||
@@ -336,13 +336,13 @@ const ProviderDetail = ({
|
||||
)}
|
||||
{/* Custom type */}
|
||||
{!isDetailLoading && (collection.type === CollectionType.custom) && (
|
||||
<div className='text-text-secondary system-sm-semibold-uppercase'>
|
||||
<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='text-text-secondary system-sm-semibold-uppercase'>
|
||||
<div className='system-sm-semibold-uppercase text-text-secondary'>
|
||||
<span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -362,11 +362,11 @@ const ProviderDetail = ({
|
||||
{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='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>
|
||||
<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='text-text-tertiary system-xs-regular'>{item.llm_description}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{item.llm_description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -29,11 +29,11 @@ const ToolItem = ({
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
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')}
|
||||
className={cn('bg-components-panel-item-bg mb-2 cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover', disabled && '!cursor-not-allowed opacity-50')}
|
||||
onClick={() => !disabled && setShowDetail(true)}
|
||||
>
|
||||
<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 className='system-md-semibold pb-0.5 text-text-secondary'>{tool.label[language]}</div>
|
||||
<div className='system-xs-regular line-clamp-2 text-text-tertiary' title={tool.description[language]}>{tool.description[language]}</div>
|
||||
</div>
|
||||
{showDetail && (
|
||||
<SettingBuiltInTool
|
||||
|
||||
Reference in New Issue
Block a user