new load behavior

components/Chat/Chat.tsx

@@ -10,6 +10,7 @@ import { SystemPrompt } from "./SystemPrompt";
 interface Props {
   conversation: Conversation;
   models: OpenAIModel[];
+  apiKey: string;
   messageIsStreaming: boolean;
   modelError: boolean;
   messageError: boolean;
@@ -20,7 +21,7 @@ interface Props {
   stopConversationRef: MutableRefObject<boolean>;
 }
 
-export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, stopConversationRef }) => {
+export const Chat: FC<Props> = ({ conversation, models, apiKey, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, stopConversationRef }) => {
   const [currentMessage, setCurrentMessage] = useState<Message>();
   const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
 
@@ -64,6 +65,13 @@ export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, mode
 
   return (
     <div className="relative flex-1 overflow-none dark:bg-[#343541] bg-white">
+      {!apiKey && (
+        <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>
+      )}
+
       {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>

components/Chat/ChatLoader.tsx

@@ -6,11 +6,11 @@ interface Props {}
 export const ChatLoader: FC<Props> = () => {
   return (
     <div
-      className={`flex justify-center py-[20px] sm:py-[30px] whitespace-pre-wrap dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
+      className="group text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]"
       style={{ overflowWrap: "anywhere" }}
     >
-      <div className="w-full sm:w-4/5 md:w-3/5 lg:w-[600px] xl:w-[800px] flex px-4">
+      <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
-        <div className="mr-1 sm:mr-2 font-bold min-w-[40px]">AI:</div>
+        <div className="font-bold min-w-[40px]">AI:</div>
         <IconDots className="animate-pulse" />
       </div>
     </div>

pages/index.tsx

@@ -82,7 +82,7 @@ export default function Home() {
       }
 
       if (updatedConversation.messages.length === 1) {
-        const {content} = message
+        const { content } = message;
         const customName = content.length > 30 ? content.substring(0, 30) + "..." : content;
 
         updatedConversation = {
@@ -291,7 +291,9 @@ export default function Home() {
   }, [selectedConversation]);
 
   useEffect(() => {
+    if (apiKey) {
       fetchModels(apiKey);
+    }
   }, [apiKey]);
 
   useEffect(() => {
@@ -300,9 +302,10 @@ export default function Home() {
       setLightMode(theme as "dark" | "light");
     }
 
-    const apiKey = localStorage.getItem("apiKey") || "";
+    const apiKey = localStorage.getItem("apiKey");
     if (apiKey) {
       setApiKey(apiKey);
+      fetchModels(apiKey);
     }
 
     if (window.innerWidth < 640) {
@@ -330,8 +333,6 @@ export default function Home() {
         prompt: DEFAULT_SYSTEM_PROMPT
       });
     }
-
-    fetchModels(apiKey);
   }, []);
 
   return (
@@ -396,6 +397,7 @@ export default function Home() {
             <Chat
               conversation={selectedConversation}
               messageIsStreaming={messageIsStreaming}
+              apiKey={apiKey}
               modelError={modelError}
               messageError={messageError}
               models={models}