zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Move OpenAISettings to the source configuration

Browse Source
This commit is contained in:
Enrico Ros
2023-05-12 03:23:03 -07:00
parent 1fd64cbcac
commit 17cb8451b0
4 changed files with 44 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/settings/SettingsModal.tsx
-6
View File
@@ -3,8 +3,6 @@ import * as React from 'react';
import { Box, Button } from '@mui/joy';
import { ElevenlabsSettings } from '@/modules/elevenlabs/ElevenlabsSettings';
import { OpenAIAdvancedSettings } from '@/modules/openai/OpenAIAdvancedSettings';
import { OpenAISettings } from '@/modules/openai/OpenAISettings';
import { ProdiaSettings } from '@/modules/prodia/ProdiaSettings';
import { SearchSettings } from '@/modules/search/SearchSettings';
@@ -31,8 +29,6 @@ export function SettingsModal() {
<Box>
<OpenAISettings />
<UISettings />
<ElevenlabsSettings />
@@ -41,8 +37,6 @@ export function SettingsModal() {
<SearchSettings />
<OpenAIAdvancedSettings />
</Box>
</GoodModal>
src/modules/openai/OpenAIAdvancedSettings.tsx → src/modules/models/openai/OpenAIAdvancedSource.tsx
+4 -4
View File
@@ -10,7 +10,7 @@ import { settingsCol1Width, settingsGap, settingsMaxWidth } from '@/common/theme
import { useSettingsStore } from '@/common/state/store-settings';
export function OpenAIAdvancedSettings() {
export function OpenAIAdvancedSource() {
// external state
const { apiOrganizationId, setApiOrganizationId, apiHost, setApiHost, heliconeKey, setHeliconeKey, modelTemperature, setModelTemperature, modelMaxResponseTokens, setModelMaxResponseTokens } = useSettingsStore(state => ({
apiOrganizationId: state.apiOrganizationId, setApiOrganizationId: state.setApiOrganizationId,
@@ -33,9 +33,9 @@ export function OpenAIAdvancedSettings() {
return (
<Section title='Advanced AI settings'
collapsible collapsed
disclaimer='Adjust only if you are familiar with these terms'
sx={{ mt: 2 }}>
<Stack direction='column' sx={{ gap: settingsGap, mt: -0.8, maxWidth: settingsMaxWidth }}>
disclaimer='Adjust only if you are familiar with these terms'>
<Stack direction='column' sx={{ gap: settingsGap,maxWidth: settingsMaxWidth }}>
<FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
<Box sx={{ minWidth: settingsCol1Width }}>
src/modules/models/openai/OpenAISource.tsx
+40
View File
@@ -0,0 +1,40 @@
import * as React from 'react';
import { shallow } from 'zustand/shallow';
import { FormInputKey } from '@/common/components/FormInputKey';
import { Link } from '@/common/components/Link';
import { useSettingsStore } from '@/common/state/store-settings';
import { hasServerKeyOpenAI, isValidOpenAIApiKey } from '../../openai/openai.client';
import { OpenAIAdvancedSource } from '@/modules/models/openai/OpenAIAdvancedSource';
export function OpenAISource() {
// external state
const { apiKey, setApiKey } = useSettingsStore(state => ({ apiKey: state.apiKey, setApiKey: state.setApiKey }), shallow);
const needsKey = !hasServerKeyOpenAI;
const description = <>
{needsKey
? <>
<Link level='body2' href='https://platform.openai.com/account/api-keys' target='_blank'>Create Key</Link>, then apply to
the <Link level='body2' href='https://openai.com/waitlist/gpt-4-api' target='_blank'>GPT-4 waitlist</Link>
</>
: `This key will take precedence over the server's.`} <Link level='body2' href='https://platform.openai.com/account/usage' target='_blank'>Check usage here</Link>.
</>;
return <>
<FormInputKey
label={'OpenAI API Key' + (needsKey ? '' : ' (not required, server has it)')}
value={apiKey} onChange={setApiKey}
required={needsKey} validate={isValidOpenAIApiKey}
placeholder='sk-...' description={description}
/>
<OpenAIAdvancedSource />
</>;
}
src/modules/openai/OpenAISettings.tsx
-60
View File
@@ -1,60 +0,0 @@
import * as React from 'react';
import { shallow } from 'zustand/shallow';
import { FormControl, FormHelperText, FormLabel, IconButton, Input } from '@mui/joy';
import KeyIcon from '@mui/icons-material/Key';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import { Link } from '@/common/components/Link';
import { Section } from '@/common/components/Section';
import { useSettingsStore } from '@/common/state/store-settings';
import { isValidOpenAIApiKey, requireUserKeyOpenAI } from './openai.client';
export function OpenAISettings() {
// state
const [showApiKeyValue, setShowApiKeyValue] = React.useState(false);
// external state
const { apiKey, setApiKey } = useSettingsStore(state => ({ apiKey: state.apiKey, setApiKey: state.setApiKey }), shallow);
const handleApiKeyChange = (e: React.ChangeEvent) => setApiKey((e.target as HTMLInputElement).value);
const handleToggleApiKeyVisibility = () => setShowApiKeyValue(!showApiKeyValue);
const needsKey = requireUserKeyOpenAI;
const validKey = isValidOpenAIApiKey(apiKey);
return (
<Section>
<FormControl>
<FormLabel>
OpenAI API Key {needsKey ? '' : '(optional)'}
</FormLabel>
<Input
variant='outlined' type={showApiKeyValue ? 'text' : 'password'}
placeholder={needsKey ? 'required' : 'sk-...'}
error={needsKey && !validKey}
value={apiKey} onChange={handleApiKeyChange}
startDecorator={<KeyIcon />}
endDecorator={!!apiKey && (
<IconButton variant='plain' color='neutral' onClick={handleToggleApiKeyVisibility}>
{showApiKeyValue ? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton>
)}
/>
<FormHelperText sx={{ display: 'block', lineHeight: 1.75 }}>
{needsKey
? <><Link level='body2' href='https://platform.openai.com/account/api-keys' target='_blank'>Create Key</Link>, then apply to
the <Link level='body2' href='https://openai.com/waitlist/gpt-4-api' target='_blank'>GPT-4 waitlist</Link></>
: `This key will take precedence over the server's.`} <Link level='body2' href='https://platform.openai.com/account/usage' target='_blank'>Check usage here</Link>.
</FormHelperText>
</FormControl>
</Section>
);
}