Spaces:

tanmaivan
/

hutmind

Runtime error

App Files Files Community

tanmaivan commited on Mar 14

Commit

44009db

1 Parent(s): f59cb4f

feat: implement dark mode, knowledge base & multi-lang UI refinements

Browse files

Files changed (8) hide show

FrontEnd/index.html +1 -1
FrontEnd/public/{pizzahut.png → logo_dark.png} +2 -2
FrontEnd/public/{vite.svg → logo_light.png} +2 -2
FrontEnd/public/logo_light_v2.png +3 -0
FrontEnd/public/mascot.png +2 -2
FrontEnd/public/vite.png +3 -0
FrontEnd/src/ChatBot.css +373 -84
FrontEnd/src/ChatBot.jsx +181 -31

FrontEnd/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/pizzahut.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HutMind</title>
   </head>

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/logo_light.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HutMind</title>
   </head>

FrontEnd/public/{pizzahut.png → logo_dark.png} RENAMED Viewed

File without changes

FrontEnd/public/{vite.svg → logo_light.png} RENAMED Viewed

File without changes

FrontEnd/public/logo_light_v2.png ADDED Viewed

Git LFS Details

SHA256: 654f6218733502235729a5e4c5de0282efe59266e8d9d2e33301bad90f818b82
Pointer size: 131 Bytes
Size of remote file: 236 kB

FrontEnd/public/mascot.png CHANGED Viewed

Git LFS Details

SHA256: db1ae0453daa9dc63df925876630fe1adc06ef7b330953d1e441074b4a6381bc
Pointer size: 131 Bytes
Size of remote file: 243 kB

Git LFS Details

SHA256: 3b750f086e0fbb5bc55d3ec2dd2c86ae2c4b1c7e7652bae0a3717057d1f47ec7
Pointer size: 131 Bytes
Size of remote file: 244 kB

FrontEnd/public/vite.png ADDED Viewed

Git LFS Details

SHA256: f015b1f1c11878067744387d7ebce3068ab685ab6edfcf883b7f10b69dde2cd8
Pointer size: 131 Bytes
Size of remote file: 203 kB

FrontEnd/src/ChatBot.css CHANGED Viewed

@@ -1,10 +1,49 @@
-/* Reset */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 /* Container */
 .chatbot-container {
   width: 100%;
@@ -13,75 +52,110 @@
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
   position: relative;
   font-family: 'Inter', sans-serif;
-  color: #374151;
 }
 /* Header */
 .chat-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 16px 24px;
-  background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 100;
 }
 .header-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   cursor: pointer;
-  transition: opacity 0.2s ease;
 }
-.header-logo:hover {
-  opacity: 0.8;
 }
-.pizza-icon {
-  color: #e31837; /* Pizza Hut Red */
 }
-.header-title h1 {
-  font-size: 16px;
   font-weight: 600;
-  color: #111827;
-  line-height: 1.2;
 }
