Merge pull request #40 from Batsave/dev

Merge fix bot

README.md

@@ -1,4 +1,3 @@
-
 #### Projet B2B pour L'Oréal ###
 
 ## Description

backend/index.js

@@ -75,6 +75,7 @@ async function fetchResponseToMessage(socketId, userMessage) {
         Final Step: Satisfaction evaluation
         Request feedback on the relevance of the recommendations.
         Ensure customer satisfaction and offer additional assistance if necessary.
+
   `,
       },
     ];
@@ -101,6 +102,12 @@ async function fetchResponseToMessage(socketId, userMessage) {
 }
 
 io.on("connection", (socket) => {
+  socket.on("initiate", () => {
+    const welcomeMessage =
+      "Hello! I am LorIA, your virtual assistant specialized in the sale and advice of L'Oréal cosmetic products. How can I help you today in choosing your products?";
+    socket.emit("message", welcomeMessage);
+  });
+
   socket.on("message", async (message) => {
     const reply = await fetchResponseToMessage(socket.id, message);
     socket.emit("message", reply);

frontend/src/pages/Chatbot.jsx

@@ -1,14 +1,15 @@
-import "../scss/chatbot.scss";
 import React, { useState, useEffect, useRef } from "react";
 import io from "socket.io-client";
+import "../scss/chatbot.scss";
 
-const socket = io(import.meta.env.VITE_BACKEND_URL);
+/* eslint-disable */
 
-/* eslint-disable-next-line */
+const socket = io(import.meta.env.VITE_BACKEND_URL);
 export default function Chatbot({ isVisible }) {
   const [messages, setMessages] = useState([]);
   const [currentMessage, setCurrentMessage] = useState("");
   const [isTyping, setIsTyping] = useState(false);
+  const [hasInitiated, setHasInitiated] = useState(false);
   const messagesEndRef = useRef(null);
 
   const scrollToBottom = () => {
@@ -29,40 +30,22 @@ export default function Chatbot({ isVisible }) {
     }
   };
 
-  const simulateTyping = (newMessage) => {
-    setIsTyping(true);
-    let typedMessage = "";
-    const typingSpeed = 7;
-    const characters = newMessage.split("");
-
-    const typeCharacter = (index) => {
-      if (index < characters.length) {
-        typedMessage += characters[index];
-        setMessages((prevMessages) => [
-          ...prevMessages.slice(0, -1),
-          { content: typedMessage, author: "bot" },
-        ]);
-        scrollToBottom();
-        setTimeout(() => typeCharacter(index + 1), typingSpeed);
-      } else {
-        setIsTyping(false);
-      }
-    };
-
-    setMessages((prevMessages) => [
-      ...prevMessages,
-      { content: "", author: "bot" },
-    ]);
-    typeCharacter(0);
-  };
-
   useEffect(() => {
+    if (isVisible && !hasInitiated) {
+      socket.emit("initiate");
+      setHasInitiated(true);
+    }
+
     socket.on("message", (message) => {
-      simulateTyping(message);
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { content: message, author: "bot" },
+      ]);
+      scrollToBottom();
     });
 
     return () => socket.off("message");
-  }, []);
+  }, [isVisible]);
 
   useEffect(scrollToBottom, [messages]);
 
@@ -73,7 +56,6 @@ export default function Chatbot({ isVisible }) {
           <div className="message-area">
             {messages.map((message, index) => (
               <div
-                /* eslint-disable-next-line */
                 key={index}
                 className={`message ${
                   message.author === "user" ? "user-message" : "bot-message"
@@ -88,15 +70,15 @@ export default function Chatbot({ isVisible }) {
                 {message.content}
               </div>
             ))}
-            {isTyping && (
-              <div className="typingAnimation">
-                <span className="typing-indicator">.</span>
-                <span className="typing-indicator">.</span>
-                <span className="typing-indicator">.</span>
-              </div>
-            )}
             <div ref={messagesEndRef} />
           </div>
+          {isTyping && (
+            <div className="typingAnimation">
+              <span className="typing-indicator">.</span>
+              <span className="typing-indicator">.</span>
+              <span className="typing-indicator">.</span>
+            </div>
+          )}
           <div className="input-area">
             <input
               type="text"