jory/personal_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2026-01-15 09:41:01 +00:00
parent 2152a3ae21
commit 771e214dd6
1 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/AIChat.tsx
+32 -22
View File
@@ -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