change messaging

components/Chat/Chat.tsx

@@ -1,11 +1,10 @@
 import { Conversation, Message } from '@/types/chat';
-import { IconArrowDown } from '@tabler/icons-react';
 import { KeyValuePair } from '@/types/data';
 import { ErrorMessage } from '@/types/error';
 import { OpenAIModel, OpenAIModelID } from '@/types/openai';
 import { Prompt } from '@/types/prompt';
 import { throttle } from '@/utils';
-import { IconClearAll, IconKey, IconSettings } from '@tabler/icons-react';
+import { IconArrowDown, IconClearAll, IconSettings } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import {
   FC,
@@ -151,16 +150,27 @@ export const Chat: FC<Props> = memo(
     }, [messagesEndRef]);
 
     return (
-      <div className="overflow-hidden relative flex-1 bg-white dark:bg-[#343541]">
+      <div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
         {!(apiKey || serverSideApiKeyIsSet) ? (
-          <div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[500px]">
-            <div className="mx-auto mb-5 text-gray-800 dark:text-gray-100">
-              <IconKey size={36} />
+          <div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
+            <div className="text-center text-4xl font-bold text-black dark:text-white">
+              Welcome to Chatbot UI
             </div>
-            <div className="text-center text-2xl font-semibold text-gray-800 dark:text-gray-100">
-              {t('OpenAI API Key Required')}
+            <div className="text-center text-lg text-black dark:text-white">
+              <div className="mb-8">{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}</div>
+              <div className="mb-2 font-bold">
+                Important: Chatbot UI is 100% unaffiliated with OpenAI.
+              </div>
             </div>
             <div className="text-center text-gray-500 dark:text-gray-400">
+              <div className="mb-2">
+                Chatbot UI allows you to plug in your API key to use this UI
+                with their API.
+              </div>
+              <div className="mb-2">
+                It is <span className="italic">only</span> used to communicate
+                with their API.
+              </div>
               <div className="mb-2">
                 {t(
                   'Please set your OpenAI API key in the bottom left of the sidebar.',