chat2

frontend/src/pages/chat-gpt.tsx

@@ -1,30 +1,38 @@
-import { ReactElement } from 'react';
+import { ReactElement, useState, useEffect } from 'react';
 import LayoutAuthenticated from '../layouts/Authenticated';
 import SectionMain from '../components/SectionMain';
 import SectionTitle from '../components/SectionTitle';
 import CardBox from '../components/CardBox';
-import { useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import { askGpt } from '../stores/openAiSlice';
 import LoadingSpinner from '../components/LoadingSpinner';
 import BaseButton from '../components/BaseButton';
 
-
 const ChatGptPage = () => {
   const dispatch = useAppDispatch();
   const { gptResponse, isAskingQuestion, errorMessage } = useAppSelector(state => state.openAi);
   const [prompt, setPrompt] = useState('');
+  const [messages, setMessages] = useState<{ sender: 'user' | 'assistant'; text: string }[]>([]);
+
+  useEffect(() => {
+    if (gptResponse) {
+      setMessages(prev => [...prev, { sender: 'assistant', text: gptResponse }]);
+    }
+  }, [gptResponse]);
 
   const handleSubmit = () => {
-    if (prompt.trim()) {
+    if (!prompt.trim()) return;
-      dispatch(askGpt(prompt));
+    setMessages(prev => [...prev, { sender: 'user', text: prompt }]);
-    }
+    dispatch(askGpt(prompt));
+    setPrompt('');
   };
 
   return (
     <SectionMain>
       <SectionTitle title="Chat GPT" />
       <CardBox>
+
+        {/* Input area */}
         <textarea
           className="w-full p-2 border rounded mb-2"
           rows={4}
@@ -33,11 +41,31 @@ const ChatGptPage = () => {
           placeholder="Type your question here..."
         />
         <div className="mb-2">
-        <BaseButton label="Send" color="success" className="w-full" onClick={handleSubmit} disabled={!prompt.trim() || isAskingQuestion} />
+          <BaseButton
-          {isAskingQuestion && <LoadingSpinner className="ml-2" />}
+            label="Send"
+            color="success"
+            className="w-full"
+            onClick={handleSubmit}
+            disabled={!prompt.trim() || isAskingQuestion}
+          />
+          {isAskingQuestion && <LoadingSpinner className="ml-2 mt-2" />}
         </div>
+
+        {/* Errors */}
         {errorMessage && <div className="text-red-500 mb-2">{errorMessage}</div>}
-        {gptResponse && <div className="whitespace-pre-wrap">{gptResponse}</div>}
+
+        {/* Chat history */}
+        <div className="mt-4">
+          {messages.map((msg, idx) => (
+            <div key={idx} className={`mb-2 flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div className={`p-2 rounded max-w-xs break-words ${msg.sender === 'user' ? 'bg-green-200 text-green-800' : 'bg-gray-200 text-gray-800'}`}>
+                {msg.text}
+              </div>
+            </div>
+          ))}
+        </div>
+
+
 
       </CardBox>
     </SectionMain>
@@ -48,4 +76,4 @@ ChatGptPage.getLayout = function getLayout(page: ReactElement) {
   return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
 };
 
-export default ChatGptPage;
+export default ChatGptPage;