From 7e131bf638cbde06b03925100eda3b99be16c3cd Mon Sep 17 00:00:00 2001
From: Vyacheslav K <you@example.com>
Date: Wed, 30 Apr 2025 14:27:13 +0300
Subject: [PATCH] some fixes

---
 src/App.css              | 14 +++++++
 src/App.js               | 79 ++++++++++++++++++++--------------------
 src/misc/Message.js      |  6 +--
 src/misc/SendForm.js     |  6 +++
 src/misc/Spinner.js      | 14 +++++++
 src/misc/WaitResponse.js | 25 +++++++++++++
 6 files changed, 102 insertions(+), 42 deletions(-)
 create mode 100644 src/misc/SendForm.js
 create mode 100644 src/misc/Spinner.js
 create mode 100644 src/misc/WaitResponse.js

diff --git a/src/App.css b/src/App.css
index e564177..74a714d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,3 +26,17 @@
   display: none;
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Стилизация общего вида select */
+select {
+ 
+  -webkit-appearance: none; /* Для Chrome, Safari */
+  -moz-appearance: none;    /* Для Firefox */
+  appearance: none;         /* Для остальных браузеров */
+  
+  position: relative;
+}
diff --git a/src/App.js b/src/App.js
index 39d3fd0..e3dbf4b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,19 +3,24 @@
 import SendIcon from './img/paper-plane.png';
 import { useState } from 'react';
 import Message from './misc/Message';
+import SendForm from './misc/SendForm';
+import Spinner from './misc/Spinner';
+import WaitResponse from './misc/WaitResponse';
 
 import './App.css';
 
 function App() {
   const [Stage, setStage] = useState(0);
   const [Loading, setLoading] = useState(false);
+  const [GenerationProcess, setGenerationProcess] = useState(false);
+
   const [LoadingText, setLoadingText] = useState("");
 
   const [formData, setFormData] = useState({
     name: '',
     work_place: '',
-    problem:'',
-    message:''
+    problem: '',
+    message: ''
   });
 
   const handleChange = (e) => {
@@ -26,32 +31,47 @@ function App() {
     }));
   };
 
+  const [messages, setMessages] = useState([]);
 
