22
33import { useEffect , useState } from "react" ;
44import { motion } from "framer-motion" ;
5- import { useTranslations } from "@/lib/i18n" ;
65import { getFlowForVersion } from "@/data/execution-flows" ;
76import type { FlowNode , FlowEdge } from "@/types/agent-data" ;
87
@@ -186,7 +185,6 @@ interface ExecutionFlowProps {
186185}
187186
188187export function ExecutionFlow ( { version } : ExecutionFlowProps ) {
189- const t = useTranslations ( "version" ) ;
190188 const [ flow , setFlow ] = useState < ReturnType < typeof getFlowForVersion > > ( null ) ;
191189
192190 useEffect ( ( ) => {
@@ -198,46 +196,43 @@ export function ExecutionFlow({ version }: ExecutionFlowProps) {
198196 const maxY = Math . max ( ...flow . nodes . map ( ( n ) => n . y ) ) + 50 ;
199197
200198 return (
201- < section >
202- < h2 className = "mb-4 text-xl font-semibold" > { t ( "execution_flow" ) } </ h2 >
203- < div className = "overflow-x-auto rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] p-4" >
204- < svg
205- viewBox = { `0 0 600 ${ maxY } ` }
206- className = "mx-auto w-full max-w-[600px]"
207- style = { { minHeight : 300 } }
208- >
209- < defs >
210- < marker
211- id = "arrowhead"
212- markerWidth = { 8 }
213- markerHeight = { 6 }
214- refX = { 8 }
215- refY = { 3 }
216- orient = "auto"
217- >
218- < polygon
219- points = "0 0, 8 3, 0 6"
220- fill = "var(--color-text-secondary)"
221- />
222- </ marker >
223- </ defs >
224-
225- { flow . edges . map ( ( edge , i ) => (
226- < EdgePath key = { `${ edge . from } -${ edge . to } ` } edge = { edge } nodes = { flow . nodes } index = { i } />
227- ) ) }
228-
229- { flow . nodes . map ( ( node , i ) => (
230- < motion . g
231- key = { node . id }
232- initial = { { opacity : 0 , y : - 10 } }
233- animate = { { opacity : 1 , y : 0 } }
234- transition = { { delay : i * 0.06 , duration : 0.3 } }
235- >
236- < NodeShape node = { node } />
237- </ motion . g >
238- ) ) }
239- </ svg >
240- </ div >
241- </ section >
199+ < div className = "overflow-x-auto rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] p-4" >
200+ < svg
201+ viewBox = { `0 0 600 ${ maxY } ` }
202+ className = "mx-auto w-full max-w-[600px]"
203+ style = { { minHeight : 300 } }
204+ >
205+ < defs >
206+ < marker
207+ id = "arrowhead"
208+ markerWidth = { 8 }
209+ markerHeight = { 6 }
210+ refX = { 8 }
211+ refY = { 3 }
212+ orient = "auto"
213+ >
214+ < polygon
215+ points = "0 0, 8 3, 0 6"
216+ fill = "var(--color-text-secondary)"
217+ />
218+ </ marker >
219+ </ defs >
220+
221+ { flow . edges . map ( ( edge , i ) => (
222+ < EdgePath key = { `${ edge . from } -${ edge . to } ` } edge = { edge } nodes = { flow . nodes } index = { i } />
223+ ) ) }
224+
225+ { flow . nodes . map ( ( node , i ) => (
226+ < motion . g
227+ key = { node . id }
228+ initial = { { opacity : 0 , y : - 10 } }
229+ animate = { { opacity : 1 , y : 0 } }
230+ transition = { { delay : i * 0.06 , duration : 0.3 } }
231+ >
232+ < NodeShape node = { node } />
233+ </ motion . g >
234+ ) ) }
235+ </ svg >
236+ </ div >
242237 ) ;
243238}
0 commit comments