From bf078c8b449f8cb4c9a502eee282ea695dee2e7b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 11 Mar 2024 02:09:21 +0000
Subject: [PATCH] Allow overriding keys

---
 .../GenerateRoadmap/GenerateRoadmap.tsx       | 46 +++++++++++++++++--
 .../GenerateRoadmap/OpenAISettings.tsx        | 16 +++++++
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/components/GenerateRoadmap/GenerateRoadmap.tsx b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
index 92f8a721d..d22c8e2d2 100644
--- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx
+++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
@@ -12,10 +12,15 @@ import { generateAIRoadmapFromText } from '../../../editor/utils/roadmap-generat
 import { renderFlowJSON } from '../../../editor/renderer/renderer';
 import { replaceChildren } from '../../lib/dom';
 import { readAIRoadmapStream } from '../../helper/read-stream';
-import { isLoggedIn, removeAuthToken, visitAIRoadmap } from '../../lib/jwt';
+import {
+  getOpenAPIKey,
+  isLoggedIn,
+  removeAuthToken,
+  visitAIRoadmap,
+} from '../../lib/jwt';
 import { RoadmapSearch } from './RoadmapSearch.tsx';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
-import { Ban, Download, PenSquare, Save, Wand } from 'lucide-react';
+import { Ban, Cog, Download, PenSquare, Save, Wand } from 'lucide-react';
 import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 import { httpGet, httpPost } from '../../lib/http.ts';
 import { pageProgressMessage } from '../../stores/page.ts';
@@ -29,6 +34,7 @@ import { showLoginPopup } from '../../lib/popup.ts';
 import { cn } from '../../lib/classname.ts';
 import { RoadmapTopicDetail } from './RoadmapTopicDetail.tsx';
 import { AIRoadmapAlert } from './AIRoadmapAlert.tsx';
+import { OpenAISettings } from './OpenAISettings.tsx';
 
 export type GetAIRoadmapLimitResponse = {
   used: number;
@@ -95,6 +101,9 @@ export function GenerateRoadmap() {
   const [roadmapLimitUsed, setRoadmapLimitUsed] = useState(0);
   const [roadmapTopicLimit, setRoadmapTopicLimit] = useState(0);
   const [roadmapTopicLimitUsed, setRoadmapTopicLimitUsed] = useState(0);
+  const [isConfiguring, setIsConfiguring] = useState(false);
+
+  const openAPIKey = getOpenAPIKey();
 
   const renderRoadmap = async (roadmap: string) => {
     const { nodes, edges } = generateAIRoadmapFromText(roadmap);
@@ -373,9 +382,19 @@ export function GenerateRoadmap() {
 
   const pageUrl = `https://roadmap.sh/ai?id=${roadmapId}`;
   const canGenerateMore = roadmapLimitUsed < roadmapLimit;
+  const isLoggedInUser = isLoggedIn();
 
   return (
     <>
+      {isConfiguring && (
+        <OpenAISettings
+          onClose={() => {
+            setIsConfiguring(false);
+            loadAIRoadmapLimit().finally(() => null);
+          }}
+        />
+      )}
+
       {selectedNode && currentRoadmap && !isLoading && (
         <RoadmapTopicDetail
           nodeId={selectedNode.nodeId}
@@ -421,7 +440,7 @@ export function GenerateRoadmap() {
                   </span>{' '}
                   roadmaps generated.
                 </span>
-                {!isLoggedIn() && (
+                {!isLoggedInUser && (
                   <button
                     className="rounded-xl border border-current px-1.5 py-0.5 text-left text-sm font-medium text-blue-500 sm:text-center"
                     onClick={showLoginPopup}
@@ -433,6 +452,27 @@ export function GenerateRoadmap() {
                     or <span className="font-semibold">logging in</span>
                   </button>
                 )}
+                {isLoggedInUser && !openAPIKey && (
+                  <button
+                    onClick={() => setIsConfiguring(true)}
+                    className="rounded-xl border border-current px-2 py-0.5 text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
+                  >
+                    By-pass all limits by{' '}
+                    <span className="font-semibold">
+                      adding your own OpenAI API key
+                    </span>
+                  </button>
+                )}
+
+                {isLoggedInUser && openAPIKey && (
+                  <button
+                    onClick={() => setIsConfiguring(true)}
+                    className="flex flex-row items-center gap-1 rounded-xl border border-current px-2 py-0.5 text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
+                  >
+                    <Cog size={15} />
+                    Configure OpenAI API key
+                  </button>
+                )}
               </div>
               <form
                 onSubmit={handleSubmit}
diff --git a/src/components/GenerateRoadmap/OpenAISettings.tsx b/src/components/GenerateRoadmap/OpenAISettings.tsx
index 48236cf44..fcf46b101 100644
--- a/src/components/GenerateRoadmap/OpenAISettings.tsx
+++ b/src/components/GenerateRoadmap/OpenAISettings.tsx
@@ -16,6 +16,8 @@ type OpenAISettingsProps = {
 export function OpenAISettings(props: OpenAISettingsProps) {
   const { onClose } = props;
 
+  const [defaultOpenAIKey, setDefaultOpenAIKey] = useState('');
+
   const [hasError, setHasError] = useState(false);
   const [openaiApiKey, setOpenaiApiKey] = useState('');
   const toast = useToast();
@@ -23,6 +25,7 @@ export function OpenAISettings(props: OpenAISettingsProps) {
   useEffect(() => {
     const apiKey = getOpenAPIKey();
     setOpenaiApiKey(apiKey || '');
+    setDefaultOpenAIKey(apiKey || '');
   }, []);
 
   return (
@@ -112,6 +115,19 @@ export function OpenAISettings(props: OpenAISettingsProps) {
             >
               Save
             </button>
+            {defaultOpenAIKey && (
+              <button
+                type="button"
+                onClick={() => {
+                  deleteOpenAPIKey();
+                  onClose();
+                  toast.success('OpenAI API key removed');
+                }}
+                className="mt-1 w-full rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-black hover:bg-red-700"
+              >
+                Reset to Default Key
+              </button>
+            )}
           </form>
         </div>
       </div>