-.header-title span {
-  font-size: 11px;
-  color: #6b7280;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 500;
 }
 .new-chat-btn {
   display: flex;
   align-items: center;
-  gap: 6px;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-  color: #374151;
   font-size: 13px;
   font-weight: 500;
-  padding: 10px 20px;
-  border-radius: 24px; /* Pill-shaped */
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .new-chat-btn:hover {
-  background-color: #ffffff;
-  border-color: #d1d5db;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   transform: translateY(-1px);
 }
@@ -104,66 +178,124 @@
   width: 6px;
 }
 .chat-window::-webkit-scrollbar-thumb {
-  background-color: #d1d5db;
   border-radius: 10px;
 }
 /* Welcome Screen */
 .welcome-container {
-  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   text-align: center;
   padding: 40px 20px;
-  min-height: 300px;
 }
 .welcome-logo {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 24px;
 }
 .welcome-container h2 {
   font-size: 24px;
-  font-weight: 600;
-  color: #111827;
   margin-bottom: 12px;
 }
 .welcome-subtitle {
-  font-size: 15px;
-  color: #6b7280;
-  max-width: 400px;
   margin-bottom: 32px;
   line-height: 1.5;
 }
 .suggestion-chips {
   display: flex;
   gap: 12px;
-  flex-wrap: wrap;
-  justify-content: center;
 }
 .suggestion-chips button {
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-  color: #374151;
   padding: 10px 18px;
-  border-radius: 18px;
-  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 .suggestion-chips button:hover {
-  background-color: #f9fafb;
-  border-color: #d1d5db;
   transform: translateY(-1px);
 }
@@ -207,8 +339,8 @@
 .user-text {
   white-space: pre-wrap;
-  color: #ffffff;
-  background-color: #e31837; /* Pizza Hut Red Bubble */
   padding: 12px 18px;
   border-radius: 20px 20px 2px 20px;
   box-shadow: 0 2px 8px rgba(227, 24, 55, 0.15);
@@ -249,13 +381,13 @@
 }
 .copy-btn:hover {
-  background-color: #f3f4f6; /* Light circular hover */
-  color: #374151; /* Darker on hover */
 }
 /* React Markdown Styles */
 .markdown-body {
-  color: #374151;
   width: 100%;
 }
@@ -269,7 +401,7 @@
 .markdown-body strong {
   font-weight: 600;
-  color: #111827;
 }
 .markdown-body ul, .markdown-body ol {
@@ -282,11 +414,12 @@
 }
 .markdown-body code {
-  background-color: #e5e7eb;
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 14px;
   font-family: 'Consolas', monospace;
 }
 /* Typing Indicator */
@@ -300,7 +433,7 @@
 .dot {
   width: 6px;
   height: 6px;
-  background-color: #9ca3af;
   border-radius: 50%;
   animation: bounce 1.4s infinite ease-in-out both;
 }
@@ -316,14 +449,14 @@
 /* Input Area */
 .input-area {
   padding: 16px 24px 24px 24px;
-  background-color: #ffffff;
 }
 .input-container {
   display: flex;
   align-items: flex-end;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
   border-radius: 16px;
   padding: 4px;
   transition: all 0.2s;
@@ -341,7 +474,7 @@
   background: transparent;
   padding: 12px 16px;
   font-size: 16px;
-  color: #111827;
   font-family: inherit;
   resize: none;
   max-height: 200px;
@@ -386,7 +519,7 @@
 .footer-text {
   text-align: center;
   font-size: 12px;
-  color: #9ca3af;
   margin-top: 12px;
 }
@@ -402,30 +535,34 @@
   }
   .chat-header {
-    padding: 12px 16px;
   }
   .header-title h1 {
     font-size: 14px;
   }
-  .new-chat-btn span {
-    display: none;
   }
-  .new-chat-btn {
     padding: 8px;
-    border-radius: 50%;
   }
   .welcome-container {
-    padding-top: 60px;
-    justify-content: flex-start;
   }
   .welcome-logo img {
-    width: 140px;
-    height: auto;
   }
   .welcome-container h2 {
@@ -457,27 +594,179 @@
 }
 @media (max-width: 480px) {
-  .header-title span {
-    display: none;
   }
   .welcome-logo img {
-    width: 100px;
   }
   .suggestion-chips {
-    gap: 8px;
   }
-  .suggestion-chips button {
-    padding: 8px 12px;
     font-size: 13px;
-    width: 100%;
-    text-align: left;
   }
-  .welcome-subtitle {
-    font-size: 14px;
-    margin-bottom: 24px;
   }
 }

+:root {
+  /* Light Theme Variables */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb;
+  --bg-message-user: #e31837;
+  --text-primary: #111827;
+  --text-secondary: #6b7280;
+  --text-on-red: #ffffff;
+  --border-color: #f3f4f6;
+  --border-input: #e5e7eb;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --hover-btn: #f3f4f6;
+}
+.chatbot-container.dark, body.dark {
+  /* Dark Theme Variables */
+  --bg-primary: #121212; /* Slightly deeper dark */
+  --bg-secondary: #1e1e1e;
+  --bg-message-user: #e31837;
+  --text-primary: #ffffff;
+  --text-secondary: #d4d4d4; /* Much brighter for readability */
+  --border-color: #2a2a2a;
+  --border-input: #3a3a3a;
+  --hover-btn: #2a2a2a;
+}
+/* Global Resets */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
+html, body {
+  overflow-x: hidden;
+  width: 100%;
+}
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease;
+  min-height: 100vh;
+}
 /* Container */
 .chatbot-container {
   width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
+  background-color: var(--bg-primary);
   position: relative;
   font-family: 'Inter', sans-serif;
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
+  overflow-x: hidden;
 }
 /* Header */
 .chat-header {
+  height: 70px;
+  padding: 0 24px;
+  background-color: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   align-items: center;
+  justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 100;
 }
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 .header-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   cursor: pointer;
 }
