client side updated

client/components/page-components/chatbot/ChatBotCardHeader.tsx

@@ -0,0 +1,38 @@
+import { ButtonV2 } from "@/components/button/ButtonV2"
+import { CardHeader } from "@/components/ui/card"
+import Image from "next/image"
+
+
+const ChatBotCardHeader = ({handleClose}:{handleClose: () => void}) => {
+    return (
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 py-4 px-6 bg-green-900 text-white">
+            <div className="flex items-center space-x-3">
+                <Image
+                    src={'/assets/icons/utils/robot.svg'}
+                    width={23}
+                    height={23}
+                    alt='Robot'
+                    className="h-7 w-6 text-white"
+                />
+                <h2 className="text-xl font-semibold">AVM Ayurvedic Assistant</h2>
+            </div>
+            <ButtonV2
+                onClick={handleClose}
+                variant="ghost"
+                size="icon"
+                className="h-10 w-10 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-700 transition-colors"
+                aria-label="Close chat"
+            >
+                <Image
+                    src={'/assets/icons/x.svg'}
+                    className="h-5 w-5"
+                    width={23}
+                    height={23}
+                    alt="Close"
+                />
+            </ButtonV2>
+        </CardHeader>
+    )
+}
+
+export default ChatBotCardHeader

client/components/page-components/chatbot/ChatSection.tsx

@@ -6,11 +6,10 @@ import { motion, AnimatePresence } from "framer-motion"
 import ChatBotController from './ChatBotController'
 import MessageDisplay from './MessageDisplay'
 import NotAuthenticated from './NotAuthenticated'
