Add some additional text for API Key (#210)

* feat: API Key Link

* feat: key input placeholder

components/Chat/Chat.tsx

@@ -20,7 +20,7 @@ import { ChatMessage } from './ChatMessage';
 import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
-import { IconSettings } from "@tabler/icons-react";
+import { IconSettings } from '@tabler/icons-react';
 
 interface Props {
   conversation: Conversation;
@@ -117,6 +117,17 @@ export const Chat: FC<Props> = ({
               '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">
+            {t("If you don't have an OpenAI API key, you can get one here: ")}
+            <a
+              href="https://platform.openai.com/account/api-keys"
+              target="_blank"
+              rel="noreferrer"
+              className="text-blue-500 hover:underline"
+            >
+              openai.com
+            </a>
+          </div>
         </div>
       ) : modelError ? (
         <ErrorMessageDiv error={modelError} />
@@ -131,7 +142,7 @@ export const Chat: FC<Props> = ({
                   </div>
 
                   {models.length > 0 && (
-                    <div className="flex h-full flex-col space-y-4 rounded border border-neutral-200 dark:border-neutral-600 p-4">
+                    <div className="flex h-full flex-col space-y-4 rounded border border-neutral-200 p-4 dark:border-neutral-600">
                       <ModelSelect
                         model={conversation.model}
                         models={models}
@@ -158,21 +169,30 @@ export const Chat: FC<Props> = ({
               </>
             ) : (
               <>
-              <div className="flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
+                <div className="flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
-                {t('Model')}: {conversation.model.name}
+                  {t('Model')}: {conversation.model.name}
-                <IconSettings className="ml-2 cursor-pointer hover:opacity-50" onClick={handleSettings} size={18} />
+                  <IconSettings
-              </div>
+                    className="ml-2 cursor-pointer hover:opacity-50"
-              {showSettings && (
+                    onClick={handleSettings}
-                <div className="flex flex-col mx-auto pt-8 space-y-10 w-[200px] sm:w-[300px]">
+                    size={18}
-                  <div className="flex flex-col h-full space-y-4 border p-2 rounded border-neutral-500">
+                  />
-                    <ModelSelect
-                          model={conversation.model}
-                          models={models}
-                          onModelChange={(model) => onUpdateConversation(conversation, { key: "model", value: model })}
-                        />
-                  </div>
                 </div>
-              )}
+                {showSettings && (
+                  <div className="mx-auto flex w-[200px] flex-col space-y-10 pt-8 sm:w-[300px]">
+                    <div className="flex h-full flex-col space-y-4 rounded border border-neutral-500 p-2">
+                      <ModelSelect
+                        model={conversation.model}
+                        models={models}
+                        onModelChange={(model) =>
+                          onUpdateConversation(conversation, {
+                            key: 'model',
+                            value: model,
+                          })
+                        }
+                      />
+                    </div>
+                  </div>
+                )}
 
                 {conversation.messages.map((message, index) => (
                   <ChatMessage

components/Sidebar/Key.tsx

@@ -35,6 +35,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
         value={newKey}
         onChange={(e) => setNewKey(e.target.value)}
         onKeyDown={handleEnterDown}
+        placeholder={t('API Key') || 'API Key'}
       />
 
       <div className="flex w-[40px]">