feat: Add chat locking and policy pop-ups

Author: thisIsAnVariableOfACoder

frontend/src/App.jsx

@@ -9,13 +9,20 @@ import Design from './pages/Design';
 import SplashScreen from './components/SplashScreen';
 import { applyTheme, getStoredTheme } from './theme';
 import Explore from './pages/Explore';
+import PolicyModal from './components/PolicyModal';
+import { privacyPolicyContent, termsOfServiceContent, cookiePolicyContent } from './data/policies';
 
 export default function App() {
   // Detect GitHub Pages subdirectory
   const isGitHubPages = window.location.hostname.includes('github.io');
   const routerBase = isGitHubPages ? '/myAIchatbotProject' : '/';
   const [showSplash, setShowSplash] = useState(() => localStorage.getItem('showSplash') !== 'false');
   const [splashVisible, setSplashVisible] = useState(showSplash);
+  
+  // Policy modal state
+  const [policyModalOpen, setPolicyModalOpen] = useState(false);
+  const [policyTitle, setPolicyTitle] = useState('');
+  const [policyContent, setPolicyContent] = useState(null);
 
   useEffect(() => {
     const { theme, mode } = getStoredTheme();
@@ -28,6 +35,33 @@ export default function App() {
     return () => clearTimeout(timer);
   }, [showSplash]);
 
+  // Functions to open policy modals
+  const openPrivacyPolicy = (e) => {
+    e.preventDefault();
+    setPolicyTitle('Chính sách Quyền riêng tư');
+    setPolicyContent(privacyPolicyContent);
+    setPolicyModalOpen(true);
+  };
+
+  const openTermsOfService = (e) => {
+    e.preventDefault();
+    setPolicyTitle('Điều khoản Dịch vụ');
+    setPolicyContent(termsOfServiceContent);
+    setPolicyModalOpen(true);
+  };
+
+  const openCookiePolicy = (e) => {
+    e.preventDefault();
+    setPolicyTitle('Chính sách Cookie');
+    setPolicyContent(cookiePolicyContent);
+    setPolicyModalOpen(true);
+  };
+
+  const closePolicyModal = () => {
+    setPolicyModalOpen(false);
+    setPolicyContent(null);
+  };
+
   return (
     <BrowserRouter basename={routerBase}>
       <div className="min-h-screen app-shell text-[var(--c-text)]">
@@ -69,7 +103,7 @@ export default function App() {
               <div className="space-y-3">
                 <div className="text-sm font-semibold text-[var(--c-text)]">Resources</div>
                 <div className="flex flex-col gap-2 text-sm">
-                  <a className="text-[#5B5B57] hover:text-[var(--c-text)] hover:underline" href="/">Chat</a>
+                  <a className="text-[#5B5B57] hover:text-[var(--c-text)] hover:underline" href="https://thisisanvariableofacoder.github.io/myAIchatbotProject">Chat</a>
                   <a className="text-[#5B5B57] hover:text-[var(--c-text)] hover:underline" href="/explore">Explore</a>
                   <a
                     className="text-[#5B5B57] hover:text-[var(--c-text)] hover:underline"
@@ -85,9 +119,9 @@ export default function App() {
               <div className="space-y-3">
                 <div className="text-sm font-semibold text-[var(--c-text)]">Legal</div>
                 <div className="flex flex-col gap-2 text-sm">
-                  <a className="text-[#5B5B57] hover:text-[var(--c-text)] hover:underline" href="#">Privacy policy</a>
-                  <a className="text-[#5B5B57] hover:text-[var(--c-text)] hover:underline" href="#">Terms of service</a>
-                  <a className="text-[#5B5B57] hover:text-[var(--c-text)] hover:underline" href="#">Cookie policy</a>
+                  <button onClick={openPrivacyPolicy} className="text-left text-[#5B5B57] hover:text-[var(--c-text)] hover:underline">Privacy policy</button>
+                  <button onClick={openTermsOfService} className="text-left text-[#5B5B57] hover:text-[var(--c-text)] hover:underline">Terms of service</button>
+                  <button onClick={openCookiePolicy} className="text-left text-[#5B5B57] hover:text-[var(--c-text)] hover:underline">Cookie policy</button>
                 </div>
               </div>
             </div>
@@ -108,6 +142,12 @@ export default function App() {
           </div>
         </footer>
         {splashVisible && <SplashScreen onClose={() => setSplashVisible(false)} />}
+        <PolicyModal
+          isOpen={policyModalOpen}
+          onClose={closePolicyModal}
+          title={policyTitle}
+          content={policyContent}
+        />
       </div>
     </BrowserRouter>
   );

frontend/src/components/PolicyModal.jsx

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+
+/**
+ * PolicyModal Component
+ * Displays privacy policy, terms of service, or cookie policy in a modal overlay
+ */
+export default function PolicyModal({ isOpen, onClose, title, content }) {
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div 
+        className="relative bg-[var(--c-bg)] rounded-xl shadow-2xl max-w-3xl w-full max-h-[85vh] overflow-hidden flex flex-col animate-rise"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-[var(--c-border)]">
+          <h2 className="text-xl font-bold text-[var(--c-text)]">{title}</h2>
+          <button
+            onClick={onClose}
+            className="flex items-center justify-center w-8 h-8 rounded-full bg-[var(--c-surface)] hover:bg-[var(--c-hover)] text-[var(--c-text)] transition-colors"
+            aria-label="Close"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6 prose prose-sm max-w-none text-[var(--c-text)]">
+          {content}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-[var(--c-border)] flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-6 py-2 bg-[var(--c-primary)] text-white rounded-lg hover:opacity-90 transition-opacity font-medium"
+          >
+            Đóng
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}