templates/components/_chatbot.html.twig line 1

Open in your IDE?
  1. <div x-data="chatbot()" class="chatbot-container">
  2. <div @click="toggle()" class="chatbot-toggle">
  3. <i class="fas fa-robot text-white text-2xl"></i>
  4. </div>
  6. <div class="chatbot-window" :class="{'open': isOpen}" x-cloak>
  7. <!-- Header -->
  8. <div class="bg-gradient-to-r from-[#006633] to-[#008844] text-white p-4">
  9. <div class="flex justify-between items-center">
  10. <div class="flex items-center space-x-3">
  11. <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
  12. <i class="fas fa-robot text-xl"></i>
  13. </div>
  14. <div>
  15. <h3 class="font-semibold">IBUNAS.IA</h3>
  16. <p class="text-xs text-green-100">Assistant juridique intelligent</p>
  17. </div>
  18. </div>
  19. <button @click="toggle()" class="text-white hover:text-gray-200">
  20. <i class="fas fa-times"></i>
  21. </button>
  22. </div>
  23. </div>
  25. <!-- Messages -->
  26. <div id="chatbot-messages" class="flex-1 overflow-y-auto p-4 bg-gray-50 space-y-4">
  27. <template x-for="message in messages" :key="message.id">
  28. <div :class="message.sender === 'user' ? 'flex justify-end' : 'flex justify-start'">
  29. <div :class="message.sender === 'user'
  30. ? 'bg-[#006633] text-white rounded-2xl rounded-br-none'
  31. : 'bg-white border border-gray-200 text-gray-800 rounded-2xl rounded-bl-none'"
  32. class="max-w-[80%] px-4 py-2 shadow-sm">
  33. <p class="text-sm" x-text="message.text"></p>
  34. <p class="text-xs mt-1 opacity-70" x-text="new Date(message.timestamp).toLocaleTimeString()"></p>
  35. </div>
  36. </div>
  37. </template>
  39. <div x-show="isLoading" class="flex justify-start">
  40. <div class="bg-white border border-gray-200 rounded-2xl rounded-bl-none px-4 py-3">
  41. <div class="flex space-x-1">
  42. <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
  43. <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
  44. <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  50. <!-- Input -->
  51. <div class="p-4 bg-white border-t">
  52. <form @submit.prevent="send()" class="flex space-x-2">
  53. <input type="text"
  54. x-model="currentMessage"
  55. placeholder="Posez votre question..."
  56. class="flex-1 border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:border-[#006633] focus:ring-1 focus:ring-[#006633]">
  57. <button type="submit"
  58. :disabled="isLoading"
  59. class="bg-gradient-to-r from-[#006633] to-[#008844] text-white px-4 py-2 rounded-xl hover:from-[#004d26] hover:to-[#006633] transition disabled:opacity-50">
  60. <i class="fas fa-paper-plane"></i>
  61. </button>
  62. </form>
  63. <div class="mt-2 text-xs text-gray-400 text-center">
  64. <i class="fas fa-lightbulb mr-1"></i> Ex: "Rechercher la loi sur l'urbanisme" | "Derniers décrets"
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  70. <style>
  71. .chatbot-container {
  72. position: fixed;
  73. bottom: 20px;
  74. right: 20px;
  75. z-index: 9999;
  76. }
  78. .chatbot-toggle {
  79. width: 60px;
  80. height: 60px;
  81. background: linear-gradient(135deg, #006633, #008844);
  82. border-radius: 50%;
  83. display: flex;
  84. align-items: center;
  85. justify-content: center;
  86. cursor: pointer;
  87. box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  88. transition: transform 0.3s ease;
  89. }
  91. .chatbot-toggle:hover {
  92. transform: scale(1.1);
  93. }
  95. .chatbot-window {
  96. position: absolute;
  97. bottom: 80px;
  98. right: 0;
  99. width: 380px;
  100. height: 500px;
  101. background: white;
  102. border-radius: 20px;
  103. box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  104. display: flex;
  105. flex-direction: column;
  106. overflow: hidden;
  107. transition: all 0.3s ease;
  108. opacity: 0;
  109. transform: scale(0.8);
  110. transform-origin: bottom right;
  111. pointer-events: none;
  112. }
  114. .chatbot-window.open {
  115. opacity: 1;
  116. transform: scale(1);
  117. pointer-events: all;
  118. }
  120. @media (max-width: 640px) {
  121. .chatbot-window {
  122. width: calc(100vw - 40px);
  123. right: 0;
  124. left: auto;
  125. }
  126. }
  128. [x-cloak] {
  129. display: none;
  130. }
  132. @keyframes bounce {
  133. 0%, 100% { transform: translateY(0); }
  134. 50% { transform: translateY(-5px); }
  135. }
  137. .animate-bounce {
  138. animation: bounce 0.6s infinite;
  139. }
  140. </style>
  142. <script>
  143. function chatbot() {
  144. return {
  145. isOpen: false,
  146. isLoading: false,
  147. currentMessage: '',
  148. messages: [
  149. {
  150. id: 1,
  151. sender: 'bot',
  152. text: 'Bonjour ! Je suis IBUNAS.IA, votre assistant juridique intelligent. Je peux vous aider à rechercher des lois, décrets, arrêtés et vous informer sur les publications officielles. Comment puis-je vous aider ?',
  153. timestamp: Date.now()
  154. }
  155. ],
  157. toggle() {
  158. this.isOpen = !this.isOpen;
  159. if (this.isOpen) {
  160. this.$nextTick(() => {
  161. this.scrollToBottom();
  162. });
  163. }
  164. },
  166. async send() {
  167. if (!this.currentMessage.trim()) return;
  168. if (this.isLoading) return;
  170. // Ajouter le message de l'utilisateur
  171. const userMessage = {
  172. id: Date.now(),
  173. sender: 'user',
  174. text: this.currentMessage,
  175. timestamp: Date.now()
  176. };
  177. this.messages.push(userMessage);
  179. const question = this.currentMessage;
  180. this.currentMessage = '';
  181. this.isLoading = true;
  183. this.$nextTick(() => {
  184. this.scrollToBottom();
  185. });
  187. try {
  188. // Appel à l'API
  189. const response = await this.callAPI(question);
  191. const botMessage = {
  192. id: Date.now() + 1,
  193. sender: 'bot',
  194. text: response,
  195. timestamp: Date.now()
  196. };
  197. this.messages.push(botMessage);
  199. } catch (error) {
  200. console.error('Erreur:', error);
  201. const errorMessage = {
  202. id: Date.now() + 1,
  203. sender: 'bot',
  204. text: "Désolé, une erreur s'est produite. Veuillez réessayer ou contacter l'administrateur.",
  205. timestamp: Date.now()
  206. };
  207. this.messages.push(errorMessage);
  208. } finally {
  209. this.isLoading = false;
  210. this.$nextTick(() => {
  211. this.scrollToBottom();
  212. });
  213. }
  214. },
  216. async callAPI(question) {
  217. // Configuration de l'API - À remplacer par votre URL réelle
  218. const API_URL = '/api/chatbot'; // Remplacez par votre endpoint API
  219. const API_KEY = 'votre-cle-api'; // Si nécessaire
  221. // Simuler une réponse API pour la démonstration (à supprimer quand l'API est prête)
  222. const reponsesSimulees = this.getSimulatedResponse(question);
  223. if (reponsesSimulees) {
  224. // Simuler un délai réseau
  225. await new Promise(resolve => setTimeout(resolve, 1000));
  226. return reponsesSimulees;
  227. }
  229. // Appel API réel
  230. try {
  231. const response = await fetch(API_URL, {
  232. method: 'POST',
  233. headers: {
  234. 'Content-Type': 'application/json',
  235. 'Accept': 'application/json',
  236. 'X-API-Key': API_KEY
  237. },
  238. body: JSON.stringify({
  239. question: question,
  240. context: this.getConversationContext()
  241. })
  242. });
  244. if (!response.ok) {
  245. throw new Error(`HTTP error! status: ${response.status}`);
  246. }
  248. const data = await response.json();
  249. return data.reponse || data.message || data.text || "Je n'ai pas compris votre question. Pouvez-vous reformuler ?";
  251. } catch (error) {
  252. console.error('API Error:', error);
  253. // Fallback vers la simulation si l'API échoue
  254. return this.getSimulatedResponse(question) || "Désolé, je ne peux pas répondre pour le moment. Veuillez réessayer plus tard.";
  255. }
  256. },
  258. getConversationContext() {
  259. // Récupérer les 5 derniers messages pour le contexte
  260. const lastMessages = this.messages.slice(-5);
  261. return lastMessages.map(msg => ({
  262. role: msg.sender === 'user' ? 'user' : 'assistant',
  263. content: msg.text
  264. }));
  265. },
  267. getSimulatedResponse(question) {
  268. const q = question.toLowerCase();
  270. // Réponses simulées basées sur le contenu du Journal Officiel
  271. if (q.includes('bonjour') || q.includes('salut') || q.includes('coucou')) {
  272. return "Bonjour ! Comment puis-je vous aider avec les publications du Journal Officiel aujourd'hui ?";
  273. }
  275. if (q.includes('loi') || q.includes('code')) {
  276. if (q.includes('impôt') || q.includes('impots') || q.includes('fiscal')) {
  277. return "📜 **Code général des impôts 2026**\n\nLe nouveau code général des impôts a été publié dans le JO n°2026-014 du 25 février 2026. Les principales modifications concernent :\n\n• Nouveau barème de l'IRPP\n• Réduction du taux de l'IS de 30% à 25%\n• Nouvelles exonérations pour les zones franches\n\nSouhaitez-vous plus de détails sur un article spécifique ?";
  278. }
  279. if (q.includes('investissement') || q.includes('investissements')) {
  280. return "📜 **Loi sur les investissements n°2026-001**\n\nPubliée au JO du 15 janvier 2026, cette loi modifie le code des investissements. Les principaux avantages :\n\n• Exonération totale d'impôts pendant 5 ans\n• Réduction des droits de douane\n• Simplification des procédures administratives\n\nPuis-je vous aider à trouver des informations plus spécifiques ?";
  281. }
  282. if (q.includes('urbanisme') || q.includes('construction')) {
  283. return "📜 **Code de l'urbanisme**\n\nLa version consolidée du code de l'urbanisme est disponible dans nos archives. Les dernières modifications datent de janvier 2026. Vous pouvez consulter :\n\n• Les règles de constructibilité\n• Les permis de construire\n• Les plans d'occupation des sols\n\nSouhaitez-vous que je recherche un article particulier ?";
  284. }
  285. return "📚 **Textes législatifs disponibles**\n\nNous avons plusieurs lois récentes :\n\n• Loi n°2026-001 sur les investissements\n• Loi n°2026-002 sur le blanchiment\n• Code général des impôts 2026\n• Code du travail révisé\n\nQuelle loi vous intéresse précisément ?";
  286. }
  288. if (q.includes('décret') || q.includes('decret') || q.includes('arrêté') || q.includes('arrete')) {
  289. if (q.includes('nomination')) {
  290. return "📋 **Décret n°2026-045/PR**\n\nPublié le 20 janvier 2026, ce décret porte nomination des membres du gouvernement. La composition complète est disponible dans le JO n°2026-013.\n\nSouhaitez-vous la liste complète des ministres ?";
  291. }
  292. if (q.includes('agence') || q.includes('numérique')) {
  293. return "📋 **Décret n°2026-044/PR**\n\nCréation de l'Agence Nationale du Numérique (ANN) publiée dans le JO du 20 février 2026. L'agence est chargée de :\n\n• Coordonner la transformation numérique\n• Gérer les infrastructures TIC publiques\n• Promouvoir l'e-gouvernement";
  294. }
  295. return "📋 **Décrets et arrêtés récents**\n\nDernières publications :\n\n• Décret n°2026-045/PR - Nomination gouvernement\n• Décret n°2026-044/PR - Création ANN\n• Arrêté n°2026-089/MF - Modalités paiement impôts\n\nLequel souhaitez-vous consulter ?";
  296. }
  298. if (q.includes('journal officiel') || q.includes('jo') || q.includes('numéro') || q.includes('numero')) {
  299. if (q.includes('2026-015') || q.includes('015')) {
  300. return "📰 **Journal Officiel n°2026-015**\n\nPublié le 1er mars 2026, ce numéro contient :\n\n• 12 actes publiés\n• 5 institutions émetteurs\n• 1 234 consultations\n\nContenu principal :\n- Loi de finances rectificative\n- Décrets d'application\n- Appels d'offres\n\nSouhaitez-vous télécharger la version PDF ?";
  301. }
  302. if (q.includes('2026-014') || q.includes('014')) {
  303. return "📰 **Journal Officiel n°2026-014**\n\nPublié le 25 février 2026 :\n\n• 8 actes publiés\n• Code général des impôts 2026\n• Arrêtés ministériels\n\nTéléchargement PDF disponible sur demande.";
  304. }
  305. if (q.includes('2026-013') || q.includes('013')) {
  306. return "📰 **Journal Officiel n°2026-013**\n\nPublié le 20 février 2026 :\n\n• 15 actes publiés\n• Nominations gouvernementales\n• Création de l'Agence Nationale du Numérique\n• Textes réglementaires";
  307. }
  308. if (q.includes('2026-012') || q.includes('012')) {
  309. return "📰 **Journal Officiel n°2026-012**\n\nPublié le 15 février 2026 :\n\n• 10 actes publiés\n• Lois sur les investissements\n• Réformes administratives";
  310. }
  311. return "📰 **Derniers numéros du Journal Officiel**\n\n• JO 2026-015 (01 Mars 2026) - 12 actes\n• JO 2026-014 (25 Fév 2026) - 8 actes\n• JO 2026-013 (20 Fév 2026) - 15 actes\n• JO 2026-012 (15 Fév 2026) - 10 actes\n\nQuel numéro souhaitez-vous consulter ?";
  312. }
  314. if (q.includes('appel') || q.includes('offre') || q.includes('marché') || q.includes('marche')) {
  315. return "🏗️ **Appels d'offres en cours**\n\nDerniers appels d'offres publiés :\n\n1. **AO n°2026-001** - Construction nouvelle Présidence\n Date limite : 30/04/2026\n\n2. **AO n°2026-002** - Fourniture matériel informatique\n Date limite : 15/04/2026\n\n3. **Consultation** - Étude faisabilité port\n Date limite : 30/05/2026\n\nSouhaitez-vous plus de détails sur un appel d'offres spécifique ?";
  316. }
  318. if (q.includes('association') || q.includes('récépissé') || q.includes('recepisse')) {
  319. return "🏢 **Associations**\n\nLes récépissés de déclaration d'associations sont publiés dans les JO. Tarifs :\n\n• Déclaration : 12 000 KMF\n• Modification statuts : 8 000 KMF\n• Dissolution : 5 000 KMF\n\nBesoin d'aide pour préparer votre dossier ?";
  320. }
  322. if (q.includes('foncier') || q.includes('terrain') || q.includes('propriété')) {
  323. return "🏠 **Actes fonciers**\n\nLes réquisitions foncières et transactions immobilières sont publiées au JO. Tarifs :\n\n• Base : 15 000 KMF\n• +3 000 KMF / 300 caractères\n\nNous pouvons vous aider à publier votre annonce foncière.";
  324. }
  326. if (q.includes('abonnement') || q.includes('abonner') || q.includes('prix') || q.includes('tarif')) {
  327. return "💳 **Nos offres d'abonnement**\n\n**Standard** : 50 000 KMF/an\n• Accès numéros complets PDF\n• Recherche par filtres\n• Textes isolés moins de 5 ans\n\n**Premium** : 90 000 KMF/an\n• Tout Standard +\n• Archives complètes depuis 1975\n• Recherche IA avancée\n• Alertes personnalisées\n\n**-20% sur la première année !**\n\nSouhaitez-vous vous abonner ?";
  328. }
  330. if (q.includes('contact') || q.includes('aide') || q.includes('support')) {
  331. return "📞 **Nous contacter**\n\n• Email : contact@journalofficiel.km\n• Téléphone : +269 123 45 67\n• Horaires : Lundi-Vendredi 8h-17h\n\nNotre équipe vous répondra dans les meilleurs délais.";
  332. }
  334. if (q.includes('merci')) {
  335. return "Avec plaisir ! N'hésitez pas si vous avez d'autres questions. Je suis là pour vous aider ! 🙏";
  336. }
  338. // Réponse par défaut
  339. return "Je suis votre assistant pour le Journal Officiel de l'Union des Comores. Je peux vous aider à :\n\n• 📰 Consulter les derniers numéros du JO\n• 📜 Rechercher des lois, décrets et arrêtés\n• 🏗️ Trouver des appels d'offres\n• 💳 Vous informer sur les tarifs de publication\n• 📞 Vous orienter vers les services compétents\n\nQue puis-je faire pour vous aujourd'hui ?";
  340. },
  342. scrollToBottom() {
  343. const container = document.getElementById('chatbot-messages');
  344. if (container) {
  345. container.scrollTop = container.scrollHeight;
  346. }
  347. }
  348. }
  349. }
  350. </script>