import { useChat } from './useChat';
import './App.css';

const App: React.FC = () => {
  const { messages, input, setInput, isLoading, endRef, send } = useChat();

  return (
    <div className="app">
      <header>
        <h1>Ollama Chat</h1>
      </header>
      <main>
        {messages.map((m, i) => (
          <div key={i} className={`msg ${m.role}`}>
            <span className="text">{m.content}</span>
          </div>
        ))}
        {isLoading && <div className="msg assistant">...</div>}
        <div ref={endRef} />
      </main>
      <footer>
        <form onSubmit={send} className="input-form">
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Nachricht senden…"
            disabled={isLoading}
          />
          <button
            type="submit"
            disabled={!input.trim() || isLoading}
            className="send"
          >
            Senden
          </button>
        </form>
      </footer>
    </div>
  );
};

export default App;

