LinuxUPC · PokeDavid04 · Aug 9, 2025 · Aug 19, 2025 · Aug 24, 2025 · Aug 24, 2025
diff --git a/README.md b/README.md
@@ -40,6 +40,15 @@ php -S localhost:8000
 
 Contributions are welcome! Feel free to open an issue or submit a pull request.
 
+### Virtual Assistant Configuration
+
+To modify the virtual assistant's personalized information (such as event dates, specific knowledge, etc.), you need to edit the `context` variable in the file:
+
+`assets/js/geminiBehaviour.js`
+
+This variable contains the initial instructions that define the assistant's personality and knowledge base.
+
+
 ## License
 
 This project is licensed under the [MIT License](LICENSE).
diff --git a/activities.html b/activities.html
@@ -11,6 +11,7 @@
   <link rel="stylesheet" href="./assets/css/activities.css">
   <link rel="stylesheet" href="./assets/css/components/title.css">
   <link rel="stylesheet" href="./assets/css/components/window.css">
+  <link rel="stylesheet" href="assets/css/components/chat.css">
 </head>
 
 <body class="dark">
@@ -170,10 +171,23 @@ <h3>📌 Install Party</h3>
     </main>
   </div>
 
+  <!-- Chat -->
+  <div class="chat-component"></div>
+
+  <!-- Scripts -->
   <script src="./assets/js/carrousel.js"></script>
   <script src="./assets/js/components.js"></script>
   <script src="./assets/js/colorMode.js"></script>
   <script src="./assets/js/topbar.js"></script>
+  <script type="importmap">
+        {
+          "imports": {
+            "@google/generative-ai": "https://esm.run/@google/generative-ai",
+            "crypto-js": "https://esm.run/crypto-js"
+          }
+        }
+      </script>
+  <script src="assets/js/chat.js" type="module"></script>
 </body>
 
 </html>
