templates/portfolio/chatBot.html.twig line 1

  1. <button id="chatModalProfil" class="btn position-fixed bottom-0 end-0 m-3" >
  2.     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-robot" viewBox="0 0 16 16">
  3.         <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135"></path>
  4.         <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"></path>
  5.     </svg>
  6. </button>
  8. <div class="modal fade" id="chatbotProfilModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  9.     <div class="modal-dialog modal-dialog-centered">
  10.         <div class="modal-content">
  11.             <div class="modal-header justify-content-between align-items-center">
  12.                 <div class="d-flex align-items-center">
  13.                     <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-robot" viewBox="0 0 16 16">
  14.                         <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135"></path>
  15.                         <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"></path>
  16.                     </svg>
  17.                     <h6 class="modal-title" style="margin-left: 0.5em">Bienvenue sur le chatbot de NEUTRINO</h6>
  18.                 </div>
  20.                 <div class="d-flex align-items-center">
  21.                     <!-- Bouton de réinitialisation -->
  22.                     <button type="button" id="resetModalButton" class="btn">
  23.                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
  24.                             <!-- Icône bi-arrow-clockwise ici -->
  25.                             <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"></path>
  26.                             <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"></path>
  27.                         </svg>
  28.                     </button>
  29.                     <!-- Bouton de fermeture -->
  30.                     <button type="button" class="btn-close close-chat-modal" data-bs-dismiss="modal" aria-label="Close"></button>
  31.                 </div>
  32.             </div>
  33.             <div class="modal-body ">
  34.                 <div id="ChatQuestion">
  35.                     <div class="cellule">
  36.                         <p class="small"></p>
  37.                     </div>
  38.                     <div class="text-center mt-4 " >
  39.                         <button id="yesButton" class="btn btn-primary">Profil</button>
  40.                         <button id="TchatButton" class="btn btn-primary">Discuter</button>
  41.                         <button id="noButton" class="btn btn-secondary" data-bs-dismiss="modal">Quitter</button>
  42.                     </div>
  43.                 </div>
  44.                 <div id="chatInterface" >
  45.                     <div id="responseContainer" class="small"></div>
  46.                     <form id="promptForm" class="text-center mt-4 d-flex align-content-center">
  47.                         <input type="text" class="form-control" style="margin-right: 10px; margin-left: 10px;" id="promptInput" placeholder="Entrez votre question ici">
  48.                         <button class="btn btn-secondary" type="submit">Envoyer</button>
  49.                     </form>
  50.                 </div>
  51.                 <div id="chatIAInterface" >
  52.                     <div id="responseIAContainer" class="small"> </div>
  53.                     <form id="promptFormIA" class="text-center mt-4 d-flex align-content-center">
  54.                         <input type="text" class="form-control" style="margin-right: 10px; margin-left: 10px;" id="promptIAInput" placeholder="Entrez votre question ici">
  55.                         <button class="btn btn-secondary" type="submit">Envoyer</button>
  56.                     </form>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </div>
  62. </div>