mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-20 08:16:52 +08:00
Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user