-
-type Message = {
-    text: string;
-    isUser: boolean
-}
+import { IChatBotMessage } from '@/types/entities'
+import { useCreateMessage } from '@/lib/hooks/chatbot/useChatBot'
+import { useGetMessage } from '@/lib/hooks/chatbot/useChatBot'
+import { toast } from '@/components/ui/use-toast'
 
 type Props = {
     isVisible: boolean;
@@ -19,9 +18,11 @@ type Props = {
 }
 
 const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
-    const [messages, setMessages] = useState<Message[]>([]);
+    const { data, isLoading } = useGetMessage()
+    const [messages, setMessages] = useState<IChatBotMessage[]>(data ?? []);
     const [inputMessage, setInputMessage] = useState('');
     const scrollAreaRef = useRef<HTMLDivElement>(null);
+    const { mutate: createMessage, isPending } = useCreateMessage();
 
     useEffect(() => {
         if (scrollAreaRef.current) {
@@ -35,14 +36,20 @@ const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
 
     const sendMessage = () => {
         if (inputMessage.trim()) {
-            setMessages([...messages, { text: inputMessage, isUser: true }]);
-            setInputMessage('');
-            setTimeout(() => {
-                setMessages(prev => [
-                    ...prev,
-                    { text: "Thank you for your message. How can I assist you with AVM Ayurvedic services today?", isUser: false }
-                ]);
-            }, 1000);
+            createMessage({ message: inputMessage },
+                {
+                    onSuccess: (messages) => {
+                        setMessages(prev => [...prev, ...messages]);
+                    },
+                    onError: (error) => {
+                        toast({
+                            title: "Error Occurred while sending message",
+                            variant: "destructive",
+                            description: error.response?.data.message || "Unknown error Occurred"
+                        })
+                    }
+                }
+            )
         }
     }
 
@@ -58,7 +65,7 @@ const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
                 >
                     {isAuthenticated ? (
                         <Card className="h-full sm:h-[600px] max-h-[800px] flex flex-col shadow-2xl border-primary/10 bg-dark-200 rounded-2xl overflow-hidden">
-                            <MessageDisplay messages={messages} scrollAreaRef={scrollAreaRef} handleClose={handleClose} />
+                            <MessageDisplay scrollAreaRef={scrollAreaRef} handleClose={handleClose} />
                             <ChatBotController
                                 inputMessage={inputMessage}
                                 setInputMessage={setInputMessage}

client/components/page-components/chatbot/MessageDisplay.tsx

@@ -1,68 +1,37 @@
-'use client'
-
-import { ButtonV2 } from "@/components/button/ButtonV2"
-import { CardContent, CardHeader } from "@/components/ui/card"
+import { CardContent } from "@/components/ui/card"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { motion } from "framer-motion"
 import Image from "next/image"
+import ChatBotCardHeader from "./ChatBotCardHeader"
+import { IChatBotMessage } from "@/types/entities"
 
 
-type Message = {
-  text: string
-  isUser: boolean
-}
 
 type Props = {
-  messages: Message[];
   scrollAreaRef: React.RefObject<HTMLDivElement>;
   handleClose: () => void;
+  messages?:IChatBotMessage[];
 }
 
-const MessageDisplay = ({ messages, scrollAreaRef, handleClose }: Props) => {
+const MessageDisplay = ({ scrollAreaRef, handleClose, messages }: Props) => {
+
   return (
     <>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 py-4 px-6 bg-green-900 text-white">
-        <div className="flex items-center space-x-3">
-          <Image
-            src={'/assets/icons/utils/robot.svg'}
-            width={23}
-            height={23}
-            alt='Robot'
-            className="h-7 w-6 text-white"
-          />
-          <h2 className="text-xl font-semibold">AVM Ayurvedic Assistant</h2>
-        </div>
-        <ButtonV2
-          onClick={handleClose}
-          variant="ghost"
-          size="icon"
-          className="h-10 w-10 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-700 transition-colors"
-          aria-label="Close chat"
-        >
-          <Image
-            src={'/assets/icons/x.svg'}
-            className="h-5 w-5"
-            width={23}
-            height={23}
-            alt="Close"
-          />
-        </ButtonV2>
-      </CardHeader>
       <CardContent className="flex-grow p-0">
-
+        <ChatBotCardHeader handleClose={handleClose} />
         <ScrollArea className="h-[calc(100vh-16rem)] sm:h-[460px] w-full p-6" ref={scrollAreaRef}>
-          {messages.map((msg, index) => (
+          {messages && messages.map((msg, index) => (
             <motion.div
               key={index}
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: index * 0.1 }}
-              className={`flex mb-6 ${msg.isUser ? 'justify-end' : 'justify-start'}`}
+              className={`flex mb-6 ${!msg.isBotMessage ? 'justify-end' : 'justify-start'}`}
             >
-              <div className={`flex items-end space-x-3 ${msg.isUser ? 'flex-row-reverse space-x-reverse' : ''}`}>
-                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${msg.isUser ? 'bg-green-600' : 'bg-gray-600'}`}>
+              <div className={`flex items-end space-x-3 ${!msg.isBotMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
+                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${!msg.isBotMessage ? 'bg-green-600' : 'bg-gray-600'}`}>
                   {
-                    msg.isUser
+                    !msg.isBotMessage
                       ? <Image
                         src={'/assets/icons/circle-user.svg'}
                         width={23}
@@ -79,11 +48,11 @@ const MessageDisplay = ({ messages, scrollAreaRef, handleClose }: Props) => {
                       />
                   }
                 </div>
-                <div
-                  className={`max-w-[75%] p-4 rounded-2xl shadow-md ${msg.isUser ? 'bg-green-600 text-white' : 'bg-gray-700 text-white'}`}
+                <i
+                  className={`max-w-[75%] p-4 rounded-2xl shadow-md ${!msg.isBotMessage ? 'bg-green-600 text-white' : 'bg-gray-700 text-white'}`}
                 >
-                  <p className="text-sm">{msg.text}</p>
-                </div>
+                  <p className="text-sm">{msg.message}</p>
+                </i>
               </div>
             </motion.div>
           ))}

server/src/index.ts

@@ -1,15 +1,15 @@
-import express from "express";
-import { createServer } from "http";
 import cors from "cors";
-import cookieParser from "cookie-parser";
 import helmet from "helmet";
+import express from "express";
 import logger from "./utils/logger";
+import { createServer } from "http";
 import bodyParser from "body-parser";
+import cookieParser from "cookie-parser";
+import { CLIENT_URL, PORT } from "./config/env";
 import { connectDB } from "./config/connectDB";
 import routes from "./presentation/routers/index";
-import { CLIENT_URL, PORT } from "./config/env";
-import { webhook } from "./presentation/routers/appointment/AppointmentRoutes";
 import initializeSocketIO from "./presentation/socket";
+import { webhook } from "./presentation/routers/appointment/AppointmentRoutes";
 
 const port = PORT || 8080;