From 13403de3fcf14c17376393a17b8d1364960cac90 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Mon, 22 May 2023 08:39:39 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat(App.tsx):=20add=20version?=
 =?UTF-8?q?=20number=20to=20the=20footer=20The=20version=20number=20is=20n?=
 =?UTF-8?q?ow=20displayed=20in=20the=20footer=20of=20the=20application.=20?=
 =?UTF-8?q?The=20version=20number=20is=20fetched=20from=20the=20server=20u?=
 =?UTF-8?q?sing=20the=20/version=20endpoint=20and=20displayed=20in=20the?=
 =?UTF-8?q?=20footer.=20This=20allows=20users=20to=20easily=20identify=20w?=
 =?UTF-8?q?hich=20version=20of=20the=20application=20they=20are=20using.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/App.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 69b41fdf4..de2d5dc68 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -46,6 +46,15 @@ export default function App() {
     }>
   >([]);
 
+  // Initialize state variable for the version
+  const [version, setVersion] = useState("");
+  useEffect(() => {
+    fetch("/version")
+      .then((res) => res.json())
+      .then((data) => {
+        setVersion(data.version);
+      });
+  }, []);
   // Use effect hook to update alertsList when a new alert is added
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
@@ -158,9 +167,10 @@ export default function App() {
       <a
         target={"_blank"}
         href="https://logspace.ai/"
-        className="absolute bottom-2 left-6 text-gray-300 px-2 rounded-lg text-xs cursor-pointer font-sans tracking-wide bg-gray-800 dark:bg-gray-300 dark:text-gray-800	"
+        className="absolute bottom-2 left-6 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-gray-800 px-2 text-center font-sans text-xs tracking-wide text-gray-300 transition-all duration-500 ease-in-out hover:h-12 dark:bg-gray-300 dark:text-gray-800"
       >
-        Created by Logspace
+        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
+        <div className="mt-2">Created by Logspace</div>
       </a>
     </div>
   );