diff --git a/assets/css/components/chat.css b/assets/css/components/chat.css
@@ -0,0 +1,272 @@
+/*---------------------------------------
+* 1. WIDGET DE XAT (CONTENIDOR PRINCIPAL)
+ *---------------------------------------*/
+.chat-widget {
+  /* Posicionament fix a la cantonada inferior dreta */
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+
+  /* Dimensions del giny */
+  width: 320px;
+  height: 400px;
+
+  /* Aparença visual - efecte de vidre esmerilat */
+  backdrop-filter: blur(10px);
+  background-color: var(--chat-background);
+  border: 1px solid var(--window-border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+
+  /* Disseny del contenidor */
+  display: flex;
+  flex-direction: column;
+
+  /* Controla la capa (per sobre d'altres elements) */
+  z-index: 1001;
+
+  /* Animacions suaus */
+  transition: transform 0.3s ease, height 0.3s ease, opacity 0.3s ease;
+}
+
+/* Estat minimitzat - amaga el widget fora de la pantalla */
+.chat-widget.minimized {
+  transform: translateY(calc(100% + 20px));
+  opacity: 0;
+  pointer-events: none;
+}
+
+
+/*---------------------------------------
+ * 2. CAPÇALERA DEL XAT
+ *---------------------------------------*/
+.chat-header {
+  /* Disseny de la capçalera */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+
+  /* Línia divisòria inferior */
+  border-bottom: 1px solid var(--window-border);
+}
+
+.chat-header .window-title {
+  color: var(--text);
+}
+
+/*---------------------------------------
+ * 3. COS DEL XAT
+ *---------------------------------------*/
+.chat-body {
+  /* Ocupa l'espai restant */
+  flex: 1;
+
+  /* Disseny vertical */
+  display: flex;
+  flex-direction: column;
+
+  /* Evita el desbordament */
+  overflow: hidden;
+}
+
+/* Contenidor de missatges amb scroll */
+.chat-messages {
+  flex: 1;
+  padding: 12px;
+  overflow-y: auto;
+
+  /* Disseny dels missatges */
+  display: flex;
+  flex-direction: column;
+  gap: 12px; /* Espai entre missatges */
+}
+
+/*---------------------------------------
+ * 4. ESTILS DELS MISSATGES
+ *---------------------------------------*/
+.message {
+  max-width: 80%;
+  display: flex;
+}
+
+/* Missatge de l'usuari (alineat a la dreta) */
+.message.user {
+  align-self: flex-end;
+}
+
+/* Missatge del bot (alineat a l'esquerra) */
+.message.bot {
+  align-self: flex-start;
+}
+
+/* Estils generals per al contingut dels missatges */
+.message-content {
+  padding: 8px 12px;
+  border-radius: 12px;
+  background-color: var(--chat-message-bot);
+  color: var(--text);
+}
+
+/* Estil específic per als missatges de l'usuari */
+.message.user .message-content {
+  background-color: var(--chat-message-user);
+  color: var(--text);
+}
+
+/* Indicador d'escriptura */
+.typing-indicator .typing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.typing-indicator .typing span {
+  height: 8px;
+  width: 8px;
+  margin: 0 2px;
+  background-color: #555;
+  border-radius: 50%;
+  display: inline-block;
+  animation: typing 1.4s ease-in-out infinite;
+  animation-fill-mode: both;
+}
+
+.typing-indicator .typing span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typing-indicator .typing span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes typing {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+
+/*---------------------------------------
+ * 5. ÀREA D'ENTRADA DE TEXT
+ *---------------------------------------*/
+.chat-input-container {
+  display: flex;
+  padding: 10px;
+  border-top: 1px solid var(--window-border);
+}
+
+/* Camp d'entrada de text */
+.chat-input-container input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--window-border);
+  border-radius: 20px; 
+  background-color: var(--chat-input);
+  color: var(--text);
+  outline: none;
+}
+
+/* Botó d'enviar */
+.chat-input-container button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-left: 8px;
+}
+
+.chat-input-container button svg path {
+  fill: var(--text);
+}
+
+
+/*---------------------------------------
+ * 6. BOTÓ FLOTANT DE XAT (BUBBLE)
+ *---------------------------------------*/
+.chat-bubble {
+  /* Posicionament fix a la cantonada inferior dreta */
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+
+  /* Dimensions i forma circular */
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+
+  /* Aparença visual */
+  background-color: var(--chat-bubble);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: none;
+
+  /* Centrat de la icona */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /* Interactivitat */
+  cursor: pointer;
+  z-index: 1000; /* Un nivell per sota del xat */
+}
+
+.chat-bubble svg {
+  fill: var(--text);
+}
+
+.chat-bubble svg path {
+  fill: var(--text);
+}
+
+
+/*---------------------------------------
+ * 7. CONTROLS DE FINESTRA
+ *---------------------------------------*/
+.window-controls {
+  display: flex;
+  gap: 4px;
+  min-height: 24px;
+}
+
+/* Estil base per als botons de control */
+.window-control {
+  width: 20px !important;
+  height: 20px !important;
+  min-width: 20px;
+  min-height: 20px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  background-color: #f9ca24;
+}
+
+/* Botó específic per minimitzar */
+.window-control.minimize {
+  background-color: #f9ca24;
+  position: relative;
+}
+
+.window-control.minimize::after {
+  content: "-";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 16px;
+  font-weight: bold;
+  color: rgb(0, 0, 0);
+}
+
+/*---------------------------------------
+ * 8. RESPONSIVITAT
+ *---------------------------------------*/
+@media (max-width: 768px) {
+  .chat-widget {
+    width: 300px; /* Una mica més petit en mòbils */
+    height: 350px;
+  }
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -18,6 +18,12 @@
   --primary: hsl(16, 93%, 59%);
   --secondary: hsl(16, 96%, 72%);
   --accent: hsl(306, 41%, 45%);
+
+  --chat-bubble: rgba(255, 255, 255, 0.3);
+  --chat-background: rgba(220, 220, 220, 0.95);
+  --chat-message-bot: rgb(180, 180, 180);
+  --chat-message-user: rgb(235, 156, 60);
+  --chat-input: rgb(255, 255, 255);
 }
 
 .dark {
@@ -38,6 +44,12 @@
   --primary: hsl(16, 97%, 59%);
   --secondary: hsl(15, 100%, 68%);
   --accent: hsl(306, 57%, 70%);
+
+  --chat-bubble: rgba(0, 0, 0, 0.3);
+  --chat-background: rgba(30, 30, 30, 0.95);
+  --chat-message-bot: rgb(70, 70, 70);
+  --chat-message-user: rgb(235, 156, 60);
+  --chat-input: rgb(0, 0, 0);
 }
 
 /* Reseteo básico */