Update Chatbot logic, added stylesheet for Chatbot, updated page layo…

…ut via max-width

components/Chatbot.js

@@ -3,6 +3,8 @@ import { useState, useEffect } from "react"
 import { PromptTemplate } from "@langchain/core/prompts"
 import { ChatOpenAI } from "@langchain/openai";
 import { HumanMessage } from "@langchain/core/messages";
+import styles from "../styles/Chatbot.module.scss";
+import window_color from "../constants/global_style";
 
 const Chatbot = (props) => {
     const [messages, appendMessages] = useState([])
@@ -52,30 +54,12 @@ const Chatbot = (props) => {
     return (
         <div
             id="chatbot-window"
-            style={{
-                display: "flex",
-                flexDirection: "column-reverse",
-                padding: `
-                ${props.paddingTop}px
-                ${props.paddingRight}px 
-                ${props.paddingBottom}px 
-                ${props.paddingLeft}px`,
-                backgroundColor: `${props.backgroundColor}`,
-                width: `100%`,
-                height: "100%",
-                borderRadius: `${props.radius}px`,
-            }}
+            className={styles.chatbotWindow}
+            style={chatWindowStyle}
         >
             <div
-                id="contents"
+                id="chatbot-contents"
                 style={{
-                    height: "100%",
-                    flex: 1,
-                    padding: "10px",
-                    display: "flex",
-                    alignItems: "flex-end",
-                    flexDirection: "column",
-                    backgroundColor: "white",
                     borderRadius: `${props.radius}px`,
                 }}
             >
@@ -245,4 +229,8 @@ const buttonStyle = {
     border: "5px solid transparent",
 }
 
+const chatWindowStyle = {
+    backgroundColor: window_color
+}
+
 export default Chatbot;

constants/global_style.js

@@ -0,0 +1,3 @@
+const window_color="#fff7ff";
+
+export {window_color}

pages/index.js

@@ -2,7 +2,7 @@ import Page from "../components/Page"
 
 export default function Home() {
     return (
-          <Page>
+          <Page  style={{width:"100vw", height:"100vh"}}>
             <p style={{fontSize: "2.5rem", fontWeight: "bold"}}>Hello, I'm Shivam Naik!</p>
             <p style={{fontSize: "2rem"}}>A master student at TU Kaiserslautern.</p>
           </Page>

pages/projects.js

@@ -7,7 +7,7 @@ const Projects = () => {
         <Page>
             <h1>Projects</h1>
             <div>
-                <Chatbot/>
+                <Chatbot radius="5"/>
             </div>
         </Page>
     );

styles/Chatbot.module.scss

@@ -0,0 +1,16 @@
+.chatbotWindow{
+    display: "flex";
+    flex-direction: "column-reverse";
+    background-color: cadetblue;
+
+    & .chatbot-contents{
+        margin: 20px;
+        height: "100%";
+        flex: 1;
+        padding: "10px";
+        display: "flex";
+        align-items: "flex-end";
+        flex-direction: "column";
+        background-color: "white";
+    }
+}

styles/Navbar.module.scss

@@ -7,7 +7,7 @@ $hover-color: #f1f1f1;
 .navbar {
     position: sticky;
     z-index: 40;
-    min-height: 20px;
+    min-height: 50px;
     background-color: $background-color;
     border-style: none none solid none;
     border-color: $border-color;

styles/Page.module.scss

@@ -1,31 +1,36 @@
+$background-color: white;
+$max-width-calculation: calc(1020px - (30px * 2));
 .container {
   display: flex;
   flex-direction: column;
-  top: 0;
-  min-height: 100vh;
+  width: 100vw;
+  height: 100vh;
   padding:  0;
-  background-color: "white";
+  background-color: $background-color;
 
   & .sub_container {
+    height: 100%;
     display: flex;
     flex: 1;
     flex-direction: column;
 
     & .content_wrapper {
+      height: 100%;
       flex:1;
+      display: flex;
 
       & .page_content{
-        max-width: calc(1020px - (30px * 2));
-        margin-left: auto;
-        margin-right: auto;
         display: flex;
         flex-direction: column;
         position: relative;
-
+        margin-left: auto;
+        margin-right: auto;
+        width: $max-width-calculation;
+        max-width: $max-width-calculation;
         & *{
           padding: 0px 20px 0 20px;
           margin: 0;
-          flex: 1;
+          flex: 0;
         }
       }
     }
@@ -48,12 +53,13 @@
   display: flex;
   flex-grow: 0;
   width: 100%;
-  height:0;
   max-height: 40px;
   border-top: 1px solid #eaeaea;
   display: flex;
   justify-content: center;
   align-items: center;
+  bottom: 0;
+  background-color: white;
 }
 
 .footer img {