472 lines
No EOL
26 KiB
TypeScript
472 lines
No EOL
26 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { MessageCircle, Send, X, Minimize2, Maximize2, Monitor, Terminal, Cpu, HardDrive, ChevronUp, ChevronDown } 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());
|
|
const [isMaximized, setIsMaximized] = useState(false);
|
|
const [isMinimized, setIsMinimized] = useState(false);
|
|
|
|
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 toggleMaximize = () => {
|
|
if (isMinimized) {
|
|
setIsMinimized(false);
|
|
}
|
|
setIsMaximized(!isMaximized);
|
|
};
|
|
|
|
const toggleMinimize = () => {
|
|
setIsMinimized(!isMinimized);
|
|
if (isMaximized) {
|
|
setIsMaximized(false);
|
|
}
|
|
};
|
|
|
|
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>;
|
|
});
|
|
};
|
|
|
|
const getContainerHeight = () => {
|
|
if (isMinimized) return 'h-4';
|
|
if (isMaximized) return 'h-screen fixed inset-0 z-50 bg-background';
|
|
return isMobile ? 'h-64' : 'h-32';
|
|
};
|
|
|
|
const scrollbarStyles = `
|
|
/* Webkit browsers */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(128, 128, 128, 0.3);
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(128, 128, 128, 0.5);
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(128, 128, 128, 0.3) rgba(0, 0, 0, 0.1);
|
|
}
|
|
`;
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: scrollbarStyles }} />
|
|
<div className={`${getContainerHeight()} bg-gradient-to-br from-background via-background to-muted/20 border-t border-border shadow-2xl ${className}`}>
|
|
{isMinimized ? (
|
|
<div className="h-full flex items-center justify-between px-2 bg-gradient-to-r from-muted/50 to-secondary/50 border-b border-border backdrop-blur-sm cursor-pointer" onClick={toggleMinimize}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full animate-pulse shadow-lg" />
|
|
<span className="text-xs font-mono text-foreground font-medium">TERMINAL</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-mono bg-secondary/50 px-1.5 py-0.5 rounded-full">
|
|
{formatTime(currentTime)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<ResizablePanelGroup direction="vertical" className="h-full">
|
|
<ResizablePanel defaultSize={40} minSize={30}>
|
|
<div className="h-full flex flex-col bg-gradient-to-br from-card via-card to-secondary/20 border-b border-border/50 shadow-inner">
|
|
<div className="flex items-center justify-between p-1.5 bg-gradient-to-r from-muted/80 to-secondary/80 border-b border-border/50 backdrop-blur-sm cursor-pointer" onClick={toggleMaximize}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-1 bg-primary/10 rounded border border-primary/20">
|
|
<Terminal className="w-3 h-3 text-primary" />
|
|
</div>
|
|
<span className="text-xs font-mono text-foreground font-medium">MOBILE TERMINAL</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-xs text-muted-foreground font-mono bg-background/50 px-1.5 py-0.5 rounded-full border border-border/50">
|
|
{formatTime(currentTime)}
|
|
</div>
|
|
<div className="w-2 h-2 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full animate-pulse shadow-lg" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-2">
|
|
<div className="flex items-center gap-1 bg-gradient-to-r from-background to-background/80 border border-input/50 rounded shadow-inner backdrop-blur-sm">
|
|
<span className="text-primary text-xs font-mono pl-2 font-bold">></span>
|
|
<input
|
|
placeholder="Enter command..."
|
|
className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground border-0 outline-none py-2 pr-2 text-xs font-mono"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
onKeyPress={handleKeyPress}
|
|
/>
|
|
<button
|
|
onClick={handleSendMessage}
|
|
className="bg-gradient-to-r from-primary to-primary/90 text-primary-foreground hover:from-primary/90 hover:to-primary/80 rounded-r px-3 py-2 text-xs font-mono transition-all duration-200 flex items-center gap-1 shadow-lg hover:shadow-xl transform hover:scale-105"
|
|
>
|
|
<Send className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableHandle className="bg-gradient-to-r from-border to-primary/20 hover:from-primary/30 hover:to-primary/40 transition-all duration-200" />
|
|
<ResizablePanel defaultSize={60} minSize={40}>
|
|
<div className="h-full flex flex-col bg-gradient-to-br from-card via-card to-accent/10">
|
|
<div className="flex items-center justify-between p-1.5 bg-gradient-to-r from-muted/80 to-secondary/80 border-b border-border/50 backdrop-blur-sm cursor-pointer" onClick={toggleMinimize}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-1 bg-primary/10 rounded border border-primary/20">
|
|
<Monitor className="w-3 h-3 text-primary" />
|
|
</div>
|
|
<span className="text-xs font-mono text-foreground font-medium">OUTPUT</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="w-2 h-2 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full animate-pulse shadow-lg" />
|
|
<span className="text-xs text-muted-foreground font-mono bg-background/50 px-1.5 py-0.5 rounded-full border border-border/50">READY</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-2 overflow-y-auto bg-gradient-to-br from-background/50 to-secondary/20 font-mono text-xs backdrop-blur-sm">
|
|
{messages.length === 0 ? (
|
|
<div className="text-muted-foreground text-center py-8">
|
|
<div className="animate-pulse text-primary text-sm font-bold mb-1">● SYSTEM READY ●</div>
|
|
<div className="mt-1 text-xs bg-secondary/30 px-2 py-0.5 rounded-full inline-block">Awaiting input...</div>
|
|
</div>
|
|
) : (
|
|
messages.map((message, index) => (
|
|
<div key={index} className="mb-2 group">
|
|
<div className="text-xs text-muted-foreground mb-1 bg-secondary/20 px-1.5 py-0.5 rounded-t">
|
|
[{formatTime(message.timestamp)}] {message.sender.toUpperCase()}:
|
|
</div>
|
|
<div className={`p-2 rounded-b rounded-tr shadow-sm transition-all duration-200 group-hover:shadow-md border ${message.sender === 'user'
|
|
? 'bg-gradient-to-r from-primary/10 to-primary/5 border-primary/30 text-foreground'
|
|
: message.sender === 'system'
|
|
? 'bg-gradient-to-r from-accent/50 to-accent/30 border-accent/50 text-accent-foreground'
|
|
: 'bg-gradient-to-r from-secondary/50 to-secondary/30 border-secondary/50 text-secondary-foreground'
|
|
}`}>
|
|
{message.text}
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: scrollbarStyles }} />
|
|
<div className={`${getContainerHeight()} bg-gradient-to-br from-background via-background to-muted/20 border-t border-border shadow-2xl ${className}`}>
|
|
{isMinimized ? (
|
|
<div className="h-full flex items-center justify-between px-3 bg-gradient-to-r from-muted/50 to-secondary/50 border-b border-border backdrop-blur-sm cursor-pointer" onClick={toggleMinimize}>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="w-2 h-2 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full animate-pulse shadow-lg" />
|
|
<span className="text-xs font-mono text-foreground font-medium">TERMINAL READY</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-mono bg-secondary/50 px-1.5 py-0.5 rounded-full">
|
|
MSG: {messages.length}
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-mono bg-secondary/50 px-1.5 py-0.5 rounded-full">
|
|
{formatTime(currentTime)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<ResizablePanelGroup direction="horizontal" className="h-full">
|
|
<ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
|
|
<div className="h-full flex flex-col bg-gradient-to-br from-card via-card to-secondary/20 shadow-inner">
|
|
<div className="flex items-center justify-between px-3 py-1 bg-gradient-to-r from-muted/80 to-secondary/80 border-b border-border/50 backdrop-blur-sm cursor-pointer" onClick={toggleMaximize}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-0.5 bg-primary/10 rounded border border-primary/20">
|
|
<Cpu className="w-3 h-3 text-primary" />
|
|
</div>
|
|
<span className="text-xs font-mono text-foreground font-medium">STATUS</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center gap-1 text-xs font-mono text-muted-foreground">
|
|
<span className="inline-flex items-center gap-0.5">
|
|
<span className="relative w-1.5 h-1.5 rounded-sm bg-gradient-to-br from-yellow-400 to-orange-500 border border-yellow-600 inline-block shadow-sm">
|
|
<span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-primary animate-pulse border border-background shadow-md" />
|
|
</span>
|
|
<span className="text-xs">Inbox</span>
|
|
</span>
|
|
<span className="mx-0.5 text-border">|</span>
|
|
<span className="inline-flex items-center gap-0.5">
|
|
<span className="w-1.5 h-1.5 rounded-sm bg-gradient-to-br from-green-400 to-emerald-500 border border-green-600 inline-block shadow-sm" />
|
|
<span className="text-xs">Tasks</span>
|
|
</span>
|
|
<span className="mx-0.5 text-border">|</span>
|
|
<span className="inline-flex items-center gap-0.5">
|
|
<span className="w-1.5 h-1.5 rounded-sm bg-gradient-to-br from-red-400 to-rose-500 border border-red-600 inline-block shadow-sm" />
|
|
<span className="text-xs">Meet</span>
|
|
</span>
|
|
<span className="mx-0.5 text-border">|</span>
|
|
<span className="inline-flex items-center gap-0.5">
|
|
<span className="w-1.5 h-1.5 rounded-sm bg-gradient-to-br from-blue-400 to-cyan-500 border border-blue-600 inline-block shadow-sm" />
|
|
<span className="text-xs">Chat</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 flex items-center px-2 py-0.5 border-b border-border/50 bg-gradient-to-r from-secondary/20 to-accent/10">
|
|
<div className="flex items-center gap-0.5 overflow-x-auto w-full">
|
|
{shortcutGroups[0].map((shortcut, index) => (
|
|
<button
|
|
key={index}
|
|
className="flex items-center text-xs cursor-pointer hover:bg-gradient-to-r hover:from-accent/50 hover:to-primary/20 hover:text-accent-foreground px-1.5 py-1 rounded transition-all duration-200 min-w-fit border border-border/50 hover:border-primary/50 bg-gradient-to-r from-background/80 to-background/60 backdrop-blur-sm shadow-sm hover:shadow-md transform hover:scale-105"
|
|
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 py-0.5 bg-gradient-to-r from-secondary/20 to-accent/10">
|
|
<div className="flex items-center gap-0.5 overflow-x-auto w-full">
|
|
{shortcutGroups[1].map((shortcut, index) => (
|
|
<button
|
|
key={index}
|
|
className="flex items-center text-xs cursor-pointer hover:bg-gradient-to-r hover:from-accent/50 hover:to-primary/20 hover:text-accent-foreground px-1.5 py-1 rounded transition-all duration-200 min-w-fit border border-border/50 hover:border-primary/50 bg-gradient-to-r from-background/80 to-background/60 backdrop-blur-sm shadow-sm hover:shadow-md transform hover:scale-105"
|
|
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 className="bg-gradient-to-b from-border to-primary/20 hover:from-primary/30 hover:to-primary/40 transition-all duration-200" />
|
|
<ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
|
|
<div className="h-full flex flex-col bg-gradient-to-br from-card via-card to-secondary/20 border-r border-border/50 shadow-inner">
|
|
<div className="flex items-center justify-between px-3 py-1 bg-gradient-to-r from-muted/80 to-secondary/80 border-b border-border/50 backdrop-blur-sm cursor-pointer" onClick={toggleMinimize}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-0.5 bg-primary/10 rounded border border-primary/20">
|
|
<Terminal className="w-3 h-3 text-primary" />
|
|
</div>
|
|
<span className="text-xs font-mono text-foreground font-medium">INPUT</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-mono bg-background/50 px-1.5 py-0.5 rounded-full border border-border/50">
|
|
CMD
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-2 bg-gradient-to-br from-background/50 to-secondary/20 backdrop-blur-sm">
|
|
<div className="h-full flex flex-col">
|
|
<div className="text-xs text-muted-foreground mb-2 font-mono bg-secondary/20 px-1.5 py-0.5 rounded">
|
|
COMMAND LINE INTERFACE
|
|
</div>
|
|
<div className="flex-1 bg-gradient-to-br from-card to-card/80 border border-input/50 rounded p-2 font-mono text-xs shadow-inner backdrop-blur-sm">
|
|
<div className="flex items-start gap-1">
|
|
<span className="text-primary font-bold">></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-12"
|
|
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 bg-secondary/20 px-1.5 py-0.5 rounded">
|
|
Enter to send • Shift+Enter for new line
|
|
</div>
|
|
<button
|
|
onClick={handleSendMessage}
|
|
className="bg-gradient-to-r from-primary to-primary/90 text-primary-foreground hover:from-primary/90 hover:to-primary/80 rounded px-3 py-1 text-xs font-mono transition-all duration-200 flex items-center gap-1 shadow-lg hover:shadow-xl transform hover:scale-105"
|
|
>
|
|
<Send className="w-2.5 h-2.5" />
|
|
SEND
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableHandle className="bg-gradient-to-b from-border to-primary/20 hover:from-primary/30 hover:to-primary/40 transition-all duration-200" />
|
|
<ResizablePanel defaultSize={40} minSize={25}>
|
|
<div className="h-full flex flex-col bg-gradient-to-br from-card via-card to-accent/10 shadow-inner">
|
|
<div className="flex items-center justify-between px-3 py-1 bg-gradient-to-r from-muted/80 to-secondary/80 border-b border-border/50 backdrop-blur-sm cursor-pointer" onClick={toggleMaximize}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-0.5 bg-primary/10 rounded border border-primary/20">
|
|
<Monitor className="w-3 h-3 text-primary" />
|
|
</div>
|
|
<span className="text-xs font-mono text-foreground font-medium">OUTPUT</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted-foreground font-mono bg-background/50 px-1.5 py-0.5 rounded-full border border-border/50">
|
|
MSG: {messages.length}
|
|
</span>
|
|
<div className="w-2 h-2 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full animate-pulse shadow-lg" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-2 overflow-y-auto bg-gradient-to-br from-background/50 to-secondary/20 font-mono text-xs backdrop-blur-sm">
|
|
{messages.length === 0 ? (
|
|
<div className="text-muted-foreground text-center py-8">
|
|
<div className="animate-pulse text-primary text-sm font-bold mb-2">● SYSTEM READY ●</div>
|
|
<div className="mt-1 text-xs space-y-1">
|
|
<div className="bg-secondary/30 px-2 py-0.5 rounded-full inline-block">Waiting for input...</div>
|
|
<div className="text-muted-foreground/70 bg-secondary/20 px-2 py-0.5 rounded-full inline-block">
|
|
Use F-keys or Ctrl commands
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{messages.map((message, index) => (
|
|
<div key={index} className="group">
|
|
<div className="text-xs text-muted-foreground mb-1 flex justify-between bg-secondary/20 px-1.5 py-0.5 rounded-t">
|
|
<span>[{formatTime(message.timestamp)}] {message.sender.toUpperCase()}:</span>
|
|
<span className="bg-primary/20 px-1 py-0.5 rounded-full text-primary">#{index + 1}</span>
|
|
</div>
|
|
<div className={`p-2 rounded-b rounded-tr shadow-sm transition-all duration-200 group-hover:shadow-lg border backdrop-blur-sm ${message.sender === 'user'
|
|
? 'bg-gradient-to-r from-primary/10 to-primary/5 border-primary/30 text-foreground'
|
|
: message.sender === 'system'
|
|
? 'bg-gradient-to-r from-accent/50 to-accent/30 border-accent/50 text-accent-foreground'
|
|
: 'bg-gradient-to-r from-secondary/50 to-secondary/30 border-secondary/50 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-gradient-to-r from-muted/50 to-secondary/50 border-t border-border/50 backdrop-blur-sm">
|
|
<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 bg-background/50 px-1.5 py-0.5 rounded-full border border-border/50">
|
|
SCROLL: {messages.length > 10 ? 'AUTO' : 'MANUAL'}
|
|
</div>
|
|
<div className="w-1 h-1 bg-gradient-to-br from-primary to-primary/70 rounded-full animate-pulse shadow-sm" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Footer; |