Merge pull request #35 from Shaurya0108/feat/profDemo

prof demo changes
Shaurya0108 · Oct 20, 2023 · aa0dab0 · aa0dab0
2 parents 26c0c3a + 696768e
commit aa0dab0
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 16 deletions.
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0"

diff --git a/FrontEnd/src/Home.jsx b/FrontEnd/src/Home.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
-import './App.css'
+import './index.css'
 import Navbar from "./components/Navbar";
 import DisplayWindow from './components/DisplayWindow';
 import TextBox from './components/TextBox';
@@ -14,18 +14,25 @@ export default function Home() {
   const [count, setCount] = useState(0)
 
   return (
+    <home>
+
     <body>
-      <div className="App">
-        <Navbar />
-      </div>
-      <div>
-        <SessionBar/>
-      </div>
-      <div>
-        <DisplayWindow />
-        <TextBox />
+      <div class="chat-container">
+        <div className="navbar">
+          <Navbar />
+        </div>
+        <div class="session-bar">
+          <SessionBar/>
+        </div>
+        <div class="chat-display">
+          <DisplayWindow />
+        </div>
+        <div class="user-input">
+          <TextBox />
+        </div>
       </div>
     </body>
+    </home>
 
 
   )

diff --git a/FrontEnd/src/components/TextBox.jsx b/FrontEnd/src/components/TextBox.jsx
@@ -1,4 +1,36 @@
 import React from 'react'
+import axios from 'axios'
+async function getDataAxios(Text){
+
+  //get response here
+  var response = "initialized"
+
+  return "\n the query responce is "+response
+}
+//   let data = JSON.stringify({
+//     "inputs": Text
+//   });
+
+
+// let config = {
+//   method: 'get',
+//   maxBodyLength: Infinity,
+//   url: 'localhost:443/chatBot/query',
+//   headers: { 
+//     'Content-Type': 'application/json', 
+//     'Authorization': 'Bearer tokenToken'
+//   },
+//   data : data
+// };
+
+//   axios.request(config)
+//   .then((response) => {
+//     return response.data;
+//   })
+//   .catch((error) => {
+//     console.log(error);
+//   });
+
 export default class TextBox extends React.Component {
   constructor(props) {
     super(props);
@@ -12,9 +44,11 @@ export default class TextBox extends React.Component {
     this.setState({value: event.target.value});
   }
 
-  handleSubmit(event) {
+  async handleSubmit(event) {
     //make call to backend here
-    alert('A name was submitted: ' + this.state.value);
+    var response = await getDataAxios(this.state.value);
+
+    alert('A query was submitted: ' + this.state.value +'\n query response is'+ response);
     event.preventDefault();
   }
 

diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
@@ -28,11 +28,41 @@ a:hover {
 }
 
 body {
-  margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
   display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.chat-container {
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.session-bar {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+}
+
+.chat-display {
+  flex: 1;
+  padding: 10px;
+  overflow-y: scroll;
+}
+
+.user-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
 }
 
 h1 {