33 Dialog ,
44 DialogClose ,
55 DialogContent ,
6+ DialogContentSection ,
67 DialogFooter ,
78 DialogHeader ,
8- DialogTitle ,
99 DialogTrigger ,
1010} from "@/components/ui/dialog" ;
1111import { Input } from "@/components/ui/input" ;
@@ -319,33 +319,19 @@ export function AddWorker({
319319 </ Button >
320320 ) }
321321 </ DialogTrigger >
322- < DialogContent className = "sm:max-w-[425px] p-0 !bg-popup-surface gap-0 !rounded-xl border border-zinc-300 shadow-sm" >
323- < DialogHeader className = "!bg-popup-surface !rounded-t-xl p-md" >
324- < DialogTitle className = "m-0" >
325- < div className = "flex gap-xs items-center justify-start" >
326- { showEnvConfig && (
327- < ChevronLeft
328- onClick = { handleCloseMcpEnvSetting }
329- size = { 16 }
330- className = "text-icon-primary cursor-pointer"
331- />
332- ) }
333- < div className = "text-base font-bold leading-10 text-text-action" >
334- { showEnvConfig
335- ? t ( "workforce.configure-mcp-server" )
336- : t ( "workforce.add-your-agent" ) }
337- </ div >
338- < TooltipSimple content = "Configure your MCP worker node here." >
339- < CircleAlert size = { 16 } />
340- </ TooltipSimple >
341- </ div >
342- </ DialogTitle >
343- </ DialogHeader >
322+ < DialogContent size = "sm" className = "p-0 gap-0" >
323+ < DialogHeader
324+ title = { showEnvConfig ? t ( "workforce.configure-mcp-server" ) : t ( "workforce.add-your-agent" ) }
325+ tooltip = { t ( "layout.configure-your-mcp-worker-node-here" ) }
326+ showTooltip = { true }
327+ showBackButton = { showEnvConfig }
328+ onBackClick = { handleCloseMcpEnvSetting }
329+ />
344330
345331 { showEnvConfig ? (
346332 // environment configuration interface
347333 < >
348- < div className = "flex flex-col gap-3 bg-white-100% p-md" >
334+ < DialogContentSection className = "flex flex-col gap-3 bg-white-100% p-md" >
349335 < div className = "flex gap-md items-center" >
350336 { getCategoryIcon ( activeMcp ?. category ?. name ) }
351337 < div >
@@ -394,19 +380,19 @@ export function AddWorker({
394380 )
395381 ) }
396382 </ div >
397- </ div >
398- < DialogFooter className = "bg-white-100% !rounded-b-xl p-md" >
399- < Button
400- onClick = { handleCloseMcpEnvSetting }
401- variant = "ghost"
402- size = "sm"
403- >
404- { t ( "workforce.cancel" ) }
405- </ Button >
406- < Button size = "sm" onClick = { handleConfigureMcpEnvSetting } >
407- < span > { t ( "Connect" ) } </ span >
408- < ArrowRight size = { 16 } / >
409- </ Button >
383+ </ DialogContentSection >
384+ < DialogFooter
385+ className = "bg-white-100% !rounded-b-xl p-md"
386+ showCancelButton = { true }
387+ showConfirmButton = { true }
388+ cancelButtonText = { t ( "workforce.cancel" ) }
389+ confirmButtonText = { t ( "layout.connect" ) }
390+ onCancel = { handleCloseMcpEnvSetting }
391+ onConfirm = { handleConfigureMcpEnvSetting }
392+ cancelButtonVariant = "ghost"
393+ confirmButtonVariant = "primary"
394+ >
395+ < ArrowRight size = { 16 } / >
410396 </ DialogFooter >
411397 { /* hidden but keep rendering ToolSelect component */ }
412398 < div style = { { display : "none" } } >
@@ -421,72 +407,64 @@ export function AddWorker({
421407 ) : (
422408 // default add interface
423409 < >
424- < div className = "flex flex-col gap-3 bg-white-100% p-md" >
425- < div className = "flex flex-col gap-2" >
426- < div className = "flex items-center gap-sm pb-md border-[0px] border-b border-solid border-border-secondary" >
410+ < DialogContentSection className = "flex flex-col gap-3 bg-white-100% p-md" >
411+ < div className = "flex flex-col gap-4" >
412+ < div className = "flex items-center gap-sm" >
413+ < div className = "flex w-16 h-16 items-center justify-center" >
427414 < Bot size = { 32 } className = "text-icon-primary" />
415+ </ div >
428416 < Input
429- placeholder = "Agent Name"
417+ size = "sm"
418+ title = { t ( "layout.name-your-agent" ) }
419+ placeholder = { t ( "layout.add-an-agent-name" ) }
430420 value = { workerName }
431421 onChange = { ( e ) => {
432422 setWorkerName ( e . target . value ) ;
433423 // when user starts input, clear error
434424 if ( nameError ) setNameError ( "" ) ;
435425 } }
436- className = { `!border-none !bg-transparent !shadow-none text-xl leading-2xl font-bold !ring-0 !ring-offset-0 ${
437- nameError ? "border-red-500" : ""
438- } `}
426+ state = { nameError ? "error" : "default" }
427+ note = { nameError || "" }
428+ backIcon = { < RefreshCw size = { 16 } className = "text-button-transparent-icon-disabled" /> }
429+ onBackIconClick = { ( ) => {
430+ // Handle refresh/regenerate logic here
431+ console . log ( "Refresh agent name" ) ;
432+ } }
439433 required
440434 />
441- < RefreshCw
442- size = { 16 }
443- className = "text-button-transparent-icon-disabled"
444- />
445435 </ div >
446- { nameError && (
447- < div className = "text-red-500 text-sm font-medium" >
448- { nameError }
449- </ div >
450- ) }
451436 </ div >
452- < div className = "flex flex-col gap-sm " >
453- < div className = "text-text-body text-sm leading-normal font-bold" >
454- { t ( "workforce.description-optional" ) }
455- </ div >
456- < Textarea
457- placeholder = "I'm an agent specially designed for..."
437+
438+ < Textarea
439+ variant = "enhanced"
440+ size = "sm"
441+ title = { t ( "workforce.description-optional" ) }
442+ placeholder = { t ( "layout.im-an- agent- specially- designed- for" ) }
458443 value = { workerDescription }
459444 onChange = { ( e ) => setWorkerDescription ( e . target . value ) }
460- className = "rounded-sm border border-solid border-input-border-default bg-input-bg-default !shadow-none text-sm leading-normal !ring-0 !ring-offset-0 resize-none"
461- />
462- </ div >
463- < div >
464- < div className = "flex items-center gap-sm " >
465- < div className = "text-text-body text-sm leading-normal font-bold" >
466- { t ( "workforce.agent-tool" ) }
467- </ div >
468- < TooltipSimple content = "Select MCP tools for your worker node." >
469- < CircleAlert size = { 16 } />
470- </ TooltipSimple >
471- </ div >
472- </ div >
445+ />
446+
473447 < ToolSelect
474448 onShowEnvConfig = { handleShowEnvConfig }
475449 onSelectedToolsChange = { handleSelectedToolsChange }
476450 initialSelectedTools = { selectedTools }
477451 ref = { toolSelectRef }
478452 />
479- </ div >
480- < DialogFooter className = "bg-white-100% !rounded-b-xl p-md" >
481- < DialogClose asChild >
482- < Button onClick = { resetForm } variant = "ghost" size = "sm" >
483- { t ( "workforce.cancel" ) }
484- </ Button >
485- </ DialogClose >
486- < Button size = "sm" onClick = { handleAddWorker } type = "submit" >
487- < span > { t ( "workforce.save-changes" ) } </ span >
488- </ Button >
489- </ DialogFooter >
453+ </ DialogContentSection >
454+ < DialogFooter
455+ className = "bg-white-100% !rounded-b-xl p-md"
456+ showCancelButton = { true }
457+ showConfirmButton = { true }
458+ cancelButtonText = { t ( "workforce.cancel" ) }
459+ confirmButtonText = { t ( "workforce.save-changes" ) }
460+ onCancel = { ( ) => {
461+ resetForm ( ) ;
462+ setDialogOpen ( false ) ;
463+ } }
464+ onConfirm = { handleAddWorker }
465+ cancelButtonVariant = "ghost"
466+ confirmButtonVariant = "primary"
467+ />
490468 </ >
491469 ) }
492470 </ DialogContent >
0 commit comments