Merge branch 'frontend'

noamzilo · Nov 27, 2024 · 4fdfd61 · 4fdfd61
2 parents 20775df + 053b4e6
commit 4fdfd61
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 32 deletions.
diff --git a/commands.txt b/commands.txt
@@ -80,6 +80,8 @@ SELECT current_database(); (show database name to see if local or remote)
 \dt (list all tables)
 
 
-reverse proxy:
+reverse proxy (CloudFlare):
+wrangler dev /home/noams/src/personal_website/cloudflare/router.js
+
 http://localhost:8787/r/VDG7D39B
 http://personal-website-backend-839353010571.us-central1.run.app/llm/redirect/VDG7D39B
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,17 +2,26 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>My Personal Website</title>
-  <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>My Personal Website</title>
+	<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
 </head>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-2H5M5DPLEE"></script>
+<script>
+	window.dataLayer = window.dataLayer || [];
+	function gtag() { dataLayer.push(arguments); }
+	gtag('js', new Date());
+
+	gtag('config', 'G-2H5M5DPLEE');
+</script>
 
 <body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
+	<noscript>You need to enable JavaScript to run this app.</noscript>
+	<div id="root"></div>
 </body>
 
 </html>
diff --git a/frontend/src/Analytics.js b/frontend/src/Analytics.js
@@ -0,0 +1,6 @@
+import ReactGA from "react-ga4";
+import { GPT_PAGE_CONSTANTS } from "./components/gpt_page/constants";
+
+export const initializeAnalytics = () => {
+	ReactGA.initialize(GPT_PAGE_CONSTANTS.GOOGLE_ANALYTICS_MEASURMENT_ID); // Replace with your Measurement ID
+};
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -2,14 +2,33 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import GPTInterface from './components/gpt_page/GPTInterface';
 import debugEnvironment from './utils/envDebug';
+import { initializeAnalytics } from "./Analytics";
+import { useLocation } from 'react-router-dom';
+import ReactGA from 'react-ga4';
+import { useEffect } from 'react';
 
 // Run environment debug on app start
 const envVars = debugEnvironment();
 console.debug(`envVars: ${envVars}`);
 
+const TrackPageView = () => {
+	const location = useLocation();
+
+	useEffect(() => {
+		ReactGA.send({ hitType: "pageview", page: location.pathname });
+	}, [location]);
+
+	return null;
+};
+
 function App() {
+	useEffect(() => {
+		initializeAnalytics();
+	}, []);
+
 	return (
 		<Router >
+			<TrackPageView />
 			<Routes>
 				<Route path="/*" element={<GPTInterface />} />
 			</Routes>

diff --git a/frontend/src/components/gpt_page/constants.jsx b/frontend/src/components/gpt_page/constants.jsx
@@ -19,4 +19,6 @@ export const GPT_PAGE_CONSTANTS = {
     BACK_BUTTON_TEXT: "New Question",
 
 	SHORT_URL_DEFAULT: "",
+
+	GOOGLE_ANALYTICS_MEASURMENT_ID: "G-2H5M5DPLEE",
 };
diff --git a/frontend/src/components/gpt_page/main_content/MainContent.module.css b/frontend/src/components/gpt_page/main_content/MainContent.module.css
@@ -91,6 +91,7 @@
 	font-size: 12px;
 	padding: 10px 0;
 	flex-direction: column;
+	margin-bottom: 50px;
 }
 
 /* Responsive Styles */

diff --git a/frontend/src/components/gpt_page/main_content/chat/InitialChat.jsx b/frontend/src/components/gpt_page/main_content/chat/InitialChat.jsx
@@ -20,7 +20,8 @@ function InitialChat({
     top: window.innerHeight / 2,
     left: window.innerWidth / 2,
   });
-
+  // Add state to track if the page has loaded
+  const [isPageLoaded, setIsPageLoaded] = useState(document.readyState === 'complete');
   const decodedQuery = initialQuery || '';
 
   // Call useMouseAnimation before using startMouseAnimation in useEffect
@@ -41,12 +42,28 @@ function InitialChat({
     }
   }, [textareaElement]);
 
