Je vois que l'interface est actuellement desktop-first avec un layout 2 colonnes. Je vais la rendre mobile-first avec des tabs pour basculer entre Chat et Preview/Code:
J'ai completement refait l'interface pour mobile avec:
L'experience est maintenant optimisee pour telephone: on navigue entre les onglets en bas, on tape dans le chat, et on peut basculer vers la preview ou le code facilement.
"Garde exactement le même design et les mêmes composants, mais rends l'application fonctionnelle avec la logique suivante :
- State Management : Crée un objet d'état siteData qui contient tous les textes, couleurs et sections visibles dans la preview (ex: { title: "...", primaryColor: "...", sections: [] }).
- Chatbot Logique : Fais en sorte que le champ de texte du chatbot intercepte les messages. Si l'utilisateur tape une instruction, utilise une fonction simple de 'match' par mots-clés pour mettre à jour siteData.
- Exemple : Si le message contient 'titre', change siteData.title. Si le message contient 'rouge', change la variable de couleur.
- Live Sync : Relie tous les composants de la preview à cet objet siteData. Chaque modification dans le chat doit se refléter instantanément dans la preview.
- Système de messages : Quand j'envoie un message, affiche-le dans la bulle de chat, et fais répondre l'IA pour confirmer la modification (ex: 'D'accord, je mets à jour le titre !').
- Persistance : Sauvegarde siteData dans le localStorage pour que mes modifications ne disparaissent pas au rafraîchissement.
Ne change pas le style CSS, concentre-toi uniquement sur les fonctions React et le passage des props."
Maintenant je vais implementer la logique demandee avec:
siteData pour stocker les donnees du siteJ'ai implemente toute la logique demandee:
siteData contient tous les textes, couleurs et sections du site (titre, sous-titre, couleurs, logo, bouton CTA, sections visibles)processMessage detecte les mots-cles (titre, couleur, logo, bouton, cacher/afficher) et met a jour siteData en consequenceSitePreview est directement lie a siteData et se met a jour instantanement a chaque modificationsiteData et chatHistory sont sauvegardes automatiquement et restaures au rechargement