feat: beautify the page and add sending status

fe_repo/package.json

@@ -13,17 +13,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/base": "5.0.0-beta.58",
     "@mui/system": "^6.1.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "2.1.2",
     "autoprefixer": "^10.4.20",

fe_repo/src/App.tsx

@@ -1,28 +1,49 @@
-import { Header, Content, ChatBox } from './pages'
-import { useState } from "react";
-import { sendMessage } from "./functions/api.ts";
+import {ChatBox, Content, Header} from './pages'
+import {useState} from "react";
+import {sendMessage} from "./functions/api.ts";
 
 export type Message = {
   text: string,
   isUser: boolean,
 }
+
 function App() {
 
   const [messages, setMessages] = useState<Message[]>([])
 
   const onSendMessage = (message: string) => {
-    setMessages((messages) => [...messages, { text: message, isUser: true }]);
+    const sendingMessage = {
+      text: 'Sending message...',
+      isUser: false
+    };
+
+    setMessages((messages) => [...messages,
+      {
+        text: message,
+        isUser: true
+      },
+      sendingMessage]);
 
     setTimeout(() => {
       // handle message sent, update conversation section
-      const response = { text: sendMessage(message), isUser: false }
-      setMessages((messages) => [...messages, response]);
+      // const response = {text: sendMessage(message), isUser: false}
+      // remove sending prompt message
+      sendingMessage.text = sendMessage(message);
+      setMessages((messages) => [...messages]);
     }, 1000);
   }
 
+  const mainContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column' as const as 'column',
+    height: '100vh',
+    backgroundColor: '#f0f4f8', // Light pastel background
+    padding: '20px',
+  };
+
   return (
-    <div className="main-container">
-      <Header></Header>
+    <div style={mainContainerStyle}>
+      <Header/>
       <Content messages={messages}></Content>
       <ChatBox onSendMessage={onSendMessage}></ChatBox>
     </div>

fe_repo/src/functions/api.ts

@@ -1,3 +1,6 @@
+import {v4 as uuidv4} from 'uuid';
+import axios from "axios";
+
 // TODO: Implement API functions
 
 export function sendMessage(message: string) {
@@ -23,14 +26,34 @@ export function sendMessage(message: string) {
 }
 
 export function uploadFile(file: File) {
-  // TODO: Implement file upload after api schema is provided
   console.log("uploading file", file.name);
-  // const formData = new FormData();
-  // formData.append('file', file);
-  // fetch('/api/upload', {
-  //   method: 'POST',
-  //   body: formData,
-  // }).then(response => response.json())
-  //   .then(data => console.log('File upload success:', data))
-  //   .catch(error => console.error('Error uploading file:', error));
+  axios.post('/api/upload', {file: file, user_id: getUserId()},
+    {headers: {'Content-Type': 'multipart/form-data'}})
+    .catch(error => console.error('Error fetching  response', error));
+}
+
+
+// user id
+export function getUserId() {
+  // TODO: Implement login using google to replace random uuid generation
+  let uuid;
+  if (typeof window !== 'undefined') {
+    uuid = localStorage.getItem('userId') || uuidv4();
+  } else {
+    uuid = uuidv4();
+  }
+  setUserId(uuid);
+  return uuid;
+}
+
+export function setUserId(userId: string) {
+  if (!userId || typeof window === 'undefined') {
+    return;
+  }
+  localStorage.setItem('userId', userId);
+}
+
+// login using google
+export function login() {
+  return getUserId();
 }

fe_repo/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <App/>
   </StrictMode>,
 )