Chatbot Modulaire

Module Vedette / Chatbot Sensible au Contexte / Intégration au Portfolio

Résumé en une ligne : Un système de chatbot robuste, modulaire et extensible pour le Portfolio Minimaliste en Verre, construit avec React Context, l'abstraction de services, et un accent mis sur la maintenabilité, l'accessibilité et une interface UI/UX avancée.

Durée du développement : Juin 2025 - Juillet 2025

Note(s) :

• Clause de non-responsabilité sur l'hébergement/le code : Le code source complet du module de chatbot est disponible sur demande. Pour des raisons de sécurité et de confidentialité, le code n'est pas publié publiquement.
• Contact pour plus d'infos ou démos : Contactez Franz Phillip G. Domingo via franzdomingo.tech.
• Note sur la navigation : Le chatbot est accessible via le bouton d'action flottant (FAB) sur le site du portfolio.

---

Fonctionnalités

• Architecture modulaire avec composants réutilisables
• Gestion d'état centralisée utilisant React Context
• Couche d'abstraction de services pour l'API/logique métier
• Error boundaries et logique de tentative pour une UX robuste
• Interface animée et accessible (Shadcn UI, Radix UI, Framer Motion)
• Quick Actions pour des commandes rapides
• Indicateur de saisie pour un retour en temps réel
• Bouton d'action flottant (FAB) pour un accès facile
• Conception extensible pour de nouveaux fournisseurs, prompts ou fonctionnalités
• Séparation des préoccupations : UI, état, helpers, types, services
• Performance optimisée : état côté client minimal, chargement dynamique, optimisation des images

---

Mes Contributions (Rôle et Responsabilités)

Architecture et Ingénierie :

• Conception et mise en œuvre du système de chatbot modulaire, en séparant l'interface, l'état, les helpers et les services pour la maintenabilité.

Gestion d'État :

• Construction de l'état de chat centralisé à l'aide de React Context et de hooks personnalisés.

Couche de Service :

• Développement de l'abstraction pour l'API de chat et la logique métier, permettant une extension et des tests faciles.

UI/UX :

• Création de composants animés et accessibles à l'aide de Shadcn UI, Radix UI et Framer Motion.

Gestion des Erreurs :

• Mise en œuvre d'error boundaries et d'une logique de tentative pour une expérience utilisateur fluide.

Extensibilité :

• Structuration de la base de code pour l'ajout facile de nouvelles fonctionnalités, fournisseurs et actions rapides.

---

Défis Rencontrés

• Gestion du contexte : S'assurer que l'état global du chat est fiable et extensible à travers plusieurs composants.

• Gestion des erreurs : Construction d'error boundaries robustes et d'une logique de tentative pour les réponses API imprévisibles.

• Performance : Optimisation du rendu pour les journaux de chat volumineux et les fonctionnalités d'interface dynamiques.

• Accessibilité : Rendre toutes les interactions du chatbot conviviales pour le clavier et les lecteurs d'écran.

---

Architecture du Projet

• Style d'Architecture : React modulaire avec une séparation claire des préoccupations (UI, état, helpers, services, types, utils).

• Organisation des Composants :

  • components/chatbot/ : UI principale, FAB, rendu des messages, actions rapides, indicateur de saisie
  • components/chatbot/components/ : Mise en page, saisie, liste de messages, en-têtes, interface avancée
  • components/chatbot/helpers/ : Actions rapides, commandes hashtag, extraction de liens, définitions de types
  • components/chatbot/services/ : Abstraction du service de chat
  • components/chatbot/types/ : Interfaces TypeScript pour le contexte de chat et les messages
  • components/chatbot/utils/ : Gestion d'état, analytique, accessibilité, gestion des erreurs, etc.

• Gestion d'État : React Context et hooks personnalisés pour l'état et les opérations du chat.

• Intégrations : Framer Motion pour l'animation, Radix UI et Shadcn UI pour l'accessibilité et le design.

---

Aperçu de la Démo

• Captures d'écran/Vidéo : La démo en direct du chatbot est disponible sur franz-domingo.vercel.app. Ouvrez le chatbot via le bouton d'action flottant (FAB) pour interagir avec toutes les fonctionnalités en direct.

• Vues Plateforme : Web (responsive, mobile-first)

• Fonctionnalités Présentées :

  • Bouton d'action flottant (FAB) pour l'accès au chat
  • Interface de chat animée et accessible
  • Actions rapides, indicateur de saisie, gestion des erreurs
  • Rendu de message modulaire et fonctionnalités sensibles au contexte

• Instructions Démo : Visitez franz-domingo.vercel.app et cliquez sur le FAB du chatbot pour lancer et interagir avec le chatbot.

---

Ressources de Développement

• Guides/Docs :
  • Documentation React Context, Framer Motion, Radix UI, Shadcn UI

---

Si vous avez besoin de plus de détails ou souhaitez voir la base de code, veuillez contacter directement l'auteur.

---