Skip to content

Commit

Permalink
Revert "Add new feature: enhancement the chat-bot feature"
Browse files Browse the repository at this point in the history
  • Loading branch information
@panwar8279
panwar8279 authored May 30, 2024
1 parent d61ce36 commit 6c47226
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 130 deletions.
61 changes: 17 additions & 44 deletions frontend/src/ChatAssistant/ChatAssistant.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,29 @@
import Chatbot from "react-chatbot-kit";
import "react-chatbot-kit/build/main.css";
import config from "../ChatBot/config.jsx";
import MessageParser from "../ChatBot/MessageParser";
import ActionProvider from "../ChatBot/ActionProvider";
import "./ChatAssistant.css";
import React, { useState, useRef, useEffect } from "react";
import chatbotLogo from "../assets/chatbotLogo.jpeg";
import 'react-chatbot-kit/build/main.css'
import config from '../ChatBot/config.jsx';
import MessageParser from '../ChatBot/MessageParser';
import ActionProvider from '../ChatBot/ActionProvider';
import "./ChatAssistant.css"
import React, { useState } from 'react';
import chatbotLogo from '../assets/chatbotLogo.jpeg'

const ChatAssistant = () => {
const [isOpen, setIsOpen] = useState(false);
const chatbotRef = useRef(null);

// Handling the outside click to close the chatbot
useEffect(() => {
const handleClickOutside = (event) => {
if (chatbotRef.current && !chatbotRef.current.contains(event.target)) {
setIsOpen(false);
}
};

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [chatbotRef]);

// Toggle chatbot visibility
const toggleChatbot = () => {
setIsOpen(!isOpen);
};

return (
<div className="chatbot" ref={chatbotRef}>
{/* Render the chatbot component only if isOpen is true */}
{isOpen && (
return (
<div className="chatbot">
<img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />
{isOpen &&
<Chatbot
config={config}
messageParser={MessageParser}
actionProvider={ActionProvider}
/>
)}
{/* Render the chatbot logo only if isOpen is false */}
{!isOpen && (
<img
className="Logo"
src={chatbotLogo}
alt="Logo"
onClick={toggleChatbot}
/>
)}
</div>
);
};

export default ChatAssistant;
/>}
</div>
);
}

export default ChatAssistant;
122 changes: 37 additions & 85 deletions frontend/src/ChatBot/ActionProvider.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,54 @@
import React, { useEffect } from "react";
import { createChatBotMessage } from "react-chatbot-kit";
import React from 'react';
import { createChatBotMessage } from 'react-chatbot-kit';

const ActionProvider = ({ createChatBotMessage, setState, children }) => {
// Loading the chat history from local storage
useEffect(() => {
const savedMessages =
JSON.parse(localStorage.getItem("chatMessages")) || [];
setState((prev) => ({
...prev,
messages: savedMessages,
}));

// Add event listener for beforeunload
window.addEventListener("beforeunload", clearChatHistoryOnPageRefresh);

// Cleanup function to remove event listener
return () => {
window.removeEventListener("beforeunload", clearChatHistoryOnPageRefresh);
};
}, [setState]);

// Clearing the chat history from the localStorage & chatbot-section
const clearChatHistory = () => {
localStorage.removeItem("chatMessages");
const updateState = (message) => {
setState((prev) => ({
...prev,
messages: [],
messages: [...prev.messages, message],
}));
};

// Removing all the chats from the localStorage
const clearChatHistoryOnPageRefresh = () => {
localStorage.removeItem("chatMessages");
};

// Function to send a message and update the chat state
const updateState = (message) => {
setState((prev) => {
const updatedMessages = [...prev.messages, message];
localStorage.setItem("chatMessages", JSON.stringify(updatedMessages));
return {
...prev,
messages: updatedMessages,
};
});
};

const handleHello = () => {
const message = createChatBotMessage(
"Hello , I am DevLabs ChatBot , Type your query.."
);
updateState(message, handleHello);
};
const handleHello=() => {
const message = createChatBotMessage('Hello , I am DevLabs ChatBot , Type your query..');
updateState(message,handleHello);
}

const websiteDetails = () => {
const message = createChatBotMessage(
"DevLabs is a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community. For Further Details visit to our About Us section."
);
updateState(message, websiteDetails);
};
const message = createChatBotMessage('DevLabs is a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community. For Further Details visit to our About Us section.');
updateState(message,websiteDetails);
}

const contactUs = () => {
const message = createChatBotMessage(
"Contact details can be viewed on our Contact Section which is available in footer section, Feel free to Contact us."
);
updateState(message, contactUs);
};
const contactUs=()=>{
const message = createChatBotMessage('Contact details can be viewed on our Contact Section which is available in footer section, Feel free to Contact us.');
updateState(message,contactUs);
}

const contribute = () => {
const message = createChatBotMessage(
"Contribution details can be viewed on our Open Source Section which is available in footer section, Feel free to Contribute in our Project."
);
updateState(message, contribute);
};
const contribute=()=>{
const message = createChatBotMessage('Contribution details can be viewed on our Open Source Section which is available in footer section, Feel free to Contribute in our Project.');
updateState(message,contribute);
}

const greeting = () => {
const message = createChatBotMessage(
"Happy to help you. Visit again to our webite. Thank You!!"
);
updateState(message, greeting);
};
const greeting=()=>{
const message = createChatBotMessage('Happy to help you. Visit again to our webite. Thank You!!');
updateState(message,greeting);
}

return (
<div>
{React.Children.map(children, (child) => {
return React.cloneElement(child, {
actions: {
handleHello,
websiteDetails,
contactUs,
contribute,
greeting,
clearChatHistory,
},
});
})}
{React.Children.map(children, (child) => {
return React.cloneElement(child, {
actions: {
handleHello,
websiteDetails,
contactUs,
contribute,
greeting,
},
});
})}
</div>
);
};
);
};

export default ActionProvider;
export default ActionProvider;
2 changes: 1 addition & 1 deletion frontend/src/DB/product.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2916,4 +2916,4 @@
"description": "CodeSandbox is a platform that lets you create, review and collaborate on code in the cloud. It offers fast, consistent and secure environments."
}

]
]

0 comments on commit 6c47226

Please sign in to comment.