style: build icon

This commit is contained in:
yyh 2026-06-25 14:14:12 +08:00
parent d5e8ab44f9
commit 191b63fbf6
No known key found for this signature in database

View File

@ -4,7 +4,21 @@ import type { AgentChatRuntimeEmptyStateProps, AgentChatRuntimeProps } from './c
import { useTranslation } from 'react-i18next'
import { AgentChatRuntime } from './chat-runtime'
const buildIconGridCells = Array.from({ length: 16 }, (_, index) => `build-icon-cell-${index}`)
const buildIconGridCellOpacities = [
'0 0 0.093 0.166 0 0 0.155 0',
'0 0.159 0.145 0.159 0.135 0.179 0.128 0.105',
'0.091 0 0.161 0.187 0.102 0 0.111 0',
'0.148 0.159 0 0 0.195 0.158 0.342 0.128',
'0.169 0.132 0 0.115 0.112 0.319 0.218 0.199',
'0.241 0.206 0.124 0.181 0.212 0.211 0.315 0.127',
'0.133 0.21 0.166 0.476 0.167 0.22 0.136 0.246',
'0 0.132 0.151 0.146 0.276 0.256 0.269 0',
].flatMap(row => row.split(' ').map(Number))
const buildIconGridCells = buildIconGridCellOpacities.map((opacity, index) => ({
id: `build-icon-cell-${Math.floor(index / 8)}-${index % 8}`,
opacity,
}))
type AgentBuildChatProps = Omit<AgentChatRuntimeProps, 'inputPlaceholder' | 'renderEmptyState' | 'sendButtonLabel'>
@ -16,13 +30,17 @@ function AgentBuildChatEmptyState({
return (
<div className="flex h-full items-center justify-center">
<div className="flex w-full max-w-150 flex-col items-start p-3 text-left">
<div className="relative flex size-12 items-center justify-center overflow-hidden rounded-xl border-[0.5px] border-components-panel-border-subtle bg-background-default-dimmed text-text-tertiary">
<div className="grid size-full grid-cols-4 grid-rows-4 gap-px p-1">
<div className="main-nav-active-glass relative flex h-[50px] w-12 items-center justify-center rounded-xl p-2">
<div className="absolute inset-x-px inset-y-0.5 grid grid-cols-[repeat(8,4px)] grid-rows-[repeat(8,4px)] gap-0.5 opacity-25">
{buildIconGridCells.map(cell => (
<span key={cell} className="rounded-[1px] bg-divider-subtle" />
<span
key={cell.id}
className={cell.opacity > 0 ? 'rounded-[1px] bg-[#98A2B2]' : 'invisible'}
style={{ opacity: cell.opacity }}
/>
))}
</div>
<span aria-hidden className="absolute i-ri-hammer-line size-5 text-text-tertiary" />
<span aria-hidden className="absolute i-ri-hammer-line size-5 text-saas-dify-blue-inverted" />
</div>
<div className="mt-3 max-w-full truncate system-md-medium text-text-secondary">
{t('agentDetail.configure.build.empty.title')}