2021csb1165/sof 219 summary page for live meet

client/src/App.js

@@ -11,7 +11,6 @@ import { store, persistor } from "./redux/store";
 import Dashboard from "./pages/Dashboard";
 import Feedback from "./pages/feedback";
 import Analytics from "./pages/Analytics";
-
 import MyNotes from './pages/MyNotes';
 import MyNotesAndSummaries from "./pages/MyNotesAndSummaries";
 import SummaryAndNotes from "./pages/SummaryAndNotes";
@@ -20,7 +19,7 @@ import Profile from "./pages/Profile";
 import Auth from "./utils/Auth";
 import NotFound from "./pages/NotFound";
 import YTSummaries from "./pages/YTSummaries"; 
-
+import SummaryMeet from "./pages/Summary_Meet";
 
 /**
  * Renders the main application component.
@@ -48,7 +47,7 @@ function App() {
               <Route exact path="/mynotesandsummaries" element={<MyNotesAndSummaries/>} />
               <Route exact path="/summaryAndNote" element={<SummaryAndNotes/>} />
               <Route exact path="/analytics" element={<Analytics/>} />
-
+              <Route exact path="/summarymeet" element={<SummaryMeet/>} />
             </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>

client/src/components/shared/Card/NoteAndSummaryCard.jsx

@@ -77,7 +77,7 @@ const Card = ({ title, youtubeUrl, note, summary }) => {
           </div>
         </div>
       </div> */}
