From 9d9e53ef72d175631ee2ced789c898f382173652 Mon Sep 17 00:00:00 2001
From: Tetiana Mohorian <tetiana.mohorian@student.tuke.sk>
Date: Tue, 18 Mar 2025 21:08:49 +0000
Subject: [PATCH] =?UTF-8?q?Nahr=C3=A1t=20soubory=20do=20=E2=80=9Ez1/fronte?=
 =?UTF-8?q?nd/src/components=E2=80=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 z1/frontend/src/components/ChatInput.jsx  | 51 +++++++++++++++++++++++
 z1/frontend/src/components/ChatWindow.jsx | 16 +++++++
 z1/frontend/src/components/Footer.jsx     | 20 +++++++++
 z1/frontend/src/components/Header.jsx     |  9 ++++
 z1/frontend/src/components/InfoBox.jsx    | 34 +++++++++++++++
 5 files changed, 130 insertions(+)
 create mode 100644 z1/frontend/src/components/ChatInput.jsx
 create mode 100644 z1/frontend/src/components/ChatWindow.jsx
 create mode 100644 z1/frontend/src/components/Footer.jsx
 create mode 100644 z1/frontend/src/components/Header.jsx
 create mode 100644 z1/frontend/src/components/InfoBox.jsx

diff --git a/z1/frontend/src/components/ChatInput.jsx b/z1/frontend/src/components/ChatInput.jsx
new file mode 100644
index 0000000..d62b705
--- /dev/null
+++ b/z1/frontend/src/components/ChatInput.jsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Send } from 'lucide-react';
+
+const ChatInput = ({ onSubmit }) => {
+  const [input, setInput] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    console.log("Formulár bol odoslaný!", input); // Добавили лог
+    if (input.trim()) {
+      try {
+      const response = await fetch("http://localhost:5000/api/predict", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: input }),
+      });
+      const data = await response.json();
+      //alert(`Výsledok analýzy: ${data.prediction}`);
+      
+      if (onSubmit) 
+      {
+        onSubmit(input, data.prediction);
+      }
+      setInput('');
+    }  catch (error) {
+      console.error("Ошибка запроса:", error);
+      alert("Chyba pri analýze textu!");
+    }
+    }
+  };
+
+
+  return (
+    <div className="input-container">
+      <form onSubmit={handleSubmit} className="input-wrapper">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Zadajte text na analýzu"
+          className="text-input"
+        />
+        <button type="submit" className="submit-button">
+          <Send size={24} />
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default ChatInput;
diff --git a/z1/frontend/src/components/ChatWindow.jsx b/z1/frontend/src/components/ChatWindow.jsx
new file mode 100644
index 0000000..1bdd6c2
--- /dev/null
+++ b/z1/frontend/src/components/ChatWindow.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+
+const ChatWindow = ({ messages }) => {
+  return (
+    <div className="chat-window">
+      {messages.map((msg, index) => (
+        <div key={index} className={`message ${msg.sender}`}>
+          {msg.text}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ChatWindow;
diff --git a/z1/frontend/src/components/Footer.jsx b/z1/frontend/src/components/Footer.jsx
new file mode 100644
index 0000000..cb7f882
--- /dev/null
+++ b/z1/frontend/src/components/Footer.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { FaTelegram, FaGooglePlay } from 'react-icons/fa';
+
+const Footer = () => {
+  return (
+    <footer className="footer-container">
+      <p>Created by Tetiana Mohorian</p>
+      <div className="footer-icons">
+        <a href="https://t.me/yourtelegram" target="_blank" rel="noopener noreferrer">
+          <FaTelegram size={32} />
+        </a>
+        <a href="https://play.google.com/store" target="_blank" rel="noopener noreferrer">
+          <FaGooglePlay size={28} />
+        </a>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/z1/frontend/src/components/Header.jsx b/z1/frontend/src/components/Header.jsx
new file mode 100644
index 0000000..83606e7
--- /dev/null
+++ b/z1/frontend/src/components/Header.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Header = () => (
+  <header className="header-container">
+    <h1 className="app-title">Detektor nenávistného jazyka</h1>
+  </header>
+);
+
+export default Header;
diff --git a/z1/frontend/src/components/InfoBox.jsx b/z1/frontend/src/components/InfoBox.jsx
new file mode 100644
index 0000000..7e67568
--- /dev/null
+++ b/z1/frontend/src/components/InfoBox.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import ChatInput from './ChatInput.jsx';
+
+const InfoBox = () => {
+  
+
+
+  const [headerText, setHeaderText] = useState('Analyzujte text na nenávistný jazyk');
+  const [paragraphText, setParagraphText] = useState('Tento nástroj využíva umelú inteligenciu na identifikáciu toxického obsahu v textoch. Stačí zadať text a zistiť, či obsahuje nenávistný jazyk.');
+
+  const handleSendMessage = (userMessage, serverResponse) => {
+    console.log('Отправлено сообщение:', userMessage);
+    console.log('Ответ от сервера:', serverResponse);
+
+    setHeaderText(serverResponse); // В заголовок пишем ответ от сервера
+    setParagraphText(`Váš text bol: "${userMessage}"`);// В параграф пишем сообщение пользователя
+  };
+
+
+ return  (
+
+  
+
+  <div className="info-container">
+    <h2>{headerText}</h2>
+    <p>{paragraphText}</p>
+
+    <ChatInput onSubmit={handleSendMessage} /> {}
+
+  </div>
+);
+}
+
+export default InfoBox;