From 26952ff6c8628f0ecdb99b7e47312c7ebe55d1b3 Mon Sep 17 00:00:00 2001
From: TamHC <79314879+TamHC@users.noreply.github.com>
Date: Tue, 24 Jun 2025 17:35:41 +0800
Subject: [PATCH] Add files via upload

---
 src/components/ChatWindow.tsx      |  4 ++
 src/components/EmptyChat.tsx       | 10 ++--
 src/components/IncognitoToggle.tsx | 84 ++++++++++++++++++++++++++++++
 src/components/Navbar.tsx          |  2 +
 4 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 src/components/IncognitoToggle.tsx

diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 93c8a0c..ea29b1e 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -334,6 +334,9 @@ const ChatWindow = ({ id }: { id?: string }) => {
       return;
     }
 
+    // 檢查無痕模式
+    const isIncognito = localStorage.getItem('incognitoMode') === 'true';
+
     setLoading(true);
     setMessageAppeared(false);
 
@@ -481,6 +484,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
           provider: embeddingModelProvider.provider,
         },
         systemInstructions: localStorage.getItem('systemInstructions'),
+        isIncognito: isIncognito,
       }),
     });
 
diff --git a/src/components/EmptyChat.tsx b/src/components/EmptyChat.tsx
index 42e5a09..28b7b91 100644
--- a/src/components/EmptyChat.tsx
+++ b/src/components/EmptyChat.tsx
@@ -4,6 +4,7 @@ import { File } from './ChatWindow';
 import Link from 'next/link';
 import WeatherWidget from './WeatherWidget';
 import NewsArticleWidget from './NewsArticleWidget';
+import IncognitoToggle from './IncognitoToggle';
 
 const EmptyChat = ({
   sendMessage,
@@ -35,9 +36,12 @@ const EmptyChat = ({
       </div>
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-4">
         <div className="flex flex-col items-center justify-center w-full space-y-8">
-          <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
-            Research begins here.
-          </h2>
+          <div className="flex flex-col items-center space-y-4">
+            <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
+              Research begins here.
+            </h2>
+            <IncognitoToggle />
+          </div>
           <EmptyChatMessageInput
             sendMessage={sendMessage}
             focusMode={focusMode}
diff --git a/src/components/IncognitoToggle.tsx b/src/components/IncognitoToggle.tsx
new file mode 100644
index 0000000..9ed81a8
--- /dev/null
+++ b/src/components/IncognitoToggle.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { EyeOff, Eye } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+
+interface IncognitoToggleProps {
+  className?: string;
+  showLabel?: boolean;
+}
+
+const IncognitoToggle = ({ className = '', showLabel = true }: IncognitoToggleProps) => {
+  const [isIncognito, setIsIncognito] = useState(false);
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // 初始化無痕模式狀態
+  useEffect(() => {
+    // 檢查URL參數
+    const incognitoParam = searchParams.get('incognito');
+    if (incognitoParam !== null) {
+      const incognitoValue = incognitoParam === 'true';
+      setIsIncognito(incognitoValue);
+      localStorage.setItem('incognitoMode', incognitoValue.toString());
+      return;
+    }
+
+    // 檢查localStorage
+    const savedIncognito = localStorage.getItem('incognitoMode');
+    if (savedIncognito !== null) {
+      setIsIncognito(savedIncognito === 'true');
+    }
+  }, [searchParams]);
+
+  const toggleIncognito = () => {
+    const newIncognitoState = !isIncognito;
+    setIsIncognito(newIncognitoState);
+    
+    // 保存到localStorage
+    localStorage.setItem('incognitoMode', newIncognitoState.toString());
+    
+    // 更新URL參數
+    const params = new URLSearchParams(searchParams.toString());
+    if (newIncognitoState) {
+      params.set('incognito', 'true');
+    } else {
+      params.delete('incognito');
+    }
+    
+    const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname;
+    router.replace(newUrl, { scroll: false });
+
+    // 觸發自定義事件，通知其他組件無痕模式狀態變化
+    window.dispatchEvent(new CustomEvent('incognitoModeChanged', { 
+      detail: { isIncognito: newIncognitoState } 
+    }));
+  };
+
+  return (
+    <button
+      onClick={toggleIncognito}
+      className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 ${
+        isIncognito
+          ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 hover:bg-orange-200 dark:hover:bg-orange-900/50'
+          : 'bg-light-secondary dark:bg-dark-secondary text-black/70 dark:text-white/70 hover:bg-light-200 dark:hover:bg-dark-200'
+      } ${className}`}
+      title={isIncognito ? 'Turn off Incognito Mode' : 'Turn on Incognito Mode'}
+    >
+      {isIncognito ? (
+        <EyeOff size={16} />
+      ) : (
+        <Eye size={16} />
+      )}
+      {showLabel && (
+        <span className="text-sm font-medium">
+          {isIncognito ? 'Incognito Mode: ON' : 'Incognito Mode: OFF'}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default IncognitoToggle;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e406ade..d24b3fc 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -10,6 +10,7 @@ import {
   Transition,
 } from '@headlessui/react';
 import jsPDF from 'jspdf';
+import IncognitoToggle from './IncognitoToggle';
 
 const downloadFile = (filename: string, content: string, type: string) => {
   const blob = new Blob([content], { type });
@@ -173,6 +174,7 @@ const Navbar = ({
       <p className="hidden lg:flex">{title}</p>
 
       <div className="flex flex-row items-center space-x-4">
+        <IncognitoToggle showLabel={false} className="hidden lg:flex" />
         <Popover className="relative">
           <PopoverButton className="active:scale-95 transition duration-100 cursor-pointer p-2 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary">
             <Share size={17} />