+
+  const addMessage = (text, self = true) => {
+    const newMessage = {
+      id: Date.now(), // уникальный ключ для нового элемента
+      text: text,
+      self: self
+    };
+
+    setMessages(prev => [...prev, newMessage]);
+  };
+  window.addMessage = addMessage;
   const handleSubmit = (e) => {
     e.preventDefault(); // Останавливаем стандартную отправку формы
 
     console.log('Отправленные данные:', formData);
     setLoading(true);
-    
-    setTimeout(()=>{
+
+    setTimeout(() => {
       setStage(1);
       setLoading(false);
+      addMessage(formData.message);
+
+      setTimeout(() => {
+        addMessage("Ваш вопрос отправлен в службу поддержки. Уже подбираем варианты решения проблемы...", false);
+        setTimeout(() => {
+          setGenerationProcess(true);
+        }, 500);
+      }, 500);
+
+    }, 500)
 
-    },300)
-  
   };
   return (
     <div className="flex w-full h-full justify-center items-center">
-      <div className="relative flex md:h-[550px] h-full md:w-[500px] w-full flex-col justify-center rounded-xl bg-gray-50 p-5 text-sm/7 text-gray-800 shadow-sm shadow-orange-500/50 dark:bg-gray-900 dark:text-gray-200">
+      <div className="relative flex md:h-[550px] h-full md:w-[500px] w-full flex-col justify-center md:rounded-xl bg-gray-50 p-5 text-sm/7 text-gray-800 shadow-sm shadow-orange-500/50 dark:bg-gray-900 dark:text-gray-200">
 
-        {Loading &&
-          <div className="absolute inset-0 bg-black/10 backdrop-blur-[3px] flex flex-col items-center justify-center z-10 rounded-xl">
-            <div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" style={{ animationDuration: "0.5s" }}    ></div>
-            <span className='block mt-2 text-gray-500 font-bold dark:text-gray-300'>{LoadingText}</span>
-          </div>
-        }
+        <Spinner show={Loading} />
         {Stage == 0 &&
-          <div className="p-4">
+          <div className="p-0 md:p-4">
             <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
               Сообщить о проблеме
             </h1>
@@ -85,7 +105,7 @@ function App() {
                   className="mt-10 block w-full rounded-xl border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
                   value={formData.problem}
                   onChange={handleChange}
-               >
+                >
                   <option value="0">Выберите тип проблемы *</option>
                   <option value="1">Ошибка в работе ПО</option>
                   <option value="2">Проблемы с доступом/паролями</option>
@@ -115,32 +135,13 @@ function App() {
           <>
             <div className="flex flex-col gap-3 w-full h-full items-start scroll-box">
 
-             
-
-            <Message self={true} text={"Test message"}/>
-            <Message self={false} text={"Test message"}/>
-            <Message self={true} text={"Test message"}/>
-
-            <Message self={false} text={"Test message"}/>
 
 
+              {messages.map(message => (
+                <Message key={message.id} self={message.self} text={message.text} />
+              ))}
 
-
-              <div className='flex items-start gap-2 justify-center px-2'>
-                <div className="flex space-x-1 h-full items-center">
-                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" />
-                  <div
-                    className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
-                    style={{ animationDelay: "0.1s" }}
-                  />
-                  <div
-                    className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
-                    style={{ animationDelay: "0.3s" }}
-                  />
-                </div>
-                <span className='text-gray-400 animate-pulse'>Генерация ответа...</span>
-              </div>
-
+              <WaitResponse show={GenerationProcess} />
 
             </div>
             <div className="pt-4">
@@ -153,7 +154,7 @@ function App() {
                   required=""
                 />
                 <button type='submit' className='transition-transform duration-300 hover:rotate-45'>
-                  <img src={SendIcon} className='h-6' />
+                  <img src={SendIcon} className='h-6 w-6' />
                 </button>
               </form>
             </div>
diff --git a/src/misc/Message.js b/src/misc/Message.js
index 16dd5c6..753b025 100644
--- a/src/misc/Message.js
+++ b/src/misc/Message.js
@@ -7,7 +7,7 @@ function Message(args) {
     return (
         <>
             {args?.self &&
-                <div className='flex items-start gap-2 w-full flex-row-reverse'>
+                <div className='animate-[fadeIn_0.5s_ease-out] flex items-start gap-2 w-full flex-row-reverse'>
                     <img src={UserIcon} className='h-12' />
 
                     <span className='text-white px-4 py-2 text-md rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 break-normal leading-5 shadow-sm'>
@@ -16,9 +16,9 @@ function Message(args) {
                 </div>
             }
             {!args?.self &&
-                <div className='flex items-end gap-2'>
+                <div className='animate-[fadeIn_0.5s_ease-out] flex items-end gap-2'>
                     <img src={chatGptIcon} className='h-12' />
-                    <span className='px-4 py-2 text-md rounded-xl bg-gray-200 break-normal w-full leading-5 shadow-sm'>
+                    <span className='px-4 py-2 text-md rounded-xl dark:bg-gray-800 bg-gray-200 break-normal w-full leading-5 shadow-sm'>
                         {args?.text}
                     </span>
                 </div>
diff --git a/src/misc/SendForm.js b/src/misc/SendForm.js
new file mode 100644
index 0000000..877ec5d
--- /dev/null
+++ b/src/misc/SendForm.js
@@ -0,0 +1,6 @@
+
+async function SendForm(formData) {
+
+}
+
+export default SendForm;
diff --git a/src/misc/Spinner.js b/src/misc/Spinner.js
new file mode 100644
index 0000000..dc11bde
--- /dev/null
+++ b/src/misc/Spinner.js
@@ -0,0 +1,14 @@
+
+function Spinner(args) {
+    return (
+        <>
+            <div className={(args.show ? "flex":"hidden") + " animate-[fadeIn_0.5s_ease-out] absolute inset-0 bg-black/10 backdrop-blur-[3px] flex-col items-center justify-center z-10 rounded-xl"}>
+                <div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" style={{ animationDuration: "0.5s" }}    ></div>
+                <span className='block mt-2 text-gray-500 font-bold dark:text-gray-300'>{args?.text}</span>
+            </div>
+
+        </>
+    );
+}
+
+export default Spinner;
diff --git a/src/misc/WaitResponse.js b/src/misc/WaitResponse.js
new file mode 100644
index 0000000..782007e
--- /dev/null
+++ b/src/misc/WaitResponse.js
@@ -0,0 +1,25 @@
+
+function WaitResponse(args) {
+    return (
+        <>
+
+            <div className={(args.show ? "flex":"hidden")+ ' delay-300 animate-[fadeIn_0.5s_ease-out] items-start gap-2 justify-center px-2'}>
+                <div className="flex space-x-1 h-full items-center">
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" />
+                    <div
+                        className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
+                        style={{ animationDelay: "0.1s" }}
+                    />
+                    <div
+                        className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
+                        style={{ animationDelay: "0.3s" }}
+                    />
+                </div>
+                <span className='text-gray-400 animate-pulse'>Генерация ответа...</span>
+            </div>
+
+        </>
+    );
+}
+
+export default WaitResponse;