+.header-logo img {
+  object-fit: contain;
 }
+.header-title h1 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  margin: 0;
 }
+.lang-switcher, .theme-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background-color: transparent;
+  border: none;
+  color: var(--text-primary); /* Higher contrast */
+  padding: 8px;
+  border-radius: 50%; /* For circular hover */
+  font-size: 13px;
   font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 38px;
+  min-width: 38px;
 }
+.theme-switcher {
+  width: 38px;
+  padding: 0;
+}
+.lang-switcher:hover, .theme-switcher:hover {
+  background-color: var(--hover-btn);
+  color: var(--text-primary);
 }
 .new-chat-btn {
   display: flex;
   align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-input);
+  color: var(--text-primary);
   font-size: 13px;
   font-weight: 500;
+  padding: 0 20px;
+  height: 38px;
+  border-radius: 20px; /* Pill-shaped */
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-sm);
+  min-width: 140px; /* Stabilize size */
 }
 .new-chat-btn:hover {
+  background-color: var(--bg-primary);
+  border-color: #9ca3af;
+  box-shadow: var(--shadow-md);
   transform: translateY(-1px);
 }
   width: 6px;
 }
 .chat-window::-webkit-scrollbar-thumb {
+  background-color: var(--border-input);
   border-radius: 10px;
 }
 /* Welcome Screen */
 .welcome-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 40px 20px;
+  margin: auto; /* Vertically and horizontally centered */
+  width: 100%;
+  max-width: 800px;
+  min-height: min-content;
 }
 .welcome-logo {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-bottom: 20px;
+  max-height: 15vh; /* Reduced height as it's smaller now */
+}
+.welcome-logo img {
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  max-width: 100px; /* Reduced to 1/2 size as requested */
+  object-fit: contain;
 }
 .welcome-container h2 {
   font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
   margin-bottom: 12px;
 }
 .welcome-subtitle {
+  font-size: clamp(12px, 2vw, 14px);
+  color: var(--text-secondary);
   margin-bottom: 32px;
   line-height: 1.5;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* Knowledge Base Button */
+.knowledge-base-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: transparent;
+  border: 1px solid var(--border-input);
+  color: var(--text-primary); /* Ensure white in dark mode */
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 32px;
+  min-width: 160px; /* Stabilize size */
+}
+.knowledge-base-btn:hover {
+  background-color: var(--hover-btn);
+  color: var(--text-primary);
+  border-color: #9ca3af;
+  transform: translateY(-1px);
 }
+/* Suggestion Chips */
 .suggestion-chips {
   display: flex;
+  flex-wrap: nowrap; /* Single line as requested */
+  overflow-x: auto; /* Horizontal scroll if too long */
   gap: 12px;
+  justify-content: center; /* Center if enough space */
+  width: 100%;
+  max-width: 800px; /* Wider to match input area visibility better */
+  padding: 4px 10px;
+  scrollbar-width: none; /* Hide scrollbar Firefox */
+  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
+}
+.suggestion-chips::-webkit-scrollbar {
+  display: none; /* Hide scrollbar Chrome/Safari */
 }
 .suggestion-chips button {
+  flex-shrink: 0; /* Don't squash buttons */
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-input);
+  color: var(--text-primary); /* Use primary text (white in dark mode) */
   padding: 10px 18px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
