chatbottest

frontend/src/helpers/pexels.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 export async function getPexelsImage() {
   try {
-    const response = await axios.get(`/api/pexels/image`);
+    const response = await axios.get(`/pexels/image`);
     return response.data;
   } catch (error) {
     console.error('Error fetching image:', error);
@@ -12,7 +12,7 @@ export async function getPexelsImage() {
 
 export async function getPexelsVideo() {
   try {
-    const response = await axios.get(`/api/pexels/video`);
+    const response = await axios.get(`/pexels/video`);
     return response.data;
   } catch (error) {
     console.error('Error fetching video:', error);
@@ -52,7 +52,7 @@ export async function getMultiplePexelsImages(
     const queryString = missingQueries.join(',');
 
     try {
-      const response = await axios.get(`/api/pexels/multiple-images`, {
+      const response = await axios.get(`/pexels/multiple-images`, {
         params: { queries: queryString },
       });
 

frontend/src/menuAside.ts

@@ -89,6 +89,12 @@ const menuAside: MenuAsideItem[] = [
     label: 'Profile',
     icon: icon.mdiAccountCircle,
   },
+  {
+    href: '/chatbot',
+    label: 'Chatbot',
+    icon: icon.mdiRobot,
+  },
+
 
   {
     href: '/home',

frontend/src/pages/chatbot.tsx

@@ -0,0 +1,58 @@
+import React, { ReactElement, useState } from 'react';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import CardBox from '../components/CardBox';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { askGpt } from '../stores/openAiSlice';
+import * as icon from '@mdi/js';
+
+const ChatbotPage: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const { gptResponse, isAskingQuestion, errorMessage } = useAppSelector(state => state.openAi);
+  const [input, setInput] = useState('');
+
+  const handleSend = () => {
+    if (input.trim()) {
+      dispatch(askGpt(input));
+      setInput('');
+    }
+  };
+
+  return (
+    <SectionMain>
+      <SectionTitleLineWithButton icon={icon.mdiRobot} title="Chatbot" main>
+        Chat with AI assistant
+      </SectionTitleLineWithButton>
+      <CardBox>
+        <div className="overflow-y-auto h-80 p-4 border rounded-md mb-4">
+          {isAskingQuestion && <p>Loading...</p>}
+          {errorMessage && <p className="text-red-500">{errorMessage}</p>}
+          {gptResponse && <p>{gptResponse}</p>}
+        </div>
+        <div className="flex">
+          <input
+            type="text"
+            className="flex-grow border p-2 rounded"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            placeholder="Type your question..."
+          />
+          <button
+            className="ml-2 px-4 py-2 bg-purple-600 text-white rounded disabled:opacity-50"
+            onClick={handleSend}
+            disabled={isAskingQuestion}
+          >
+            Send
+          </button>
+        </div>
+      </CardBox>
+    </SectionMain>
+  );
+};
+
+ChatbotPage.getLayout = (page: ReactElement) => (
+  <LayoutAuthenticated>{page}</LayoutAuthenticated>
+);
+
+export default ChatbotPage;