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>

components/Chat/Chat.tsx

@@ -11,7 +11,7 @@ interface Props {
   conversation: Conversation;
   models: OpenAIModel[];
   apiKey: string;
-  isUsingEnv: boolean;
+  serverSideApiKeyIsSet: boolean;
   messageIsStreaming: boolean;
   modelError: boolean;
   messageError: boolean;
@@ -19,14 +19,13 @@ interface Props {
   lightMode: "light" | "dark";
   onSend: (message: Message, isResend: boolean) => void;
   onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
-  onAcceptEnv: (accept: boolean) => void;
   onEditMessage: (message: Message, messageIndex: number) => void;
   onDeleteMessage: (message: Message, messageIndex: number) => void;
   onRegenerate: () => void;
   stopConversationRef: MutableRefObject<boolean>;
 }
 
-export const Chat: FC<Props> = ({ conversation, models, apiKey, isUsingEnv, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, onAcceptEnv, onEditMessage, onDeleteMessage, onRegenerate, stopConversationRef }) => {
+export const Chat: FC<Props> = ({ conversation, models, apiKey, serverSideApiKeyIsSet, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, onEditMessage, onDeleteMessage, onRegenerate, stopConversationRef }) => {
   const [currentMessage, setCurrentMessage] = useState<Message>();
   const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
 
@@ -72,22 +71,15 @@ export const Chat: FC<Props> = ({ conversation, models, apiKey, isUsingEnv, mess
 
   return (
     <div className="relative flex-1 overflow-none dark:bg-[#343541] bg-white">
-      {!apiKey && !isUsingEnv ? (
+      {!(apiKey || serverSideApiKeyIsSet) ? (
         <div className="flex flex-col justify-center mx-auto h-full w-[300px] sm:w-[500px] space-y-6">
           <div className="text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">OpenAI API Key Required</div>
           <div className="text-center text-gray-500 dark:text-gray-400">Please set your OpenAI API key in the bottom left of the sidebar.</div>
-          <div className="text-center text-gray-500 dark:text-gray-400">- OR -</div>
-          <button
-            className="flex items-center justify-center mx-auto px-4 py-2 border border-transparent text-xs rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-            onClick={() => onAcceptEnv(true)}
-          >
-            click if using a .env.local file
-          </button>
         </div>
       ) : modelError ? (
         <div className="flex flex-col justify-center mx-auto h-full w-[300px] sm:w-[500px] space-y-6">
           <div className="text-center text-red-500">Error fetching models.</div>
-          <div className="text-center text-red-500">Make sure your OpenAI API key is set in the bottom left of the sidebar or in a .env.local file and refresh.</div>
+          <div className="text-center text-red-500">Make sure your OpenAI API key is set in the bottom left of the sidebar.</div>
           <div className="text-center text-red-500">If you completed this step, OpenAI may be experiencing issues.</div>
         </div>
       ) : (

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
     }
+  };
+};