+  box-shadow: var(--shadow-sm);
+  height: 44px; /* Consistent height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
 }
 .suggestion-chips button:hover {
+  background-color: var(--hover-btn);
+  border-color: #9ca3af;
+  color: var(--text-primary);
   transform: translateY(-1px);
 }
 .user-text {
   white-space: pre-wrap;
+  color: var(--text-on-red);
+  background-color: var(--bg-message-user); /* Pizza Hut Red Bubble */
   padding: 12px 18px;
   border-radius: 20px 20px 2px 20px;
   box-shadow: 0 2px 8px rgba(227, 24, 55, 0.15);
 }
 .copy-btn:hover {
+  background-color: var(--hover-btn); /* Light circular hover */
+  color: var(--text-primary); /* Darker on hover */
 }
 /* React Markdown Styles */
 .markdown-body {
+  color: var(--text-primary);
   width: 100%;
 }
 .markdown-body strong {
   font-weight: 600;
+  color: var(--text-primary);
 }
 .markdown-body ul, .markdown-body ol {
 }
 .markdown-body code {
+  background-color: var(--bg-secondary);
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 14px;
   font-family: 'Consolas', monospace;
+  color: var(--text-primary);
 }
 /* Typing Indicator */
 .dot {
   width: 6px;
   height: 6px;
+  background-color: var(--text-secondary);
   border-radius: 50%;
   animation: bounce 1.4s infinite ease-in-out both;
 }
 /* Input Area */
 .input-area {
   padding: 16px 24px 24px 24px;
+  background-color: var(--bg-primary);
 }
 .input-container {
   display: flex;
   align-items: flex-end;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-input);
   border-radius: 16px;
   padding: 4px;
   transition: all 0.2s;
   background: transparent;
   padding: 12px 16px;
   font-size: 16px;
+  color: var(--text-primary);
   font-family: inherit;
   resize: none;
   max-height: 200px;
 .footer-text {
   text-align: center;
   font-size: 12px;
+  color: var(--text-secondary);
   margin-top: 12px;
 }
   }
   .chat-header {
+    padding: 0 16px;
   }
   .header-title h1 {
     font-size: 14px;
   }
+  .header-right {
+    gap: 8px; /* Tighter gap on mobile */
+  }
+  .lang-switcher span, .new-chat-btn span {
+    display: none; /* Hide text to save space */
   }
+  .lang-switcher, .theme-switcher, .new-chat-btn {
     padding: 8px;
+    width: 38px;
+    min-width: 38px;
+    border-radius: 50%; /* Icon only style */
   }
   .welcome-container {
+    padding-top: 40px;
   }
   .welcome-logo img {
+    max-width: 80px; /* Proportional reduction for mobile */
   }
   .welcome-container h2 {
 }
 @media (max-width: 480px) {
+  .header-title {
+    display: none; /* Only logo on very small screens if needed */
   }
   .welcome-logo img {
+    max-width: 70px; /* Even smaller for very small screens */
   }
   .suggestion-chips {
+    justify-content: flex-start; /* Ensure scrolling starts from left */
+    padding-left: 16px;
+    padding-right: 16px;
   }
+  .welcome-subtitle {
     font-size: 13px;
+    margin-bottom: 24px;
+    padding: 0 10px;
+    white-space: normal; /* Allow wrap on very small screens to avoid horizontal scroll of plain text */
+    text-overflow: clip;
+    overflow: visible;
   }
+  .modal-content {
+    margin: 20px; /* Prevent touching edges on mobile */
+    max-height: 85vh;
   }
 }
