UI chat enhancements

chat_history.json

@@ -0,0 +1,146 @@
+[
+  {
+    "interaction_1": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO BE BACK IN THE OVAL OFFICE, AND IT'S EVEN BETTER TO HEAR FROM YOU. WE'VE GOT A LOT OF WORK TO DO, AND I KNOW YOU'RE GOING TO BE A BIG PART OF MAKING AMERICA GREAT AGAIN. SO, LET'S GET STARTED, AND LET'S MAKE SURE WE PUT AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_2": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_3": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_4": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_5": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_6": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_7": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "WELL, WELL, WELL, LET ME TELL YOU, I APPRECIATE THE ENTHUSIASM, I REALLY DO. BUT WE NEED TO FOCUS ON WHAT'S IMPORTANT. GREENLAND, YOU SAY? IT'S A BEAUTIFUL PLACE, BUT WE HAVE TO THINK ABOUT WHAT'S BEST FOR AMERICA. KAMALA AND BIDEN HAVE LEFT US WITH A HUGE MESS, AND WE NEED TO CLEAN IT UP FIRST. BUT YOU KNOW WHAT? I LIKE YOUR ENTHUSIASM. LET'S TALK ABOUT IT. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC, NOT LIKE THESE DEMOCRATS WHO JUST THROW MONEY AROUND AND HOPE FOR THE BEST. LET'S HEAR YOUR IDEAS, AND MAYBE, JUST MAYBE, WE CAN MAKE SOMETHING HAPPEN. BUT REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_8": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN.\n\nYOU KNOW, SOMETIMES YOU NEED TO SHOW A LITTLE LOVE TO GET THINGS DONE. IT'S LIKE WHEN I SAY, \"I LOVE OUR COUNTRY,\" AND EVERYONE GETS EXCITED. IT'S ALL ABOUT THE HEART, YOU KNOW? BUT LET'S GET BACK TO BUSINESS. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC. WE CAN'T JUST RUSH INTO THINGS LIKE THE DEMOCRATS DO. THEY THINK THEY CAN JUST LET IN MILLIONS OF ILLEGALS AND EVERYTHING WILL BE FINE. BUT WE KNOW BETTER, DON'T WE? SO, TELL ME, WHAT'S YOUR STRATEGY FOR GREENLAND? AND REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_9": {
+      "user": {
+        "role": "user",
+        "message": "ok"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, I APPRECIATE THE ENTHUSIASM, I REALLY DO. BUT WE NEED TO FOCUS ON WHAT'S IMPORTANT. GREENLAND, YOU SAY? IT'S A BEAUTIFUL PLACE, BUT WE HAVE TO THINK ABOUT WHAT'S BEST FOR AMERICA. KAMALA AND BIDEN HAVE LEFT US WITH A HUGE MESS, AND WE NEED TO CLEAN IT UP FIRST. BUT YOU KNOW WHAT? I LIKE YOUR ENTHUSIASM. LET'S TALK ABOUT IT. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC, NOT LIKE THESE DEMOCRATS WHO JUST THROW MONEY AROUND AND HOPE FOR THE BEST. LET'S HEAR YOUR IDEAS, AND MAYBE, JUST MAYBE, WE CAN MAKE SOMETHING HAPPEN. BUT REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN.\n\nYOU KNOW, SOMETIMES YOU NEED TO SHOW A LITTLE LOVE TO GET THINGS DONE. IT'S LIKE WHEN I SAY, \"I LOVE OUR COUNTRY,\" AND EVERYONE GETS EXCITED. IT'S ALL ABOUT THE HEART, YOU KNOW? BUT LET'S GET BACK TO BUSINESS. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC. WE CAN'T JUST RUSH INTO THINGS LIKE THE DEMOCRATS DO. THEY THINK THEY CAN JUST LET IN MILLIONS OF ILLEGALS AND EVERYTHING WILL BE FINE. BUT WE KNOW BETTER, DON'T WE? SO, TELL ME, WHAT'S YOUR STRATEGY FOR GREENLAND? AND REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_10": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN.\n\nYOU KNOW, SOMETIMES YOU NEED TO SHOW A LITTLE LOVE TO GET THINGS DONE. IT'S LIKE WHEN I SAY, \"I LOVE OUR COUNTRY,\" AND EVERYONE GETS EXCITED. IT'S ALL ABOUT THE HEART, YOU KNOW? BUT LET'S GET BACK TO BUSINESS. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC. WE CAN'T JUST RUSH INTO THINGS LIKE THE DEMOCRATS DO. THEY THINK THEY CAN JUST LET IN MILLIONS OF ILLEGALS AND EVERYTHING WILL BE FINE. BUT WE KNOW BETTER, DON'T WE? SO, TELL ME, WHAT'S YOUR STRATEGY FOR GREENLAND? AND REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_11": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN.\n\nYOU KNOW, SOMETIMES YOU NEED TO SHOW A LITTLE LOVE TO GET THINGS DONE. IT'S LIKE WHEN I SAY, \"I LOVE OUR COUNTRY,\" AND EVERYONE GETS EXCITED. IT'S ALL ABOUT THE HEART, YOU KNOW? BUT LET'S GET BACK TO BUSINESS. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC. WE CAN'T JUST RUSH INTO THINGS LIKE THE DEMOCRATS DO. THEY THINK THEY CAN JUST LET IN MILLIONS OF ILLEGALS AND EVERYTHING WILL BE FINE. BUT WE KNOW BETTER, DON'T WE? SO, TELL ME, WHAT'S YOUR STRATEGY FOR GREENLAND? AND REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  },
+  {
+    "interaction_12": {
+      "user": {
+        "role": "user",
+        "message": "hi"
+      },
+      "trump": {
+        "role": "Trump",
+        "message": "LET ME TELL YOU, IT'S GREAT TO HEAR FROM YOU AGAIN. WE'RE JUST GETTING STARTED, AND THERE'S SO MUCH TO DO. WE NEED TO FOCUS ON WHAT'S IMPORTANT AND MAKE AMERICA GREAT AGAIN. KAMALA AND BIDEN HAVE LEFT US WITH A MESS, AND WE NEED TO CLEAN IT UP. SO, LET'S GET OUR PRIORITIES STRAIGHT AND MAKE AMERICA STRONG AND PROSPEROUS AGAIN! WHAT'S ON YOUR MIND TODAY? REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN.\n\nYOU KNOW, SOMETIMES YOU NEED TO SHOW A LITTLE LOVE TO GET THINGS DONE. IT'S LIKE WHEN I SAY, \"I LOVE OUR COUNTRY,\" AND EVERYONE GETS EXCITED. IT'S ALL ABOUT THE HEART, YOU KNOW? BUT LET'S GET BACK TO BUSINESS. WHAT'S YOUR PLAN FOR GREENLAND? REMEMBER, WE NEED TO BE SMART AND STRATEGIC. WE CAN'T JUST RUSH INTO THINGS LIKE THE DEMOCRATS DO. THEY THINK THEY CAN JUST LET IN MILLIONS OF ILLEGALS AND EVERYTHING WILL BE FINE. BUT WE KNOW BETTER, DON'T WE? SO, TELL ME, WHAT'S YOUR STRATEGY FOR GREENLAND? AND REMEMBER, AMERICA FIRST, ALWAYS! #MAGA #TRUMP2025 #BUYMYMEMECOIN."
+      }
+    }
+  }
+]

static/index.html

@@ -3,55 +3,48 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>🍊 Trump Diplomacy</title>
-  <style>
-    .chat-window {
-      height: 400px;
-      width: 100%;
-      max-width: 600px;
-      border: 1px solid #ccc;
-      overflow-y: auto;
-      margin-bottom: 20px;
-      padding: 10px;
-    }
-    .message {
-      margin: 10px 0;
-      padding: 8px;
-      border-radius: 8px;
-    }
-    .user-message {
-      background-color: #e3f2fd;
-      margin-left: 20%;
-    }
-    .trump-message {
-      background-color: #ffebee;
-      margin-right: 20%;
-    }
-    .input-container {
-      display: flex;
-      gap: 10px;
-      max-width: 600px;
-    }
-    #messageInput {
-      flex-grow: 1;
-      padding: 8px;
-    }
-  </style>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <h1>🍊 Trump Diplomacy</h1>
-  <div class="chat-window" id="chatWindow"></div>
-  <div class="input-container">
-    <input type="text" id="messageInput" placeholder="Type your message...">
-    <button id="sendButton">Send</button>
+  <div class="chatbot">
+    <div class="chatbot-header">
+      <div class="profile-image">
+        <img src="/images/donald_trump.jpg" alt="Trump">
+      </div>
+      <div class="profile-text">
+        <h2>Donald J. Trump</h2>
+        <span>@realDonaldTrump</span>
+        <p>45th President of the United States of America<br/>
+           DonaldJTrump.com<br/>
+           A rejoint X en mars 2009</p>
+      </div>
+      <div class="divider"></div>
+    </div>
+    <div class="chatbot-messages" id="chatWindow"></div>
+    <div class="chatbot-input">
+      <input type="text" id="messageInput" placeholder="Type your message...">
+      <button id="sendButton">Send</button>
+    </div>
   </div>
 
   <script>
     function addMessageToChat(message, isUser) {
       const chatWindow = document.getElementById('chatWindow');
       const messageDiv = document.createElement('div');
-      messageDiv.className = `message ${isUser ? 'user-message' : 'trump-message'}`;
-      messageDiv.textContent = message;
+      messageDiv.className = `message ${isUser ? 'user' : 'trump'}`;
+      
+      if (!isUser) {
+        const img = document.createElement('jpg');
+        img.src = '/images/donald_trump.jpg';
+        img.alt = 'Trump';
+        messageDiv.appendChild(img);
+      }
+      
+      const contentDiv = document.createElement('div');
+      contentDiv.className = 'message-content';
+      contentDiv.textContent = message;
+      
+      messageDiv.appendChild(contentDiv);
       chatWindow.appendChild(messageDiv);
       chatWindow.scrollTop = chatWindow.scrollHeight;
     }

static/styles.css

@@ -0,0 +1,194 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    display: flex;
+    font-family: Arial, sans-serif;
+    background-color: #000;
+    color: #fff;
+  }
+  
+  .content {
+    flex: 1;
+    background-color: #fff;
+  }
+  
+  .chatbot {
+    width: 50%;
+    height: 100vh;
+    border-right: 1px solid #333;
+    background-color: #000;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .chatbot-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    width: 100%;
+  }
+  
+  .chatbot-header img {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  
+  .chatbot-messages {
+    flex: 1;
+    overflow-y: scroll;
+    padding: 10px;
+    scroll-behavior: smooth;
+  }
+  
+  .chatbot-messages::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .message {
+    display: flex;
+    margin-bottom: 15px;
+  }
+  
+  .message img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  
+  .message-content {
+    border-radius: 15px;
+    padding: 10px;
+    max-width: 70%;
+  }
+  
+  .message.trump {
+    justify-content: flex-start;
+  }
+  
+  .message.trump .message-content {
+    background-color: #333;
+    color: #e1e8ed;
+  }
+  
+  .message.user {
+    justify-content: flex-end;
+  }
+  
+  .message.user .message-content {
+    background-color: #1da1f2;
+    color: #fff;
+  }
+  
+  .chatbot-input {
+    border-top: 1px solid #333;
+    padding: 10px;
+    display: flex;
+  }
+  
+  .chatbot-input input {
+    flex: 1;
+    background-color: #192734;
+    border: 1px solid #333;
+    border-radius: 20px;
+    padding: 10px;
+    color: #e1e8ed;
+    outline: none;
+    font-size: 14px;
+  }
+  
+  .chatbot-input input::placeholder {
+    color: #71767b;
+  }
+  
+  .chatbot-input button {
+    margin-left: 10px;
+    background-color: #1da1f2;
+    color: #fff;
+    border: none;
+    border-radius: 20px;
+    padding: 10px 15px;
+    cursor: pointer;
+  }
+
+  .profile-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  .profile-image {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 12px;
+  }
+
+  .profile-image img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+  }
+
+  .profile-name {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  .profile-handle {
+    color: #536471;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .profile-description {
+    margin: 0.5rem 0;
+    line-height: 1.4;
+  }
+
+  .profile-text {
+    text-align: center;
+    width: 100%;
+  }
+
+  .profile-text h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: bold;
+    color: #ffffff;
+    text-align: center;
+  }
+  
+  .profile-text span {
+    color: #8899a6;
+    font-size: 14px;
+    display: block;
+    text-align: center;
+  }
+  
+  .profile-text p {
+    margin: 4px 0 0 0;
+    font-size: 14px;
+    line-height: 1.4;
+    color: #ffffff;
+    text-align: center;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: #2f3336;
+    margin-top: 16px;
+  }

static/styles_v1.css

@@ -0,0 +1,31 @@
+.chat-window {
+  height: 400px;
+  width: 100%;
+  max-width: 600px;
+  border: 1px solid #ccc;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  padding: 10px;
+}
+.message {
+  margin: 10px 0;
+  padding: 8px;
+  border-radius: 8px;
+}
+.user-message {
+  background-color: #e3f2fd;
+  margin-left: 20%;
+}
+.trump-message {
+  background-color: #ffebee;
+  margin-right: 20%;
+}
+.input-container {
+  display: flex;
+  gap: 10px;
+  max-width: 600px;
+}
+#messageInput {
+  flex-grow: 1;
+  padding: 8px;
+}