send

frontend/src/pages/chat-gpt.tsx

@@ -3,15 +3,56 @@ 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 ChatGptPage = () => {
+  const dispatch = useAppDispatch();
+  const { gptResponse, isAskingQuestion, errorMessage } = useAppSelector(state => state.openAi);
+  const [prompt, setPrompt] = useState('');
+
+  const handleSubmit = () => {
+    if (prompt.trim()) {
+      dispatch(askGpt(prompt));
+    }
+  };
+
+  return (
     <SectionMain>
       <SectionTitle title="Chat GPT" />
       <CardBox>
-      {/* Content goes here */}
+        <textarea
+          className="w-full p-2 border rounded mb-2"
+          rows={4}
+          value={prompt}
+          onChange={e => setPrompt(e.target.value)}
+          placeholder="Type your question here..."
+        />
+        <div className="flex items-center mb-2">
+          <BaseButton onClick={handleSubmit} disabled={!prompt.trim() || isAskingQuestion}>
+            Send
+          </BaseButton>
+          {isAskingQuestion && <LoadingSpinner className="ml-2" />}
+        </div>
+        {errorMessage && <div className="text-red-500 mb-2">{errorMessage}</div>}
+        {gptResponse && <div className="whitespace-pre-wrap">{gptResponse}</div>}
+
+        <div className="flex items-center mb-2">
+          <BaseButton onClick={handleSubmit} disabled={!prompt.trim() || isAskingQuestion}>
+            Send
+          </BaseButton>
+          {isAskingQuestion && <LoadingSpinner className="ml-2" />}
+        </div>
+        {errorMessage && <div className="text-red-500 mb-2">{errorMessage}</div>}
+        {gptResponse && <div className="whitespace-pre-wrap">{gptResponse}</div>}
       </CardBox>
     </SectionMain>
-);
+  );
+};
 
 ChatGptPage.getLayout = function getLayout(page: ReactElement) {
   return <LayoutAuthenticated>{page}</LayoutAuthenticated>;