355 lines
16 KiB
TypeScript
355 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { MessageCircle, Send, X, Minimize2, Maximize2, Monitor, Terminal, Cpu, HardDrive } from 'lucide-react';
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable";
|
|
|
|
const Footer = ({ className = "", shortcuts }) => {
|
|
const [messages, setMessages] = useState([]);
|
|
const [inputValue, setInputValue] = useState('');
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const checkMobile = () => {
|
|
setIsMobile(window.innerWidth < 768);
|
|
};
|
|
checkMobile();
|
|
window.addEventListener('resize', checkMobile);
|
|
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 1000);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', checkMobile);
|
|
clearInterval(timer);
|
|
};
|
|
}, []);
|
|
|
|
const defaultShortcuts = [
|
|
[
|
|
{ key: "F1", label: "Help", action: () => addSystemMessage("F1: Help system activated") },
|
|
{ key: "F2", label: "Save", action: () => addSystemMessage("F2: Save operation") },
|
|
{ key: "F3", label: "Search", action: () => addSystemMessage("F3: Search mode") },
|
|
{ key: "F4", label: "Edit", action: () => addSystemMessage("F4: Edit mode") },
|
|
{ key: "F5", label: "Refresh", action: () => addSystemMessage("F5: System refresh") },
|
|
{ key: "F6", label: "Copy", action: () => addSystemMessage("F6: Copy operation") },
|
|
{ key: "F7", label: "use client", action: () => addSystemMessage("F7: use client operation") },
|
|
{ key: "F8", label: "Delete", action: () => addSystemMessage("F8: Delete operation") },
|
|
{ key: "F9", label: "Menu", action: () => addSystemMessage("F9: Menu opened") },
|
|
{ key: "F10", label: "Exit", action: () => addSystemMessage("F10: Exit requested") },
|
|
],
|
|
[
|
|
{ key: "Ctrl+N", label: "New", action: () => addSystemMessage("New file created") },
|
|
{ key: "Ctrl+O", label: "Open", action: () => addSystemMessage("Open file dialog") },
|
|
{ key: "Ctrl+S", label: "Save", action: () => addSystemMessage("File saved") },
|
|
{ key: "Ctrl+P", label: "Print", action: () => addSystemMessage("Print dialog") },
|
|
{ key: "Ctrl+X", label: "Cut", action: () => addSystemMessage("Cut to clipboard") },
|
|
{ key: "Ctrl+C", label: "Copy", action: () => addSystemMessage("Copied to clipboard") },
|
|
{ key: "Ctrl+V", label: "Paste", action: () => addSystemMessage("Pasted from clipboard") },
|
|
{ key: "Ctrl+Z", label: "Undo", action: () => addSystemMessage("Undo last action") },
|
|
{ key: "Ctrl+Y", label: "Redo", action: () => addSystemMessage("Redo last action") },
|
|
{ key: "Ctrl+A", label: "Select", action: () => addSystemMessage("Select all") },
|
|
]
|
|
];
|
|
|
|
const shortcutGroups = shortcuts || defaultShortcuts;
|
|
|
|
const addSystemMessage = (text) => {
|
|
setMessages(prev => [...prev, { text, sender: 'system', timestamp: new Date() }]);
|
|
};
|
|
|
|
const handleSendMessage = () => {
|
|
if (inputValue.trim() !== '') {
|
|
const userMessage = { text: inputValue, sender: 'user', timestamp: new Date() };
|
|
setMessages(prev => [...prev, userMessage]);
|
|
setInputValue('');
|
|
setTimeout(() => {
|
|
const responses = [
|
|
"SYSTEM: Command processed successfully",
|
|
"ASSISTANT: Processing your request...",
|
|
"BOT: I understand your query. How can I assist further?",
|
|
"SYSTEM: Operation completed. Status: OK",
|
|
"ASSISTANT: Ready for next command",
|
|
];
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
|
|
setMessages(prev => [...prev, { text: randomResponse, sender: 'bot', timestamp: new Date() }]);
|
|
}, 800);
|
|
}
|
|
};
|
|
|
|
const handleKeyPress = (e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSendMessage();
|
|
}
|
|
};
|
|
|
|
const formatTime = (date) => {
|
|
return date.toLocaleTimeString('en-US', {
|
|
hour12: false,
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
});
|
|
};
|
|
|
|
const formatShortcutKey = (key) => {
|
|
const parts = key.split(/(\+)/);
|
|
return parts.map((part, index) => {
|
|
if (part === '+') {
|
|
return part;
|
|
}
|
|
return <span key={index} className="text-primary">{part}</span>;
|
|
});
|
|
};
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<div className={`h-80 bg-background border-t border-border ${className}`}>
|
|
<ResizablePanelGroup direction="vertical" className="h-full">
|
|
<ResizablePanel defaultSize={40} minSize={30}>
|
|
<div className="h-full flex flex-col bg-card border-b border-border">
|
|
<div className="flex items-center justify-between p-2 bg-muted border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<Terminal className="w-4 h-4 text-primary" />
|
|
<span className="text-sm font-mono text-foreground">MOBILE TERMINAL</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-mono">
|
|
{formatTime(currentTime)}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-3">
|
|
<div className="flex items-center gap-2 bg-background border border-input rounded-md">
|
|
<span className="text-primary text-sm font-mono pl-3">></span>
|
|
<input
|
|
placeholder="Enter command..."
|
|
className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground border-0 outline-none py-2 pr-3 text-sm font-mono"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
onKeyPress={handleKeyPress}
|
|
/>
|
|
<button
|
|
onClick={handleSendMessage}
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-r-md px-3 py-2 text-sm font-mono transition-colors flex items-center gap-1"
|
|
>
|
|
<Send className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableHandle />
|
|
<ResizablePanel defaultSize={60} minSize={40}>
|
|
<div className="h-full flex flex-col bg-card">
|
|
<div className="flex items-center justify-between p-2 bg-muted border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<Monitor className="w-4 h-4 text-primary" />
|
|
<span className="text-sm font-mono text-foreground">OUTPUT</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
|
<span className="text-xs text-muted-foreground font-mono">READY</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-3 overflow-y-auto bg-background font-mono text-sm">
|
|
{messages.length === 0 ? (
|
|
<div className="text-muted-foreground text-center py-8">
|
|
<div className="animate-pulse text-primary">● SYSTEM READY ●</div>
|
|
<div className="mt-2 text-xs">Awaiting input...</div>
|
|
</div>
|
|
) : (
|
|
messages.map((message, index) => (
|
|
<div key={index} className="mb-3">
|
|
<div className="text-xs text-muted-foreground mb-1">
|
|
[{formatTime(message.timestamp)}] {message.sender.toUpperCase()}:
|
|
</div>
|
|
<div className={`p-2 rounded border ${
|
|
message.sender === 'user'
|
|
? 'bg-primary/10 border-primary text-foreground'
|
|
: message.sender === 'system'
|
|
? 'bg-accent/50 border-accent text-accent-foreground'
|
|
: 'bg-secondary/50 border-secondary text-secondary-foreground'
|
|
}`}>
|
|
{message.text}
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`h-48 bg-background border-t border-border ${className}`}>
|
|
<ResizablePanelGroup direction="horizontal" className="h-full">
|
|
<ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
|
|
<div className="h-full flex flex-col bg-card">
|
|
<div className="flex items-center justify-between px-3 py-1 bg-muted border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<Cpu className="w-3 h-3 text-primary" />
|
|
<span className="text-xs font-mono text-foreground">SYSTEM v3.0</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<HardDrive className="w-3 h-3 text-muted-foreground" />
|
|
<span className="text-xs font-mono text-muted-foreground">{formatTime(currentTime)}</span>
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 flex items-center px-2 border-b border-border bg-secondary/20">
|
|
<div className="flex items-center gap-1 overflow-x-auto w-full pb-1">
|
|
{shortcutGroups[0].map((shortcut, index) => (
|
|
<button
|
|
key={index}
|
|
className="flex items-center text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground px-2 py-1 rounded transition-colors min-w-fit border border-border hover:border-primary bg-background"
|
|
onClick={shortcut.action}
|
|
>
|
|
<span className="font-bold text-primary mr-1">{formatShortcutKey(shortcut.key)}</span>
|
|
<span className="text-muted-foreground">{shortcut.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 flex items-center px-2 bg-secondary/20">
|
|
<div className="flex items-center gap-1 overflow-x-auto w-full pb-1">
|
|
{shortcutGroups[1].map((shortcut, index) => (
|
|
<button
|
|
key={index}
|
|
className="flex items-center text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground px-2 py-1 rounded transition-colors min-w-fit border border-border hover:border-primary bg-background"
|
|
onClick={shortcut.action}
|
|
>
|
|
<span className="font-bold text-primary mr-1">{formatShortcutKey(shortcut.key)}</span>
|
|
<span className="text-muted-foreground">{shortcut.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableHandle />
|
|
<ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
|
|
<div className="h-full flex flex-col bg-card border-r border-border">
|
|
<div className="flex items-center justify-between p-2 bg-muted border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<Terminal className="w-4 h-4 text-primary" />
|
|
<span className="text-sm font-mono text-foreground">INPUT</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-mono">
|
|
CMD
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-3 bg-background">
|
|
<div className="h-full flex flex-col">
|
|
<div className="text-xs text-muted-foreground mb-2 font-mono">
|
|
COMMAND LINE INTERFACE
|
|
</div>
|
|
<div className="flex-1 bg-card border border-input rounded-md p-3 font-mono text-sm">
|
|
<div className="flex items-start gap-2">
|
|
<span className="text-primary">></span>
|
|
<textarea
|
|
placeholder="Enter your command or query here..."
|
|
className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground border-0 outline-none resize-none min-h-20"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSendMessage();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 flex justify-between items-center">
|
|
<div className="text-xs text-muted-foreground font-mono">
|
|
Enter to send • Shift+Enter for new line
|
|
</div>
|
|
<button
|
|
onClick={handleSendMessage}
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-mono transition-colors flex items-center gap-1"
|
|
>
|
|
<Send className="w-3 h-3" />
|
|
SEND
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableHandle />
|
|
<ResizablePanel defaultSize={40} minSize={25}>
|
|
<div className="h-full flex flex-col bg-card">
|
|
<div className="flex items-center justify-between p-2 bg-muted border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<Monitor className="w-4 h-4 text-primary" />
|
|
<span className="text-sm font-mono text-foreground">OUTPUT</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted-foreground font-mono">
|
|
MSG: {messages.length}
|
|
</span>
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-3 overflow-y-auto bg-background font-mono text-sm">
|
|
{messages.length === 0 ? (
|
|
<div className="text-muted-foreground text-center py-8">
|
|
<div className="animate-pulse text-primary text-lg">● SYSTEM READY ●</div>
|
|
<div className="mt-2 text-xs">
|
|
<div>Waiting for input...</div>
|
|
<div className="mt-1 text-muted-foreground/70">
|
|
Use F-keys or Ctrl commands
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{messages.map((message, index) => (
|
|
<div key={index} className="group">
|
|
<div className="text-xs text-muted-foreground mb-1 flex justify-between">
|
|
<span>[{formatTime(message.timestamp)}] {message.sender.toUpperCase()}:</span>
|
|
<span>#{index + 1}</span>
|
|
</div>
|
|
<div className={`p-3 rounded border transition-all group-hover:shadow-sm ${
|
|
message.sender === 'user'
|
|
? 'bg-primary/10 border-primary text-foreground'
|
|
: message.sender === 'system'
|
|
? 'bg-accent/50 border-accent text-accent-foreground'
|
|
: 'bg-secondary/50 border-secondary text-secondary-foreground'
|
|
}`}>
|
|
<div className="whitespace-pre-wrap break-words">
|
|
{message.text}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-between px-3 py-1 bg-muted border-t border-border">
|
|
<div className="text-xs text-muted-foreground font-mono">
|
|
Ready for input
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-xs text-muted-foreground font-mono">
|
|
SCROLL: {messages.length > 10 ? 'AUTO' : 'MANUAL'}
|
|
</div>
|
|
<div className="w-1 h-1 bg-primary rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|