Chatbot

frontend/src/components/ChatIcon.tsx

@@ -0,0 +1,13 @@
+// ChatIcon.tsx
+import React from 'react';
+import styles from '../styles/ChatIcon.module.css';
+
+const ChatIcon = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <div className={styles.chatIcon} onClick={onClick}>
+      <img src="/chat.png" alt="Chat Icon" />
+    </div>
+  );
+};
+
+export default ChatIcon;

frontend/src/components/Chatwindow.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import styles from '../styles/ChatWindow.module.css'; // Assuming you have the styles
+
+const ChatWindow = ({ onClose }: { onClose: () => void }) => {
+    const [userInput, setUserInput] = useState('');
+    const [messages, setMessages] = useState([
+        { sender: 'bot', message: 'Hello! How can we assist you today?' }
+    ]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setUserInput(e.target.value);
+    };
+
+    const handleSendMessage = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (userInput.trim()) {
+            setMessages((prevMessages) => [
+                ...prevMessages,
+                { sender: 'user', message: userInput },
+                { sender: 'bot', message: `You said: ${userInput}` } 
+            ]);
+            setUserInput('');
+        }
+    };
+
+    return (
+        <div className={styles.chatWindow}>
+            <div className={styles.header}>
+                <span>Tech Support</span>
+                <button className={styles.closeButton} onClick={onClose}>
+                    X
+                </button>
+            </div>
+            <div className={styles.messageArea}>
+                {messages.map((msg, index) => (
+                    <div key={index} className={msg.sender === 'user' ? styles.userMessage : styles.botMessage}>
+                        <strong>{msg.sender === 'user' ? 'You: ' : 'Bot: '}</strong>{msg.message}
+                    </div>
+                ))}
+            </div>
+            <form onSubmit={handleSendMessage} className={styles.inputArea}>
+                <input
+                    type="text"
+                    placeholder="Type your message..."
+                    value={userInput}
+                    onChange={handleInputChange}
+                    className={styles.inputField}
+                />
+                <button type="submit" className={styles.sendButton} disabled={!userInput.trim()}>
+                    Send
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default ChatWindow;

frontend/src/pages/index.tsx

@@ -1,8 +1,16 @@
 "use client";
 import Link from "next/link";
-import React from "react";
+import React, { useState } from "react";
+import ChatIcon from "../components/ChatIcon"; // Assuming ChatIcon.tsx is in the same directory
+import ChatWindow from "../components/Chatwindow"; // Adjust path to where ChatWindow is located
 
 const Home: React.FC = () => {
+    const [isChatOpen, setIsChatOpen] = useState(false);
+
+    const toggleChatWindow = () => {
+        setIsChatOpen(!isChatOpen);
+    };
+
     return (
         <>
             <div className="flex flex-col p-28 mt-30">
@@ -36,8 +44,12 @@ const Home: React.FC = () => {
                     </Link>
                 </div>
             </div>
+
+            {/* Integrate ChatBot */}
+            {isChatOpen && <ChatWindow onClose={toggleChatWindow} />}
+            <ChatIcon onClick={toggleChatWindow} />
         </>
-    )
-}
+    );
+};
 
-export default Home
+export default Home;

frontend/src/styles/ChatIcon.module.css

@@ -0,0 +1,18 @@
+/* ChatIcon.module.css */
+.chatIcon {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #4CAF50; /* Green */
+    border-radius: 50%;
+    padding: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    z-index: 1000;
+  }
+
+  .chatIcon img {
+    width: 40px;
+    height: 40px;
+  }
+

frontend/src/styles/ChatWindow.module.css

@@ -0,0 +1,87 @@
+/* ChatWindow.module.css */
+.chatWindow {
+    position: fixed;
+    bottom: 70px;
+    right: 20px;
+    width: 300px;
+    max-height: 400px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    background-color: #4CAF50;
+    padding: 10px;
+    color: white;
+    font-size: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 8px 8px 0 0;
+  }
+
+  .closeButton {
+    background: none;
+    border: none;
+    color: red;
+    font-size: 18px;
+    cursor: pointer;
+  }
+
+  .messageArea {
+    padding: 10px;
+    flex-grow: 1;
+    overflow-y: auto;
+    max-height: 300px;
+  }
+
+  .userMessage,
+  .botMessage {
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    max-width: 80%;
+  }
+
+  .userMessage {
+    background-color: #e0f7fa;
+    align-self: flex-end;
+  }
+
+  .botMessage {
+    background-color: #f1f1f1;
+    align-self: flex-start;
+  }
+
+  .inputArea {
+    display: flex;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+  }
+
+  .inputField {
+    flex-grow: 1;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    margin-right: 10px;
+  }
+
+  .sendButton {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .sendButton:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }