Skip to content

feat(wizard): add AREN wizards with agent orchestration, CustomTimePicker and step icons

yahya.elmokhtari a demandé de fusionner IAV-787 vers develop

Overview

Complete wizard module refactoring with new AREN and IDER wizard implementations, enhanced AYAL wizard with full step components, custom UI components (CustomTimePicker), agent orchestration system with marketplace integration, and glassmorphism-styled keyword tag inputs for email management.

Changes

  • Removed deprecated itri-wizard module completely (18 files deleted)
  • Removed deprecated ayal-wizard utility files (use-ayal-wizard-state.tsx, utils.ts, step-topics-frequency.tsx)
  • Added identity management steps to ayal-wizard (step-identity.tsx, step-identity-availability.tsx, step-identity-faqs.tsx)
  • Added context and objectives steps (step-context.tsx, step-objectives.tsx with option files)
  • Added FAQs, documents and features step components to ayal-wizard
  • Added notifications step and dynamic credential form handling
  • Created aren-wizard module with 8-step configuration flow
  • Created ider-wizard module with dedicated wizard implementation
  • Added StepAgentOrchestration component with tab navigation for 10 marketplace agents
  • Built CustomTimePicker reusable UI component matching CustomSelect design
  • Added Lucide icons to all wizard step titles (Sparkles, SlidersHorizontal, Plug, Settings, Calendar, Mail, Bot, ClipboardCheck)
  • Improved email keyword tag input with glassmorphism design and animated buttons
  • Replaced TextField time inputs with CustomTimePicker throughout wizards
  • Updated wizard exports and integrated with agent dashboard page

Technical Details

  • CustomTimePicker uses same z-index pattern as CustomSelect: zIndex: isOpen ? 9999 : 1 with isolation: isolate
  • Dropdown positioned absolutely with zIndex: 99999 for proper stacking context
  • Glassmorphism keyword input: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, ${categoryColor}15 100%)
  • Backdrop blur: backdrop-filter: blur(12px) with WebkitBackdropFilter for Safari compatibility
  • Step icon container: background: ${agentColor.primary}25 with border: 2px solid ${agentColor.primary}50
  • Box shadow on step icons: 0 4px 20px ${agentColor.glow}
  • Agent orchestration tabs with horizontal scroll and glassmorphism arrow navigation buttons
  • Custom toggle switches with width: 52px, height: 28px and animated knob transition
  • Time picker generates options based on min/max time and configurable step interval (default 30min)
  • Keyword add button hover: transform: scale(1.05) with boxShadow: 0 4px 12px ${categoryColor}60
  • ConditionalComponent pattern used consistently for all conditional rendering

Components Added

  • src/shared/components/ui/custom-time-picker/index.tsx - Reusable time picker with glassmorphism styling
  • src/shared/components/wizard/aren-wizard/step-agent-orchestration.tsx - Agent orchestration with tab navigation
  • src/shared/components/wizard/aren-wizard/step-agenda-preferences.tsx - Work hours and meeting preferences
  • src/shared/components/wizard/aren-wizard/step-email-management.tsx - Email summaries and priority categorization
  • src/shared/components/wizard/aren-wizard/step-features.tsx - Feature selection step
  • src/shared/components/wizard/aren-wizard/step-integrations.tsx - Calendar, email, video integrations
  • src/shared/components/wizard/aren-wizard/step-integration-config.tsx - Integration credential configuration
  • src/shared/components/wizard/aren-wizard/step-resume.tsx - Configuration summary with agent avatars
  • src/shared/components/wizard/aren-wizard/step-welcome.tsx - Welcome screen with general info
  • src/shared/components/wizard/aren-wizard/use-aren-wizard-state.tsx - State management and handlers
  • src/shared/components/wizard/aren-wizard/types.ts - TypeScript interfaces for AREN wizard
  • src/shared/components/wizard/aren-wizard/progress-bar.tsx - Step progress indicator
  • src/shared/components/wizard/aren-wizard/navigation-buttons.tsx - Previous/Next navigation
  • src/shared/components/wizard/ider-wizard/ - Complete IDER wizard module

Components Updated

  • src/shared/_mock/aren-wizard-data.tsx - Added step icons, orchestration agents, wizard configuration data
  • src/shared/components/wizard/aren-wizard/index.tsx - Added Lucide icon rendering, 8-step flow, stepIconMap
  • src/shared/components/wizard/ayal-wizard/ - Multiple step components added and refactored
  • src/shared/components/wizard/index.ts - Updated exports for new wizard modules
  • src/app/dashboard/agents/[agentId]/page.tsx - Integrated wizard components with agent page

Components Removed

  • src/shared/components/wizard/itri-wizard/ - Entire module deleted (18 files)
  • src/shared/components/wizard/ayal-wizard/use-ayal-wizard-state.tsx
  • src/shared/components/wizard/ayal-wizard/utils.ts
  • src/shared/components/wizard/ayal-wizard/step-topics-frequency.tsx

Step Icons Added

  • Step 1 (Bienvenue) - Sparkles
  • Step 2 (Fonctionnalités à Activer) - SlidersHorizontal
  • Step 3 (Choisir les Intégrations) - Plug
  • Step 4 (Configuration des Intégrations) - Settings
  • Step 5 (Préférences d'Agenda) - Calendar
  • Step 6 (Gestion des Emails) - Mail
  • Step 7 (Orchestration des Agents) - Bot
  • Step 8 (Récapitulatif) - ClipboardCheck

Orchestration Agents Added

  • aylan - AYLAN - Agent Prospection et Vente (/avatars/AYLAN.svg)
  • ayal - AYAL - Agent Service Client (/avatars/AYAL.svg)
  • ania - ANIA - Agent RH (/avatars/ANIA.svg)
  • adan - ADAN - Agent Marché Public (/avatars/ADAN.svg)
  • ines - INES - Agent Téléphonique (/avatars/INES.svg)
  • ider - IDER - Agent SEO (/avatars/IDER.svg)
  • aqal - AQAL - Agent Juridique (/avatars/AQAL.svg)
  • aksel - AKSEL - Agent Comptabilité et Finance (/avatars/AKSEL.svg)
  • ziri - ZIRI - Agent Community Manager (/avatars/ZIRI.svg)
  • anir - ANIR - Agent Analyse des Documents (/avatars/ANIR.svg)

Closes [IAV-787]

Modification effectuée par yahya.elmokhtari

Rapports de requête de fusion