Умный хакер-помощник

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [theme, setTheme] = useState('default');
  const [chat, setChat] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleSendMessage = () => {
    if (input.trim()) {
      setChat([...chat, { text: input, sender: 'user' }]);
      setInput('');
      // Simulate hacker response
      setTimeout(() => {
        setChat((prevChat) => [...prevChat, { text: 'Hacking in progress...', sender: 'hacker' }]);
      }, 1000);
    }
  };

  useEffect(() => {
    // Add event listener for keyboard shortcut
    const handleKeyDown = (e) => {
      if (e.key === 'F' && e.shiftKey && e.ctrlKey) {
        // Open app logic here
        console.log('App opened with shortcut');
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div className={`App ${theme}`}>
      <div className="sidebar">
        <div className="avatar">
          <img src="https://placehold.co/100x100" alt="Hacker Avatar" />
        </div>
        <div className="pages">
          <button>Chat</button>
          <button>Entertainment</button>
          <button>Applications</button>
        </div>
      </div>
      <div className="main-content">
        <div className="chat-window">
          {chat.map((message, index) => (
            <div key={index} className={`message ${message.sender}`}>
              {message.text}
            </div>
          ))}
        </div>
        <div className="input-area">
          <input
            type="text"
            value={input}
            onChange={handleInputChange}
            placeholder="Type a message..."
          />
          <button onClick={handleSendMessage}>Send</button>
        </div>
      </div>
    </div>
  );
};

export default App;