Fix ESLint and CSS Minimizer errors blocking npm run build (#17)

## Summary
- Closes #16
- Clear unused imports/bindings, empty `{}` prop patterns, `==` vs `===`, and hook dependency gaps across App, contexts, and pages
- Replace invalid `calc(3rem + unset)` in `index.css` so Css Minimizer no longer fails

## Test plan
- [x] `npm run build` in `llm-fe` succeeds (no ESLint / postcss-calc errors)
- [ ] Spot-check SignIn, dashboard, account, feedback, document storage pages still render
- [ ] Confirm WebSocket/message flows still work after MessageContext dep cleanupReviewed-on: #17

llm-fe/src/App.tsx

@@ -1,18 +1,12 @@
 import React, { Component, useContext } from 'react';
 import './App.css';
-import Dashboard from './llm-fe/pages/Dashboard/Dashboard';
+import { Routes, Route, Outlet, Navigate } from 'react-router-dom';
-import { Routes, Route, createRoutesFromElements, Outlet, Navigate, useLocation } from 'react-router-dom';
-import { createRoot } from 'react-dom/client';
 import SignIn from './llm-fe/pages/SignIn/SignIn';
 import PasswordReset from './llm-fe/pages/PasswordReset/PasswordReset';
 import NotFound from './llm-fe/pages/NotFound/NotFound';
-import { AuthContext, AuthProvider } from './llm-fe/contexts/AuthContext';
+import { AuthContext } from './llm-fe/contexts/AuthContext';
-import AccountPage from './llm-fe/pages/Account/Account';
-import AsyncDashboard from './llm-fe/pages/AsyncDashboard/AsyncDashboard';
 import TermsOfService from './llm-fe/pages/TermsOfService/TermsOfService';
 import SetPassword from './llm-fe/components/SetPassword/SetPassword';
-import FeedbackPage from './llm-fe/pages/FeedbackPage/FeedbackPage';
-import { Typography } from '@mui/material';
 import AsyncDashboard2 from './llm-fe/pages/AsyncDashboard2/AsyncDashboard2';
 import FeedbackPage2 from './llm-fe/pages/FeedbackPage2/FeedbackPage2';
 import DocumentStoragePage from './llm-fe/pages/DocumentStoragePage/DocumentStoragePage';
@@ -23,7 +17,7 @@ import GlobalThemeWrapper from './llm-fe/components/GlobalThemeWrapper/GlobalThe
 import Tracker from './llm-fe/components/Tracker/Tracker';
 
 const ProtectedRoutes = () => {
-  const { authenticated, needsNewPassword, loading } = useContext(AuthContext);
+  const { authenticated, loading } = useContext(AuthContext);
   if (loading) {
     return (
       <div>Loading</div>
@@ -84,4 +78,3 @@ class App extends Component {
 }
 
 export default App;
-

llm-fe/src/axiosApi.js

@@ -53,8 +53,8 @@ axiosInstance.interceptors.response.use(
 
     if (
       error.response.data.code === "token_not_valid" &&
-      error.response.status == 401 &&
+      error.response.status === 401 &&
-      error.response.statusText == "Unauthorized"
+      error.response.statusText === "Unauthorized"
     ) {
       const refresh_token = localStorage.getItem("refresh_token");
 

llm-fe/src/index.css

@@ -19,7 +19,7 @@
    * Copyright 2011-2022 The Bootstrap Authors
    * Copyright 2011-2022 Twitter, Inc.
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-   */:root{--bs-blue:#63b3ed;--bs-indigo:#596cff;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#f56565;--bs-orange:#fd7e14;--bs-yellow:#fbd38d;--bs-green:#81e6d9;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#f0f2f5;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#e91e63;--bs-secondary:#7b809a;--bs-success:#4caf50;--bs-info:#1a73e8;--bs-warning:#fb8c00;--bs-danger:#f44335;--bs-light:#f0f2f5;--bs-dark:#344767;--bs-white:#fff;--bs-dark-blue:#1a237e;--bs-primary-rgb:233,30,99;--bs-secondary-rgb:,128,154;--bs-success-rgb:76,175,80;--bs-info-rgb:26,115,232;--bs-warning-rgb:251,140,0;--bs-danger-rgb:244,67,53;--bs-light-rgb:240,242,245;--bs-dark-rgb:52,71,103;--bs-dark-blue-rgb:26,35,126;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:,128,154;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:"Roboto",Helvetica,Arial,sans-serif;--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#7b809a;--bs-body-bg:#fff;--bs-border-color:#dee2e6;border:1px solid rgba(0,0,0,.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.125rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:0.75rem;--bs-border-radius-2xl:1rem;--bs-border-radius-pill:50rem;--bs-link-color:#e91e63;--bs-link-hover-color:#e91e63;--bs-code-color:#d63384;--bs-highlight-bg:#fcf8e3}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2;color:#344767}.h1,h1{font-size:calc(1.425rem + 2.1vw)}@media (min-width:1200px){.h1,h1{font-size:3rem}}.h2,h2{font-size:calc(1.35rem + 1.2vw)}@media (min-width:1200px){.h2,h2{font-size:2.25rem}}.h3,h3{font-size:calc(1.3125rem + .75vw)}@media (min-width:1200px){.h3,h3{font-size:1.875rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}p{margin-top:0;margin-bottom:1rem}abbr[title]{text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:600}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:700}.small,small{font-size:.875em}.mark,mark{padding:.2em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:var(--bs-link-color)}a,a:hover{text-decoration:none}a:hover{color:var(--bs-link-hover-color)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.125rem}kbd kbd{padding:0;font-size:1em;font-weight:600}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;borLine truncated
+   */:root{--bs-blue:#63b3ed;--bs-indigo:#596cff;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#f56565;--bs-orange:#fd7e14;--bs-yellow:#fbd38d;--bs-green:#81e6d9;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#f0f2f5;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#e91e63;--bs-secondary:#7b809a;--bs-success:#4caf50;--bs-info:#1a73e8;--bs-warning:#fb8c00;--bs-danger:#f44335;--bs-light:#f0f2f5;--bs-dark:#344767;--bs-white:#fff;--bs-dark-blue:#1a237e;--bs-primary-rgb:233,30,99;--bs-secondary-rgb:,128,154;--bs-success-rgb:76,175,80;--bs-info-rgb:26,115,232;--bs-warning-rgb:251,140,0;--bs-danger-rgb:244,67,53;--bs-light-rgb:240,242,245;--bs-dark-rgb:52,71,103;--bs-dark-blue-rgb:26,35,126;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:,128,154;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:"Roboto",Helvetica,Arial,sans-serif;--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#7b809a;--bs-body-bg:#fff;--bs-border-color:#dee2e6;border:1px solid rgba(0,0,0,.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.125rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:0.75rem;--bs-border-radius-2xl:1rem;--bs-border-radius-pill:50rem;--bs-link-color:#e91e63;--bs-link-hover-color:#e91e63;--bs-code-color:#d63384;--bs-highlight-bg:#fcf8e3}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2;color:#344767}.h1,h1{font-size:calc(1.425rem + 2.1vw)}@media (min-width:1200px){.h1,h1{font-size:3rem}}.h2,h2{font-size:calc(1.35rem + 1.2vw)}@media (min-width:1200px){.h2,h2{font-size:2.25rem}}.h3,h3{font-size:calc(1.3125rem + .75vw)}@media (min-width:1200px){.h3,h3{font-size:1.875rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}p{margin-top:0;margin-bottom:1rem}abbr[title]{text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:600}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:700}.small,small{font-size:.875em}.mark,mark{padding:.2em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:var(--bs-link-color)}a,a:hover{text-decoration:none}a:hover{color:var(--bs-link-hover-color)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.125rem}kbd kbd{padding:0;font-size:1em;font-weight:600}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;borLine truncated
 
 /*!
 

llm-fe/src/llm-fe/components/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import MDTypography from '../../ui-kit/components/MDTypography';
 
-const Footer = ({}): JSX.Element => {
+const Footer = (): JSX.Element => {
   return (
    
     <div className='continer-fluid'>

llm-fe/src/llm-fe/components/PageWrapperLayout/PageWrapperLayout.tsx

@@ -1,11 +1,10 @@
 import createCache, { EmotionCache } from "@emotion/cache";
-import { setOpenConfigurator, useMaterialUIController } from "../../ui-kit/context";
+import { useMaterialUIController } from "../../ui-kit/context";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import stylisRTLPlugin from "stylis-plugin-rtl";
-import MDBox from "../../ui-kit/components/MDBox";
 import { CacheProvider } from "@emotion/react";
-import { CssBaseline, Icon, ThemeProvider } from "@mui/material";
+import { CssBaseline, ThemeProvider } from "@mui/material";
 import createTheme from "../../ui-kit/assets/theme";
 import createDarkTheme from "../../ui-kit/assets/theme-dark";
 import themeRtl from "../../ui-kit/assets/theme/theme-rtl";
@@ -18,10 +17,9 @@ type PageWrapperLayoutProps = {
 
 const PageWrapperLayout = ({ children }: PageWrapperLayoutProps): JSX.Element => {
 
-  const [controller, dispatch] = useMaterialUIController();
+  const [controller] = useMaterialUIController();
   const {
     direction,
-    openConfigurator,
     darkMode,
     themeColor,
   } = controller;
@@ -38,9 +36,6 @@ const PageWrapperLayout = ({ children }: PageWrapperLayoutProps): JSX.Element =>
     setRtlCache(cacheRtl);
   }, []);
 
-  // Change the openConfigurator state
-  const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
-
   // Setting the dir attribute for the body element
   useEffect(() => {
     document.body.setAttribute("dir", direction);
@@ -54,30 +49,6 @@ const PageWrapperLayout = ({ children }: PageWrapperLayoutProps): JSX.Element =>
     }
   }, [pathname]);
 
-  const configsButton = (
-    <MDBox
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      width="3.25rem"
-      height="3.25rem"
-      bgColor="white"
-      shadow="sm"
-      borderRadius="50%"
-      position="fixed"
-      right="2rem"
-      bottom="2rem"
-      zIndex={99}
-      color="dark"
-      sx={{ cursor: "pointer" }}
-      onClick={handleConfiguratorOpen}
-    >
-      <Icon fontSize="small" color="inherit">
-        settings
-      </Icon>
-    </MDBox>
-  );
-
   return direction === "rtl" ? (
     <CacheProvider value={rtlCache}>
       <ThemeProvider theme={darkMode ? themeDarkRTL : themeRtl}>

llm-fe/src/llm-fe/components/ParticleBackground/ParticleBackground.tsx

@@ -49,15 +49,6 @@ const ParticleBackground = () => {
                 this.vy = (Math.random() - 0.5) * 0.5;
                 this.size = Math.random() * 2 + 1;
                 // Use theme main color or fallback
-                const baseColor = theme?.main || '#6495ed';
-                // Convert hex to rgb for opacity if needed, or just use it directly if it's already compatible
-                // For simplicity, let's assume theme.main is a hex and we want to add opacity. 
-                // But here we are using a fixed color for now, let's try to use the theme color.
-                this.color = theme?.darkMode
-                    ? `rgba(100, 149, 237, ${Math.random() * 0.5 + 0.2})`
-                    : `rgba(100, 149, 237, ${Math.random() * 0.5 + 0.2})`; // Keep blueish for now, maybe change later
-
-                // Better approach: use the theme main color
                 this.color = theme?.main
                     ? `${theme.main}${Math.floor((Math.random() * 0.5 + 0.2) * 255).toString(16).padStart(2, '0')}`
                     : `rgba(100, 149, 237, ${Math.random() * 0.5 + 0.2})`;

llm-fe/src/llm-fe/components/SetPassword/SetPassword.tsx

@@ -1,7 +1,7 @@
 import { Form, Formik } from 'formik';
-import React, { Dispatch, PropsWithChildren, SetStateAction, useState } from 'react';
+import React from 'react';
 import CustomPasswordField from '../../components/CustomPasswordField/CustomPasswordField';
-import { Alert, Button, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import { axiosInstance } from '../../../axiosApi';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import CustomToastMessage from '../../components/CustomToastMessage/CustomeToastMessage';
@@ -46,7 +46,7 @@ const contains_special_character = (item: string): boolean => {
     return false;
 }
 
-const SetPassword = ({ }): JSX.Element => {
+const SetPassword = (): JSX.Element => {
     const navigate = useNavigate();
     // see if the user is allowed to come here first
     const [queryParameters] = useSearchParams()

llm-fe/src/llm-fe/contexts/AccountContext.tsx

@@ -53,7 +53,7 @@ const AccountProvider = ({children}: AccountProviderProps) => {
             
         }
 
-    }, [authenticated])
+    }, [authenticated, loading])
     return (
         <AccountContext.Provider value={{account, setAccount}}>
             {children}

llm-fe/src/llm-fe/contexts/AuthContext.tsx

@@ -1,7 +1,5 @@
-import { Token } from "@mui/icons-material";
 import { jwtDecode } from "jwt-decode";
 import { createContext, ReactNode, useState, useEffect } from "react"
-import { useNavigate } from "react-router-dom";
 
 type AuthProviderProps = {
     children?: ReactNode;
@@ -55,7 +53,6 @@ const AuthProvider = ({children}: AuthProviderProps) => {
     }, [])
     //console.log(authenticated)
     const [ needsNewPassword, setNeedsNewPassword] = useState(initialValues.needsNewPassword)
-    const navigation = useNavigate();
 
     return (
         <AuthContext.Provider value={{ authenticated, setAuthentication, needsNewPassword, setNeedsNewPassword, loading}}>

llm-fe/src/llm-fe/contexts/ConversationContext.tsx

@@ -69,7 +69,7 @@ const ConversationProvider = ({children}: ConversationProviderProps) => {
         if(!loading && authenticated){
             GetConversations();
         }
-    }, [selectedConversation, authenticated, preferencesUpdated])
+    }, [selectedConversation, authenticated, preferencesUpdated, loading])
     return(
         <ConversationContext.Provider value={{conversations, setConversations, selectedConversation, setSelectedConversation, deleteConversation}}>
             {children}

llm-fe/src/llm-fe/contexts/MessageContext.tsx

@@ -1,5 +1,4 @@
 import { createContext, ReactNode, useContext, useEffect, useRef, useState } from "react";
-import { AuthContext } from "./AuthContext";
 import { WebSocketContext } from "./WebSocketContext";
 import { AccountContext } from "./AccountContext";
 import { ConversationContext } from "./ConversationContext";
@@ -30,10 +29,9 @@ const initialValues = {
 const MessageContext = createContext<IMessageContext>(initialValues);
 
 const MessageProvider = ( {children}: MessageProviderProps) => {
-    const { authenticated, loading } = useContext(AuthContext);
+    const [subscribe, unsubscribe]= useContext(WebSocketContext)
-    const [subscribe, unsubscribe, socket, sendMessage]= useContext(WebSocketContext)
     const { account } = useContext(AccountContext)
-    const {conversations, selectedConversation, setSelectedConversation} = useContext(ConversationContext);
+    const {selectedConversation, setSelectedConversation} = useContext(ConversationContext);
 
     const [stateMessage, setStateMessage] = useState<string>('')
     const [conversationDetails, setConversationDetails] = useState<ConversationPrompt[]>([])
@@ -44,6 +42,7 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
     const conversationRef = useRef(conversationDetails)
     const selectedConversationRef = useRef<undefined | number>(undefined)
 
+    useEffect(() => {
         async function GetConversationDetails(){
             if(selectedConversation){
                 
@@ -74,8 +73,6 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
 
             }
         }
-  
-    useEffect(() => {
         GetConversationDetails();
 
     }, [selectedConversation])
@@ -129,7 +126,7 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
             /* unsubscribe from channel during cleanup */
             unsubscribe(channelName)
         }
-    }, [account, subscribe, unsubscribe, conversationDetails])
+    }, [account, subscribe, unsubscribe, conversationDetails, selectedConversation, setSelectedConversation])
 
 
     return(

llm-fe/src/llm-fe/contexts/WebSocketContext.js

@@ -1,5 +1,4 @@
 import { AccountContext } from "./AccountContext";
-import { AuthContext } from "./AuthContext";
 
 const {
   useEffect,
@@ -12,12 +11,11 @@ const {
 const WebSocketContext = createContext();
 
 function WebSocketProvider({ children }) {
-  const { authenticated, loading } = useContext(AuthContext);
   const ws = useRef(null);
   const [socket, setSocket] = useState(null);
   const channels = useRef({}); // maps each channel to the callback
-  const { account, setAccount } = useContext(AccountContext);
+  const { account } = useContext(AccountContext);
-  const [currentChannel, setCurrentChannel] = useState("");
+  const [, setCurrentChannel] = useState("");
   const [isConnected, setIsConnected] = useState(false);
 
   /* called from a component that registers a callback for a channel */

llm-fe/src/llm-fe/pages/Account2/Account2.tsx

@@ -7,10 +7,8 @@ import { AxiosResponse } from "axios";
 import { ErrorMessage, Field, Form, Formik } from "formik";
 import Header2 from "../../components/Header2/Header2";
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground";
-import styled, { ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import ThemeSettingsCard from "../../components/ThemeSettingsCard/ThemeSettingsCard";
-import { useMaterialUIController } from "../../ui-kit/context";
-import palettes from "../../ui-kit/assets/theme/base/palettes";
 
 // Styled Components
 const PageContainer = styled.div`
@@ -191,14 +189,6 @@ const DeleteButton = styled.button`
   }
 `;
 
-type AccountUpdateValues = {
-  email: string,
-}
-
-type AccountInformationProps = {
-  account: Account | undefined
-}
-
 type InviteValues = {
   email: string
 }
@@ -316,10 +306,8 @@ const AddUserCard = ({ getCompanyUsers }: AddUserCardProps): JSX.Element => {
   )
 }
 
-const CompanyManagerCard = ({ }): JSX.Element => {
+const CompanyManagerCard = (): JSX.Element => {
   const [users, setUsers] = useState<Account[]>([]);
-  const { account } = useContext(AccountContext);
-  const [showModal, setShowModal] = useState<boolean>(false);
 
   const handleUserUpdate = async (email: string, field: string, value: string): Promise<void> => {
     //console.log(email, field, value)
@@ -413,7 +401,7 @@ const CompanyManagerCard = ({ }): JSX.Element => {
   )
 }
 
-const AccountPage = ({ }): JSX.Element => {
+const AccountPage = (): JSX.Element => {
   const { account } = useContext(AccountContext)
 
   return (
@@ -431,7 +419,7 @@ const AccountPage = ({ }): JSX.Element => {
   )
 }
 
-const Account2 = ({ }): JSX.Element => {
+const Account2 = (): JSX.Element => {
   return (
     <PageContainer>
       <ParticleBackground />

llm-fe/src/llm-fe/pages/Analytics/Analytics.tsx

@@ -79,7 +79,7 @@ const ChartContainer = styled.div`
   height: 400px;
 `;
 
-const UserPromptAnalyticsCard = ({ }): JSX.Element => {
+const UserPromptAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<UserPromptAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -114,7 +114,7 @@ const UserPromptAnalyticsCard = ({ }): JSX.Element => {
     )
 }
 
-const UserConversationAnalyticsCard = ({ }): JSX.Element => {
+const UserConversationAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<UserConversationAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -150,7 +150,7 @@ const UserConversationAnalyticsCard = ({ }): JSX.Element => {
     )
 }
 
-const CompanyUsageAnalyticsCard = ({ }): JSX.Element => {
+const CompanyUsageAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<CompanyUsageAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -185,7 +185,7 @@ const CompanyUsageAnalyticsCard = ({ }): JSX.Element => {
     )
 }
 
-const AdminAnalyticsCard = ({ }): JSX.Element => {
+const AdminAnalyticsCard = (): JSX.Element => {
     const [data, setData] = useState<AdminAnalytics[]>([])
     const theme = useContext(ThemeContext);
 
@@ -228,7 +228,7 @@ const AdminAnalyticsCard = ({ }): JSX.Element => {
 }
 
 
-const AnalyticsInner = ({ }): JSX.Element => {
+const AnalyticsInner = (): JSX.Element => {
     const { account } = useContext(AccountContext)
 
     return (
@@ -245,7 +245,7 @@ const AnalyticsInner = ({ }): JSX.Element => {
     )
 }
 
-const AnalyticsPage = ({ }): JSX.Element => {
+const AnalyticsPage = (): JSX.Element => {
     return (
         <PageContainer>
             <ParticleBackground />

llm-fe/src/llm-fe/pages/AsyncDashboard2/AsyncDashboard2.tsx

@@ -1,24 +1,17 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import styled, { ThemeContext } from "styled-components";
-import { Formik, Form, Field, ErrorMessage } from "formik";
+import { Formik, Form, Field } from "formik";
 import * as Yup from "yup";
 import { AttachFile, Delete, Send, Menu } from "@mui/icons-material"; // Keeping icons for now, can replace later if needed
 import { Tooltip } from "@mui/material";
 import Markdown from "markdown-to-jsx";
 
 import {
-  Announcement,
-  AnnouncementType,
-  Conversation,
   ConversationPrompt,
-  ConversationPromptType,
 } from "../../data";
-import { axiosInstance } from "../../../axiosApi";
-import { AxiosResponse } from "axios";
 import { ConversationContext } from "../../contexts/ConversationContext";
 import ConversationDetailCard from "../../components/ConversationDetailCard/ConversationDetailCard";
 import { WebSocketContext } from "../../contexts/WebSocketContext";
-import { AccountContext } from "../../contexts/AccountContext";
 import { MessageContext } from "../../contexts/MessageContext";
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground";
 
@@ -296,11 +289,9 @@ const AlwaysScrollToBottom = (): JSX.Element => {
   return <div ref={elementRef} />;
 };
 
-const AsyncDashboardInner = ({ }): JSX.Element => {
+const AsyncDashboardInner = (): JSX.Element => {
-  const [announcements, setAnnouncement] = useState<Announcement[]>([]);
+  const [, , , sendMessage, isConnected] =
-  const [subscribe, unsubscribe, socket, sendMessage, isConnected] =
     useContext(WebSocketContext);
-  const { account } = useContext(AccountContext);
 
   const { conversations, selectedConversation, setSelectedConversation, deleteConversation } =
     useContext(ConversationContext);
@@ -309,7 +300,6 @@ const AsyncDashboardInner = ({ }): JSX.Element => {
     conversationDetails,
     setConversationDetails,
     stateMessage,
-    isGeneratingMessage,
   } = useContext(MessageContext);
 
   const conversationRef = useRef(conversationDetails);
@@ -317,20 +307,6 @@ const AsyncDashboardInner = ({ }): JSX.Element => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-  async function GetAnnouncements() {
-    const response: AxiosResponse<AnnouncementType[]> =
-      await axiosInstance.get("announcment/get/");
-    setAnnouncement(
-      response.data.map(
-        (status, message) =>
-          new Announcement({
-            status: status,
-            message: message,
-          }),
-      ),
-    );
-  }
-
   const handlePromptSubmit = async (
     { prompt, file, fileType, modelName }: PromptValues,
     { resetForm }: any,
@@ -562,7 +538,7 @@ const AsyncDashboardInner = ({ }): JSX.Element => {
   );
 };
 
-const AsyncDashboard2 = ({ }): JSX.Element => {
+const AsyncDashboard2 = (): JSX.Element => {
   return <AsyncDashboardInner />;
 };
 

llm-fe/src/llm-fe/pages/DocumentStoragePage/DocumentStoragePage.tsx

@@ -5,7 +5,6 @@ import { axiosInstance } from "../../../axiosApi";
 import Header2 from "../../components/Header2/Header2";
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground";
 import styled from "styled-components";
-import MDButton from "../../ui-kit/components/MDButton";
 
 // Styled Components
 const PageContainer = styled.div`
@@ -190,13 +189,14 @@ type DocumentTableCardProps = {
 
 const CompanyDocumentStorageTableCard = ({ documents, setDocuments }: DocumentTableCardProps): JSX.Element => {
 
+  useEffect(() => {
     async function getUploadedDocuments() {
       try {
         const { data, }: AxiosResponse<DocumentType[]> = await axiosInstance.get(`/documents/`);
         setDocuments(data.map((item) => new Document({
 
           id: item.id,
-        name: item.file.replace(/^.*[\\\/]/, ''),
+          name: item.file.replace(/^.*[\\/]/, ''),
           date_uploaded: item.created.substring(0, 10),
           active: item.active,
           processed: item.processed,
@@ -208,10 +208,8 @@ const CompanyDocumentStorageTableCard = ({ documents, setDocuments }: DocumentTa
         console.log(error)
       }
     }
-
-  useEffect(() => {
     getUploadedDocuments();
-  }, [])
+  }, [setDocuments])
   return (
     <GlassCard>
       <CardTitle>Your documents in the company workspace</CardTitle>
@@ -256,7 +254,7 @@ const CompanyDocumentStorageTableCard = ({ documents, setDocuments }: DocumentTa
   )
 }
 
-const UserDocumentStorageTableCard = ({ }): JSX.Element => {
+const UserDocumentStorageTableCard = (): JSX.Element => {
   return (
     <GlassCard>
       <CardTitle>Your documents in your personal workspace</CardTitle>
@@ -265,11 +263,7 @@ const UserDocumentStorageTableCard = ({ }): JSX.Element => {
   )
 }
 
-type DocumentSubmitValues = {
+const DocumentUploadCard = (): JSX.Element => {
-  document: File
-}
-
-const DocumentUploadCard = ({ }): JSX.Element => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
   const handleDocumentUpload = async (): Promise<void> => {
@@ -277,10 +271,7 @@ const DocumentUploadCard = ({ }): JSX.Element => {
     console.log(selectedFile)
     if (selectedFile) {
       try {
-        const reader = new FileReader();
+        await axiosInstance.post('/documents/', {
-        reader.onload = () => {
-          const base64File = reader.result?.toString().split(',')[1];
-          axiosInstance.post('/documents/', {
           file: selectedFile
         },
           {
@@ -288,8 +279,6 @@ const DocumentUploadCard = ({ }): JSX.Element => {
               'Content-Type': 'multipart/form-data',
             },
           })
-        }
-        reader.readAsDataURL(selectedFile)
 
         // TODO set the documents here
       }
@@ -326,7 +315,7 @@ const DocumentUploadCard = ({ }): JSX.Element => {
   )
 }
 
-const DocumentStoragePageInner = ({ }): JSX.Element => {
+const DocumentStoragePageInner = (): JSX.Element => {
   const [documents, setDocuments] = useState<Document[]>([]);
   return (
     <>
@@ -337,7 +326,7 @@ const DocumentStoragePageInner = ({ }): JSX.Element => {
   )
 }
 
-const DocumentStoragePage = ({ }): JSX.Element => {
+const DocumentStoragePage = (): JSX.Element => {
   return (
     <PageContainer>
       <ParticleBackground />

llm-fe/src/llm-fe/pages/FeedbackPage2/FeedbackPage2.tsx

@@ -199,6 +199,7 @@ type FeedbackTableCardProps = {
 }
 
 const FeedbackTableCard = ({ feedbacks, setFeedbacks }: FeedbackTableCardProps): JSX.Element => {
+  useEffect(() => {
     async function getFeedbacks() {
       try {
         const { data, }: AxiosResponse<FeedbackType[]> = await axiosInstance.get(`/feedbacks/`);
@@ -213,10 +214,8 @@ const FeedbackTableCard = ({ feedbacks, setFeedbacks }: FeedbackTableCardProps):
         console.log(error)
       }
     }
-
-  useEffect(() => {
     getFeedbacks();
-  }, [])
+  }, [setFeedbacks])
 
   return (
     <GlassCard>
@@ -331,7 +330,7 @@ const FeedbackSubmitCard = ({ feedbacks, setFeedbacks }: FeedbackTableCardProps)
   )
 }
 
-const FeedbackPageInner = ({ }): JSX.Element => {
+const FeedbackPageInner = (): JSX.Element => {
   const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
   return (
     <>
@@ -341,7 +340,7 @@ const FeedbackPageInner = ({ }): JSX.Element => {
   )
 }
 
-const FeedbackPage2 = ({ }): JSX.Element => {
+const FeedbackPage2 = (): JSX.Element => {
   return (
     <PageContainer>
       <ParticleBackground />

llm-fe/src/llm-fe/pages/NotFound/NotFound.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, PropsWithChildren, SetStateAction, useState } from 'react';
+import React from 'react';
 import PageWrapperLayout from '../../components/PageWrapperLayout/PageWrapperLayout';
 import MDBox from '../../ui-kit/components/MDBox';
 import { Card, CardContent, Divider } from '@mui/material';
@@ -6,7 +6,7 @@ import MDTypography from '../../ui-kit/components/MDTypography';
 import Footer from '../../components/Footer/Footer';
 import Header2 from '../../components/Header2/Header2';
 
-const NotFound = ({}): JSX.Element => {
+const NotFound = (): JSX.Element => {
     
   return (
     <PageWrapperLayout>

llm-fe/src/llm-fe/pages/PasswordReset/PasswordReset.tsx

@@ -1,6 +1,6 @@
 import { Form, Formik, Field } from 'formik';
 import React, { useRef } from 'react';
-import { axiosInstance, cleanAxiosInstance } from '../../../axiosApi';
+import { cleanAxiosInstance } from '../../../axiosApi';
 import { useNavigate } from 'react-router-dom';
 import ReCAPTCHA from 'react-google-recaptcha';
 import ParticleBackground from '../../components/ParticleBackground/ParticleBackground';
@@ -121,7 +121,7 @@ export type EmailPasswordResetValues = {
 }
 
 
-const PasswordReset = ({ }): JSX.Element => {
+const PasswordReset = (): JSX.Element => {
     const navigate = useNavigate();
     const recaptchaRef = useRef<ReCAPTCHA>(null);
 

llm-fe/src/llm-fe/pages/PasswordResetConfirmation/PasswordReset.tsx

@@ -1,30 +1,12 @@
-import { Form, Formik } from 'formik';
+import React from 'react';
-import React, { Dispatch, PropsWithChildren, SetStateAction, useState } from 'react';
+import { Card, CardContent, Divider } from '@mui/material';
-import CustomPasswordField from '../../components/CustomPasswordField/CustomPasswordField';
-import { Button, Card, CardContent, Divider } from '@mui/material';
-import { axiosInstance } from '../../../axiosApi';
-import CustomToastMessage from '../../components/CustomToastMessage/CustomeToastMessage';
 import PageWrapperLayout from '../../components/PageWrapperLayout/PageWrapperLayout';
 import MDBox from '../../ui-kit/components/MDBox';
 import background from '../../../bg.jpeg'
 import { Col, Row } from 'react-bootstrap';
 import MDTypography from '../../ui-kit/components/MDTypography';
-import { valuesIn } from 'lodash';
-import CustomTextField from '../../components/CustomTextField/CustomTextField';
-import MDButton from '../../ui-kit/components/MDButton';
-import { useNavigate } from 'react-router-dom';
 
-export type PasswordResetValues = {
+const PasswordResetConfirmation = (): JSX.Element => {
-  password1: string;
-  password2: string;
-};
-
-export type EmailPasswordResetValues = {
-    email: string;
-}
-
-
-const PasswordResetConfirmation = ({}): JSX.Element => {
     
     
   return (

llm-fe/src/llm-fe/pages/SignIn/SignIn.tsx

@@ -135,9 +135,9 @@ const validationSchema = Yup.object().shape({
     password: Yup.string().required('Required'),
 })
 
-const SignIn = ({ }): JSX.Element => {
+const SignIn = (): JSX.Element => {
-    const { authenticated, setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
+    const { setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
-    const { account, setAccount } = useContext(AccountContext);
+    const { setAccount } = useContext(AccountContext);
     const navigate = useNavigate();
     const [errorMessage, setErrorMessage] = useState<string>('');
 

llm-fe/src/llm-fe/pages/TermsOfService/TermsOfService.tsx

@@ -1,33 +1,20 @@
 import { Form, Formik } from 'formik';
-import React, { Dispatch, PropsWithChildren, SetStateAction, useContext, useEffect, useState } from 'react';
+import React from 'react';
-import { Alert, Box, Button, Card, CardContent, CardHeader, Divider, TextField } from '@mui/material';
+import { Card, CardContent, Divider } from '@mui/material';
-import { object, ref, string } from 'yup';
 import { axiosInstance } from '../../../axiosApi';
-import CustomTextField, { CustomTextFieldProps } from '../../components/CustomTextField/CustomTextField';
-import CustomPasswordField from '../../components/CustomPasswordField/CustomPasswordField';
-import CustomToastMessage from '../../components/CustomToastMessage/CustomeToastMessage';
-import { AuthContext } from '../../contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
-import { AccountContext } from '../../contexts/AccountContext';
-import { MOCK_ACCOUNTS } from '../../mockData';
-import { AxiosResponse } from 'axios';
-import { Account, AccountType } from '../../data';
-import { Label } from '@mui/icons-material';
-import background from '../../../bg.jpeg'
 import MDTypography from '../../ui-kit/components/MDTypography';
 import PageWrapperLayout from '../../components/PageWrapperLayout/PageWrapperLayout';
 import MDBox from '../../ui-kit/components/MDBox';
 import MDButton from '../../ui-kit/components/MDButton';
 
-const TermsOfService = ({}): JSX.Element => {
+const TermsOfService = (): JSX.Element => {
-    const {authenticated, setAuthentication, setNeedsNewPassword} = useContext(AuthContext);
-    const { account, setAccount} = useContext(AccountContext);
     const navigate = useNavigate();    
     
     const handleAcknowledge = async (): Promise<void> => {
         
         try{
-            const response = await axiosInstance.post('/user/acknowledge_tos/')
+            await axiosInstance.post('/user/acknowledge_tos/')
             navigate('/')            
 
         }catch(error){