From 33bdf069ba94c8f3ca69231dce689d57a3e8b5b7 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Tue, 29 Oct 2024 21:01:34 +0530
Subject: [PATCH 1/3] added credit  usage warning on 80%

---
 gui/src/components/Layout.tsx        |   2 +
 gui/src/components/usagesWarning.tsx | 132 +++++++++++++++++++++++++++
 2 files changed, 134 insertions(+)
 create mode 100644 gui/src/components/usagesWarning.tsx

diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx
index 5f4b77b28a..01ce84c46f 100644
--- a/gui/src/components/Layout.tsx
+++ b/gui/src/components/Layout.tsx
@@ -31,6 +31,7 @@ import ProgressBar from "./loaders/ProgressBar";
 import PostHogPageView from "./PosthogPageView";
 import ProfileSwitcher from "./ProfileSwitcher";
 import ShortcutContainer from "./ShortcutContainer";
+import UsageWarning from "./usagesWarning";
 
 // check mac or window
 const platform = navigator.userAgent.toLowerCase();
@@ -291,6 +292,7 @@ const Layout = () => {
           <Outlet />
           <ModelDropdownPortalDiv id="model-select-top-div"></ModelDropdownPortalDiv>
           <ProfileDropdownPortalDiv id="profile-select-top-div"></ProfileDropdownPortalDiv>
+          <UsageWarning />
           {HIDE_FOOTER_ON_PAGES.includes(location.pathname) || (
             <Footer>
               <div className="mr-auto flex flex-grow gap-2 items-center overflow-hidden">
diff --git a/gui/src/components/usagesWarning.tsx b/gui/src/components/usagesWarning.tsx
new file mode 100644
index 0000000000..354912de3c
--- /dev/null
+++ b/gui/src/components/usagesWarning.tsx
@@ -0,0 +1,132 @@
+import { useState, useEffect } from 'react';
+import { AlertTriangle, X } from 'lucide-react';
+import { SERVER_URL } from "../../../core/util/parameters";
+
+export default function UsageWarning() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [message, setMessage] = useState("");
+
+  // TODO: get logged in user token 
+  const token = "";
+  const url = `${SERVER_URL}/get-usage`;
+
+  const getMessage = async () => {
+    try {
+      const res = await fetch(url, {
+        method: 'GET',
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        }
+      });
+
+      if (!res.ok) {
+        console.log('Error fetching usage data');
+        return;
+      }
+
+      const { warning_message } = await res.json();
+      if (warning_message) {
+        setMessage(warning_message);
+        setIsVisible(true); 
+      } else {
+        setMessage("");
+        setIsVisible(false); 
+      }
+    } catch (error) {
+      console.log('Error fetching usage data:', error);
+    }
+  };
+
+  useEffect(() => {
+    getMessage();
+  }, []);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null; 
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '20px',
+        right: '20px',
+        backgroundColor: 'rgba(255, 250, 220, 0.97)',
+        borderRadius: '8px',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)',
+        padding: '12px 16px',
+        maxWidth: '300px',
+        zIndex: 1000,
+        animation: 'slideIn 0.3s ease-out',
+        border: '1px solid rgba(251, 191, 36, 0.3)',
+      }}
+    >
+      <div style={{ position: 'relative', paddingRight: '24px' }}>
+        <button
+          onClick={handleClose}
+          style={{
+            position: 'absolute',
+            top: '-4px',
+            right: '-8px',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            transition: 'background-color 0.2s',
+          }}
+          aria-label="Close warning"
+        >
+          <X
+            size={18}
+            style={{
+              color: '#92400e',
+            }}
+          />
+        </button>
+        <div style={{ display: 'flex', alignItems: 'flex-start' }}>
+          <AlertTriangle
+            size={20}
+            style={{
+              color: '#d97706',
+              marginRight: '12px',
+              flexShrink: 0,
+              marginTop: '2px',
+            }}
+          />
+          <div
+            style={{
+              flex: 1,
+              fontSize: '12px',
+              fontWeight: 500,
+              color: '#92400e',
+            }}
+          >
+            {message}
+          </div>
+        </div>
+      </div>
+      <style>{`
+        @keyframes slideIn {
+          from {
+            transform: translateY(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }
+        button:hover {
+          background-color: rgba(251, 191, 36, 0.2);
+        }
+      `}</style>
+    </div>
+  );
+}

From a28cbea54a9212475313b9c883a32ef0c4dedf2c Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Fri, 8 Nov 2024 18:56:51 +0530
Subject: [PATCH 2/3] added vscode native notification warning for credit used
 more than 80%

---
 gui/src/components/usagesWarning.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/gui/src/components/usagesWarning.tsx b/gui/src/components/usagesWarning.tsx
index 354912de3c..6eb8b831a2 100644
--- a/gui/src/components/usagesWarning.tsx
+++ b/gui/src/components/usagesWarning.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { AlertTriangle, X } from 'lucide-react';
 import { SERVER_URL } from "../../../core/util/parameters";
+import * as vscode from 'vscode';
 
 export default function UsageWarning() {
   const [isVisible, setIsVisible] = useState(false);
@@ -29,6 +30,7 @@ export default function UsageWarning() {
       if (warning_message) {
         setMessage(warning_message);
         setIsVisible(true); 
+        vscode.window.showWarningMessage(warning_message);
       } else {
         setMessage("");
         setIsVisible(false); 

From 66c063257254789e8c02dceb96d5596b5302cc41 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sun, 10 Nov 2024 12:18:00 +0530
Subject: [PATCH 3/3] usertoken

---
 gui/src/components/usagesWarning.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/gui/src/components/usagesWarning.tsx b/gui/src/components/usagesWarning.tsx
index 6eb8b831a2..6fd81a9aa6 100644
--- a/gui/src/components/usagesWarning.tsx
+++ b/gui/src/components/usagesWarning.tsx
@@ -7,8 +7,7 @@ export default function UsageWarning() {
   const [isVisible, setIsVisible] = useState(false);
   const [message, setMessage] = useState("");
 
-  // TODO: get logged in user token 
-  const token = "";
+  const token = localStorage.getItem('userToken') || "";
   const url = `${SERVER_URL}/get-usage`;
 
   const getMessage = async () => {