hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-10 19:36:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
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
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/plugins/base/badges/icon-with-tooltip.tsx
View File

@@ -19,7 +19,7 @@ const IconWithTooltip: FC<IconWithTooltipProps> = ({
BadgeIconDark,
}) => {
const isDark = theme === Theme.dark
const iconClassName = cn('w-5 h-5', className)
const iconClassName = cn('h-5 w-5', className)
const Icon = isDark ? BadgeIconDark : BadgeIconLight
return (
@@ -27,7 +27,7 @@ const IconWithTooltip: FC<IconWithTooltipProps> = ({
popupClassName='p-1.5 border-[0.5px] border-[0.5px] border-components-panel-border bg-components-tooltip-bg text-text-secondary system-xs-medium'
popupContent={popupContent}
>
<div className='flex items-center justify-center shrink-0'>
<div className='flex shrink-0 items-center justify-center'>
<Icon className={iconClassName} />
</div>
</Tooltip>

8
web/app/components/plugins/base/key-value-item.tsx
View File

@@ -48,14 +48,14 @@ const KeyValueItem: FC<Props> = ({
return (
<div className='flex items-center gap-1'>
<span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
<div className='flex justify-center items-center gap-0.5'>
<span className={cn(valueMaxWidthClassName, ' truncate system-xs-medium text-text-secondary')}>
<span className={cn('system-xs-medium flex flex-col items-start justify-center text-text-tertiary', labelWidthClassName)}>{label}</span>
<div className='flex items-center justify-center gap-0.5'>
<span className={cn(valueMaxWidthClassName, ' system-xs-medium truncate text-text-secondary')}>
{maskedValue || value}
</span>
<Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
<ActionButton onClick={handleCopy}>
<CopyIcon className='shrink-0 w-3.5 h-3.5 text-text-tertiary' />
<CopyIcon className='h-3.5 w-3.5 shrink-0 text-text-tertiary' />
</ActionButton>
</Tooltip>
</div>

6
web/app/components/plugins/card/base/card-icon.tsx
View File

@@ -42,7 +42,7 @@ const Icon = ({
return (
<div
className={cn('shrink-0 relative rounded-md bg-center bg-no-repeat bg-contain', iconSizeMap[size], className)}
className={cn('relative shrink-0 rounded-md bg-contain bg-center bg-no-repeat', iconSizeMap[size], className)}
style={{
backgroundImage: `url(${src})`,
}}
@@ -50,13 +50,13 @@ const Icon = ({
{
installed
&& <div className={cn(iconClassName, 'bg-state-success-solid')}>
<RiCheckLine className='w-3 h-3 text-text-primary-on-surface' />
<RiCheckLine className='h-3 w-3 text-text-primary-on-surface' />
</div>
}
{
installFailed
&& <div className={cn(iconClassName, 'bg-state-destructive-solid')}>
<RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
<RiCloseLine className='h-3 w-3 text-text-primary-on-surface' />
</div>
}
</div>

4
web/app/components/plugins/card/base/corner-mark.tsx
View File

@@ -2,9 +2,9 @@ import { LeftCorner } from '../../../base/icons/src/vender/plugin'
const CornerMark = ({ text }: { text: string }) => {
return (
<div className='absolute top-0 right-0 flex pl-[13px] '>
<div className='absolute right-0 top-0 flex pl-[13px] '>
<LeftCorner className="text-background-section" />
<div className="h-5 leading-5 rounded-tr-xl pr-2 bg-background-section text-text-tertiary system-2xs-medium-uppercase">{text}</div>
<div className="system-2xs-medium-uppercase h-5 rounded-tr-xl bg-background-section pr-2 leading-5 text-text-tertiary">{text}</div>
</div>
)
}

2
web/app/components/plugins/card/base/description.tsx
View File

@@ -22,7 +22,7 @@ const Description: FC<Props> = ({
return 'h-12 line-clamp-3'
}, [descriptionLineRows])
return (
<div className={cn('text-text-tertiary system-xs-regular', lineClassName, className)}>
<div className={cn('system-xs-regular text-text-tertiary', lineClassName, className)}>
{text}
</div>
)

2
web/app/components/plugins/card/base/download-count.tsx
View File

@@ -10,7 +10,7 @@ const DownloadCount = ({
}: Props) => {
return (
<div className="flex items-center space-x-1 text-text-tertiary">
<RiInstallLine className="shrink-0 w-3 h-3" />
<RiInstallLine className="h-3 w-3 shrink-0" />
<div className="system-xs-regular">{formatNumber(downloadCount)}</div>
</div>
)

8
web/app/components/plugins/card/base/org-info.tsx
View File

@@ -13,14 +13,14 @@ const OrgInfo = ({
packageNameClassName,
}: Props) => {
return (
<div className={cn('flex items-center h-4 space-x-0.5', className)}>
<div className={cn('flex h-4 items-center space-x-0.5', className)}>
{orgName && (
<>
<span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
<span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
<span className='system-xs-regular shrink-0 text-text-tertiary'>{orgName}</span>
<span className='system-xs-regular shrink-0 text-text-quaternary'>/</span>
</>
)}
<span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
<span className={cn('system-xs-regular w-0 shrink-0 grow truncate text-text-tertiary', packageNameClassName)}>
{packageName}
</span>
</div>

10
web/app/components/plugins/card/base/placeholder.tsx
View File

@@ -9,7 +9,7 @@ type Props = {
}
export const LoadingPlaceholder = ({ className }: { className?: string }) => (
<div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
<div className={cn('h-2 rounded-sm bg-text-quaternary opacity-20', className)} />
)
const Placeholder = ({
@@ -20,15 +20,15 @@ const Placeholder = ({
<div className={wrapClassName}>
<SkeletonRow>
<div
className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
<div className='flex w-5 h-5 justify-center items-center'>
className='flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
border-components-panel-border bg-background-default p-1 backdrop-blur-sm'>
<div className='flex h-5 w-5 items-center justify-center'>
<Group className='text-text-tertiary' />
</div>
</div>
<div className="grow">
<SkeletonContainer>
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
{loadingFileName ? (
<Title title={loadingFileName} />
) : (

2
web/app/components/plugins/card/base/title.tsx
View File

@@ -4,7 +4,7 @@ const Title = ({
title: string
}) => {
return (
<div className='truncate text-text-secondary system-md-semibold'>
<div className='system-md-semibold truncate text-text-secondary'>
{title}
</div>
)

8
web/app/components/plugins/card/card-more-info.tsx
View File

@@ -10,16 +10,16 @@ const CardMoreInfo = ({
tags,
}: Props) => {
return (
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
{downloadCount !== undefined && <DownloadCount downloadCount={downloadCount} />}
{downloadCount !== undefined && tags && tags.length > 0 && <div className="mx-2 text-text-quaternary system-xs-regular">·</div>}
{downloadCount !== undefined && tags && tags.length > 0 && <div className="system-xs-regular mx-2 text-text-quaternary">·</div>}
{tags && tags.length > 0 && (
<>
<div className="flex flex-wrap space-x-2 h-4 overflow-hidden">
<div className="flex h-4 flex-wrap space-x-2 overflow-hidden">
{tags.map(tag => (
<div
key={tag}
className="flex space-x-1 system-xs-regular max-w-[120px] overflow-hidden"
className="system-xs-regular flex max-w-[120px] space-x-1 overflow-hidden"
title={`# ${tag}`}
>
<span className="text-text-quaternary">#</span>

8
web/app/components/plugins/card/index.tsx
View File

@@ -54,7 +54,7 @@ const Card = ({
obj ? renderI18nObject(obj, locale) : ''
const isPartner = badges.includes('partner')
const wrapClassName = cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)
const wrapClassName = cn('hover-bg-components-panel-on-panel-item-bg relative rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs', className)
if (isLoading) {
return (
<Placeholder
@@ -71,10 +71,10 @@ const Card = ({
<div className="flex">
<Icon src={icon} installed={installed} installFailed={installFailed} />
<div className="ml-3 w-0 grow">
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
<Title title={getLocalizedText(label)} />
{isPartner && <Partner className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.partnerTip')} />}
{verified && <Verified className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.verifiedTip')} />}
{isPartner && <Partner className='ml-0.5 h-4 w-4' text={t('plugin.marketplace.partnerTip')} />}
{verified && <Verified className='ml-0.5 h-4 w-4' text={t('plugin.marketplace.verifiedTip')} />}
{titleLeft} {/* This can be version badge */}
</div>
<OrgInfo

8
web/app/components/plugins/install-plugin/base/installed.tsx
View File

@@ -30,10 +30,10 @@ const Installed: FC<Props> = ({
}
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<p className='system-md-regular text-text-secondary'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p>
{payload && (
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={isMarketPayload ? pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket) : pluginManifestToCardPluginProps(payload as PluginDeclaration)}
@@ -45,7 +45,7 @@ const Installed: FC<Props> = ({
)}
</div>
{/* Action Buttons */}
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
<Button
variant='primary'
className='min-w-[72px]'

14
web/app/components/plugins/install-plugin/base/loading-error.tsx
View File

@@ -16,23 +16,23 @@ const LoadingError: FC = () => {
checked={false}
disabled
/>
<div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
<div className='hover-bg-components-panel-on-panel-item-bg relative grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs'>
<div className="flex">
<div
className='relative flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
border-[0.5px] border-state-destructive-border bg-state-destructive-hover backdrop-blur-sm'>
<div className='flex w-5 h-5 justify-center items-center'>
className='relative flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
border-state-destructive-border bg-state-destructive-hover p-1 backdrop-blur-sm'>
<div className='flex h-5 w-5 items-center justify-center'>
<Group className='text-text-quaternary' />
</div>
<div className='absolute bottom-[-4px] right-[-4px] rounded-full border-[2px] border-components-panel-bg bg-state-destructive-solid'>
<RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
<RiCloseLine className='h-3 w-3 text-text-primary-on-surface' />
</div>
</div>
<div className="ml-3 grow">
<div className="flex items-center h-5 system-md-semibold text-text-destructive">
<div className="system-md-semibold flex h-5 items-center text-text-destructive">
{t('plugin.installModal.pluginLoadError')}
</div>
<div className='mt-0.5 system-xs-regular text-text-tertiary'>
<div className='system-xs-regular mt-0.5 text-text-tertiary'>
{t('plugin.installModal.pluginLoadErrorDesc')}
</div>
</div>

2
web/app/components/plugins/install-plugin/base/loading.tsx
View File

@@ -11,7 +11,7 @@ const Loading = () => {
checked={false}
disabled
/>
<div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
<div className='hover-bg-components-panel-on-panel-item-bg relative grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs'>
<Placeholder
wrapClassName='w-full'
/>

6
web/app/components/plugins/install-plugin/install-bundle/index.tsx
View File

@@ -52,11 +52,11 @@ const InstallBundle: FC<Props> = ({
<Modal
isShow={true}
onClose={foldAnimInto}
className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='self-stretch text-text-primary title-2xl-semi-bold'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
</div>

12
web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
View File

@@ -76,11 +76,11 @@ const Install: FC<Props> = ({
}
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='text-text-secondary system-md-regular'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { num: selectedPluginsNum })}</p>
</div>
<div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
<div className='w-full space-y-1 rounded-2xl bg-background-section-burn p-2'>
<InstallMulti
allPlugins={allPlugins}
selectedPlugins={selectedPlugins}
@@ -92,7 +92,7 @@ const Install: FC<Props> = ({
</div>
{/* Action Buttons */}
{!isHideButton && (
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
{!canInstall && (
<Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
{t('common.operation.cancel')}
@@ -100,11 +100,11 @@ const Install: FC<Props> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
disabled={!canInstall || isInstalling || selectedPlugins.length === 0}
onClick={handleInstall}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>

6
web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
View File

@@ -26,9 +26,9 @@ const Installed: FC<Props> = ({
const { getIconUrl } = useGetIcon()
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
{/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
<div className='flex flex-wrap content-start items-start gap-1 space-y-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
{list.map((plugin, index) => {
return (
<Card
@@ -48,7 +48,7 @@ const Installed: FC<Props> = ({
</div>
{/* Action Buttons */}
{!isHideButton && (
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
<Button
variant='primary'
className='min-w-[72px]'

14
web/app/components/plugins/install-plugin/install-from-github/index.tsx
View File

@@ -168,16 +168,16 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
<Modal
isShow={true}
onClose={foldAnimInto}
className={cn(modalClassName, `flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px]
border-components-panel-border bg-components-panel-bg shadows-shadow-xl`)}
className={cn(modalClassName, `shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px]
border-components-panel-border bg-components-panel-bg p-0`)}
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='flex flex-col items-start gap-1 grow'>
<div className='self-stretch text-text-primary title-2xl-semi-bold'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='flex grow flex-col items-start gap-1'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
<div className='self-stretch text-text-tertiary system-xs-regular'>
<div className='system-xs-regular self-stretch text-text-tertiary'>
{!([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step)) && t('plugin.installFromGitHub.installNote')}
</div>
</div>
@@ -189,7 +189,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
errMsg={errorMsg}
onCancel={onClose}
/>
: <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
: <div className={`flex flex-col items-start justify-center self-stretch px-6 py-3 ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
{state.step === InstallStepFromGitHub.setUrl && (
<SetURL
repoUrl={state.repoUrl}

10
web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
View File

@@ -143,10 +143,10 @@ const Loaded: React.FC<LoadedProps> = ({
return (
<>
<div className='text-text-secondary system-md-regular'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.readyToInstall`)}</p>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={pluginManifestToCardPluginProps(payload as PluginDeclaration)}
@@ -157,7 +157,7 @@ const Loaded: React.FC<LoadedProps> = ({
/>}
/>
</div>
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
<div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
{!isInstalling && (
<Button variant='secondary' className='min-w-[72px]' onClick={onBack}>
{t('plugin.installModal.back')}
@@ -165,11 +165,11 @@ const Loaded: React.FC<LoadedProps> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
onClick={handleInstall}
disabled={isInstalling || isLoading}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>

6
web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
View File

@@ -72,7 +72,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
<>
<label
htmlFor='version'
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
className='flex flex-col items-start justify-center self-stretch text-text-secondary'
>
<span className='system-sm-semibold'>{t(`${i18nPrefix}.selectVersion`)}</span>
</label>
@@ -86,7 +86,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
/>
<label
htmlFor='package'
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
className='flex flex-col items-start justify-center self-stretch text-text-secondary'
>
<span className='system-sm-semibold'>{t(`${i18nPrefix}.selectPackage`)}</span>
</label>
@@ -98,7 +98,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
placeholder={t(`${i18nPrefix}.selectPackagePlaceholder`) || ''}
popupClassName='w-[512px] z-[1001]'
/>
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
<div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
{!isEdit
&& <Button
variant='secondary'

10
web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
View File

@@ -17,7 +17,7 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
<>
<label
htmlFor='repoUrl'
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
className='flex flex-col items-start justify-center self-stretch text-text-secondary'
>
<span className='system-sm-semibold'>{t('plugin.installFromGitHub.gitHubRepo')}</span>
</label>
@@ -27,12 +27,12 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
name='repoUrl'
value={repoUrl}
onChange={e => onChange(e.target.value)}
className='flex items-center self-stretch rounded-lg border border-components-input-border-active
bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
text-components-input-text-filled text-ellipsis system-sm-regular'
className='shadows-shadow-xs system-sm-regular flex grow items-center gap-[2px]
self-stretch overflow-hidden text-ellipsis rounded-lg border border-components-input-border-active
bg-components-input-bg-active p-2 text-components-input-text-filled'
placeholder='Please enter GitHub repo URL'
/>
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
<div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
<Button
variant='secondary'
className='min-w-[72px]'

6
web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
View File

@@ -86,11 +86,11 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
<Modal
isShow={true}
onClose={foldAnimInto}
className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='self-stretch text-text-primary title-2xl-semi-bold'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
</div>

12
web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
View File

@@ -105,8 +105,8 @@ const Installed: FC<Props> = ({
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='text-text-secondary system-md-regular'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.readyToInstall`)}</p>
<p>
<Trans
@@ -115,7 +115,7 @@ const Installed: FC<Props> = ({
/>
</p>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={pluginManifestToCardPluginProps(payload)}
@@ -128,7 +128,7 @@ const Installed: FC<Props> = ({
</div>
</div>
{/* Action Buttons */}
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
{!isInstalling && (
<Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
{t('common.operation.cancel')}
@@ -136,11 +136,11 @@ const Installed: FC<Props> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
disabled={isInstalling || isLoading}
onClick={handleInstall}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>

10
web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
View File

@@ -59,16 +59,16 @@ const Uploading: FC<Props> = ({
}, [])
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='flex items-center gap-1 self-stretch'>
<RiLoader2Line className='text-text-accent w-4 h-4 animate-spin-slow' />
<div className='text-text-secondary system-md-regular'>
<RiLoader2Line className='h-4 w-4 animate-spin-slow text-text-accent' />
<div className='system-md-regular text-text-secondary'>
{t(`${i18nPrefix}.uploadingPackage`, {
packageName: fileName,
})}
</div>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={{ name: fileName } as any}
@@ -80,7 +80,7 @@ const Uploading: FC<Props> = ({
</div>
{/* Action Buttons */}
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
<Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
{t('common.operation.cancel')}
</Button>

6
web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
View File

@@ -73,11 +73,11 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
isShow={true}
onClose={foldAnimInto}
wrapperClassName='z-[9999]'
className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='self-stretch text-text-primary title-2xl-semi-bold'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
</div>

12
web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
View File

@@ -119,11 +119,11 @@ const Installed: FC<Props> = ({
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='text-text-secondary system-md-regular'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.readyToInstall`)}</p>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
@@ -136,7 +136,7 @@ const Installed: FC<Props> = ({
</div>
</div>
{/* Action Buttons */}
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
{!isInstalling && (
<Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
{t('common.operation.cancel')}
@@ -144,11 +144,11 @@ const Installed: FC<Props> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
disabled={isInstalling || isLoading}
onClick={handleInstall}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>

16
web/app/components/plugins/marketplace/description/index.tsx
View File

@@ -9,17 +9,17 @@ type DescriptionProps = {
const Description = async ({
locale: localeFromProps,
}: DescriptionProps) => {
const localeDefault = getLocaleOnServer()
const localeDefault = await getLocaleOnServer()
const { t } = await translate(localeFromProps || localeDefault, 'plugin')
const { t: tCommon } = await translate(localeFromProps || localeDefault, 'common')
const isZhHans = localeFromProps === 'zh-Hans'
return (
<>
<h1 className='shrink-0 mb-2 text-center title-4xl-semi-bold text-text-primary'>
<h1 className='title-4xl-semi-bold mb-2 shrink-0 text-center text-text-primary'>
{t('marketplace.empower')}
</h1>
<h2 className='shrink-0 flex justify-center items-center text-center body-md-regular text-text-tertiary'>
<h2 className='body-md-regular flex shrink-0 items-center justify-center text-center text-text-tertiary'>
{
isZhHans && (
<>
@@ -36,23 +36,23 @@ const Description = async ({
</>
)
}
<span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
<span className="body-md-medium relative z-[1] ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className='relative z-[2] lowercase'>{t('category.models')}</span>
</span>
,
<span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
<span className="body-md-medium relative z-[1] ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className='relative z-[2] lowercase'>{t('category.tools')}</span>
</span>
,
<span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
<span className="body-md-medium relative z-[1] ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className='relative z-[2] lowercase'>{t('category.agents')}</span>
</span>
,
<span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
<span className="body-md-medium relative z-[1] ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className='relative z-[2] lowercase'>{t('category.extensions')}</span>
</span>
{t('marketplace.and')}
<span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
<span className="body-md-medium relative z-[1] ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
<span className='relative z-[2] lowercase'>{t('category.bundles')}</span>
</span>
{

18
web/app/components/plugins/marketplace/empty/index.tsx
View File

@@ -21,14 +21,14 @@ const Empty = ({
return (
<div
className={cn('grow relative h-0 flex flex-wrap p-2 overflow-hidden', className)}
className={cn('relative flex h-0 grow flex-wrap overflow-hidden p-2', className)}
>
{
Array.from({ length: 16 }).map((_, index) => (
<div
key={index}
className={cn(
'mr-3 mb-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
'mb-3 mr-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
index % 4 === 3 && 'mr-0',
index > 11 && 'mb-0',
lightCard && 'bg-background-default-lighter opacity-75',
@@ -40,19 +40,19 @@ const Empty = ({
{
!lightCard && (
<div
className='absolute inset-0 bg-marketplace-plugin-empty z-[1]'
className='absolute inset-0 z-[1] bg-marketplace-plugin-empty'
></div>
)
}
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2] flex flex-col items-center'>
<div className='relative flex items-center justify-center mb-3 w-14 h-14 rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg'>
<Group className='w-5 h-5' />
<div className='absolute left-1/2 top-1/2 z-[2] flex -translate-x-1/2 -translate-y-1/2 flex-col items-center'>
<div className='relative mb-3 flex h-14 w-14 items-center justify-center rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg'>
<Group className='h-5 w-5' />
<Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' />
<Line className='absolute left-[-1px] top-1/2 -translate-y-1/2' />
<Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
</div>
<div className='text-center system-md-regular text-text-tertiary'>
<div className='system-md-regular text-center text-text-tertiary'>
{text || t('plugin.marketplace.noPluginFound')}
</div>
</div>

2
web/app/components/plugins/marketplace/intersection-line/index.tsx
View File

@@ -14,7 +14,7 @@ const IntersectionLine = ({
useScrollIntersection(ref, intersectionContainerId)
return (
<div ref={ref} className='shrink-0 mb-4 h-[1px] bg-transparent'></div>
<div ref={ref} className='mb-4 h-[1px] shrink-0 bg-transparent'></div>
)
}

10
web/app/components/plugins/marketplace/list/card-wrapper.tsx
View File

@@ -32,7 +32,7 @@ const CardWrapper = ({
if (showInstallButton) {
return (
<div
className='group relative rounded-xl cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
className='group relative cursor-pointer rounded-xl hover:bg-components-panel-on-panel-item-bg-hover'
>
<Card
key={plugin.name}
@@ -47,7 +47,7 @@ const CardWrapper = ({
/>
{
showInstallButton && (
<div className='hidden absolute bottom-0 group-hover:flex items-center space-x-2 px-4 pt-8 pb-4 w-full bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent rounded-b-xl'>
<div className='absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent px-4 pb-4 pt-8 group-hover:flex'>
<Button
variant='primary'
className='w-[calc(50%-4px)]'
@@ -55,12 +55,12 @@ const CardWrapper = ({
>
{t('plugin.detailPanel.operation.install')}
</Button>
<a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}`} target='_blank' className='block flex-1 shrink-0 w-[calc(50%-4px)]'>
<a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}`} target='_blank' className='block w-[calc(50%-4px)] flex-1 shrink-0'>
<Button
className='w-full gap-0.5'
>
{t('plugin.detailPanel.operation.detail')}
<RiArrowRightUpLine className='ml-1 w-4 h-4' />
<RiArrowRightUpLine className='ml-1 h-4 w-4' />
</Button>
</a>
</div>
@@ -82,7 +82,7 @@ const CardWrapper = ({
return (
<a
className='group inline-block relative rounded-xl cursor-pointer'
className='group relative inline-block cursor-pointer rounded-xl'
href={getPluginLinkInMarketplace(plugin)}
>
<Card

2
web/app/components/plugins/marketplace/list/index.tsx
View File

@@ -13,7 +13,7 @@ type ListProps = {
showInstallButton?: boolean
locale: string
cardContainerClassName?: string
cardRender?: (plugin: Plugin) => JSX.Element | null
cardRender?: (plugin: Plugin) => React.JSX.Element | null
onMoreClick?: () => void
emptyClassName?: string
}

10
web/app/components/plugins/marketplace/list/list-with-collection.tsx
View File

@@ -15,7 +15,7 @@ type ListWithCollectionProps = {
showInstallButton?: boolean
locale: string
cardContainerClassName?: string
cardRender?: (plugin: Plugin) => JSX.Element | null
cardRender?: (plugin: Plugin) => React.JSX.Element | null
onMoreClick?: (searchParams?: SearchParamsFromCollection) => void
}
const ListWithCollection = ({
@@ -37,7 +37,7 @@ const ListWithCollection = ({
key={collection.name}
className='py-3'
>
<div className='flex justify-between items-end'>
<div className='flex items-end justify-between'>
<div>
<div className='title-xl-semi-bold text-text-primary'>{collection.label[getLanguage(locale)]}</div>
<div className='system-xs-regular text-text-tertiary'>{collection.description[getLanguage(locale)]}</div>
@@ -45,17 +45,17 @@ const ListWithCollection = ({
{
collection.searchable && onMoreClick && (
<div
className='flex items-center system-xs-medium text-text-accent cursor-pointer '
className='system-xs-medium flex cursor-pointer items-center text-text-accent '
onClick={() => onMoreClick?.(collection.search_params)}
>
{t('plugin.marketplace.viewMore')}
<RiArrowRightSLine className='w-4 h-4' />
<RiArrowRightSLine className='h-4 w-4' />
</div>
)
}
</div>
<div className={cn(
'grid grid-cols-4 gap-3 mt-2',
'mt-2 grid grid-cols-4 gap-3',
cardContainerClassName,
)}>
{

8
web/app/components/plugins/marketplace/list/list-wrapper.tsx
View File

@@ -39,19 +39,19 @@ const ListWrapper = ({
return (
<div
style={{ scrollbarGutter: 'stable' }}
className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'>
className='relative flex grow flex-col bg-background-default-subtle px-12 py-2'>
{
plugins && (
<div className='flex items-center mb-4 pt-3'>
<div className='mb-4 flex items-center pt-3'>
<div className='title-xl-semi-bold text-text-primary'>{t('plugin.marketplace.pluginsResult', { num: pluginsTotal })}</div>
<div className='mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div>
<SortDropdown locale={locale} />
</div>
)
}
{
isLoading && page === 1 && (
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
<Loading />
</div>
)

14
web/app/components/plugins/marketplace/plugin-type-switch.tsx
View File

@@ -46,33 +46,33 @@ const PluginTypeSwitch = ({
{
value: PLUGIN_TYPE_SEARCH_MAP.model,
text: t('plugin.category.models'),
icon: <RiBrain2Line className='mr-1.5 w-4 h-4' />,
icon: <RiBrain2Line className='mr-1.5 h-4 w-4' />,
},
{
value: PLUGIN_TYPE_SEARCH_MAP.tool,
text: t('plugin.category.tools'),
icon: <RiHammerLine className='mr-1.5 w-4 h-4' />,
icon: <RiHammerLine className='mr-1.5 h-4 w-4' />,
},
{
value: PLUGIN_TYPE_SEARCH_MAP.agent,
text: t('plugin.category.agents'),
icon: <RiSpeakAiLine className='mr-1.5 w-4 h-4' />,
icon: <RiSpeakAiLine className='mr-1.5 h-4 w-4' />,
},
{
value: PLUGIN_TYPE_SEARCH_MAP.extension,
text: t('plugin.category.extensions'),
icon: <RiPuzzle2Line className='mr-1.5 w-4 h-4' />,
icon: <RiPuzzle2Line className='mr-1.5 h-4 w-4' />,
},
{
value: PLUGIN_TYPE_SEARCH_MAP.bundle,
text: t('plugin.category.bundles'),
icon: <RiArchive2Line className='mr-1.5 w-4 h-4' />,
icon: <RiArchive2Line className='mr-1.5 h-4 w-4' />,
},
]
return (
<div className={cn(
'shrink-0 flex items-center justify-center py-3 bg-background-body space-x-2',
'flex shrink-0 items-center justify-center space-x-2 bg-background-body py-3',
searchBoxCanAnimate && 'sticky top-[56px] z-10',
className,
)}>
@@ -81,7 +81,7 @@ const PluginTypeSwitch = ({
<div
key={option.value}
className={cn(
'flex items-center px-3 h-8 border border-transparent rounded-xl cursor-pointer hover:bg-state-base-hover hover:text-text-secondary system-md-medium text-text-tertiary',
'system-md-medium flex h-8 cursor-pointer items-center rounded-xl border border-transparent px-3 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
activePluginType === option.value && 'border-components-main-nav-nav-button-border !bg-components-main-nav-nav-button-bg-active !text-components-main-nav-nav-button-text-active shadow-xs',
)}
onClick={() => {

16
web/app/components/plugins/marketplace/search-box/index.tsx
View File

@@ -27,9 +27,9 @@ const SearchBox = ({
return (
<div
className={cn(
'flex items-center z-[11]',
size === 'large' && 'p-1.5 bg-components-panel-bg-blur rounded-xl shadow-md border border-components-chat-input-border',
size === 'small' && 'p-0.5 bg-components-input-bg-normal rounded-lg',
'z-[11] flex items-center',
size === 'large' && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
size === 'small' && 'rounded-lg bg-components-input-bg-normal p-0.5',
inputClassName,
)}
>
@@ -39,12 +39,12 @@ const SearchBox = ({
size={size}
locale={locale}
/>
<div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='relative grow flex items-center p-1 pl-2'>
<div className='flex items-center mr-2 w-full'>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
<div className='relative flex grow items-center p-1 pl-2'>
<div className='mr-2 flex w-full items-center'>
<input
className={cn(
'grow block outline-none appearance-none body-md-medium text-text-secondary bg-transparent',
'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none',
)}
value={search}
onChange={(e) => {
@@ -56,7 +56,7 @@ const SearchBox = ({
search && (
<div className='absolute right-2 top-1/2 -translate-y-1/2'>
<ActionButton onClick={() => onSearchChange('')}>
<RiCloseLine className='w-4 h-4' />
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
)

2
web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
View File

@@ -27,7 +27,7 @@ const SearchBoxWrapper = ({
return (
<SearchBox
inputClassName={cn(
'mx-auto w-[640px] shrink-0 z-[0]',
'z-[0] mx-auto w-[640px] shrink-0',
searchBoxCanAnimate && 'sticky top-3 z-[11]',
!intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
)}

24
web/app/components/plugins/marketplace/search-box/tags-filter.tsx
View File

@@ -57,17 +57,17 @@ const TagsFilter = ({
onClick={() => setOpen(v => !v)}
>
<div className={cn(
'flex items-center text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
size === 'large' && 'px-2 py-1 h-8',
size === 'small' && 'pr-1.5 py-0.5 h-7 pl-1 ',
'flex cursor-pointer items-center rounded-lg text-text-tertiary hover:bg-state-base-hover',
size === 'large' && 'h-8 px-2 py-1',
size === 'small' && 'h-7 py-0.5 pl-1 pr-1.5 ',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}>
<div className='p-0.5'>
<RiFilter3Line className='w-4 h-4' />
<RiFilter3Line className='h-4 w-4' />
</div>
<div className={cn(
'flex items-center p-1 system-sm-medium',
'system-sm-medium flex items-center p-1',
size === 'large' && 'p-1',
size === 'small' && 'px-0.5 py-1',
)}>
@@ -79,7 +79,7 @@ const TagsFilter = ({
}
{
selectedTagsLength > 2 && (
<div className='ml-1 system-xs-medium text-text-tertiary'>
<div className='system-xs-medium ml-1 text-text-tertiary'>
+{selectedTagsLength - 2}
</div>
)
@@ -88,20 +88,20 @@ const TagsFilter = ({
{
!!selectedTagsLength && (
<RiCloseCircleFill
className='w-4 h-4 text-text-quaternary cursor-pointer'
className='h-4 w-4 cursor-pointer text-text-quaternary'
onClick={() => onTagsChange([])}
/>
)
}
{
!selectedTagsLength && (
<RiArrowDownSLine className='w-4 h-4' />
<RiArrowDownSLine className='h-4 w-4' />
)
}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
<div className='p-2 pb-1'>
<Input
showLeftIcon
@@ -110,19 +110,19 @@ const TagsFilter = ({
placeholder={t('pluginTags.searchTags') || ''}
/>
</div>
<div className='p-1 max-h-[448px] overflow-y-auto'>
<div className='max-h-[448px] overflow-y-auto p-1'>
{
filteredOptions.map(option => (
<div
key={option.name}
className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
onClick={() => handleCheck(option.name)}
>
<Checkbox
className='mr-1'
checked={tags.includes(option.name)}
/>
<div className='px-1 system-sm-medium text-text-secondary'>
<div className='system-sm-medium px-1 text-text-secondary'>
{option.label}
</div>
</div>

14
web/app/components/plugins/marketplace/sort-dropdown/index.tsx
View File

@@ -57,29 +57,29 @@ const SortDropdown = ({
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className='flex items-center px-2 pr-3 h-8 rounded-lg bg-state-base-hover-alt cursor-pointer'>
<span className='mr-1 system-sm-regular text-text-secondary'>
<div className='flex h-8 cursor-pointer items-center rounded-lg bg-state-base-hover-alt px-2 pr-3'>
<span className='system-sm-regular mr-1 text-text-secondary'>
{t('plugin.marketplace.sortBy')}
</span>
<span className='mr-1 system-sm-medium text-text-primary'>
<span className='system-sm-medium mr-1 text-text-primary'>
{selectedOption.text}
</span>
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
<RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur backdrop-blur-sm shadow-lg'>
<div className='rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'>
{
options.map(option => (
<div
key={`${option.value}-${option.order}`}
className='flex items-center justify-between px-3 pr-2 h-8 cursor-pointer system-md-regular text-text-primary rounded-lg hover:bg-components-panel-on-panel-item-bg-hover'
className='system-md-regular flex h-8 cursor-pointer items-center justify-between rounded-lg px-3 pr-2 text-text-primary hover:bg-components-panel-on-panel-item-bg-hover'
onClick={() => handleSortChange({ sortBy: option.value, sortOrder: option.order })}
>
{option.text}
{
sort.sortBy === option.value && sort.sortOrder === option.order && (
<RiCheckLine className='ml-2 w-4 h-4 text-text-accent' />
<RiCheckLine className='ml-2 h-4 w-4 text-text-accent' />
)
}
</div>

16
web/app/components/plugins/permission-setting-modal/modal.tsx
View File

@@ -41,22 +41,22 @@ const PluginSettingModal: FC<Props> = ({
isShow
onClose={onHide}
closable
className='!p-0 w-[420px]'
className='w-[420px] !p-0'
>
<div className='flex flex-col items-start w-[420px] rounded-2xl border border-components-panel-border bg-components-panel-bg shadows-shadow-xl'>
<div className='flex pt-6 pb-3 pl-6 pr-14 items-start gap-2 self-stretch'>
<span className='self-stretch text-text-primary title-2xl-semi-bold'>{t(`${i18nPrefix}.title`)}</span>
<div className='shadows-shadow-xl flex w-[420px] flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<span className='title-2xl-semi-bold self-stretch text-text-primary'>{t(`${i18nPrefix}.title`)}</span>
</div>
<div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
{[
{ title: t(`${i18nPrefix}.whoCanInstall`), key: 'install_permission', value: tempPrivilege.install_permission },
{ title: t(`${i18nPrefix}.whoCanDebug`), key: 'debug_permission', value: tempPrivilege.debug_permission },
].map(({ title, key, value }) => (
<div key={key} className='flex flex-col items-start gap-1 self-stretch'>
<div className='flex h-6 items-center gap-0.5'>
<span className='text-text-secondary system-sm-semibold'>{title}</span>
<span className='system-sm-semibold text-text-secondary'>{title}</span>
</div>
<div className='flex items-start gap-2 justify-between w-full'>
<div className='flex w-full items-start justify-between gap-2'>
{[PermissionType.everyone, PermissionType.admin, PermissionType.noOne].map(option => (
<OptionCard
key={option}
@@ -70,7 +70,7 @@ const PluginSettingModal: FC<Props> = ({
</div>
))}
</div>
<div className='flex h-[76px] p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex h-[76px] items-center justify-end gap-2 self-stretch p-6 pt-5'>
<Button
className='min-w-[72px]'
onClick={onHide}

4
web/app/components/plugins/plugin-detail-panel/action-list.tsx
View File

@@ -56,9 +56,9 @@ const ActionList = ({
return null
return (
<div className='px-4 pt-2 pb-4'>
<div className='px-4 pb-4 pt-2'>
<div className='mb-1 py-1'>
<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: data.length, action: data.length > 1 ? 'actions' : 'action' })}
{provider.is_team_authorization && provider.allow_delete && (
<Button

4
web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx
View File

@@ -36,9 +36,9 @@ const AgentStrategyList = ({
return null
return (
<div className='px-4 pt-2 pb-4'>
<div className='px-4 pb-4 pt-2'>
<div className='mb-1 py-1'>
<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.strategyNum', { num: strategyList.length, strategy: strategyList.length > 1 ? 'strategies' : 'strategy' })}
</div>
</div>

6
web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
View File

@@ -108,12 +108,12 @@ const AppInputsForm = ({
return null
return (
<div className='px-4 py-2 flex flex-col gap-4'>
<div className='flex flex-col gap-4 px-4 py-2'>
{inputsForms.map(form => (
<div key={form.variable}>
<div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
<div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
<div className='truncate'>{form.label}</div>
{!form.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
{!form.required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
</div>
{renderField(form)}
</div>

8
web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
View File

@@ -153,14 +153,14 @@ const AppInputsPanel = ({
}
return (
<div className={cn('max-h-[240px] flex flex-col pb-4 rounded-b-2xl border-t border-divider-subtle')}>
<div className={cn('flex max-h-[240px] flex-col rounded-b-2xl border-t border-divider-subtle pb-4')}>
{isLoading && <div className='pt-3'><Loading type='app' /></div>}
{!isLoading && (
<div className='shrink-0 mt-3 mb-2 px-4 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.params')}</div>
<div className='system-sm-semibold mb-2 mt-3 flex h-6 shrink-0 items-center px-4 text-text-secondary'>{t('app.appSelector.params')}</div>
)}
{!isLoading && !inputFormSchema.length && (
<div className='h-16 flex flex-col justify-center items-center'>
<div className='text-text-tertiary system-sm-regular'>{t('app.appSelector.noParams')}</div>
<div className='flex h-16 flex-col items-center justify-center'>
<div className='system-sm-regular text-text-tertiary'>{t('app.appSelector.noParams')}</div>
</div>
)}
{!isLoading && !!inputFormSchema.length && (

8
web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
View File

@@ -84,7 +84,7 @@ const AppPicker: FC<Props> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className="relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
<div className="relative min-h-20 w-[356px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm">
<div className='p-2 pb-1'>
<Input
showLeftIcon
@@ -98,7 +98,7 @@ const AppPicker: FC<Props> = ({
{filteredAppList.map(app => (
<div
key={app.id}
className='flex items-center gap-3 py-1 pl-2 pr-3 rounded-lg hover:bg-state-base-hover cursor-pointer'
className='flex cursor-pointer items-center gap-3 rounded-lg py-1 pl-2 pr-3 hover:bg-state-base-hover'
onClick={() => onSelect(app)}
>
<AppIcon
@@ -109,8 +109,8 @@ const AppPicker: FC<Props> = ({
background={app.icon_background}
imageUrl={app.icon_url}
/>
<div title={app.name} className='grow system-sm-medium text-components-input-text-filled'>{app.name}</div>
<div className='shrink-0 text-text-tertiary system-2xs-medium-uppercase'>{getAppType(app)}</div>
<div title={app.name} className='system-sm-medium grow text-components-input-text-filled'>{app.name}</div>
<div className='system-2xs-medium-uppercase shrink-0 text-text-tertiary'>{getAppType(app)}</div>
</div>
))}
</div>

10
web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
View File

@@ -20,9 +20,9 @@ const AppTrigger = ({
const { t } = useTranslation()
return (
<div className={cn(
'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
'group flex cursor-pointer items-center rounded-lg bg-components-input-bg-normal p-2 pl-3 hover:bg-state-base-hover-alt',
open && 'bg-state-base-hover-alt',
appDetail && 'pl-1.5 py-1.5',
appDetail && 'py-1.5 pl-1.5',
)}>
{appDetail && (
<AppIcon
@@ -35,12 +35,12 @@ const AppTrigger = ({
/>
)}
{appDetail && (
<div title={appDetail.name} className='grow system-sm-medium text-components-input-text-filled'>{appDetail.name}</div>
<div title={appDetail.name} className='system-sm-medium grow text-components-input-text-filled'>{appDetail.name}</div>
)}
{!appDetail && (
<div className='grow text-components-input-text-placeholder system-sm-regular truncate'>{t('app.appSelector.placeholder')}</div>
<div className='system-sm-regular grow truncate text-components-input-text-placeholder'>{t('app.appSelector.placeholder')}</div>
)}
<RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
<RiArrowDownSLine className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
</div>
)
}

6
web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
View File

@@ -106,9 +106,9 @@ const AppSelector: FC<Props> = ({
/>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className="relative w-[389px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
<div className='px-4 py-3 flex flex-col gap-1'>
<div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.label')}</div>
<div className="relative min-h-20 w-[389px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm">
<div className='flex flex-col gap-1 px-4 py-3'>
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('app.appSelector.label')}</div>
<AppPicker
placement='bottom'
offset={offset}

24
web/app/components/plugins/plugin-detail-panel/detail-header.tsx
View File

@@ -166,15 +166,15 @@ const DetailHeader = ({
// const usedInApps = 3
return (
<div className={cn('shrink-0 p-4 pb-3 border-b border-divider-subtle bg-components-panel-bg')}>
<div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3')}>
<div className="flex">
<div className='overflow-hidden border-components-panel-border-subtle border rounded-xl'>
<div className='overflow-hidden rounded-xl border border-components-panel-border-subtle'>
<Icon src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`} />
</div>
<div className="ml-3 w-0 grow">
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
<Title title={label[locale]} />
{verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
{verified && <RiVerifiedBadgeLine className="ml-0.5 h-4 w-4 shrink-0 text-text-accent" />}
<PluginVersionPicker
disabled={!isFromMarketplace}
isShow={isShow}
@@ -196,7 +196,7 @@ const DetailHeader = ({
text={
<>
<div>{isFromGitHub ? meta!.version : version}</div>
{isFromMarketplace && <RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />}
{isFromMarketplace && <RiArrowLeftRightLine className='ml-1 h-3 w-3 text-text-tertiary' />}
</>
}
hasRedCornerMark={hasNewVersion}
@@ -215,32 +215,32 @@ const DetailHeader = ({
}}>{t('plugin.detailPanel.operation.update')}</Button>
)}
</div>
<div className='mb-1 flex justify-between items-center h-4'>
<div className='mb-1 flex h-4 items-center justify-between'>
<div className='mt-0.5 flex items-center'>
<OrgInfo
packageNameClassName='w-auto'
orgName={author}
packageName={name}
/>
<div className='ml-1 mr-0.5 text-text-quaternary system-xs-regular'>·</div>
<div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
{detail.source === PluginSource.marketplace && (
<Tooltip popupContent={t('plugin.detailPanel.categoryTip.marketplace')} >
<div><BoxSparkleFill className='w-3.5 h-3.5 text-text-tertiary hover:text-text-accent' /></div>
<div><BoxSparkleFill className='h-3.5 w-3.5 text-text-tertiary hover:text-text-accent' /></div>
</Tooltip>
)}
{detail.source === PluginSource.github && (
<Tooltip popupContent={t('plugin.detailPanel.categoryTip.github')} >
<div><Github className='w-3.5 h-3.5 text-text-secondary hover:text-text-primary' /></div>
<div><Github className='h-3.5 w-3.5 text-text-secondary hover:text-text-primary' /></div>
</Tooltip>
)}
{detail.source === PluginSource.local && (
<Tooltip popupContent={t('plugin.detailPanel.categoryTip.local')} >
<div><RiHardDrive3Line className='w-3.5 h-3.5 text-text-tertiary' /></div>
<div><RiHardDrive3Line className='h-3.5 w-3.5 text-text-tertiary' /></div>
</Tooltip>
)}
{detail.source === PluginSource.debugging && (
<Tooltip popupContent={t('plugin.detailPanel.categoryTip.debugging')} >
<div><RiBugLine className='w-3.5 h-3.5 text-text-tertiary hover:text-text-warning' /></div>
<div><RiBugLine className='h-3.5 w-3.5 text-text-tertiary hover:text-text-warning' /></div>
</Tooltip>
)}
</div>
@@ -255,7 +255,7 @@ const DetailHeader = ({
detailUrl={detailUrl}
/>
<ActionButton onClick={onHide}>
<RiCloseLine className='w-4 h-4' />
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
</div>

32
web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
View File

@@ -133,45 +133,45 @@ const EndpointCard = ({
const CopyIcon = isCopied ? ClipboardCheck : RiClipboardLine
return (
<div className='p-0.5 bg-background-section-burn rounded-xl'>
<div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
<div className='rounded-xl bg-background-section-burn p-0.5'>
<div className='group rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-2.5 pl-3'>
<div className='flex items-center'>
<div className='grow mb-1 h-6 flex items-center gap-1 text-text-secondary system-md-semibold'>
<RiLoginCircleLine className='w-4 h-4' />
<div className='system-md-semibold mb-1 flex h-6 grow items-center gap-1 text-text-secondary'>
<RiLoginCircleLine className='h-4 w-4' />
<div>{data.name}</div>
</div>
<div className='hidden group-hover:flex items-center'>
<div className='hidden items-center group-hover:flex'>
<ActionButton onClick={showEndpointModalConfirm}>
<RiEditLine className='w-4 h-4' />
<RiEditLine className='h-4 w-4' />
</ActionButton>
<ActionButton onClick={showDeleteConfirm} className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'>
<RiDeleteBinLine className='w-4 h-4' />
<ActionButton onClick={showDeleteConfirm} className='text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'>
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</div>
</div>
{data.declaration.endpoints.map((endpoint, index) => (
<div key={index} className='h-6 flex items-center'>
<div className='shrink-0 w-12 text-text-tertiary system-xs-regular'>{endpoint.method}</div>
<div className='group/item grow flex items-center text-text-secondary system-xs-regular truncate'>
<div key={index} className='flex h-6 items-center'>
<div className='system-xs-regular w-12 shrink-0 text-text-tertiary'>{endpoint.method}</div>
<div className='group/item system-xs-regular flex grow items-center truncate text-text-secondary'>
<div title={`${data.url}${endpoint.path}`} className='truncate'>{`${data.url}${endpoint.path}`}</div>
<Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
<ActionButton className='hidden shrink-0 ml-2 group-hover/item:flex' onClick={() => handleCopy(`${data.url}${endpoint.path}`)}>
<CopyIcon className='w-3.5 h-3.5 text-text-tertiary' />
<ActionButton className='ml-2 hidden shrink-0 group-hover/item:flex' onClick={() => handleCopy(`${data.url}${endpoint.path}`)}>
<CopyIcon className='h-3.5 w-3.5 text-text-tertiary' />
</ActionButton>
</Tooltip>
</div>
</div>
))}
</div>
<div className='p-2 pl-3 flex items-center justify-between'>
<div className='flex items-center justify-between p-2 pl-3'>
{active && (
<div className='flex items-center gap-1 system-xs-semibold-uppercase text-util-colors-green-green-600'>
<div className='system-xs-semibold-uppercase flex items-center gap-1 text-util-colors-green-green-600'>
<Indicator color='green' />
{t('plugin.detailPanel.serviceOk')}
</div>
)}
{!active && (
<div className='flex items-center gap-1 system-xs-semibold-uppercase text-text-tertiary'>
<div className='system-xs-semibold-uppercase flex items-center gap-1 text-text-tertiary'>
<Indicator color='gray' />
{t('plugin.detailPanel.disabled')}
</div>

18
web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
View File

@@ -64,8 +64,8 @@ const EndpointList = ({ detail }: Props) => {
return null
return (
<div className={cn('px-4 py-2 border-divider-subtle', showTopBorder && 'border-t')}>
<div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
<div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
<div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'>
<div className='flex items-center gap-0.5'>
{t('plugin.detailPanel.endpoints')}
<Tooltip
@@ -74,17 +74,17 @@ const EndpointList = ({ detail }: Props) => {
popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
popupContent={
<div className='flex flex-col gap-2'>
<div className='w-8 h-8 flex items-center justify-center bg-background-default-subtle rounded-lg border-[0.5px] border-components-panel-border-subtle'>
<RiApps2AddLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle'>
<RiApps2AddLine className='h-4 w-4 text-text-tertiary' />
</div>
<div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsTip')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.endpointsTip')}</div>
<a
href={`https://docs.dify.ai/${locale === LanguagesSupported[1] ? 'v/zh-hans/' : ''}plugins/schema-definition/endpoint`}
target='_blank'
rel='noopener noreferrer'
>
<div className='inline-flex items-center gap-1 text-text-accent system-xs-regular cursor-pointer'>
<RiBookOpenLine className='w-3 h-3' />
<div className='system-xs-regular inline-flex cursor-pointer items-center gap-1 text-text-accent'>
<RiBookOpenLine className='h-3 w-3' />
{t('plugin.detailPanel.endpointsDocLink')}
</div>
</a>
@@ -93,11 +93,11 @@ const EndpointList = ({ detail }: Props) => {
/>
</div>
<ActionButton onClick={showEndpointModal}>
<RiAddLine className='w-4 h-4' />
<RiAddLine className='h-4 w-4' />
</ActionButton>
</div>
{data.endpoints.length === 0 && (
<div className='mb-1 p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsEmpty')}</div>
<div className='system-xs-regular mb-1 flex justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary'>{t('plugin.detailPanel.endpointsEmpty')}</div>
)}
<div className='flex flex-col gap-2'>
{data.endpoints.map((item, index) => (

14
web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
View File

@@ -46,17 +46,17 @@ const EndpointModal: FC<Props> = ({
footer={null}
mask
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 pb-2'>
<div className='flex items-center justify-between'>
<div className='text-text-primary system-xl-semibold'>{t('plugin.detailPanel.endpointModalTitle')}</div>
<div className='system-xl-semibold text-text-primary'>{t('plugin.detailPanel.endpointModalTitle')}</div>
<ActionButton onClick={onCancel}>
<RiCloseLine className='w-4 h-4' />
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
<div className='mt-0.5 text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointModalDesc')}</div>
<div className='system-xs-regular mt-0.5 text-text-tertiary'>{t('plugin.detailPanel.endpointModalDesc')}</div>
</div>
<div className='grow overflow-y-auto'>
<div className='px-4 py-2'>
@@ -74,15 +74,15 @@ const EndpointModal: FC<Props> = ({
? (<a
href={item.url}
target='_blank' rel='noopener noreferrer'
className='inline-flex items-center body-xs-regular text-text-accent-secondary'
className='body-xs-regular inline-flex items-center text-text-accent-secondary'
>
{t('tools.howToGet')}
<RiArrowRightUpLine className='ml-1 w-3 h-3' />
<RiArrowRightUpLine className='ml-1 h-3 w-3' />
</a>)
: null}
/>
</div>
<div className={cn('p-4 pt-0 flex justify-end')} >
<div className={cn('flex justify-end p-4 pt-0')} >
<div className='flex gap-2'>
<Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
<Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>

2
web/app/components/plugins/plugin-detail-panel/index.tsx
View File

@@ -38,7 +38,7 @@ const PluginDetailPanel: FC<Props> = ({
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')}
>
{detail && (
<>

8
web/app/components/plugins/plugin-detail-panel/model-list.tsx
View File

@@ -20,17 +20,17 @@ const ModelList = ({
return (
<div className='px-4 py-2'>
<div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{t('plugin.detailPanel.modelNum', { num: res.data.length })}</div>
<div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.modelNum', { num: res.data.length })}</div>
<div className='flex flex-col'>
{res.data.map(model => (
<div key={model.model} className='h-6 py-1 flex items-center'>
<div key={model.model} className='flex h-6 items-center py-1'>
<ModelIcon
className='shrink-0 mr-2'
className='mr-2 shrink-0'
provider={(model as any).provider}
modelName={model.model}
/>
<ModelName
className='grow text-text-secondary system-md-regular'
className='system-md-regular grow text-text-secondary'
modelItem={model}
showModelType
showMode

4
web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
View File

@@ -208,9 +208,9 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={cn('z-50', portalToFollowElemContentClassName)}>
<div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
<div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
<div className={cn('max-h-[420px] overflow-y-auto p-4 pt-3')}>
<div className='relative'>
<div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
<div className={cn('system-sm-semibold mb-1 flex h-6 items-center text-text-secondary')}>
{t('common.modelProvider.model').toLocaleUpperCase()}
</div>
<ModelSelector

4
web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
View File

@@ -97,8 +97,8 @@ const LLMParamsPanel = ({
return (
<>
<div className='flex items-center justify-between mb-2'>
<div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
<div className='mb-2 flex items-center justify-between'>
<div className={cn('system-sm-semibold flex h-6 items-center text-text-secondary')}>{t('common.modelProvider.parameters')}</div>
{
PROVIDER_WITH_PRESET_TONE.includes(provider) && (
<PresetsParameter onSelect={handleSelectPresetParameter} />

4
web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
View File

@@ -35,7 +35,7 @@ const TTSParamsPanel = ({
return (
<>
<div className='mb-3'>
<div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
<div className='system-sm-semibold mb-1 flex items-center py-1 text-text-secondary'>
{t('appDebug.voice.voiceSettings.language')}
</div>
<PortalSelect
@@ -48,7 +48,7 @@ const TTSParamsPanel = ({
/>
</div>
<div className='mb-3'>
<div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
<div className='system-sm-semibold mb-1 flex items-center py-1 text-text-secondary'>
{t('appDebug.voice.voiceSettings.voice')}
</div>
<PortalSelect

18
web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
View File

@@ -82,27 +82,27 @@ const MultipleToolSelector = ({
return (
<>
<div className='flex items-center mb-1'>
<div className='mb-1 flex items-center'>
<div
className={cn('relative grow flex items-center gap-0.5', supportCollapse && 'cursor-pointer')}
className={cn('relative flex grow items-center gap-0.5', supportCollapse && 'cursor-pointer')}
onClick={handleCollapse}
>
<div className='h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{label}</div>
<div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>{label}</div>
{required && <div className='text-red-500'>*</div>}
{tooltip && (
<Tooltip
popupContent={tooltip}
needsDelay
>
<div><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
<div><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
</Tooltip>
)}
{supportCollapse && (
<div className='absolute -left-4 top-1'>
<RiArrowDropDownLine
className={cn(
'w-4 h-4 text-text-tertiary',
collapse && 'transform -rotate-90',
'h-4 w-4 text-text-tertiary',
collapse && '-rotate-90',
)}
/>
</div>
@@ -110,7 +110,7 @@ const MultipleToolSelector = ({
</div>
{value.length > 0 && (
<>
<div className='flex items-center gap-1 text-text-tertiary system-xs-medium'>
<div className='system-xs-medium flex items-center gap-1 text-text-tertiary'>
<span>{`${enabledCount}/${value.length}`}</span>
<span>{t('appDebug.agent.tools.enabled')}</span>
</div>
@@ -122,7 +122,7 @@ const MultipleToolSelector = ({
setOpen(!open)
setPanelShowState(true)
}}>
<RiAddLine className='w-4 h-4' />
<RiAddLine className='h-4 w-4' />
</ActionButton>
)}
</div>
@@ -146,7 +146,7 @@ const MultipleToolSelector = ({
/>
{value.length === 0 && (
<div className='p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.empty')}</div>
<div className='system-xs-regular flex justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary'>{t('plugin.detailPanel.toolSelector.empty')}</div>
)}
{value.length > 0 && value.map((item, index) => (
<div className='mb-1' key={index}>

14
web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
View File

@@ -53,19 +53,19 @@ const OperationDropdown: FC<Props> = ({
<PortalToFollowElemTrigger onClick={handleTrigger}>
<div>
<ActionButton className={cn(open && 'bg-state-base-hover')}>
<RiMoreFill className='w-4 h-4' />
<RiMoreFill className='h-4 w-4' />
</ActionButton>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-50'>
<div className='w-[160px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
<div className='w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
{source === PluginSource.github && (
<div
onClick={() => {
onInfo()
handleTrigger()
}}
className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'
className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
>{t('plugin.detailPanel.operation.info')}</div>
)}
{source === PluginSource.github && (
@@ -74,13 +74,13 @@ const OperationDropdown: FC<Props> = ({
onCheckVersion()
handleTrigger()
}}
className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'
className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
>{t('plugin.detailPanel.operation.checkUpdate')}</div>
)}
{(source === PluginSource.marketplace || source === PluginSource.github) && (
<a href={detailUrl} target='_blank' className='flex items-center px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>
<a href={detailUrl} target='_blank' className='system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>
<span className='grow'>{t('plugin.detailPanel.operation.viewDetail')}</span>
<RiArrowRightUpLine className='shrink-0 w-3.5 h-3.5 text-text-tertiary' />
<RiArrowRightUpLine className='h-3.5 w-3.5 shrink-0 text-text-tertiary' />
</a>
)}
{(source === PluginSource.marketplace || source === PluginSource.github) && (
@@ -91,7 +91,7 @@ const OperationDropdown: FC<Props> = ({
onRemove()
handleTrigger()
}}
className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:text-text-destructive hover:bg-state-destructive-hover'
className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive'
>{t('plugin.detailPanel.operation.remove')}</div>
</div>
</PortalToFollowElemContent>

44
web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
View File

@@ -12,7 +12,7 @@ import Icon from '@/app/components/plugins/card/base/card-icon'
import Description from '@/app/components/plugins/card/base/description'
import Divider from '@/app/components/base/divider'
import type {
StrategyDetail,
StrategyDetail as StrategyDetailType,
} from '@/app/components/plugins/types'
import type { Locale } from '@/i18n'
import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -29,7 +29,7 @@ type Props = {
label: Record<Locale, string>
tags: string[]
}
detail: StrategyDetail
detail: StrategyDetailType
onHide: () => void
}
@@ -78,50 +78,50 @@ const StrategyDetail: FC<Props> = ({
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')}
>
<>
{/* header */}
<div className='relative p-4 pb-3 border-b border-divider-subtle'>
<div className='absolute top-3 right-3'>
<div className='relative border-b border-divider-subtle p-4 pb-3'>
<div className='absolute right-3 top-3'>
<ActionButton onClick={onHide}>
<RiCloseLine className='w-4 h-4' />
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
<div
className='mb-2 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
className='system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary'
onClick={onHide}
>
<RiArrowLeftLine className='w-4 h-4' />
<RiArrowLeftLine className='h-4 w-4' />
BACK
</div>
<div className='flex items-center gap-1'>
<Icon size='tiny' className='w-6 h-6' src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
<Icon size='tiny' className='h-6 w-6' src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
<div className=''>{getValueFromI18nObject(provider.label)}</div>
</div>
<div className='mt-1 text-text-primary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
<div className='system-md-semibold mt-1 text-text-primary'>{getValueFromI18nObject(detail.identity.label)}</div>
<Description className='mt-3' text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
</div>
{/* form */}
<div className='h-full'>
<div className='flex flex-col h-full overflow-y-auto'>
<div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>{t('tools.setBuiltInTools.parameters')}</div>
<div className='flex h-full flex-col overflow-y-auto'>
<div className='system-sm-semibold-uppercase p-4 pb-1 text-text-primary'>{t('tools.setBuiltInTools.parameters')}</div>
<div className='px-4'>
{detail.parameters.length > 0 && (
<div className='py-2 space-y-1'>
<div className='space-y-1 py-2'>
{detail.parameters.map((item: any, index) => (
<div key={index} className='py-1'>
<div className='flex items-center gap-2'>
<div className='text-text-secondary code-sm-semibold'>{getValueFromI18nObject(item.label)}</div>
<div className='text-text-tertiary system-xs-regular'>
<div className='code-sm-semibold text-text-secondary'>{getValueFromI18nObject(item.label)}</div>
<div className='system-xs-regular text-text-tertiary'>
{getType(item.type)}
</div>
{item.required && (
<div className='text-text-warning-secondary system-xs-medium'>{t('tools.setBuiltInTools.required')}</div>
<div className='system-xs-medium text-text-warning-secondary'>{t('tools.setBuiltInTools.required')}</div>
)}
</div>
{item.human_description && (
<div className='mt-0.5 text-text-tertiary system-xs-regular'>
<div className='system-xs-regular mt-0.5 text-text-tertiary'>
{getValueFromI18nObject(item.human_description)}
</div>
)}
@@ -135,17 +135,17 @@ const StrategyDetail: FC<Props> = ({
<div className='px-4'>
<Divider className="!mt-2" />
</div>
<div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>OUTPUT</div>
<div className='system-sm-semibold-uppercase p-4 pb-1 text-text-primary'>OUTPUT</div>
{outputSchema.length > 0 && (
<div className='px-4 py-2 space-y-1'>
<div className='space-y-1 px-4 py-2'>
{outputSchema.map((outputItem, index) => (
<div key={index} className='py-1'>
<div className='flex items-center gap-2'>
<div className='text-text-secondary code-sm-semibold'>{outputItem.name}</div>
<div className='text-text-tertiary system-xs-regular'>{outputItem.type}</div>
<div className='code-sm-semibold text-text-secondary'>{outputItem.name}</div>
<div className='system-xs-regular text-text-tertiary'>{outputItem.type}</div>
</div>
{outputItem.description && (
<div className='mt-0.5 text-text-tertiary system-xs-regular'>
<div className='system-xs-regular mt-0.5 text-text-tertiary'>
{outputItem.description}
</div>
)}

6
web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
View File

@@ -31,11 +31,11 @@ const StrategyItem = ({
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')}
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')}
onClick={() => setShowDetail(true)}
>
<div className='pb-0.5 text-text-secondary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
<div className='text-text-tertiary system-xs-regular line-clamp-2' title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
<div className='system-md-semibold pb-0.5 text-text-secondary'>{getValueFromI18nObject(detail.identity.label)}</div>
<div className='system-xs-regular line-clamp-2 text-text-tertiary' title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
</div>
{showDetail && (
<StrategyDetailPanel

50
web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
View File

@@ -261,11 +261,11 @@ const ToolSelector: FC<Props> = ({
onInstall={() => handleInstall()}
isError={(!currentProvider || !currentTool) && !inMarketPlace}
errorTip={
<div className='space-y-1 max-w-[240px] text-xs'>
<h3 className='text-text-primary font-semibold'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledTitle') : t('plugin.detailPanel.toolSelector.unsupportedTitle')}</h3>
<p className='text-text-secondary tracking-tight'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledContent') : t('plugin.detailPanel.toolSelector.unsupportedContent')}</p>
<div className='max-w-[240px] space-y-1 text-xs'>
<h3 className='font-semibold text-text-primary'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledTitle') : t('plugin.detailPanel.toolSelector.unsupportedTitle')}</h3>
<p className='tracking-tight text-text-secondary'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledContent') : t('plugin.detailPanel.toolSelector.unsupportedContent')}</p>
<p>
<Link href={'/plugins'} className='text-text-accent tracking-tight'>{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
<Link href={'/plugins'} className='tracking-tight text-text-accent'>{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
</p>
</div>
}
@@ -273,14 +273,14 @@ const ToolSelector: FC<Props> = ({
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className={cn('relative w-[361px] min-h-20 max-h-[642px] pb-4 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
<div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
{!isShowSettingAuth && (
<>
<div className='px-4 pt-3.5 pb-1 text-text-primary system-xl-semibold'>{t('plugin.detailPanel.toolSelector.title')}</div>
<div className='system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary'>{t('plugin.detailPanel.toolSelector.title')}</div>
{/* base form */}
<div className='px-4 py-2 flex flex-col gap-3'>
<div className='flex flex-col gap-3 px-4 py-2'>
<div className='flex flex-col gap-1'>
<div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
<ToolPicker
panelClassName='w-[328px]'
placement='bottom'
@@ -302,7 +302,7 @@ const ToolSelector: FC<Props> = ({
/>
</div>
<div className='flex flex-col gap-1'>
<div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
<Textarea
className='resize-none'
placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
@@ -320,7 +320,7 @@ const ToolSelector: FC<Props> = ({
{!currentProvider.is_team_authorization && (
<Button
variant='primary'
className={cn('shrink-0 w-full')}
className={cn('w-full shrink-0')}
onClick={() => setShowSettingAuth(true)}
disabled={!isCurrentWorkspaceManager}
>
@@ -330,7 +330,7 @@ const ToolSelector: FC<Props> = ({
{currentProvider.is_team_authorization && (
<Button
variant='secondary'
className={cn('shrink-0 w-full')}
className={cn('w-full shrink-0')}
onClick={() => setShowSettingAuth(true)}
disabled={!isCurrentWorkspaceManager}
>
@@ -348,7 +348,7 @@ const ToolSelector: FC<Props> = ({
{/* tabs */}
{nodeId && showTabSlider && (
<TabSlider
className='shrink-0 mt-1 px-4'
className='mt-1 shrink-0 px-4'
itemClassName='py-3'
noBorderBottom
smallItem
@@ -364,23 +364,23 @@ const ToolSelector: FC<Props> = ({
)}
{nodeId && showTabSlider && currType === 'params' && (
<div className='px-4 py-2'>
<div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
<div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
</div>
)}
{/* user settings only */}
{userSettingsOnly && (
<div className='p-4 pb-1'>
<div className='text-text-primary system-sm-semibold-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
<div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.settings')}</div>
</div>
)}
{/* reasoning config only */}
{nodeId && reasoningConfigOnly && (
<div className='mb-1 p-4 pb-1'>
<div className='text-text-primary system-sm-semibold-uppercase'>{t('plugin.detailPanel.toolSelector.params')}</div>
<div className='system-sm-semibold-uppercase text-text-primary'>{t('plugin.detailPanel.toolSelector.params')}</div>
<div className='pb-1'>
<div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
<div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
</div>
</div>
)}
@@ -402,7 +402,7 @@ const ToolSelector: FC<Props> = ({
className='inline-flex items-center text-xs text-text-accent'
>
{t('tools.howToGet')}
<RiArrowRightUpLine className='ml-1 w-3 h-3' />
<RiArrowRightUpLine className='ml-1 h-3 w-3' />
</a>)
: null}
/>
@@ -426,17 +426,17 @@ const ToolSelector: FC<Props> = ({
{/* authorization panel */}
{isShowSettingAuth && currentProvider && (
<>
<div className='relative pt-3.5 flex flex-col gap-1'>
<div className='absolute -top-2 left-2 w-[345px] pt-2 rounded-t-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'></div>
<div className='relative flex flex-col gap-1 pt-3.5'>
<div className='absolute -top-2 left-2 w-[345px] rounded-t-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-2 backdrop-blur-sm'></div>
<div
className='px-3 h-6 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
className='system-xs-semibold-uppercase flex h-6 cursor-pointer items-center gap-1 px-3 text-text-accent-secondary'
onClick={() => setShowSettingAuth(false)}
>
<RiArrowLeftLine className='w-4 h-4' />
<RiArrowLeftLine className='h-4 w-4' />
BACK
</div>
<div className='px-4 text-text-primary system-xl-semibold'>{t('tools.auth.setupModalTitle')}</div>
<div className='px-4 text-text-tertiary system-xs-regular'>{t('tools.auth.setupModalTitleDescription')}</div>
<div className='system-xl-semibold px-4 text-text-primary'>{t('tools.auth.setupModalTitle')}</div>
<div className='system-xs-regular px-4 text-text-tertiary'>{t('tools.auth.setupModalTitleDescription')}</div>
</div>
<ToolCredentialForm
collection={currentProvider}

14
web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
View File

@@ -162,16 +162,16 @@ const ReasoningConfigForm: React.FC<Props> = ({
const isString = !isNumber && !isSelect && !isFile && !isAppSelector && !isModelSelector
return (
<div key={variable} className='space-y-1'>
<div className='flex items-center justify-between py-2 system-sm-semibold text-text-secondary'>
<div className='system-sm-semibold flex items-center justify-between py-2 text-text-secondary'>
<div className='flex items-center space-x-2'>
<span className={cn('text-text-secondary code-sm-semibold')}>{label[language] || label.en_US}</span>
<span className={cn('code-sm-semibold text-text-secondary')}>{label[language] || label.en_US}</span>
{required && (
<span className='ml-1 text-red-500'>*</span>
)}
{tooltipContent}
</div>
<div className='flex items-center gap-1 px-2 py-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter cursor-pointer hover:bg-state-base-hover' onClick={() => handleAutomatic(variable, !auto)}>
<span className='text-text-secondary system-xs-medium'>{t('plugin.detailPanel.toolSelector.auto')}</span>
<div className='flex cursor-pointer items-center gap-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter px-2 py-1 hover:bg-state-base-hover' onClick={() => handleAutomatic(variable, !auto)}>
<span className='system-xs-medium text-text-secondary'>{t('plugin.detailPanel.toolSelector.auto')}</span>
<Switch
size='xs'
defaultValue={!!auto}
@@ -183,7 +183,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
<>
{isString && (
<Input
className={cn(inputsIsFocus[variable] ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
className={cn(inputsIsFocus[variable] ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'rounded-lg border px-3 py-[6px]')}
value={varInput?.value as string || ''}
onChange={handleMixedTypeChange(variable)}
nodesOutputVars={nodeOutputVars}
@@ -259,14 +259,14 @@ const ReasoningConfigForm: React.FC<Props> = ({
className='inline-flex items-center text-xs text-text-accent'
>
{t('tools.howToGet')}
<RiArrowRightUpLine className='ml-1 w-3 h-3' />
<RiArrowRightUpLine className='ml-1 h-3 w-3' />
</a>
)}
</div>
)
}
return (
<div className='px-4 py-2 space-y-3'>
<div className='space-y-3 px-4 py-2'>
{schemas.map(schema => renderField(schema))}
</div>
)

4
web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
View File

@@ -58,7 +58,7 @@ const ToolCredentialForm: FC<Props> = ({
? <div className='pt-3'><Loading type='app' /></div>
: (
<>
<div className='px-4 max-h-[464px] overflow-y-auto'>
<div className='max-h-[464px] overflow-y-auto px-4'>
<Form
value={tempCredential}
onChange={(v) => {
@@ -76,7 +76,7 @@ const ToolCredentialForm: FC<Props> = ({
className='inline-flex items-center text-xs text-text-accent'
>
{t('tools.howToGet')}
<RiArrowRightUpLine className='ml-1 w-3 h-3' />
<RiArrowRightUpLine className='ml-1 h-3 w-3' />
</a>)
: null}
/>

28
web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
View File

@@ -62,37 +62,37 @@ const ToolItem = ({
return (
<div className={cn(
'group p-1.5 pr-2 flex items-center gap-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border-subtle rounded-lg shadow-xs cursor-default hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
'group flex cursor-default items-center gap-1 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-1.5 pr-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
open && 'bg-components-panel-on-panel-item-bg-hover shadow-sm',
isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border shadow-xs',
isDeleting && 'border-state-destructive-border shadow-xs hover:bg-state-destructive-hover',
)}>
{icon && (
<div className={cn('shrink-0', isTransparent && 'opacity-50')}>
{typeof icon === 'string' && <div className='w-7 h-7 bg-cover bg-center border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' style={{ backgroundImage: `url(${icon})` }} />}
{typeof icon !== 'string' && <AppIcon className='w-7 h-7 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' size='xs' icon={icon?.content} background={icon?.background} />}
{typeof icon === 'string' && <div className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge bg-cover bg-center' style={{ backgroundImage: `url(${icon})` }} />}
{typeof icon !== 'string' && <AppIcon className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge' size='xs' icon={icon?.content} background={icon?.background} />}
</div>
)}
{!icon && (
<div className={cn(
'flex items-center justify-center w-7 h-7 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
'flex h-7 w-7 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
)}>
<div className='flex w-5 h-5 items-center justify-center opacity-35'>
<div className='flex h-5 w-5 items-center justify-center opacity-35'>
<Group className='text-text-tertiary' />
</div>
</div>
)}
<div className={cn('pl-0.5 grow truncate', isTransparent && 'opacity-50')}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{providerNameText}</div>
<div className='text-text-secondary system-xs-medium'>{toolLabel}</div>
<div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50')}>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{providerNameText}</div>
<div className='system-xs-medium text-text-secondary'>{toolLabel}</div>
</div>
<div className='hidden group-hover:flex items-center gap-1'>
<div className='hidden items-center gap-1 group-hover:flex'>
{!noAuth && !isError && !uninstalled && !versionMismatch && (
<ActionButton>
<RiEqualizer2Line className='w-4 h-4' />
<RiEqualizer2Line className='h-4 w-4' />
</ActionButton>
)}
<div
className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
className='cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive'
onClick={(e) => {
e.stopPropagation()
onDelete?.()
@@ -100,7 +100,7 @@ const ToolItem = ({
onMouseOver={() => setIsDeleting(true)}
onMouseLeave={() => setIsDeleting(false)}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</div>
</div>
{!isError && !uninstalled && !noAuth && !versionMismatch && showSwitch && (
@@ -152,7 +152,7 @@ const ToolItem = ({
needsDelay
>
<div>
<RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
</div>
</Tooltip>
)}

16
web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
View File

@@ -29,32 +29,32 @@ const ToolTrigger = ({
const { t } = useTranslation()
return (
<div className={cn(
'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
'group flex cursor-pointer items-center rounded-lg bg-components-input-bg-normal p-2 pl-3 hover:bg-state-base-hover-alt',
open && 'bg-state-base-hover-alt',
value?.provider_name && 'pl-1.5 py-1.5',
value?.provider_name && 'py-1.5 pl-1.5',
)}>
{value?.provider_name && provider && (
<div className='shrink-0 mr-1 p-px rounded-lg bg-components-panel-bg border border-components-panel-border'>
<div className='mr-1 shrink-0 rounded-lg border border-components-panel-border bg-components-panel-bg p-px'>
<BlockIcon
className='!w-4 !h-4'
className='!h-4 !w-4'
type={BlockEnum.Tool}
toolIcon={provider.icon}
/>
</div>
)}
{value?.tool_name && (
<div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
<div className='system-sm-medium grow text-components-input-text-filled'>{value.tool_name}</div>
)}
{!value?.provider_name && (
<div className='grow text-components-input-text-placeholder system-sm-regular'>
<div className='system-sm-regular grow text-components-input-text-placeholder'>
{!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
</div>
)}
{isConfigure && (
<RiEqualizer2Line className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
<RiEqualizer2Line className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
)}
{!isConfigure && (
<RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
<RiArrowDownSLine className={cn('ml-0.5 h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
)}
</div>
)

8
web/app/components/plugins/plugin-item/action.tsx
View File

@@ -107,7 +107,7 @@ const Action: FC<Props> = ({
&& (
<Tooltip popupContent={t(`${i18nPrefix}.checkForUpdates`)}>
<ActionButton onClick={handleFetchNewVersion}>
<RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
<RiLoopLeftLine className='h-4 w-4 text-text-tertiary' />
</ActionButton>
</Tooltip>
)
@@ -117,7 +117,7 @@ const Action: FC<Props> = ({
&& (
<Tooltip popupContent={t(`${i18nPrefix}.pluginInfo`)}>
<ActionButton onClick={showPluginInfo}>
<RiInformation2Line className='w-4 h-4 text-text-tertiary' />
<RiInformation2Line className='h-4 w-4 text-text-tertiary' />
</ActionButton>
</Tooltip>
)
@@ -127,10 +127,10 @@ const Action: FC<Props> = ({
&& (
<Tooltip popupContent={t(`${i18nPrefix}.delete`)}>
<ActionButton
className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
className='text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
onClick={showDeleteConfirm}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</Tooltip>
)

40
web/app/components/plugins/plugin-item/index.tsx
View File

@@ -64,7 +64,7 @@ const PluginItem: FC<Props> = ({
return (
<div
className={cn(
'p-1 rounded-xl border-[1.5px] border-background-section-burn',
'rounded-xl border-[1.5px] border-background-section-burn p-1',
currentPluginID === plugin_id && 'border-components-option-card-option-selected-border',
source === PluginSource.debugging
? 'bg-[repeating-linear-gradient(-45deg,rgba(16,24,40,0.04),rgba(16,24,40,0.04)_5px,rgba(0,0,0,0.02)_5px,rgba(0,0,0,0.02)_10px)]'
@@ -74,22 +74,22 @@ const PluginItem: FC<Props> = ({
setCurrentPluginID(plugin.plugin_id)
}}
>
<div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
<div className={cn('hover-bg-components-panel-on-panel-item-bg relative rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs', className)}>
<CornerMark text={categoriesMap[category].label} />
{/* Header */}
<div className="flex">
<div className='flex items-center justify-center w-10 h-10 overflow-hidden border-components-panel-border-subtle border-[1px] rounded-xl'>
<div className='flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl border-[1px] border-components-panel-border-subtle'>
<img
className='w-full h-full'
className='h-full w-full'
src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`}
alt={`plugin-${plugin_unique_identifier}-logo`}
/>
</div>
<div className="ml-3 w-0 grow">
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
<Title title={title} />
{verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
<Badge className='shrink-0 ml-1' text={source === PluginSource.github ? plugin.meta!.version : plugin.version} />
{verified && <RiVerifiedBadgeLine className="ml-0.5 h-4 w-4 shrink-0 text-text-accent" />}
<Badge className='ml-1 shrink-0' text={source === PluginSource.github ? plugin.meta!.version : plugin.version} />
</div>
<div className='flex items-center justify-between'>
<Description text={descriptionText} descriptionLineRows={1}></Description>
@@ -112,7 +112,7 @@ const PluginItem: FC<Props> = ({
</div>
</div>
</div>
<div className='mt-1.5 mb-1 flex justify-between items-center h-4 px-4'>
<div className='mb-1 mt-1.5 flex h-4 items-center justify-between px-4'>
<div className='flex items-center'>
<OrgInfo
className="mt-0.5"
@@ -122,9 +122,9 @@ const PluginItem: FC<Props> = ({
/>
{category === PluginType.extension && (
<>
<div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
<div className='flex text-text-tertiary system-xs-regular space-x-1'>
<RiLoginCircleLine className='w-4 h-4' />
<div className='system-xs-regular mx-2 text-text-quaternary'>·</div>
<div className='system-xs-regular flex space-x-1 text-text-tertiary'>
<RiLoginCircleLine className='h-4 w-4' />
<span>{t('plugin.endpointsEnabled', { num: endpoints_active })}</span>
</div>
</>
@@ -135,11 +135,11 @@ const PluginItem: FC<Props> = ({
{source === PluginSource.github
&& <>
<a href={`https://github.com/${meta!.repo}`} target='_blank' className='flex items-center gap-1'>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('plugin.from')}</div>
<div className='flex items-center space-x-0.5 text-text-secondary'>
<Github className='w-3 h-3' />
<Github className='h-3 w-3' />
<div className='system-2xs-semibold-uppercase'>GitHub</div>
<RiArrowRightUpLine className='w-3 h-3' />
<RiArrowRightUpLine className='h-3 w-3' />
</div>
</a>
</>
@@ -147,24 +147,24 @@ const PluginItem: FC<Props> = ({
{source === PluginSource.marketplace
&& <>
<a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='flex items-center gap-0.5'>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div>
<RiArrowRightUpLine className='w-3 h-3 text-text-tertiary' />
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div>
<RiArrowRightUpLine className='h-3 w-3 text-text-tertiary' />
</a>
</>
}
{source === PluginSource.local
&& <>
<div className='flex items-center gap-1'>
<RiHardDrive3Line className='text-text-tertiary w-3 h-3' />
<div className='text-text-tertiary system-2xs-medium-uppercase'>Local Plugin</div>
<RiHardDrive3Line className='h-3 w-3 text-text-tertiary' />
<div className='system-2xs-medium-uppercase text-text-tertiary'>Local Plugin</div>
</div>
</>
}
{source === PluginSource.debugging
&& <>
<div className='flex items-center gap-1'>
<RiBugLine className='w-3 h-3 text-text-warning' />
<div className='text-text-warning system-2xs-medium-uppercase'>Debugging Plugin</div>
<RiBugLine className='h-3 w-3 text-text-warning' />
<div className='system-2xs-medium-uppercase text-text-warning'>Debugging Plugin</div>
</div>
</>
}

6
web/app/components/plugins/plugin-mutation-model/index.tsx
View File

@@ -39,10 +39,10 @@ const PluginMutationModal: FC<Props> = ({
closable
title={modelTitle}
>
<div className='mt-3 mb-2 text-text-secondary system-md-regular'>
<div className='system-md-regular mb-2 mt-3 text-text-secondary'>
{description}
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
installed={mutation.isSuccess}
payload={plugin}
@@ -50,7 +50,7 @@ const PluginMutationModal: FC<Props> = ({
titleLeft={cardTitleLeft}
/>
</div>
<div className='flex pt-5 items-center gap-2 self-stretch'>
<div className='flex items-center gap-2 self-stretch pt-5'>
<div>
{modalBottomLeft}
</div>

10
web/app/components/plugins/plugin-page/debug-info.tsx
View File

@@ -29,10 +29,10 @@ const DebugInfo: FC = () => {
popupContent={
<>
<div className='flex items-center gap-1 self-stretch'>
<span className='flex flex-col justify-center items-start grow shrink-0 basis-0 text-text-secondary system-sm-semibold'>{t(`${i18nPrefix}.title`)}</span>
<a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
<span className='system-sm-semibold flex shrink-0 grow basis-0 flex-col items-start justify-center text-text-secondary'>{t(`${i18nPrefix}.title`)}</span>
<a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='flex cursor-pointer items-center gap-0.5 text-text-accent-light-mode-only'>
<span className='system-xs-medium'>{t(`${i18nPrefix}.viewDocs`)}</span>
<RiArrowRightUpLine className='w-3 h-3' />
<RiArrowRightUpLine className='h-3 w-3' />
</a>
</div>
<div className='space-y-0.5'>
@@ -53,8 +53,8 @@ const DebugInfo: FC = () => {
asChild={false}
position='bottom'
>
<Button className='w-full h-full p-2 text-components-button-secondary-text'>
<RiBugLine className='w-4 h-4' />
<Button className='h-full w-full p-2 text-components-button-secondary-text'>
<RiBugLine className='h-4 w-4' />
</Button>
</Tooltip>
)

34
web/app/components/plugins/plugin-page/empty/index.tsx
View File

@@ -38,29 +38,29 @@ const Empty = () => {
}, [pluginList?.plugins.length, t, filters.categories.length, filters.tags.length, filters.searchQuery])
return (
<div className='grow w-full relative z-0'>
<div className='relative z-0 w-full grow'>
{/* skeleton */}
<div className='h-full w-full px-12 absolute top-0 grid grid-cols-2 gap-2 overflow-hidden z-10'>
<div className='absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden px-12'>
{Array.from({ length: 20 }).fill(0).map((_, i) => (
<div key={i} className='h-[100px] bg-components-card-bg rounded-xl' />
<div key={i} className='h-[100px] rounded-xl bg-components-card-bg' />
))}
</div>
{/* mask */}
<div className='h-full w-full absolute z-20 bg-gradient-to-b from-background-gradient-mask-transparent to-white' />
<div className='flex items-center justify-center h-full relative z-30'>
<div className='absolute z-20 h-full w-full bg-gradient-to-b from-background-gradient-mask-transparent to-white' />
<div className='relative z-30 flex h-full items-center justify-center'>
<div className='flex flex-col items-center gap-y-3'>
<div className='relative -z-10 flex items-center justify-center w-[52px] h-[52px] rounded-xl
bg-components-card-bg border-[1px] border-dashed border-divider-deep shadow-xl shadow-shadow-shadow-5'>
<Group className='text-text-tertiary w-5 h-5' />
<div className='relative -z-10 flex h-[52px] w-[52px] items-center justify-center rounded-xl
border-[1px] border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5'>
<Group className='h-5 w-5 text-text-tertiary' />
<Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
<Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
<Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
</div>
<div className='text-text-tertiary text-sm font-normal'>
<div className='text-sm font-normal text-text-tertiary'>
{text}
</div>
<div className='flex flex-col w-[240px]'>
<div className='flex w-[240px] flex-col'>
<input
type='file'
ref={fileInputRef}
@@ -68,7 +68,7 @@ const Empty = () => {
onChange={handleFileChange}
accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
/>
<div className='w-full flex flex-col gap-y-1'>
<div className='flex w-full flex-col gap-y-1'>
{[
...(
(enable_marketplace && true)
@@ -80,8 +80,8 @@ const Empty = () => {
].map(({ icon: Icon, text, action }) => (
<div
key={action}
className='flex items-center px-3 py-2 gap-x-1 rounded-lg bg-components-button-secondary-bg
hover:bg-state-base-hover cursor-pointer border-[0.5px] shadow-shadow-shadow-3 shadow-xs'
className='flex cursor-pointer items-center gap-x-1 rounded-lg border-[0.5px] bg-components-button-secondary-bg
px-3 py-2 shadow-xs shadow-shadow-shadow-3 hover:bg-state-base-hover'
onClick={() => {
if (action === 'local')
fileInputRef.current?.click()
@@ -91,8 +91,8 @@ const Empty = () => {
setSelectedAction(action)
}}
>
<Icon className="w-4 h-4 text-text-tertiary" />
<span className='text-text-secondary system-md-regular'>{text}</span>
<Icon className="h-4 w-4 text-text-tertiary" />
<span className='system-md-regular text-text-secondary'>{text}</span>
</div>
))}
</div>

18
web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
View File

@@ -48,12 +48,12 @@ const CategoriesFilter = ({
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className={cn(
'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}>
<div className={cn(
'flex items-center p-1 system-sm-medium',
'system-sm-medium flex items-center p-1',
)}>
{
!selectedTagsLength && t('plugin.allCategories')
@@ -63,7 +63,7 @@ const CategoriesFilter = ({
}
{
selectedTagsLength > 2 && (
<div className='ml-1 system-xs-medium text-text-tertiary'>
<div className='system-xs-medium ml-1 text-text-tertiary'>
+{selectedTagsLength - 2}
</div>
)
@@ -72,7 +72,7 @@ const CategoriesFilter = ({
{
!!selectedTagsLength && (
<RiCloseCircleFill
className='w-4 h-4 text-text-quaternary cursor-pointer'
className='h-4 w-4 cursor-pointer text-text-quaternary'
onClick={
(e) => {
e.stopPropagation()
@@ -84,13 +84,13 @@ const CategoriesFilter = ({
}
{
!selectedTagsLength && (
<RiArrowDownSLine className='w-4 h-4' />
<RiArrowDownSLine className='h-4 w-4' />
)
}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'>
<div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
<div className='p-2 pb-1'>
<Input
showLeftIcon
@@ -99,19 +99,19 @@ const CategoriesFilter = ({
placeholder={t('plugin.searchCategories')}
/>
</div>
<div className='p-1 max-h-[448px] overflow-y-auto'>
<div className='max-h-[448px] overflow-y-auto p-1'>
{
filteredOptions.map(option => (
<div
key={option.name}
className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
onClick={() => handleCheck(option.name)}
>
<Checkbox
className='mr-1'
checked={value.includes(option.name)}
/>
<div className='px-1 system-sm-medium text-text-secondary'>
<div className='system-sm-medium px-1 text-text-secondary'>
{option.label}
</div>
</div>

18
web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
View File

@@ -48,12 +48,12 @@ const TagsFilter = ({
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className={cn(
'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}>
<div className={cn(
'flex items-center p-1 system-sm-medium',
'system-sm-medium flex items-center p-1',
)}>
{
!selectedTagsLength && t('pluginTags.allTags')
@@ -63,7 +63,7 @@ const TagsFilter = ({
}
{
selectedTagsLength > 2 && (
<div className='ml-1 system-xs-medium text-text-tertiary'>
<div className='system-xs-medium ml-1 text-text-tertiary'>
+{selectedTagsLength - 2}
</div>
)
@@ -72,20 +72,20 @@ const TagsFilter = ({
{
!!selectedTagsLength && (
<RiCloseCircleFill
className='w-4 h-4 text-text-quaternary cursor-pointer'
className='h-4 w-4 cursor-pointer text-text-quaternary'
onClick={() => onChange([])}
/>
)
}
{
!selectedTagsLength && (
<RiArrowDownSLine className='w-4 h-4' />
<RiArrowDownSLine className='h-4 w-4' />
)
}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'>
<div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
<div className='p-2 pb-1'>
<Input
showLeftIcon
@@ -94,19 +94,19 @@ const TagsFilter = ({
placeholder={t('pluginTags.searchTags')}
/>
</div>
<div className='p-1 max-h-[448px] overflow-y-auto'>
<div className='max-h-[448px] overflow-y-auto p-1'>
{
filteredOptions.map(option => (
<div
key={option.name}
className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
onClick={() => handleCheck(option.name)}
>
<Checkbox
className='mr-1'
checked={value.includes(option.name)}
/>
<div className='px-1 system-sm-medium text-text-secondary'>
<div className='system-sm-medium px-1 text-text-secondary'>
{option.label}
</div>
</div>

22
web/app/components/plugins/plugin-page/index.tsx
View File

@@ -146,17 +146,17 @@ const PluginPage = ({
id='marketplace-container'
ref={containerRef}
style={{ scrollbarGutter: 'stable' }}
className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
className={cn('relative flex grow flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
? 'rounded-t-xl bg-components-panel-bg'
: 'bg-background-body',
)}
>
<div
className={cn(
'sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1 z-10 bg-components-panel-bg', activeTab === 'discover' && 'bg-background-body',
'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pb-2 pt-4', activeTab === 'discover' && 'bg-background-body',
)}
>
<div className='flex justify-between items-center w-full'>
<div className='flex w-full items-center justify-between'>
<div className='flex-1'>
<TabSlider
value={activeTab}
@@ -176,11 +176,11 @@ const PluginPage = ({
className='px-3'
variant='secondary-accent'
>
<RiBookOpenLine className='mr-1 w-4 h-4' />
<RiBookOpenLine className='mr-1 h-4 w-4' />
{t('plugin.submitPlugin')}
</Button>
</Link>
<div className='mx-2 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='mx-2 h-3.5 w-[1px] bg-divider-regular'></div>
</>
)
}
@@ -201,10 +201,10 @@ const PluginPage = ({
popupContent={t('plugin.privilege.title')}
>
<Button
className='w-full h-full p-2 text-components-button-secondary-text group'
className='group h-full w-full p-2 text-components-button-secondary-text'
onClick={setShowPluginSettingModal}
>
<RiEqualizer2Line className='w-4 h-4' />
<RiEqualizer2Line className='h-4 w-4' />
</Button>
</Tooltip>
)
@@ -217,12 +217,12 @@ const PluginPage = ({
{plugins}
{dragging && (
<div
className="absolute inset-0 m-0.5 p-2 rounded-2xl bg-[rgba(21,90,239,0.14)] border-2
border-dashed border-components-dropzone-border-accent">
className="absolute inset-0 m-0.5 rounded-2xl border-2 border-dashed border-components-dropzone-border-accent
bg-[rgba(21,90,239,0.14)] p-2">
</div>
)}
<div className={`flex py-4 justify-center items-center gap-2 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
<RiDragDropLine className="w-4 h-4" />
<div className={`flex items-center justify-center gap-2 py-4 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
<RiDragDropLine className="h-4 w-4" />
<span className="system-xs-regular">{t('plugin.installModal.dropPluginToInstall')}</span>
</div>
{currentFile && (

16
web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
View File

@@ -63,16 +63,16 @@ const InstallPluginDropdown = ({
<div className="relative">
<PortalToFollowElemTrigger onClick={() => setIsMenuOpen(v => !v)}>
<Button
className={cn('w-full h-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
className={cn('h-full w-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
>
<RiAddLine className='w-4 h-4' />
<RiAddLine className='h-4 w-4' />
<span className='pl-1'>{t('plugin.installPlugin')}</span>
<RiArrowDownSLine className='w-4 h-4 ml-1' />
<RiArrowDownSLine className='ml-1 h-4 w-4' />
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1002]'>
<div className='flex flex-col p-1 pb-2 items-start w-[200px] bg-components-panel-bg-blur border border-components-panel-border rounded-xl shadows-shadow-lg'>
<span className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch text-text-tertiary system-xs-medium-uppercase'>
<div className='shadows-shadow-lg flex w-[200px] flex-col items-start rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1 pb-2'>
<span className='system-xs-medium-uppercase flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1 text-text-tertiary'>
{t('plugin.installFrom')}
</span>
<input
@@ -94,7 +94,7 @@ const InstallPluginDropdown = ({
].map(({ icon: Icon, text, action }) => (
<div
key={action}
className='flex items-center w-full px-2 py-1.5 gap-1 rounded-lg hover:bg-state-base-hover !cursor-pointer'
className='flex w-full !cursor-pointer items-center gap-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
onClick={() => {
if (action === 'local') {
fileInputRef.current?.click()
@@ -109,8 +109,8 @@ const InstallPluginDropdown = ({
}
}}
>
<Icon className="w-4 h-4 text-text-tertiary" />
<span className='px-1 text-text-secondary system-md-regular'>{text}</span>
<Icon className="h-4 w-4 text-text-tertiary" />
<span className='system-md-regular px-1 text-text-secondary'>{text}</span>
</div>
))}
</div>

24
web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
View File

@@ -84,8 +84,8 @@ const PluginTasks = () => {
<Tooltip popupContent={tip}>
<div
className={cn(
'relative flex items-center justify-center w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
(isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt cursor-pointer',
'relative flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
(isInstallingWithError || isFailed) && 'cursor-pointer border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
)}
id="plugin-task-trigger"
>
@@ -98,7 +98,7 @@ const PluginTasks = () => {
!(isInstalling || isInstallingWithError) && (
<RiInstallLine
className={cn(
'w-4 h-4 text-components-button-secondary-text',
'h-4 w-4 text-components-button-secondary-text',
(isInstallingWithError || isFailed) && 'text-components-button-destructive-secondary-text',
)}
/>
@@ -125,12 +125,12 @@ const PluginTasks = () => {
}
{
isSuccess && (
<RiCheckboxCircleFill className='w-3.5 h-3.5 text-text-success' />
<RiCheckboxCircleFill className='h-3.5 w-3.5 text-text-success' />
)
}
{
isFailed && (
<RiErrorWarningFill className='w-3.5 h-3.5 text-text-destructive' />
<RiErrorWarningFill className='h-3.5 w-3.5 text-text-destructive' />
)
}
</div>
@@ -138,8 +138,8 @@ const PluginTasks = () => {
</Tooltip>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='p-1 pb-2 w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
<div className='sticky top-0 flex items-center justify-between px-2 pt-1 h-7 system-sm-semibold-uppercase'>
<div className='w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pb-2 shadow-lg'>
<div className='system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1'>
{t('plugin.task.installedError', { errorLength: errorPluginsLength })}
<Button
className='shrink-0'
@@ -155,20 +155,20 @@ const PluginTasks = () => {
errorPlugins.map(errorPlugin => (
<div
key={errorPlugin.plugin_unique_identifier}
className='flex p-2 rounded-lg hover:bg-state-base-hover'
className='flex rounded-lg p-2 hover:bg-state-base-hover'
>
<div className='relative flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
<RiErrorWarningFill className='absolute -right-0.5 -bottom-0.5 z-10 w-3 h-3 text-text-destructive' />
<div className='relative mr-2 flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
<RiErrorWarningFill className='absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 text-text-destructive' />
<CardIcon
size='tiny'
src={getIconUrl(errorPlugin.icon)}
/>
</div>
<div className='grow'>
<div className='system-md-regular text-text-secondary truncate'>
<div className='system-md-regular truncate text-text-secondary'>
{errorPlugin.labels[language]}
</div>
<div className='system-xs-regular text-text-destructive break-all'>
<div className='system-xs-regular break-all text-text-destructive'>
{errorPlugin.message}
</div>
</div>

4
web/app/components/plugins/plugin-page/plugins-panel.tsx
View File

@@ -43,14 +43,14 @@ const PluginsPanel = () => {
return (
<>
<div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
<div className='flex flex-col items-start justify-center gap-3 self-stretch px-12 pb-3 pt-1'>
<div className='h-px self-stretch bg-divider-subtle'></div>
<FilterManagement
onFilterChange={handleFilterChange}
/>
</div>
{isPluginListLoading ? <Loading type='app' /> : (filteredList?.length ?? 0) > 0 ? (
<div className='flex px-12 items-start content-start gap-2 grow self-stretch flex-wrap'>
<div className='flex grow flex-wrap content-start items-start gap-2 self-stretch px-12'>
<div className='w-full'>
<List pluginList={filteredList || []} />
</div>

14
web/app/components/plugins/provider-card.tsx
View File

@@ -36,19 +36,19 @@ const ProviderCard: FC<Props> = ({
const { locale } = useI18N()
return (
<div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
<div className={cn('group relative rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs hover:bg-components-panel-on-panel-item-bg', className)}>
{/* Header */}
<div className="flex">
<Icon src={payload.icon} />
<div className="ml-3 w-0 grow">
<div className="flex items-center h-5">
<div className="flex h-5 items-center">
<Title title={getValueFromI18nObject(label)} />
{/* <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" /> */}
</div>
<div className='mb-1 flex justify-between items-center h-4'>
<div className='mb-1 flex h-4 items-center justify-between'>
<div className='flex items-center'>
<div className='text-text-tertiary system-xs-regular'>{org}</div>
<div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
<div className='system-xs-regular text-text-tertiary'>{org}</div>
<div className='system-xs-regular mx-2 text-text-quaternary'>·</div>
<DownloadCount downloadCount={payload.install_count || 0} />
</div>
</div>
@@ -61,7 +61,7 @@ const ProviderCard: FC<Props> = ({
))}
</div>
<div
className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8 rounded-xl bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent'
className='absolute bottom-0 left-0 right-0 hidden items-center gap-2 rounded-xl bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-8 group-hover:flex'
>
<Button
className='grow'
@@ -76,7 +76,7 @@ const ProviderCard: FC<Props> = ({
>
<a href={`${getPluginLinkInMarketplace(payload)}?language=${locale}`} target='_blank' className='flex items-center gap-0.5'>
{t('plugin.detailPanel.operation.detail')}
<RiArrowRightUpLine className='w-4 h-4' />
<RiArrowRightUpLine className='h-4 w-4' />
</a>
</Button>
</div>

12
web/app/components/plugins/update-plugin/from-market-place.tsx
View File

@@ -105,10 +105,10 @@ const UpdatePluginModal: FC<Props> = ({
}, [onSave, uploadStep, check, originalPackageInfo.id, handleRefetch, targetPackageInfo.id])
const usedInAppInfo = useMemo(() => {
return (
<div className='flex px-0.5 justify-center items-center gap-0.5'>
<div className='text-text-warning system-xs-medium'>{t(`${i18nPrefix}.usedInApps`, { num: 3 })}</div>
<div className='flex items-center justify-center gap-0.5 px-0.5'>
<div className='system-xs-medium text-text-warning'>{t(`${i18nPrefix}.usedInApps`, { num: 3 })}</div>
{/* show the used apps */}
<RiInformation2Line className='w-4 h-4 text-text-tertiary' />
<RiInformation2Line className='h-4 w-4 text-text-tertiary' />
</div>
)
}, [t])
@@ -120,10 +120,10 @@ const UpdatePluginModal: FC<Props> = ({
closable
title={t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
>
<div className='mt-3 mb-2 text-text-secondary system-md-regular'>
<div className='system-md-regular mb-2 mt-3 text-text-secondary'>
{t(`${i18nPrefix}.description`)}
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
installed={uploadStep === UploadStep.installed}
payload={pluginManifestToCardPluginProps({
@@ -141,7 +141,7 @@ const UpdatePluginModal: FC<Props> = ({
}
/>
</div>
<div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch pt-5'>
{uploadStep === UploadStep.notStarted && (
<Button
onClick={handleCancel}

16
web/app/components/plugins/update-plugin/plugin-version-picker.tsx
View File

@@ -77,15 +77,15 @@ const PluginVersionPicker: FC<Props> = ({
onOpenChange={onShowChange}
>
<PortalToFollowElemTrigger
className={cn('inline-flex items-center cursor-pointer', disabled && 'cursor-default')}
className={cn('inline-flex cursor-pointer items-center', disabled && 'cursor-default')}
onClick={handleTriggerClick}
>
{trigger}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className="relative w-[209px] p-1 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
<div className='px-3 pt-1 pb-0.5 text-text-tertiary system-xs-medium-uppercase'>
<div className="relative w-[209px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
<div className='system-xs-medium-uppercase px-3 pb-0.5 pt-1 text-text-tertiary'>
{t('plugin.detailPanel.switchVersion')}
</div>
<div className='relative'>
@@ -93,19 +93,19 @@ const PluginVersionPicker: FC<Props> = ({
<div
key={version.unique_identifier}
className={cn(
'h-7 px-3 py-1 flex items-center gap-1 rounded-lg hover:bg-state-base-hover cursor-pointer',
currentVersion === version.version && 'opacity-30 cursor-default hover:bg-transparent',
'flex h-7 cursor-pointer items-center gap-1 rounded-lg px-3 py-1 hover:bg-state-base-hover',
currentVersion === version.version && 'cursor-default opacity-30 hover:bg-transparent',
)}
onClick={() => handleSelect({
version: version.version,
unique_identifier: version.unique_identifier,
})}
>
<div className='grow flex items-center'>
<div className='text-text-secondary system-sm-medium'>{version.version}</div>
<div className='flex grow items-center'>
<div className='system-sm-medium text-text-secondary'>{version.version}</div>
{currentVersion === version.version && <Badge className='ml-1' text='CURRENT'/>}
</div>
<div className='shrink-0 text-text-tertiary system-xs-regular'>{formatDate(version.created_at, format)}</div>
<div className='system-xs-regular shrink-0 text-text-tertiary'>{formatDate(version.created_at, format)}</div>
</div>
))}
</div>