admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Optimize component styles and interactions (#23250) (#23251)

Browse Source
This commit is contained in:
HyaCinth
2025-08-01 14:18:38 +08:00
committed by GitHub
parent da5c003f97
commit f7016fd922
3 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/app/components/workflow/nodes/agent/components/tool-icon.tsx
View File

@@ -61,37 +61,39 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
>
<div
className={classNames(
'relative flex size-5 items-center justify-center rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge',
'relative',
)}
ref={containerRef}
>
{(() => {
if (iconFetchError || !icon)
<div className="flex size-5 items-center justify-center overflow-hidden rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
{(() => {
if (iconFetchError || !icon)
return <Group className="h-3 w-3 opacity-35" />
if (typeof icon === 'string') {
return <img
src={icon}
alt='tool icon'
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
}
if (typeof icon === 'object') {
return <AppIcon
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
icon={icon?.content}
background={icon?.background}
/>
}
return <Group className="h-3 w-3 opacity-35" />
if (typeof icon === 'string') {
return <img
src={icon}
alt='tool icon'
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
}
if (typeof icon === 'object') {
return <AppIcon
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
icon={icon?.content}
background={icon?.background}
/>
}
return <Group className="h-3 w-3 opacity-35" />
})()}
{indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
})()}
</div>
{indicator && <Indicator color={indicator} className="absolute -right-[1px] -top-[1px]" />}
</div>
</Tooltip>
})