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>