Add files via upload
This commit is contained in:
parent
3660fb8bdd
commit
26952ff6c8
4 changed files with 97 additions and 3 deletions
|
|
@ -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,
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
84
src/components/IncognitoToggle.tsx
Normal file
84
src/components/IncognitoToggle.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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} />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue