KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some additional text for API Key (#210) 

* feat: API Key Link

* feat: key input placeholder
This commit is contained in:
Danny Aziz 2023-03-26 16:48:34 -04:00 committed by GitHub
parent bf8830e1a5
commit df7c363ccb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/Chat/Chat.tsx
View File

@ -20,7 +20,7 @@ import { ChatMessage } from './ChatMessage';
import { ErrorMessageDiv } from './ErrorMessageDiv'; import { ErrorMessageDiv } from './ErrorMessageDiv';
import { ModelSelect } from './ModelSelect'; import { ModelSelect } from './ModelSelect';
import { SystemPrompt } from './SystemPrompt'; import { SystemPrompt } from './SystemPrompt';
import { IconSettings } from "@tabler/icons-react"; import { IconSettings } from '@tabler/icons-react';
interface Props { interface Props {
conversation: Conversation; conversation: Conversation;
@ -117,6 +117,17 @@ export const Chat: FC<Props> = ({
'Please set your OpenAI API key in the bottom left of the sidebar.', 'Please set your OpenAI API key in the bottom left of the sidebar.',
)} )}
</div> </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> </div>
) : modelError ? ( ) : modelError ? (
<ErrorMessageDiv error={modelError} /> <ErrorMessageDiv error={modelError} />
@ -131,7 +142,7 @@ export const Chat: FC<Props> = ({
</div> </div>
{models.length > 0 && ( {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 <ModelSelect
model={conversation.model} model={conversation.model}
models={models} models={models}
@ -160,15 +171,24 @@ 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
className="ml-2 cursor-pointer hover:opacity-50"
onClick={handleSettings}
size={18}
/>
</div> </div>
{showSettings && ( {showSettings && (
<div className="flex flex-col mx-auto pt-8 space-y-10 w-[200px] sm:w-[300px]"> <div className="mx-auto flex w-[200px] flex-col space-y-10 pt-8 sm:w-[300px]">
<div className="flex flex-col h-full space-y-4 border p-2 rounded border-neutral-500"> <div className="flex h-full flex-col space-y-4 rounded border border-neutral-500 p-2">
<ModelSelect <ModelSelect
model={conversation.model} model={conversation.model}
models={models} models={models}
onModelChange={(model) => onUpdateConversation(conversation, { key: "model", value: model })} onModelChange={(model) =>
onUpdateConversation(conversation, {
key: 'model',
value: model,
})
}
/> />
</div> </div>
</div> </div>

1
components/Sidebar/Key.tsx
View File

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