Aktualizovat sk1/frontend/src/components/ChatInput.jsx

sk1/frontend/src/components/ChatInput.jsx

@@ -3,33 +3,41 @@ import { Send } from 'lucide-react';
 
 const ChatInput = ({ onSubmit }) => {
   const [input, setInput] = useState('');
+  const [error, setError] = useState('');
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log("Formulár bol odoslaný!", input); // Добавили лог
+    setError(""); // reset chyby
+
     if (input.trim()) {
       try {
-      const response = await fetch("https://hate-backend-production.up.railway.app/api/predict", {
+        const response = await fetch("https://hate-backend-production.up.railway.app/api/predict", {
-        method: "POST",
+          method: "POST",
-        headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ text: input }),
+          body: JSON.stringify({ text: input }),
-      });
+        });
-      const data = await response.json();
-      //alert(`Výsledok analýzy: ${data.prediction}`);
 
-      if (onSubmit) 
+        const data = await response.json();
-      {
+
-        onSubmit(input, data.prediction);
+        if (!response.ok) {
+          setError(data.error || "Chyba pri analýze textu.");
+          return;
+        }
+
+        if (onSubmit) {
+          onSubmit(input, data.prediction);
+        }
+
+        setInput('');
+      } catch (error) {
+        console.error("Chyba požiadavky:", error);
+        setError("Nepodarilo sa spojiť so serverom.");
       }
-      setInput('');
+    } else {
-    }  catch (error) {
+      setError("Text nesmie byť prázdny.");
-      console.error("Ошибка запроса:", error);
-      alert("Chyba pri analýze textu!");
-    }
     }
   };
 
-
   return (
     <div className="input-container">
       <form onSubmit={handleSubmit} className="input-wrapper">
@@ -40,12 +48,20 @@ const ChatInput = ({ onSubmit }) => {
           placeholder="Zadajte text na analýzu"
           className="text-input"
         />
-        <button type="submit" className="submit-button">
+        <button type="submit" className="submit-button" title="Spustiť analýzu">
           <Send size={24} />
         </button>
       </form>
+
+      {error && (
+        <div className="mt-8 text-red-500 font-semibold text-center">
+          ⚠️ {error}
+        </div>
+      )}
     </div>
   );
 };
 
 export default ChatInput;
+
+