+
+
+  // Effect to update isPageLoaded when the page has fully loaded
+  useEffect(() => {
+    if (!isPageLoaded) {
+      const handleLoad = () => setIsPageLoaded(true);
+      window.addEventListener('load', handleLoad);
+      return () => {
+        window.removeEventListener('load', handleLoad);
+      };
+    }
+  }, [isPageLoaded]);
+
   useEffect(() => {
     if (decodedQuery.trim()) {
       onQueryChange(decodedQuery);
+    }
+
+    if (isPageLoaded && decodedQuery.trim()) {
       startMouseAnimation();
     }
-  }, [decodedQuery, onQueryChange, startMouseAnimation]);
+  }, [decodedQuery, onQueryChange, startMouseAnimation, isPageLoaded]);
 
   // Correctly initialize isAnimatingTyping with useState
   const [isAnimatingTyping, setIsAnimatingTyping] = useState(false);
@@ -105,7 +122,6 @@ function InitialChat({
         alt="Animated Mouse Cursor"
         initial={{ top: 0, left: 0 }}
         animate={controls}
-        transition={{ duration: 1.5, ease: 'easeOut' }}
         style={{
           position: 'fixed',
           width: '20px',

diff --git a/frontend/src/components/gpt_page/main_content/chat/hooks/useMouseAnimation.js b/frontend/src/components/gpt_page/main_content/chat/hooks/useMouseAnimation.js
@@ -12,29 +12,37 @@ function useMouseAnimation(emitter, targetPositionTop, targetPositionLeft) {
 		setIsMouseAnimating(true);
 		console.log('Mouse move effect started');
 
-		// Initialize position and make it invisible
-		await controls.set({ top: 0, left: 0, opacity: 0 });
-
-		// Make the element visible instantly
-		await controls.set({ opacity: 1 });
-
-		// Animate to target position
-		await controls.start(
-			{
-				top: targetPositionTop,
-				left: targetPositionLeft,
-			},
-			{ duration: 1.5, ease: 'easeOut' }
-		);
-
-		// Wait for 100ms before making it disappear
-		timeoutRef.current = setTimeout(async () => {
+		try {
+			// Initialize position and make it invisible
+			controls.set({ top: 0, left: 0, opacity: 0 });
+
+			// Make the element visible instantly
+			controls.set({ opacity: 1 });
+
+			// Animate to target position
+			const duration_sec = 1.5;
+			controls.start(
+				{
+					top: targetPositionTop,
+					left: targetPositionLeft,
+				},
+				{ duration: duration_sec, ease: 'easeOut' }
+			);
+
+			const static_wait_sec = 0.1;
+			// Wait for 100ms after the animation finishes
+			await new Promise(resolve => {
+				timeoutRef.current = setTimeout(resolve, 1000 * (duration_sec + static_wait_sec));
+			});
+
 			// Immediately hide the element without animation
-			await controls.set({ opacity: 0 });
+			controls.set({ opacity: 0 });
 
-			setIsMouseAnimating(false);
+			// Notify the emitter and update state
 			emitter.emit('mouseAnimationDone');
-		}, 150);
+		} finally {
+			setIsMouseAnimating(false);
+		}
 	}, [controls, emitter, targetPositionTop, targetPositionLeft]);
 
 	// Cleanup the timeout if the component unmounts before timeout completes

diff --git a/frontend/src/services/LlmQueryService.jsx b/frontend/src/services/LlmQueryService.jsx
@@ -7,7 +7,8 @@ const LlmQueryService = {
 		}
         try {
             console.log(`LlmQueryService asked ${query} and awaiting response`)
-            const response = await apiService.post('/llm/query', { "query": query });
+			const edited_query = "Use a maximum of 100 words to reply to: " + query;
+            const response = await apiService.post('/llm/query', { "query": edited_query });
             if (response.status !== 200) {
                 throw new Error(`Llm Query with query ${query} got error: ${response.data}`);
             }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "react-ga4": "^2.1.0",
     "react-icons": "^5.3.0"
   }
 }