Addition of Chatbot Page

frontend/package.json

@@ -14,10 +14,12 @@
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@gradio/client": "^1.8.0",
+    "@speechly/speech-recognition-polyfill": "^1.3.0",
     "buffer": "^6.0.3",
     "dotenv": "^16.4.5",
     "ethers": "^6.13.2",
-    "framer-motion": "^11.11.9",
+    "framer-motion": "^11.15.0",
     "lucide-react": "^0.438.0",
     "pako": "^2.1.0",
     "pinata-web3": "^0.5.0",
@@ -26,6 +28,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
     "react-spinners": "^0.15.0",
+    "react-voice-visualizer": "^2.0.4",
     "three": "^0.168.0"
   },
   "devDependencies": {

frontend/src/App.jsx

@@ -15,6 +15,7 @@ import MyChatbot from './Chatbot';
 import CustomCursor from './components/CustomCursor';
 import GTranslateLoader from './components/GTranslateLoader'
 import ScrollToTop from './components/ScrollToTop';
+import ChatPage from './pages/ChatPage';
 
 function App() {
     const [wallet, setWallet] = useState(null);
@@ -49,6 +50,7 @@ function App() {
                         <Route path="/creators" element={<CreatorsPage />} />
                         <Route path="/faqs" element={<FAQPage />} />
                         <Route path="*" element={<NotFoundPage />} />
+                        <Route path ="/chat" element = { <ChatPage />} />
                     </Routes>
                 </main>
 

frontend/src/Chatbot.jsx

@@ -1,12 +1,17 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+
 
 const Chatbot = () => {
+
     const [messages, setMessages] = useState([
         { user: 'bot', text: 'Hello! How can I assist you with NFTs today?' },
     ])
     const [input, setInput] = useState('')
     const [isOpen, setIsOpen] = useState(false) // State to control chat window visibility
 
+    const navigate = useNavigate()
     const handleSendMessage = () => {
         if (input.trim()) {
             const userMessage = { user: 'me', text: input }
@@ -143,6 +148,7 @@ const Chatbot = () => {
     }
 
     return (
+
         <div className="relative">
             {/* Chat Button */}
             <button
@@ -152,9 +158,17 @@ const Chatbot = () => {
                 💬
             </button>
 
+
+
             {/* Chat Window */}
             {isOpen && (
                 <div className="fixed bottom-16 right-4 w-80 bg-gray-800 text-white rounded-lg shadow-lg p-4 z-50">
+                    <button
+        className="fixed bottom-4 right-20 bg-green-500 text-white p-3 rounded-full shadow-lg transition-transform transform hover:scale-105 z-50"
+        onClick={() => navigate('/chat')}
+    >
+        Go to Chat Page
+    </button>
                     <div className="flex flex-col max-h-60 overflow-y-auto">
                         {messages.map((msg, index) => (
                             <div
@@ -186,6 +200,8 @@ const Chatbot = () => {
                     </div>
                 </div>
             )}
+
+
         </div>
     )
 }

frontend/src/components/ChatInput.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Mic, Send } from 'lucide-react';
+
+const ChatInput = ({ onSendMessage }) => {
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (message.trim()) {
+      onSendMessage(message);
+      setMessage('');
+    }
+  };
+
+//   const handleVoiceInput = () => {
+//     // Implement voice input functionality
+//     onVoiceInput();
+//   };
+
+  return (
+    <form 
+      onSubmit={handleSubmit} 
+      className="flex items-center bg-white/10 backdrop-blur-md rounded-xl p-2 space-x-2 shadow-lg border border-gray-200/20"
+    >
+      <input 
+        type="text"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Type your message..."
+        className="flex-grow bg-transparent outline-none text-white placeholder-gray-300 px-2"
+      />
+      {/* <button 
+        type="button" 
+        onClick={handleVoiceInput}
+        className="text-gray-300 hover:text-white transition-colors"
+      >
+        <Mic size={24} />
+      </button> */}
+      <button 
+        type="submit" 
+        className="bg-blue-600 text-white rounded-full p-2 hover:bg-blue-700 transition-colors"
+      >
+        <Send size={20} />
+      </button>
+    </form>
+  );
+};
+
+export default ChatInput;

frontend/src/components/ChatMessage.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BotMessageSquare, User } from 'lucide-react';
+
+const ChatMessage = ({ message, type }) => {
+  const isBot = type === 'bot';
+
+  return (
+    <div className={`flex items-start space-x-3 mb-4 ${isBot ? 'flex-row' : 'flex-row-reverse'}`}>
+      <div className={`
+        p-3 rounded-xl max-w-[70%]
+        ${isBot 
+          ? 'bg-gray-700 text-white' 
+          : 'bg-blue-600 text-white self-end'
+        }
+      `}>
+        <p>{message}</p>
+      </div>
+      <div className={`
+        rounded-full p-2 
+        ${isBot 
+          ? 'bg-gray-600 text-white' 
+          : 'bg-blue-500 text-white'
+        }
+      `}>
+        {isBot ? <BotMessageSquare size={20} /> : <User size={20} />}
+      </div>
+    </div>
+  );
+};
+
+export default ChatMessage;

frontend/src/components/HeroSection.jsx

@@ -25,7 +25,7 @@ const HeroSection = () => {
         <div className="relative h-screen flex items-center justify-center overflow-hidden">
             <canvas ref={canvasRef} className="absolute inset-0 z-0" />
             <div className="relative z-10 text-center">
-                <h1 className="text-6xl font-bold mb-4 text-white">
+                <h1 className=" my-txt text-6xl font-bold mb-4 text-white">
                     Explore, Collect and Sell
                     <br />
                     Extraordinary NFTs

frontend/src/components/Navbar.css

@@ -227,4 +227,9 @@ body.dark-mode {
         width: 100%;
         margin-bottom: 0.5rem;
     }
+    .my-txt{
+        font-size: 2.75rem !important;
+    }
+
+
 }