From 747336be865e225520efbf2e09b8acbf495ab550 Mon Sep 17 00:00:00 2001
From: DirkSchlossmacher <62424946+DirkSchlossmacher@users.noreply.github.com>
Date: Tue, 14 Nov 2023 09:27:54 +0100
Subject: [PATCH] sidebar api link usagestats

---
 app/components/home.module.scss | 15 +++++++++++++++
 app/components/sidebar.tsx      | 15 ++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index b836d2bec..6ed2e6647 100644
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -338,3 +338,18 @@
 .rtl-screen {
   direction: rtl;
 }
+
+.api-link {
+  cursor: pointer;
+  color: inherit; // Or any color that makes it blend in with the text
+  text-decoration: none; // No underline to make it look like normal text
+
+  &:hover {
+    text-decoration: underline; // Optional: underline on hover to indicate interactivity
+  }
+
+  &:focus {
+    outline: none; // Optional: custom focus style for accessibility
+    // Add your own focus styles here
+  }
+}
\ No newline at end of file
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 5f002768e..2c9d1279e 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -31,6 +31,11 @@ import { Link, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import { showConfirm, showToast } from "./ui-lib";
 
+import { UsageStats } from '../usage-stats/UsageStats';
+
+const [showUsageStats, setShowUsageStats] = useState(false); // State to control the visibility of the usage stats
+const toggleUsageStats = () => setShowUsageStats(!showUsageStats); // Function to toggle the usage stats UI
+
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
 });
@@ -158,7 +163,15 @@ export function SideBar(props: { className?: string }) {
           AdEx<b>GPT</b> - via API
         </div>
         <div className={styles["sidebar-sub-title"]}>
-          secure local UI for OpenAI API
+          secure local UI for 
+          <span 
+            className={styles["api-link"]} // You might need to define this style
+            onClick={toggleUsageStats}
+            role="button" // Accessibility improvement
+            tabIndex={0} // Accessibility improvement
+          >
+            OpenAI API
+          </span>
           <br />
           <a href="https://adexpartners.sharepoint.com/sites/AdExGPT/SitePages/AdExGPT.aspx">
             FAQ & Support