chatbotothertest

backend/src/index.js

@@ -17,6 +17,8 @@ const pexelsRoutes = require('./routes/pexels');
 
 const openaiRoutes = require('./routes/openai');
 
+const chatbotRoutes = require('./routes/chatbot');
+
 const contactFormRoutes = require('./routes/contactForm');
 
 const usersRoutes = require('./routes/users');
@@ -153,6 +155,8 @@ app.use(
   passport.authenticate('jwt', { session: false }),
   openaiRoutes,
 );
+app.use('/api/chatbot', chatbotRoutes);
+
 
 app.use('/api/contact-form', contactFormRoutes);
 

backend/src/routes/chatbot.js

@@ -0,0 +1,15 @@
+const express = require('express');
+const router = express.Router();
+
+// Simple in-house chatbot endpoint
+router.post('/', (req, res) => {
+  const { text } = req.body;
+  if (!text) {
+    return res.status(400).json({ error: 'No message text provided.' });
+  }
+  // Echo back or implement simple rules here
+  const reply = `Bot: You said \"${text}\"`;
+  res.json({ reply });
+});
+
+module.exports = router;

frontend/src/helpers/chatbot.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+interface ChatbotResponse {
+  reply: string;
+}
+
+/**
+ * Send a message to the in-house chatbot endpoint
+ * @param text user message
+ */
+const sendChatbotMessage = async (text: string): Promise<ChatbotResponse> => {
+  const response = await axios.post('/api/chatbot', { text });
+  return response.data;
+};
+
+export default sendChatbotMessage;

frontend/src/pages/chatbot.tsx

@@ -3,32 +3,47 @@ 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 sendChatbotMessage from '../helpers/chatbot';
-import { askGpt } from '../stores/openAiSlice';
 import * as icon from '@mdi/js';
 
-const ChatbotPage: React.FC = () => {
+interface Message {
-  const dispatch = useAppDispatch();
+  from: 'user' | 'bot';
-  const { gptResponse, isAskingQuestion, errorMessage } = useAppSelector(state => state.openAi);
+  text: string;
-  const [input, setInput] = useState('');
-
-  const handleSend = () => {
-    if (input.trim()) {
-      dispatch(askGpt(input));
-      setInput('');
 }
+
+const ChatbotPage: React.FC = () => {
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleSend = async () => {
+    if (!input.trim()) return;
+    const text = input.trim();
+    setMessages(prev => [...prev, { from: 'user', text }]);
+    setInput('');
+    setLoading(true);
+    try {
+      const { reply } = await sendChatbotMessage(text);
+      setMessages(prev => [...prev, { from: 'bot', text: reply }]);
+    } catch (err) {
+      setMessages(prev => [...prev, { from: 'bot', text: 'Failed to get response. Please try again.' }]);
+    }
+    setLoading(false);
   };
 
   return (
     <SectionMain>
       <SectionTitleLineWithButton icon={icon.mdiRobot} title="Chatbot" main>
-        Chat with AI assistant
+        Chat with team assistant
       </SectionTitleLineWithButton>
       <CardBox>
         <div className="overflow-y-auto h-80 p-4 border rounded-md mb-4">
-          {isAskingQuestion && <p>Loading...</p>}
+          {messages.map((msg, idx) => (
-          {errorMessage && <p className="text-red-500">{errorMessage}</p>}
+            <p key={idx} className={msg.from === 'user' ? 'text-right' : 'text-left'}>
-          {gptResponse && <p>{gptResponse}</p>}
+              <strong>{msg.from === 'user' ? 'You' : 'Bot'}:</strong> {msg.text}
+            </p>
+          ))}
+          {loading && <p>Loading...</p>}
         </div>
         <div className="flex">
           <input
@@ -36,12 +51,12 @@ const ChatbotPage: React.FC = () => {
             className="flex-grow border p-2 rounded"
             value={input}
             onChange={e => setInput(e.target.value)}
-            placeholder="Type your question..."
+            placeholder="Type your message..."
           />
           <button
             className="ml-2 px-4 py-2 bg-purple-600 text-white rounded disabled:opacity-50"
             onClick={handleSend}
-            disabled={isAskingQuestion}
+            disabled={loading}
           >
             Send
           </button>