feat: only render the Onboarding component if aiEnabled is set

srcbookdev · Oct 24, 2024 · cdf0bca · cdf0bca
1 parent 316afc5
commit cdf0bca
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 52 deletions.
diff --git a/packages/web/src/components/onboarding.tsx b/packages/web/src/components/onboarding.tsx
@@ -3,10 +3,9 @@ import { LayoutGridIcon, FileTextIcon } from 'lucide-react';
 import { AiSettings } from '@/routes/settings';
 
 type OnboardingModalProps = {
-  onComplete: () => void;
 };
 
-const OnboardingModal: React.FunctionComponent<OnboardingModalProps> = ({ onComplete }) => {
+const OnboardingModal: React.FunctionComponent<OnboardingModalProps> = () => {
   return (
     <div className="flex flex-col gap-6">
       <h2 className="text-3xl font-medium">Welcome to Srcbook!</h2>
@@ -20,7 +19,9 @@ const OnboardingModal: React.FunctionComponent<OnboardingModalProps> = ({ onComp
               <LayoutGridIcon size={24} className="text-ai-btn" />
             </div>
             <h3 className="text-ai-btn font-medium mt-3">App builder</h3>
-            <p className="text-ai-btn mt-2">Create Web Applications with the speed of thinking</p>
+            <p className="text-ai-btn mt-2">
+              Create Web Applications with the speed of thinking
+            </p>
           </div>
 
           <div className="border p-5 rounded-lg">
@@ -40,7 +41,7 @@ const OnboardingModal: React.FunctionComponent<OnboardingModalProps> = ({ onComp
           To get started, select your AI provider and enter your API key:
         </label>
 
-        <AiSettings saveButtonLabel="Continue" onConfirm={onComplete} />
+        <AiSettings saveButtonLabel="Continue" />
       </div>
     </div>
   );

diff --git a/packages/web/src/routes/home.tsx b/packages/web/src/routes/home.tsx
@@ -68,28 +68,7 @@ export default function Home() {
   const [appToDelete, setAppToDelete] = useState<AppType | null>(null);
   const [showCreateAppModal, setShowCreateAppModal] = useState(false);
 
-  const { aiProvider, openaiKey, anthropicKey } = useSettings();
-  const [showOnboarding, setShowOnboarding] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const checkApiKey = () => {
-      const hasSeenOnboarding = localStorage.getItem('hasSeenOnboarding') === 'true';
-      const hasApiKey = aiProvider === 'openai' ? !!openaiKey : !!anthropicKey;
-
-      if (!hasSeenOnboarding || !hasApiKey) {
-        setShowOnboarding(true);
-      }
-      setIsLoading(false);
-    };
-
-    checkApiKey();
-  }, [aiProvider, openaiKey, anthropicKey]);
-
-  const handleOnboardingComplete = () => {
-    setShowOnboarding(false);
-    localStorage.setItem('hasSeenOnboarding', 'true');
-  };
+  const { aiEnabled } = useSettings();
 
   function onDeleteSrcbook(srcbook: SessionType) {
     setSrcbookToDelete(srcbook);
@@ -116,12 +95,8 @@ export default function Home() {
     openSrcbook(result.dir);
   }
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (showOnboarding) {
-    return <Onboarding onComplete={handleOnboardingComplete} />;
+  if (!aiEnabled) {
+    return <Onboarding />;
   }
 
   return (

diff --git a/packages/web/src/routes/settings.tsx b/packages/web/src/routes/settings.tsx
@@ -218,10 +218,9 @@ const TestAiButton = () => {
 
 type AiSettingsProps = {
   saveButtonLabel?: string;
-  onConfirm?: () => void;
 };
 
-export function AiSettings({ saveButtonLabel, onConfirm }: AiSettingsProps) {
+export function AiSettings({ saveButtonLabel }: AiSettingsProps) {
   const {
     aiProvider,
     aiModel,
@@ -296,12 +295,7 @@ export function AiSettings({ saveButtonLabel, onConfirm }: AiSettingsProps) {
           />
           <Button
             className="px-5"
-            onClick={async () => {
-              await updateConfigContext({ openaiKey, aiModel: model });
-              if (onConfirm) {
-                onConfirm();
-              }
-            }}
+            onClick={() => updateConfigContext({ openaiKey, aiModel: model })}
             disabled={!openaiKeySaveEnabled}
           >
             {saveButtonLabel ?? 'Save'}
@@ -320,12 +314,7 @@ export function AiSettings({ saveButtonLabel, onConfirm }: AiSettingsProps) {
           />
           <Button
             className="px-5"
-            onClick={async () => {
-              await updateConfigContext({ anthropicKey, aiModel: model });
-              if (onConfirm) {
-                onConfirm();
-              }
-            }}
+            onClick={() => updateConfigContext({ anthropicKey, aiModel: model })}
             disabled={!anthropicKeySaveEnabled}
           >
             {saveButtonLabel ?? 'Save'}
@@ -348,12 +337,7 @@ export function AiSettings({ saveButtonLabel, onConfirm }: AiSettingsProps) {
             />
             <Button
               className="px-5"
-              onClick={async () => {
-                await updateConfigContext({ aiBaseUrl: baseUrl, aiModel: model });
-                if (onConfirm) {
-                  onConfirm();
-                }
-              }}
+              onClick={() => updateConfigContext({ aiBaseUrl: baseUrl, aiModel: model })}
               disabled={!customModelSaveEnabled}
             >
               {saveButtonLabel ?? 'Save'}