Re chatbot ft

frontend/src/components/ChatBot.jsx

@@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { AiOutlineClose } from 'react-icons/ai'; // Import the close icon
 import bot from '../assets/1_YOViITfBkahHTwGGkKsQdg.png'; // Import the bot image
+import sendmessage from '../assets/message-send.svg'; // Import the sendmessage image
+import chatbackground from '../assets/02-34-11-741_512.gif'; // Import the sendmessage image
 
 
 const Chatbot = () => {
@@ -108,7 +110,7 @@ const Chatbot = () => {
               onChange={handleInputChange}
               onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
             />
-            <SendButton onClick={handleSendMessage}>Send</SendButton>
+            <SendButton onClick={handleSendMessage}></SendButton>
           </ChatInput>
         </ChatWindow>
       )}
@@ -122,12 +124,13 @@ const ChatbotContainer = styled.div`
   max-width: 500px;
   margin: 0 auto;
   background-color: #121212; 
-  border-radius: 15px;
+  border-radius: 50px;
   box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
   font-family: 'Roboto', sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+
 `;
 
 const ToggleContainer = styled.div`
@@ -166,24 +169,36 @@ const ToggleButton = styled.div`
 const ChatWindow = styled.div`
   display: flex;
   flex-direction: column;
+  border-radius: 25px;
   justify-content: space-between;
   height: 600px;
+  overflow: hidden; /* Hide overflow content when closed */
+  transition: height 0.5s ease; /* Smooth transition for height */
   position: relative;
+  background-image: url(${chatbackground}); /* Set the imported image as background */
+
+
 `;
 
+
 const CloseIcon = styled.div`
   position: absolute;
   top: 10px;
   right: 20px;
   cursor: pointer;
-  font-size: 24px;
-  color: #FFFFFFF; 
-  transition: color 0.3s ease;
+  font-size: 28px;
+  color: #ff4d4f; /* Soft red for the default close icon */
+  transition: color 0.3s ease, transform 0.2s ease;
   &:hover {
-    color: #FFA500; /* Lighter golden on hover */
+    color: #ffa07a; /* Soft coral on hover */
+    transform: scale(1.5); /* Slight zoom on hover */
   }
+
+
 `;
 
+
+
 const ChatHistory = styled.div`
   padding: 20px;
   background-color: #1c1c1c; /* Dark gray background for chat history */
@@ -228,9 +243,12 @@ const ChatMessage = styled.div`
       ? 'linear-gradient(135deg, #001f3f, #0056b3)' 
       : 'linear-gradient(135deg, #a0d4ff, #4ca1ff)'}; 
   color: ${({ from }) => (from === 'bot' ? 'white' : '#333333')}; 
+
+  float: ${({ from }) => (from === 'bot' ? 'left' : 'right')}; /* Floating bot to the left, user to the right */
+  clear: both; /* Ensures proper spacing between messages */
   align-self: ${({ from }) => (from === 'bot' ? 'flex-start' : 'flex-end')};
   transition: background 0.3s ease, transform 0.2s ease;
-  
+
   &:hover {
     background: ${({ from }) => 
       from === 'bot' 
@@ -241,6 +259,7 @@ const ChatMessage = styled.div`
 `;
 
 
+
 const ChatInput = styled.div`
   display: flex;
   align-items: center;
@@ -268,26 +287,24 @@ const InputField = styled.input`
 `;
 
 const SendButton = styled.button`
-  padding: 15px 20px;
-  background: linear-gradient(135deg, #001f3f, #0056b3); /* Dark blue gradient */
-  color: white; /* White text */
+  width: 50px;
+  height: 50px;
+  background-image: url(${sendmessage});no-repeat center center;
+  background-size: contain;
   border: none;
   border-radius: 10px;
   cursor: pointer;
-  font-size: 16px;
-  font-weight: bold;
   transition: background 0.3s ease, transform 0.2s ease;
-  
+
   &:hover {
-    background: linear-gradient(135deg, #003366, #007bff); /* Slightly lighter blue on hover */
     transform: scale(1.05);
   }
 
   &:active {
-    background: linear-gradient(135deg, #002147, #0056b3); /* Even darker on click */
     transform: scale(0.98);
   }
 `;
 
 
-export default Chatbot;
+
+export default Chatbot;

frontend/src/components/StockForecastingPage/ForecastNowButton.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 // ForecastNowButton.js
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
@@ -24,33 +25,26 @@ const ForecastNowButton = ({ onClick }) => {
 const ForecastNow = styled.button`
   font-size: 1.5rem;
   color: #ffffff;
-  background-color: #01182b;
+  background-color: #004080; /* Dark blue background */
   border: none;
-  border-radius: 8px;
+  border-radius: 50px; /* Rounded button */
   padding: 15px 30px;
-  z-index: 9999;
-  animation: ${bounceForecast} 2s infinite;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
   cursor: pointer;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 
-              0 0 20px rgba(0, 200, 255, 0.6),  /* Glow effect */
-              0 0 40px rgba(0, 200, 255, 0.4); /* Glow spread */
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Shadow for depth */
+  transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
 
   &:hover {
-    transform: scale(1.1); /* Slight zoom on hover */
-    box-shadow: 0 4px 20px rgba(0, 200, 255, 0.8),  /* Enhanced glow on hover */
-                0 0 60px rgba(0, 200, 255, 0.6);
+    background-color: #0050a0; /* Lighter blue on hover */
+    transform: scale(1.05); /* Slightly enlarge on hover */
   }
 
   &:active {
-    transform: scale(1); /* Reset zoom when clicked */
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 
-                0 0 20px rgba(0, 200, 255, 0.6), /* Glow remains when clicked */
-                0 0 40px rgba(0, 200, 255, 0.4);
+    transform: scale(0.95); /* Slightly shrink when clicked */
   }
+
+  display: flex; /* Center icon and text */
+  align-items: center;
+  justify-content: center;
 `;
 
 export default ForecastNowButton;