Skip to content

Commit

Permalink
fixed the chat bot
Browse files Browse the repository at this point in the history
  • Loading branch information
YadlaMani committed Jul 2, 2024
1 parent b2b385a commit cdec1f8
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 35 deletions.
16 changes: 12 additions & 4 deletions src/components/Chatbot.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState } from "react";
import { Chatbot } from "react-chatbot-kit";
import "react-chatbot-kit/build/main.css";
import { AiOutlineComment, AiOutlineClose } from "react-icons/ai"; // Import icons
import { AiOutlineComment, AiOutlineClose } from "react-icons/ai";
import config from "../utils/config";
import MessageParser from "../utils/messageParser";
import ActionProvider from "../utils/actionProvider";
import "./chatbot.css"; // Import CSS for styling
import "./chatbot.css";

const ChatbotComponent = () => {
const [showChatbot, setShowChatbot] = useState(false);
Expand All @@ -17,11 +17,19 @@ const ChatbotComponent = () => {
return (
<div className="chatbot-container">
<button className="chatbot-toggle-button" onClick={toggleChatbot}>
{showChatbot ? <AiOutlineClose size={24} /> : <AiOutlineComment size={24} />}
{showChatbot ? (
<AiOutlineClose size={24} />
) : (
<AiOutlineComment size={24} />
)}
</button>
{showChatbot && (
<div className="chatbot">
<Chatbot config={config} messageParser={MessageParser} actionProvider={ActionProvider} />
<Chatbot
config={config}
messageParser={MessageParser}
actionProvider={ActionProvider}
/>
</div>
)}
</div>
Expand Down
49 changes: 18 additions & 31 deletions src/components/chatbot.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* chatbot.css */

.chatbot-container {
position: fixed;
bottom: 20px;
Expand All @@ -6,57 +8,42 @@
}

.chatbot-toggle-button {
background-color: #2847c3;
color: white;
background-color: #007bff;
border: none;
border-radius: 50%;
color: white;
padding: 10px;
cursor: pointer;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
position: relative;
z-index: 1001;
}

.chatbot-toggle-button:hover {
background-color: #4953a3;
background-color: #0056b3;
}

.chatbot {
width: 400px;
max-width: 90%;
z-index: 1000;
width: 280px;
height: 500px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 10px;
position: fixed;
bottom: 80px;
right: 20px;
overflow: hidden;
background-color: white;
display: flex;
flex-direction: column;
}

@media (max-width: 600px) {
.chatbot {
width: 100%;
bottom: 70px;
right: 0;
left: 45;
}
.chatbot .react-chatbot-kit-chat-container {
height: 100%;
}

.chatbot-initial {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
.chatbot .react-chatbot-kit-chat-message-container {
flex-grow: 1;
overflow-y: auto;
}

.chatbot .react-chatbot-kit-chat-input {
background-color: rgb(224, 221, 221);
color: black;
}

.chatbot .react-chatbot-kit-chat-input::placeholder {
color: #323131;
border-top: 1px solid #ddd;
padding: 10px;
}

0 comments on commit cdec1f8

Please sign in to comment.