feat: :money_with_wings: free trial usage indicator

2 files changed, 95 insertions, 4 deletions

diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx
index 17100c7f..6410db8a 100644
--- a/extension/react-app/src/components/Layout.tsx
+++ b/extension/react-app/src/components/Layout.tsx
@@ -21,8 +21,9 @@ import {
   Cog6ToothIcon,
 } from "@heroicons/react/24/outline";
 import HeaderButtonWithText from "./HeaderButtonWithText";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import ModelSelect from "./ModelSelect";
+import ProgressBar from "./ProgressBar";
 
 // #region Styled Components
 const FOOTER_HEIGHT = "1.8em";
@@ -74,6 +75,7 @@ const GridDiv = styled.div`
 
 const Layout = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const client = useContext(GUIClientContext);
   const dispatch = useDispatch();
   const dialogMessage = useSelector(
@@ -82,10 +84,11 @@ const Layout = () => {
   const showDialog = useSelector(
     (state: RootStore) => state.uiState.showDialog
   );
-  const dialogEntryOn = useSelector(
-    (state: RootStore) => state.uiState.dialogEntryOn
-  );
 
+  const defaultModel = useSelector(
+    (state: RootStore) =>
+      (state.serverState.config as any).models?.default?.class_name
+  );
   // #region Selectors
 
   const bottomMessage = useSelector(
@@ -175,6 +178,17 @@ const Layout = () => {
               )}
 
               <ModelSelect />
+              {defaultModel === "MaybeProxyOpenAI" &&
+                (location.pathname === "/settings" ||
+                  parseInt(localStorage.getItem("freeTrialCounter") || "0") >=
+                    125) && (
+                  <ProgressBar
+                    completed={parseInt(
+                      localStorage.getItem("freeTrialCounter") || "0"
+                    )}
+                    total={250}
+                  />
+                )}
             </div>
             <HeaderButtonWithText
               onClick={() => {
diff --git a/extension/react-app/src/components/ProgressBar.tsx b/extension/react-app/src/components/ProgressBar.tsx
new file mode 100644
index 00000000..b4a2efc9
--- /dev/null
+++ b/extension/react-app/src/components/ProgressBar.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import styled from "styled-components";
+import { StyledTooltip, lightGray, vscForeground } from ".";
+
+const ProgressBarWrapper = styled.div`
+  width: 100px;
+  height: 6px;
+  border-radius: 6px;
+  border: 0.5px solid ${lightGray};
+  margin-top: 6px;
+`;
+
+const ProgressBarFill = styled.div<{ completed: number; color?: string }>`
+  height: 100%;
+  background-color: ${(props) => props.color || vscForeground};
+  border-radius: inherit;
+  transition: width 0.2s ease-in-out;
+  width: ${(props) => props.completed}%;
+`;
+
+const GridDiv = styled.div`
+  display: grid;
+  grid-template-rows: 1fr auto;
+  align-items: center;
+  justify-items: center;
+`;
+
+const P = styled.p`
+  margin: 0;
+  margin-top: 2px;
+  font-size: 12px;
+  color: ${lightGray};
+  text-align: center;
+`;
+
+interface ProgressBarProps {
+  completed: number;
+  total: number;
+}
+
+const ProgressBar = ({ completed, total }: ProgressBarProps) => {
+  const fillPercentage = Math.min(100, Math.max(0, (completed / total) * 100));
+
+  return (
+    <>
+      <a
+        href="https://continue.dev/docs/customization"
+        className="no-underline"
+      >
+        <GridDiv data-tooltip-id="usage_progress_bar">
+          <ProgressBarWrapper>
+            <ProgressBarFill
+              completed={fillPercentage}
+              color={
+                completed / total > 0.75
+                  ? completed / total > 0.95
+                    ? "#f00"
+                    : "#fc0"
+                  : undefined
+              }
+            />
+          </ProgressBarWrapper>
+          <P>
+            Free Usage: {completed} / {total}
+          </P>
+        </GridDiv>
+      </a>
+      <StyledTooltip id="usage_progress_bar" place="bottom">
+        {
+          "Continue allows you to use our OpenAI API key for up to 250 inputs. After this, you can either use your own API key, or use a local LLM. Click the progress bar to go to the docs and learn more."
+        }
+      </StyledTooltip>
+    </>
+  );
+};
+
+export default ProgressBar;