From 17cb8451b05723160946f04db444cf2369cdc603 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Fri, 12 May 2023 03:23:03 -0700
Subject: [PATCH] Move OpenAISettings to the source configuration

---
 src/apps/settings/SettingsModal.tsx           |  6 --
 .../openai/OpenAIAdvancedSource.tsx}          |  8 +--
 src/modules/models/openai/OpenAISource.tsx    | 40 +++++++++++++
 src/modules/openai/OpenAISettings.tsx         | 60 -------------------
 4 files changed, 44 insertions(+), 70 deletions(-)
 rename src/modules/{openai/OpenAIAdvancedSettings.tsx => models/openai/OpenAIAdvancedSource.tsx} (96%)
 create mode 100644 src/modules/models/openai/OpenAISource.tsx
 delete mode 100644 src/modules/openai/OpenAISettings.tsx

diff --git a/src/apps/settings/SettingsModal.tsx b/src/apps/settings/SettingsModal.tsx
index 72640d2ca..d4c4ff4e3 100644
--- a/src/apps/settings/SettingsModal.tsx
+++ b/src/apps/settings/SettingsModal.tsx
@@ -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>
diff --git a/src/modules/openai/OpenAIAdvancedSettings.tsx b/src/modules/models/openai/OpenAIAdvancedSource.tsx
similarity index 96%
rename from src/modules/openai/OpenAIAdvancedSettings.tsx
rename to src/modules/models/openai/OpenAIAdvancedSource.tsx
index f01b488fb..a417ced0f 100644
--- a/src/modules/openai/OpenAIAdvancedSettings.tsx
+++ b/src/modules/models/openai/OpenAIAdvancedSource.tsx
@@ -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 }}>
diff --git a/src/modules/models/openai/OpenAISource.tsx b/src/modules/models/openai/OpenAISource.tsx
new file mode 100644
index 000000000..6cac08fb4
--- /dev/null
+++ b/src/modules/models/openai/OpenAISource.tsx
@@ -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 />
+
+  </>;
+}
\ No newline at end of file
diff --git a/src/modules/openai/OpenAISettings.tsx b/src/modules/openai/OpenAISettings.tsx
deleted file mode 100644
index d231c0909..000000000
--- a/src/modules/openai/OpenAISettings.tsx
+++ /dev/null
@@ -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>
-  );
-}
\ No newline at end of file