diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/build-background.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/build-background.tsx index 3462de15482..bb57bff650e 100644 --- a/web/features/agent-v2/agent-detail/configure/components/preview/build-background.tsx +++ b/web/features/agent-v2/agent-detail/configure/components/preview/build-background.tsx @@ -1,7 +1,57 @@ import { cn } from '@langgenius/dify-ui/cn' -import buildHeaderBackground from './build-header-background.svg' -export function AgentBuildHeaderBackground({ +const buildPanelGridColumnCount = 384 +const buildPanelGridRowCount = 32 + +function getBuildPanelGridCellOpacity(row: number, column: number) { + const seed = Math.sin((row + 1) * 12.9898 + (column + 1) * 78.233) * 43758.5453 + const noise = seed - Math.floor(seed) + const verticalProgress = row / (buildPanelGridRowCount - 1) + const densityThreshold = 0.26 + verticalProgress * 0.72 + const horizontalWeight = Math.min(1, column / 160) + const verticalWeight = (1 - verticalProgress) ** 1.7 + + if (noise < densityThreshold) + return 0 + + return Number(Math.min(0.272, (0.032 + noise * 0.058 + horizontalWeight * 0.09) * verticalWeight).toFixed(3)) +} + +const buildPanelGridCells = Array.from( + { length: buildPanelGridColumnCount * buildPanelGridRowCount }, + (_, index) => { + const row = Math.floor(index / buildPanelGridColumnCount) + const column = index % buildPanelGridColumnCount + const opacity = getBuildPanelGridCellOpacity(row, column) + + return { + id: `build-panel-grid-cell-${row}-${column}`, + column: column + 1, + opacity, + row: row + 1, + } + }, +).filter(cell => cell.opacity > 0) + +function AgentBuildPanelGrid({ + className, +}: { + className?: string +}) { + return ( +
+ {buildPanelGridCells.map(cell => ( + + ))} +
+ ) +} + +export function AgentBuildPanelBackground({ visible, }: { visible: boolean @@ -10,16 +60,12 @@ export function AgentBuildHeaderBackground({
- + +
) } diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/build-header-background.svg b/web/features/agent-v2/agent-detail/configure/components/preview/build-header-background.svg deleted file mode 100644 index b7c9fc708fd..00000000000 --- a/web/features/agent-v2/agent-detail/configure/components/preview/build-header-background.svg +++ /dev/null @@ -1,1412 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx index 21158c36b60..6bcff963443 100644 --- a/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx +++ b/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx @@ -55,7 +55,7 @@ export function AgentPreviewHeader({ const modeTip = `${buildLabel}. ${buildTipBody} ${previewLabel}. ${previewTipBody} ${learnMoreLabel}` return ( -
+
value={[mode]} @@ -107,38 +107,40 @@ export function AgentPreviewHeader({
-
- - {mode === 'build' && ( +
+
- )} - + {mode === 'build' && ( + + )} +
+
diff --git a/web/features/agent-v2/agent-detail/configure/page.tsx b/web/features/agent-v2/agent-detail/configure/page.tsx index 0c533211c68..5a6cde741aa 100644 --- a/web/features/agent-v2/agent-detail/configure/page.tsx +++ b/web/features/agent-v2/agent-detail/configure/page.tsx @@ -9,7 +9,7 @@ import { AgentComposerProvider } from '@/features/agent-v2/agent-composer/provid import { useHydrateAgentSoulConfigDraft } from '@/features/agent-v2/agent-composer/store' import { consoleQuery } from '@/service/client' import { AgentOrchestratePanel } from './components/orchestrate' -import { AgentBuildHeaderBackground } from './components/preview/build-background' +import { AgentBuildPanelBackground } from './components/preview/build-background' import { AgentBuildChat } from './components/preview/build-chat' import { AgentChatFeaturesPanel } from './components/preview/chat-features-panel' import { AgentPreviewHeader } from './components/preview/header' @@ -177,7 +177,7 @@ function AgentConfigurePageLoadedContent({
-
- +
+