estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 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/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>
)