Make AI chat fullscreen work

Fix: wire AIChat to Browser fullscreen API, aligning its behavior with game pages. Import and use useBrowserFullscreen, store fullscreen state, ensure Escape exits fullscreen, and toggle via a consistent fullscreen handler (removing non-functional placeholder). This brings true fullscreen for AI chat along with consistent UX with games.

X-Lovable-Edit-ID: edt-2cec4af2-d3d6-49ef-93f8-6cb09b300ed6
This commit is contained in:
gpt-engineer-app[bot]
2026-01-10 23:21:57 +00:00
+15 -5
View File
@@ -8,6 +8,7 @@ import { useSettings } from '@/contexts/SettingsContext';
import { useAchievements, incrementAiMessageCount } from '@/contexts/AchievementsContext'; import { useAchievements, incrementAiMessageCount } from '@/contexts/AchievementsContext';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import GlitchText from '@/components/GlitchText'; import GlitchText from '@/components/GlitchText';
import { useBrowserFullscreen } from '@/hooks/useGameDimensions';
import MessageContent from '@/components/MessageContent'; import MessageContent from '@/components/MessageContent';
import { AI_PROVIDERS, AIProvider, getProvider, CUSTOM_API_STORAGE_KEY } from '@/lib/aiProviders'; import { AI_PROVIDERS, AIProvider, getProvider, CUSTOM_API_STORAGE_KEY } from '@/lib/aiProviders';
import { import {
@@ -82,6 +83,7 @@ const AIChat = () => {
const { playSound } = useSettings(); const { playSound } = useSettings();
const { checkAiAchievements } = useAchievements(); const { checkAiAchievements } = useAchievements();
const { toast } = useToast(); const { toast } = useToast();
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
// Persist messages to localStorage // Persist messages to localStorage
useEffect(() => { useEffect(() => {
@@ -109,12 +111,24 @@ const AIChat = () => {
const handleEscape = (e: KeyboardEvent) => { const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isFullscreen) { if (e.key === 'Escape' && isFullscreen) {
setIsFullscreen(false); setIsFullscreen(false);
exitFullscreen();
playSound('click'); playSound('click');
} }
}; };
window.addEventListener('keydown', handleEscape); window.addEventListener('keydown', handleEscape);
return () => window.removeEventListener('keydown', handleEscape); return () => window.removeEventListener('keydown', handleEscape);
}, [isFullscreen, playSound]); }, [isFullscreen, playSound, exitFullscreen]);
const toggleFullscreen = async () => {
if (!isFullscreen) {
setIsFullscreen(true);
await enterFullscreen();
} else {
setIsFullscreen(false);
await exitFullscreen();
}
playSound('click');
};
useEffect(() => { useEffect(() => {
if (scrollRef.current) { if (scrollRef.current) {
@@ -367,10 +381,6 @@ const AIChat = () => {
} }
}; };
const toggleFullscreen = () => {
setIsFullscreen(!isFullscreen);
playSound('click');
};
return ( return (
<motion.div <motion.div