+/* Knowledge Base Button */
+.knowledge-base-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: transparent;
+  border: 1px solid #e5e7eb;
+  color: #6b7280;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 32px;
+}
+.knowledge-base-btn:hover {
+  background-color: #f9fafb;
+  color: #374151;
+  border-color: #d1d5db;
+  transform: translateY(-1px);
+}
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6); /* Darker for better contrast */
+  backdrop-filter: blur(8px); /* Stronger blur */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+}
+.modal-content {
+  background-color: var(--bg-primary);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh; /* Keep within viewport */
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+.modal-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--bg-primary);
+  flex-shrink: 0; /* Header stays at the top */
+}
+.modal-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+.close-modal {
+  background: transparent;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 18px;
+  display: flex;
+  transition: color 0.2s;
+}
+.close-modal:hover {
+  color: #374151;
+}
+.modal-body {
+  padding: 24px;
+  overflow-y: auto; /* Contents scrollable */
+  flex: 1;
+}
+.modal-description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+.sources-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.source-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background-color: var(--bg-secondary);
+  border-radius: 12px;
+  transition: background-color 0.2s;
+  border: 1px solid var(--border-color);
+}
+.source-item:hover {
+  background-color: var(--hover-btn);
+}
+.source-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.source-icon.pdf { color: #ef4444; }
+.source-icon.word { color: #3b82f6; }
+.source-icon.db { color: #10b981; }
+.source-name {
+  font-size: 14px;
+  color: var(--text-primary);
+  font-weight: 500;
+  line-height: 1.4;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}

FrontEnd/src/ChatBot.jsx CHANGED Viewed

@@ -1,19 +1,107 @@
 import { useState, useEffect, useRef } from "react";
-import { FaUser, FaRobot, FaPaperPlane, FaCircle, FaPlus, FaPizzaSlice } from "react-icons/fa";
 import { MdOutlineContentCopy, MdCheck } from "react-icons/md";
 import ReactMarkdown from "react-markdown";
 import "./ChatBot.css";
 const BASE_URL = "https://tanmaivan-hutmind.hf.space";
 const ChatBot = () => {
   const [messages, setMessages] = useState([]);
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [copiedIndex, setCopiedIndex] = useState(null);
   const chatWindowRef = useRef(null);
   const textareaRef = useRef(null);
   // Auto scroll
   useEffect(() => {
     if (chatWindowRef.current) {
@@ -55,7 +143,7 @@ const ChatBot = () => {
       });
       if (!response.ok) {
-        throw new Error("Lỗi khi gửi yêu cầu");
       }
       const reader = response.body.getReader();
@@ -91,7 +179,7 @@ const ChatBot = () => {
       console.error("Lỗi:", error);
       setMessages((prevMessages) => [
         ...prevMessages.filter((msg) => msg.text !== "..."),
-        { sender: "bot", text: "Đã xảy ra lỗi khi kết nối với chatbot. Vui lòng thử lại sau." },
       ]);
     } finally {
       setIsLoading(false);
@@ -107,7 +195,7 @@ const ChatBot = () => {
       });
       if (!response.ok) {
-        throw new Error("Lỗi khi khởi tạo lại chatbot");
       }
       const data = await response.json();
@@ -124,46 +212,86 @@ const ChatBot = () => {
     });
   };
   return (
-    <div className="chatbot-container">
       <div className="chat-header">
-        <div className="header-logo" onClick={handleNewChat} title="Quay về trang chủ">
-          <img src="/pizzahut.png" alt="Pizza Hut Logo" width={50} height={50} />
-          <div className="header-title">
-            <h1>HutMind</h1>
           </div>
         </div>
-        <button className="new-chat-btn" onClick={handleNewChat} title="Cuộc trò chuyện mới">
-          <FaPlus size={16} />
-          <span>New Chat</span>
-        </button>
       </div>
       <div className="chat-window" ref={chatWindowRef}>
         {messages.length === 0 && (
           <div className="welcome-container">
             <div className="welcome-logo">
-              <img src="/mascot.png" alt="Pizza Hut Mascot" width={200} height={250} />
             </div>
-            <h2>Tôi có thể giúp gì cho bạn?</h2>
-            <p className="welcome-subtitle">
-              Hãy hỏi tôi về chính sách JRG, thông tin hệ thống Pizza Hut VN hoặc về Data Team.
-            </p>
             <div className="suggestion-chips">
-              <button onClick={() => setUserInput("Giới thiệu về team data, ban quản lý là ai?")}>
-                Giới thiệu Team Data
               </button>
-              <button onClick={() => setUserInput("Kể cho tôi nghe lịch sử hình thành của Pizza Hut!")}>
-                Lịch sử Pizza Hut
               </button>
-              <button onClick={() => setUserInput("Team Data có ai làm việc ở nước ngoài không?")}>
-                Team Data nước ngoài
               </button>
-              <button onClick={() => setUserInput("Tập đoàn JRG đang quản lý thương hiệu Pizza Hut ở những nước nào?")}>
-                Quy mô JRG toàn cầu
               </button>
             </div>
           </div>
@@ -196,7 +324,7 @@ const ChatBot = () => {
                         <button
                           className="copy-btn"
                           onClick={() => copyToClipboard(message.text, index)}
-                          title="Sao chép"
                         >
                           {copiedIndex === index ? <MdCheck size={18} /> : <MdOutlineContentCopy size={18} />}
                         </button>
@@ -218,7 +346,7 @@ const ChatBot = () => {
             ref={textareaRef}
             value={userInput}
             onChange={(e) => setUserInput(e.target.value)}
-            placeholder="Gửi tin nhắn cho HutMind..."
             rows={1}
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
@@ -237,10 +365,32 @@ const ChatBot = () => {
             <FaPaperPlane size={16} />
           </button>
         </div>
-        <div className="footer-text">
-          HutMind có thể mắc lỗi. Vui lòng kiểm tra lại các thông tin quan trọng.
-        </div>
       </div>
     </div>
   );
 };

 import { useState, useEffect, useRef } from "react";
+import { FaUser, FaRobot, FaPaperPlane, FaCircle, FaPlus, FaPizzaSlice, FaInfoCircle, FaTimes, FaFilePdf, FaFileWord, FaDatabase, FaGlobe, FaSun, FaMoon } from "react-icons/fa";
 import { MdOutlineContentCopy, MdCheck } from "react-icons/md";
 import ReactMarkdown from "react-markdown";
 import "./ChatBot.css";
 const BASE_URL = "https://tanmaivan-hutmind.hf.space";
+const TRANSLATIONS = {
+  vi: {
+    newChat: "Trò chuyện mới",
+    welcomeTitle: "Tôi có thể giúp gì cho bạn?",
+    welcomeSubtitle: "Hãy hỏi tôi về chính sách JRG, thông tin hệ thống Pizza Hut VN hoặc về Data Analytics Team.",
+    knowledgeBaseBtn: "Dữ liệu thông tin",
+    suggestion1: "Giới thiệu về team data analytics, ban quản lý là ai?",
+    suggestion1Chip: "Giới thiệu Data Analytics",
+    suggestion2: "Kể cho tôi nghe lịch sử hình thành của Pizza Hut!",
+    suggestion2Chip: "Lịch sử Pizza Hut",
+    suggestion3: "Data Analytics Team có ai làm việc ở nước ngoài không?",
+    suggestion3Chip: "Data Analytics nước ngoài",
+    suggestion4: "Tập đoàn JRG đang quản lý thương hiệu Pizza Hut ở những nước nào?",
+    suggestion4Chip: "Quy mô JRG toàn cầu",
+    inputPlaceholder: "Gửi tin nhắn cho HutMind...",
+    footerDisclaimer: "HutMind có thể mắc lỗi. Vui lòng kiểm tra lại các thông tin quan trọng.",
+    modalTitle: "Dữ liệu tham khảo",
+    modalDescription: "Dưới đây là các tài liệu và nguồn dữ liệu hiện đang được HutMind sử dụng để trả lời câu hỏi của bạn:",
+    errorConnection: "Đã xảy ra lỗi khi kết nối với chatbot. Vui lòng thử lại sau.",
+    errorInit: "Lỗi khi khởi tạo lại chatbot",
+    copyTooltip: "Sao chép",
+    themeLight: "Chế độ sáng",
+    themeDark: "Chế độ tối",
+    sources: [
+      { name: "Thông tin về Data Analytics Team (JRGVN)", type: "database" },
+      { name: "Hướng dẫn Chính sách Bảo mật Thông tin (2024)", type: "pdf" },
+      { name: "Quy định Nghỉ phép và Nghỉ bệnh (PSL)", type: "pdf" },
+      { name: "Chính sách Công tác và Tiếp khách nước ngoài (2025)", type: "pdf" },
+      { name: "Chính sách Bảo mật Dữ liệu PHV (2023)", type: "word" },
+      { name: "Chỉ thị Ứng phó Sự cố CNTT (DRP)", type: "pdf" },
+      { name: "Danh mục từ viết tắt và Thuật ngữ chuyên môn", type: "word" },
+      { name: "Quy trình và Chính sách Phần mềm", type: "pdf" },
+    ]
+  },
+  en: {
+    newChat: "New Chat",
+    welcomeTitle: "How can I help you today?",
+    welcomeSubtitle: "Ask me about JRG policies, Pizza Hut VN systems, or the Data Analytics Team.",
+    knowledgeBaseBtn: "Knowledge Base",
+    suggestion1: "Intro to Data Analytics Team, who's the management?",
+    suggestion1Chip: "Data Analytics Intro",
+    suggestion2: "Tell me about the history of Pizza Hut!",
+    suggestion2Chip: "Pizza Hut History",
+    suggestion3: "Does anyone in the Data Analytics Team work overseas?",
+    suggestion3Chip: "Overseas Data Analytics Team",
+    suggestion4: "Which countries does JRG manage the Pizza Hut brand in?",
+    suggestion4Chip: "JRG Global Scale",
+    inputPlaceholder: "Message HutMind...",
+    footerDisclaimer: "HutMind can make mistakes. Check important info.",
+    modalTitle: "Reference Data",
+    modalDescription: "Below are the documents and data sources currently being used by HutMind to answer your questions:",
+    errorConnection: "An error occurred connecting to the chatbot. Please try again later.",
+    errorInit: "Error re-initializing chatbot",
+    copyTooltip: "Copy",
+    themeLight: "Light mode",
+    themeDark: "Dark mode",
+    sources: [
+      { name: "Data Analytics Team Info (JRGVN)", type: "database" },
+      { name: "Info Security Policy Guidelines (2024)", type: "pdf" },
+      { name: "Leave & Sick Leave Regulations (PSL)", type: "pdf" },
+      { name: "Overseas Travel & Entertainment Policy (2025)", type: "pdf" },
+      { name: "PHV Data Privacy Policy (2023)", type: "word" },
+      { name: "IT Disaster Recovery Directive (DRP)", type: "pdf" },
+      { name: "Abbreviations & Technical Terms", type: "word" },
+      { name: "Software Policy & Procedure", type: "pdf" },
+    ]
+  }
+};
 const ChatBot = () => {
   const [messages, setMessages] = useState([]);
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [copiedIndex, setCopiedIndex] = useState(null);
+  const [showKnowledgeModal, setShowKnowledgeModal] = useState(false);
+  const [language, setLanguage] = useState(() => localStorage.getItem("hutmind-lang") || "vi");
+  const [theme, setTheme] = useState(() => localStorage.getItem("hutmind-theme") || "light");
   const chatWindowRef = useRef(null);
   const textareaRef = useRef(null);
+  const t = (key) => TRANSLATIONS[language][key];
+  // Persist settings
+  useEffect(() => {
+    localStorage.setItem("hutmind-lang", language);
+  }, [language]);
+  useEffect(() => {
+    localStorage.setItem("hutmind-theme", theme);
+    if (theme === 'dark') {
+      document.body.classList.add('dark');
+    } else {
+      document.body.classList.remove('dark');
+    }
+  }, [theme]);
   // Auto scroll
   useEffect(() => {
     if (chatWindowRef.current) {
       });
       if (!response.ok) {
+        throw new Error(t("errorConnection"));
       }
       const reader = response.body.getReader();
       console.error("Lỗi:", error);
       setMessages((prevMessages) => [
         ...prevMessages.filter((msg) => msg.text !== "..."),
+        { sender: "bot", text: t("errorConnection") },
       ]);
     } finally {
       setIsLoading(false);
       });
       if (!response.ok) {
+        throw new Error(t("errorInit"));
       }
       const data = await response.json();
     });
   };
+  const getSourceIcon = (type) => {
+    switch (type) {
+      case "pdf": return <FaFilePdf className="source-icon pdf" />;
+      case "word": return <FaFileWord className="source-icon word" />;
+      case "database": return <FaDatabase className="source-icon db" />;
+      default: return <FaInfoCircle className="source-icon" />;
+    }
+  };
+  const toggleLanguage = () => {
+    setLanguage(prev => prev === "vi" ? "en" : "vi");
+  };
+  const toggleTheme = () => {
+    setTheme(prev => prev === "light" ? "dark" : "light");
+  };
   return (
+    <div className={`chatbot-container ${theme}`}>
       <div className="chat-header">
+        <div className="header-left">
+          <div className="header-logo" onClick={handleNewChat} title="HutMind">
+            <img
+              src={theme === 'light' ? "/logo_light.png" : "/logo_dark.png"}
+              alt="Logo"
+              width={50}
+              height={50}
+            />
+            <div className="header-title">
+              <h1>HutMind</h1>
+            </div>
           </div>
         </div>
+        <div className="header-right">
+          <button className="theme-switcher" onClick={toggleTheme} title={theme === 'light' ? t("themeDark") : t("themeLight")}>
+            {theme === 'light' ? <FaMoon size={16} /> : <FaSun size={16} />}
+          </button>
+          <button className="lang-switcher" onClick={toggleLanguage} title="Switch Language">
+            <FaGlobe size={14} />
+            <span>{language.toUpperCase()}</span>
+          </button>
+          <button className="new-chat-btn" onClick={handleNewChat} title={t("newChat")}>
+            <FaPlus size={16} />
+            <span>{t("newChat")}</span>
+          </button>
+        </div>
       </div>
       <div className="chat-window" ref={chatWindowRef}>
         {messages.length === 0 && (
           <div className="welcome-container">
             <div className="welcome-logo">
+              <img src="/mascot.png" alt="Mascot" width={200} height={250} />
             </div>
+            <h2>{t("welcomeTitle")}</h2>
+            <p className="welcome-subtitle">{t("welcomeSubtitle")}</p>
+            <button className="knowledge-base-btn" onClick={() => setShowKnowledgeModal(true)}>
+              <FaInfoCircle size={14} />
+              <span>{t("knowledgeBaseBtn")}</span>
+            </button>
             <div className="suggestion-chips">
+              <button onClick={() => setUserInput(t("suggestion1"))}>
+                {t("suggestion1Chip")}
               </button>
+              <button onClick={() => setUserInput(t("suggestion2"))}>
+                {t("suggestion2Chip")}
               </button>
+              <button onClick={() => setUserInput(t("suggestion3"))}>
+                {t("suggestion3Chip")}
               </button>
+              <button onClick={() => setUserInput(t("suggestion4"))}>
+                {t("suggestion4Chip")}
               </button>
             </div>
           </div>
                         <button
                           className="copy-btn"
                           onClick={() => copyToClipboard(message.text, index)}
+                          title={t("copyTooltip")}
                         >
                           {copiedIndex === index ? <MdCheck size={18} /> : <MdOutlineContentCopy size={18} />}
                         </button>
             ref={textareaRef}
             value={userInput}
             onChange={(e) => setUserInput(e.target.value)}
+            placeholder={t("inputPlaceholder")}
             rows={1}
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
             <FaPaperPlane size={16} />
           </button>
         </div>
+        <div className="footer-text">{t("footerDisclaimer")}</div>
       </div>
+      {showKnowledgeModal && (
+        <div className="modal-overlay" onClick={() => setShowKnowledgeModal(false)}>
+          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>{t("modalTitle")}</h3>
+              <button className="close-modal" onClick={() => setShowKnowledgeModal(false)}>
+                <FaTimes />
+              </button>
+            </div>
+            <div className="modal-body">
+              <p className="modal-description">{t("modalDescription")}</p>
+              <div className="sources-list">
+                {t("sources").map((source, idx) => (
+                  <div key={idx} className="source-item">
+                    {getSourceIcon(source.type)}
+                    <span className="source-name">{source.name}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };