Do not rely on user to figure out if server is configured with an api key (#136)

Fixes #105 (and probably also #115)

Co-authored-by: Mckay Wrigley <mckaywrigley@gmail.com>

pages/index.tsx

@@ -8,10 +8,15 @@ import { saveConversation, saveConversations, updateConversation } from "@/utils
 import { saveFolders } from "@/utils/app/folders";
 import { exportData, importData } from "@/utils/app/importExport";
 import { IconArrowBarLeft, IconArrowBarRight } from "@tabler/icons-react";
+import { GetServerSideProps } from "next";
 import Head from "next/head";
 import { useEffect, useRef, useState } from "react";
 
-export default function Home() {
+interface HomeProps {
+  serverSideApiKeyIsSet: boolean;
+}
+
+const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
   const [folders, setFolders] = useState<ChatFolder[]>([]);
   const [conversations, setConversations] = useState<Conversation[]>([]);
   const [selectedConversation, setSelectedConversation] = useState<Conversation>();
@@ -23,7 +28,6 @@ export default function Home() {
   const [apiKey, setApiKey] = useState<string>("");
   const [messageError, setMessageError] = useState<boolean>(false);
   const [modelError, setModelError] = useState<boolean>(false);
-  const [isUsingEnv, setIsUsingEnv] = useState<boolean>(false);
   const [currentMessage, setCurrentMessage] = useState<Message>();
 
   const stopConversationRef = useRef<boolean>(false);
@@ -206,11 +210,6 @@ export default function Home() {
     localStorage.setItem("apiKey", apiKey);
   };
 
-  const handleEnvChange = (isUsingEnv: boolean) => {
-    setIsUsingEnv(isUsingEnv);
-    localStorage.setItem("isUsingEnv", isUsingEnv.toString());
-  };
-
   const handleExportData = () => {
     exportData();
   };
@@ -348,9 +347,6 @@ export default function Home() {
 
     setFolders([]);
     localStorage.removeItem("folders");
-
-    setIsUsingEnv(false);
-    localStorage.removeItem("isUsingEnv");
   };
 
   const handleEditMessage = (message: Message, messageIndex: number) => {
@@ -410,11 +406,7 @@ export default function Home() {
     if (apiKey) {
       setApiKey(apiKey);
       fetchModels(apiKey);
-    }
-
-    const usingEnv = localStorage.getItem("isUsingEnv");
-    if (usingEnv) {
-      setIsUsingEnv(usingEnv === "true");
+    } else if (serverSideApiKeyIsSet) {
       fetchModels("");
     }
 
@@ -449,7 +441,7 @@ export default function Home() {
         folderId: 0
       });
     }
-  }, []);
+  }, [serverSideApiKeyIsSet]);
 
   return (
     <>
@@ -523,7 +515,7 @@ export default function Home() {
               conversation={selectedConversation}
               messageIsStreaming={messageIsStreaming}
               apiKey={apiKey}
-              isUsingEnv={isUsingEnv}
+              serverSideApiKeyIsSet={serverSideApiKeyIsSet}
               modelError={modelError}
               messageError={messageError}
               models={models}
@@ -531,7 +523,6 @@ export default function Home() {
               lightMode={lightMode}
               onSend={handleSend}
               onUpdateConversation={handleUpdateConversation}
-              onAcceptEnv={handleEnvChange}
               onEditMessage={handleEditMessage}
               onDeleteMessage={handleDeleteMessage}
               onRegenerate={handleRegenerate}
@@ -542,4 +533,13 @@ export default function Home() {
       )}
     </>
   );
-}
+};
+export default Home;
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  return {
+    props: {
+      serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY
+    }
+  };
+};