Fix AIChat fullscreen
- Integrate browser fullscreen in AIChat - Sync Escape handling with exitFullscreen - Update UI layout for mobile readability - Adjust fullscreen toggle to use useBrowserFullscreen - Minor UI tweaks to memory indicator and controls X-Lovable-Edit-ID: edt-6e746bae-41a5-43a4-b628-c56d2a857b0e
This commit is contained in:
gpt-engineer-app[bot]
+32
-22
@@ -10,6 +10,7 @@ import { useToast } from '@/hooks/use-toast';
|
||||
import GlitchText from '@/components/GlitchText';
|
||||
import MessageContent from '@/components/MessageContent';
|
||||
import { AI_PROVIDERS, AIProvider, getProvider, CUSTOM_API_STORAGE_KEY } from '@/lib/aiProviders';
|
||||
import { useBrowserFullscreen } from '@/hooks/useGameDimensions';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -104,21 +105,30 @@ const AIChat = () => {
|
||||
}
|
||||
}, [customApiConfig]);
|
||||
|
||||
// Exit fullscreen on Escape key
|
||||
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
|
||||
const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
|
||||
|
||||
// Exit fullscreen on Escape key
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isFullscreen) {
|
||||
setIsFullscreen(false);
|
||||
exitFullscreen();
|
||||
playSound('click');
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleEscape);
|
||||
return () => window.removeEventListener('keydown', handleEscape);
|
||||
}, [isFullscreen, playSound]);
|
||||
}, [isFullscreen, playSound, exitFullscreen]);
|
||||
|
||||
const toggleFullscreen = () => {
|
||||
setIsFullscreen(prev => !prev);
|
||||
const toggleFullscreen = async () => {
|
||||
if (!isFullscreen) {
|
||||
setIsFullscreen(true);
|
||||
await enterFullscreen();
|
||||
} else {
|
||||
setIsFullscreen(false);
|
||||
await exitFullscreen();
|
||||
}
|
||||
playSound('click');
|
||||
};
|
||||
|
||||
@@ -379,21 +389,21 @@ const AIChat = () => {
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`flex flex-col ${
|
||||
isFullscreen
|
||||
? 'fixed inset-0 z-50 bg-background p-4 md:p-8'
|
||||
? 'fixed inset-0 z-50 bg-background p-3 md:p-8 overflow-hidden'
|
||||
: 'h-full'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-4">
|
||||
<div className="flex items-center justify-between gap-2 mb-3 flex-shrink-0">
|
||||
<GlitchText
|
||||
text="AI Terminal"
|
||||
className="font-minecraft text-2xl md:text-3xl text-primary text-glow"
|
||||
className={`font-minecraft ${isMobile ? 'text-xl' : 'text-2xl md:text-3xl'} text-primary text-glow`}
|
||||
/>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex items-center gap-1 sm:gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleFullscreen}
|
||||
className="text-primary hover:bg-primary/20 order-first sm:order-last"
|
||||
className="text-primary hover:bg-primary/20 p-2"
|
||||
title={isFullscreen ? 'Exit fullscreen (Esc)' : 'Fullscreen'}
|
||||
>
|
||||
{isFullscreen ? (
|
||||
@@ -404,8 +414,8 @@ const AIChat = () => {
|
||||
</Button>
|
||||
{messages.length > 0 && (
|
||||
<>
|
||||
<div className="flex items-center gap-2 px-2 py-1 border border-primary/30 rounded text-xs font-pixel">
|
||||
<span className="text-muted-foreground">Memory:</span>
|
||||
<div className="hidden sm:flex items-center gap-2 px-2 py-1 border border-primary/30 rounded text-xs font-pixel">
|
||||
<span className="text-muted-foreground">Mem:</span>
|
||||
<span
|
||||
className={`${
|
||||
(() => {
|
||||
@@ -437,24 +447,24 @@ const AIChat = () => {
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={clearChat}
|
||||
className="text-primary hover:bg-primary/20"
|
||||
className="text-primary hover:bg-primary/20 p-2"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Clear
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<span className="hidden sm:inline ml-2">Clear</span>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="text-muted-foreground font-pixel text-sm">{'>'} Model:</span>
|
||||
<div className="flex items-center gap-2 mb-3 flex-shrink-0 overflow-x-auto">
|
||||
<span className="text-muted-foreground font-pixel text-xs sm:text-sm whitespace-nowrap">{'>'} Model:</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-primary hover:bg-primary/20 font-pixel text-sm gap-1"
|
||||
className="text-primary hover:bg-primary/20 font-pixel text-xs sm:text-sm gap-1 px-2"
|
||||
>
|
||||
{getProvider(selectedProvider).name}
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
@@ -507,11 +517,11 @@ const AIChat = () => {
|
||||
</div>
|
||||
|
||||
<ScrollArea
|
||||
className="flex-1 border border-primary/30 rounded-lg p-4 mb-4 bg-background/50"
|
||||
className="flex-1 min-h-0 border border-primary/30 rounded-lg p-2 sm:p-4 mb-3 bg-background/50"
|
||||
ref={scrollRef}
|
||||
>
|
||||
{messages.length === 0 ? (
|
||||
<div className="h-full flex items-center justify-center text-muted-foreground">
|
||||
<div className="h-full flex items-center justify-center text-muted-foreground py-8">
|
||||
<div className="text-center">
|
||||
<Bot className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<p className="font-pixel text-sm">No messages yet.</p>
|
||||
@@ -549,7 +559,7 @@ const AIChat = () => {
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`max-w-[80%] p-3 rounded-lg ${
|
||||
className={`max-w-[85%] sm:max-w-[80%] p-2 sm:p-3 rounded-lg text-sm ${
|
||||
message.role === 'user'
|
||||
? 'bg-primary/20 border border-primary/50'
|
||||
: 'bg-secondary/50 border border-primary/30'
|
||||
@@ -590,14 +600,14 @@ const AIChat = () => {
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-2 flex-shrink-0">
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Type your message..."
|
||||
disabled={isLoading}
|
||||
className="resize-none font-pixel text-sm bg-background/50 border-primary/50 text-primary placeholder:text-muted-foreground focus:border-primary"
|
||||
className="resize-none font-pixel text-xs sm:text-sm bg-background/50 border-primary/50 text-primary placeholder:text-muted-foreground focus:border-primary min-h-[60px]"
|
||||
rows={2}
|
||||
/>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user