-      <div className="bg-gray-200 rounded-2xl w-[400px] h-[370px] ml-[70px] mt-10 overflow-hidden hover:scale-105 transition-all duration-300 ease-in-out hover:bg-slate-300">
+      <div className="bg-gray-200 rounded-2xl w-[400px] h-[370px] ml-[70px] mt-10 overflow-hidden hover:scale-105 transition-all duration-300 ease-in-out hover:bg-slate-300 mb-4">
   <div className="flex flex-col">
     {thumbnailUrl && (
       <img

client/src/components/shared/Chatbot/Chatbot.css

@@ -1,22 +1,35 @@
 .chatbotStyle {
-  /* border: 1px solid red; */
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  border: 1px solid grey;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  /* border-radius: 50%; Make the chatbot icon container circular */
+  background-color: black; /* Black background */
+  /* padding: 5px;  */
   position: fixed;
-  bottom: 0px;
-  right: 8px;
+  bottom: 20px; /* Adjust position as needed */
+  right: 20px; /* Adjust position as needed */
+  /* z-index: 1000; Ensure it's above other content */
 }
 
-.collapsed {
-  background-color: #cbd5e1; /* Default background color */
-  transition: background-color 0.3s ease; /* Smooth transition effect */
+.chatbotStyle:hover {
+  background-color: #2e2e2e; /* Darker shade of black on hover */
+}
 
-  /* Other styles here */
+.collapsed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px; /* Set width to match icon size */
+  height: 70px; /* Set height to match icon size */
+  border-radius: 10%; /* Make it round */
+  cursor: pointer;
 }
 
 .collapsed:hover {
-  background-color: #2e8bee; /* Background color on hover */
+  background-color: #2e2e2e; /* Darker shade of black on hover */
+}
+
+.collapsed button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
 }

client/src/components/shared/Chatbot/Chatbot.jsx

@@ -5,6 +5,7 @@ import getConfig from "./config.js";
 import MessageParser from "./MessageParser.js";
 import ActionProvider from "./ActionProvider.js";
 import React, { useState, useEffect, useRef } from "react";
+import { TbMessageChatbot } from "react-icons/tb";
 
 const MyChatBot = (summary) => {
   const [showBot, toggleShow] = useState(false);
@@ -51,8 +52,8 @@ const MyChatBot = (summary) => {
   };
 
   return (
-    <div className="chatbotStyle">
-      {showBot ? (
+    <div className={`chatbotStyle mb-5 rounded-3xl mr-3 `}>
+    {showBot ? (
         <div ref={chatbotRef}>
           <Chatbot
             config={getConfig(onClickCloseBot, summary)}
@@ -66,17 +67,16 @@ const MyChatBot = (summary) => {
       ) : (
         // Don't Show Bot
         <div
-          className="collapsed"
-          style={{
-            padding: "5px",
-            borderTopLeftRadius: "5px",
-            borderTopRightRadius: "5px",
-            width: "275px", 
-          }}
+          className="collapsed h-[50px] text-[18px] text-slate-50 flex items-center justify-center rounded-3xl"
+          // style={{
+          //   padding: "5px",
+          //   borderTopLeftRadius: "5px",
+          //   borderTopRightRadius: "5px",
+          //   width: "275px", 
+          // }}
         >
           <button onClick={onClickOpenBot}>
-            &nbsp;&nbsp;Conversation with ClarifyBot
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-
+            <TbMessageChatbot size={50} /> {/* Render the chatbot icon */}
           </button>
         </div>
       )}

client/src/components/shared/Navbar/Navbar.jsx

@@ -30,7 +30,7 @@ function Navbar() {
               <a href="#extension">Chrome Extension</a>
             </li>
             <li>
-              <a href="/dashboard">Youtube Summaries</a>
+              <a href="/dashboard">Dashboard</a>
             </li>
             <li>
               <a href="/contact">Contact</a>

client/src/components/shared/Sidebar.jsx

@@ -12,9 +12,9 @@ import { FaChartBar } from 'react-icons/fa';
 const Sidebar = () => {
   const menus = [
     { name: "Dashboard", link: "/dashboard", icon: IoMdHome },
-    { name: "Chat with AI", link: "/", icon: BsChatFill },
+    // { name: "Chat with AI", link: "/", icon: BsChatFill },
     { name: "My Notes", link: "/mynotesandsummaries", icon: FaNoteSticky },
-    { name: "Youtube Summaries", link: "/", icon: MdSummarize },
+    // { name: "Youtube Summaries", link: "/", icon: MdSummarize },
     { name: "Chrome Extension", link: "/", icon: IoExtensionPuzzle },
     { name: "Analytics", link: "/analytics", icon: FaChartBar },
 

client/src/pages/Analytics.jsx

@@ -186,12 +186,12 @@ const Analytics = () => {
                                     <p className="cursor-pointer">Contact Us</p>
                                 </div>
                             </div>
-                            <div className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full">
+                            {/* <div className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full">
                                 <IoMdSettings />
                             </div>
                             <div className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full">
                                 <IoIosNotifications />
-                            </div>
+                            </div> */}
                             <div className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full cursor-pointer" onClick={handleProfileRedirect}>
                                 <CgProfile />
                             </div>

client/src/pages/Dashboard.jsx

@@ -182,13 +182,13 @@ const Dashboard = () => {
                 </div>
               </div>
 
-              <div className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full">
+              {/* <div className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full">
                 <IoMdSettings />
               </div>
 
               <div className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full">
                 <IoIosNotifications />
-              </div>
+              </div> */}
 
               <div
                 className="w-10 h-[40px] sidebuttons flex items-center text-[30px] justify-center rounded-full  cursor-pointer"
@@ -253,7 +253,7 @@ const Dashboard = () => {
                     <motion.div
                       transition={{ type: "spring", stiffness: 50  }}
                       layoutId="underline"
-                      className="absolute rounded-2xl w-full h-full left-0 bottom-0 bg-red-500 border border-slate-50"
+                      className="absolute rounded-2xl w-full h-full left-0 bottom-0 bg-gradient-to-b from-red-400 to-red-900 border border-slate-50"
                     ></motion.div>
                   ) : null}
                 </button>

client/src/pages/MyNotesAndSummaries.jsx

@@ -113,13 +113,13 @@ const MyNotesAndSummaries = () => {
               </div>
             </div>
 
-            <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
+            {/* <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
               <IoMdSettings />
             </div>
 
             <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
               <IoIosNotifications />
-            </div>
+            </div> */}
 
             <div
               className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full cursor-pointer"

client/src/pages/SummaryAndNotes.jsx

@@ -57,13 +57,13 @@ const SummaryAndNotes = () => {
                   </div>
                 </div>
 
-                <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
+                {/* <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
                   <IoMdSettings />
                 </div>
 
                 <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
                   <IoIosNotifications />
-                </div>
+                </div> */}
 
                 <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full cursor-pointer" onClick={handleProfileRedirect}>
                   <CgProfile />