feat(wizard): AYAL wizard enhancements with custom features
● ### Overview Comprehensive AYAL (formerly ITRI) wizard enhancements with new features, UI improvements, and TypeScript fixes across the SAV dashboard and wizard components.
Changes
- Renamed agent from ITRI to AYAL across all wizard and SAV files
- Added custom features system with Suggestions (with file attachments) and Restrictions sections
- Implemented auto language detection toggle in Step 5 (identity)
- Added dynamic custom category input for FAQs when "Autre" is selected
- Removed "Intégration déconnectée" notification from Step 8
- Updated resume page to display all new sections (Custom Features, FAQs, Documents)
- Changed CTA button from "Créer l'agent" to "Activer l'agent"
- Replaced emojis with Lucide React icons throughout wizard steps
- Reorganized integrations by category (Communication, E-commerce & CRM, Ticketing)
- Added new integration icons (Jira, WooCommerce, Zendesk, Freshdesk, HubSpot)
- Implemented cursor stability fixes on agent card hover
- Added fade-in loading animations to conversation detail view
- Added 15 supported languages in configuration dropdown
Technical Details
- Implemented
LucideIcontype imports across all wizard step files - Added
typeofguards for icon rendering to handle ReactNode types - Created new
MultiSelectcomponent for language selection - Updated
CustomSelectinterface to support ReactNode icons - All animations use MUI Fade component with staggered delays
- Glassmorphism styling maintained throughout
- No commented code
Components Added
-
multi-select.tsx- New multi-select dropdown component -
step-documents.tsx- New documents upload step
Components Updated
-
view.tsx(SAV dashboard main view) -
itri-chat-interface.tsx(renamed to AYALChatInterface) -
conversation-tab.tsx(single-click + animations) -
languages-section.tsx(15 language options + auto detection) -
agent-card/index.tsx(cursor stability fix) -
custom-select/index.tsx(SelectOption interface + icon support) - All wizard step files (step-welcome, step-identity, step-objectives, step-features, step-faqs, step-integrations, step-integration-config, step-notifications, step-resume)
-
use-wizard-state.ts(new handlers for suggestions/restrictions) -
types.ts(CustomSuggestion, CustomRestriction interfaces) -
wizard-data.ts(reorganized integrations by category) -
marketplace-agents.ts(AYAL agent updates)
Files Fixed (TypeScript/Build Errors)
- step-notifications.tsx
- step-features.tsx
- step-faqs.tsx
- step-integrations.tsx
- step-integration-config.tsx
- step-objectives.tsx
- step-resume.tsx
- custom-select/index.tsx
- wizard/itri-wizard/index.tsx
Assets Added
- Ayal-Avatar.png
- Jira.png
- WooCommerce_logo.png
- Zendesk.svg.png
- freshdesk_logo.svg
- hubspot.svg