Skip to content
Snippets Groups Projects
Commit 65bd0fe1 authored by ali asaria's avatar ali asaria
Browse files

separate out the modal into a separate component

parent 1611918a
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/renderer/components/Settings/AIProviderModal.tsx 0 → 100644
+ 163
− 0
View file @ 65bd0fe1
import * as React from 'react';
import {
Button,
Modal,
ModalDialog,
FormControl,
FormLabel,
Input,
Box,
Typography,
} from '@mui/joy';
interface Provider {
name: string;
keyName: string;
setKeyEndpoint: () => string;
checkKeyEndpoint: () => string;
}
interface AIProviderModalProps {
dialogOpen: boolean;
setDialogOpen: (open: boolean) => void;
selectedProvider: Provider | null;
apiKey: string;
setApiKey: (key: string) => void;
customApiName: string;
setCustomApiName: (name: string) => void;
customBaseURL: string;
setCustomBaseURL: (url: string) => void;
customApiKey: string;
setCustomApiKey: (key: string) => void;
customModelName: string;
setCustomModelName: (name: string) => void;
handleSave: () => void;
}
export default function AIProviderModal({
dialogOpen,
setDialogOpen,
selectedProvider,
apiKey,
setApiKey,
customApiName,
setCustomApiName,
customBaseURL,
setCustomBaseURL,
customApiKey,
setCustomApiKey,
customModelName,
setCustomModelName,
handleSave,
}: AIProviderModalProps) {
return (
<Modal open={dialogOpen} onClose={() => setDialogOpen(false)}>
<ModalDialog
aria-labelledby="connect-dialog-title"
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
maxWidth: 400,
width: '90%',
}}
>
<Typography id="connect-dialog-title" component="h2">
Connect to {selectedProvider?.name}
</Typography>
{selectedProvider?.name === 'Custom API' ? (
<>
<FormControl sx={{ mt: 2 }}>
<FormLabel>API Name</FormLabel>
<Input
value={customApiName}
onChange={(e) => setCustomApiName(e.target.value)}
/>
</FormControl>
<FormControl sx={{ mt: 2 }}>
<FormLabel>Base URL</FormLabel>
<Input
value={customBaseURL}
onChange={(e) => setCustomBaseURL(e.target.value)}
/>
</FormControl>
<FormControl sx={{ mt: 2 }}>
<FormLabel>API Key</FormLabel>
<Input
type="password"
value={customApiKey}
onChange={(e) => setCustomApiKey(e.target.value)}
/>
</FormControl>
<FormControl sx={{ mt: 2 }}>
<FormLabel>Model Name</FormLabel>
<Input
value={customModelName}
onChange={(e) => setCustomModelName(e.target.value)}
/>
</FormControl>
</>
) : (
<FormControl sx={{ mt: 2 }}>
<FormLabel>{selectedProvider?.name} API Key</FormLabel>
<Input
type="password"
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
/>
</FormControl>
)}
{/* Conditional help steps */}
{selectedProvider?.name === 'OpenAI' && (
<Box sx={{ mt: 2 }}>
<Typography level="body2">
Steps to get an OpenAI API Key:
</Typography>
<ol>
<li>
Visit{' '}
<a
href="https://platform.openai.com/account/api-keys"
target="_blank"
rel="noreferrer"
>
OpenAI API website
</a>
</li>
<li>Log in to your OpenAI account.</li>
<li>Create a new API key and copy it.</li>
</ol>
</Box>
)}
{selectedProvider?.name === 'Anthropic' && (
<Box sx={{ mt: 2 }}>
<Typography level="body2">
Steps to get a Anthropic API Key:
</Typography>
<ol>
<li>
Visit{' '}
<a
href="https://console.anthropic.com/settings/keys"
target="_blank"
rel="noreferrer"
>
Anthropic API Keys Console
</a>
</li>
<li>Log in/Create an account.</li>
<li>Follow instructions to generate an API key.</li>
</ol>
</Box>
)}
<Box
sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}
>
<Button onClick={() => setDialogOpen(false)}>Cancel</Button>
<Button onClick={handleSave}>Save</Button>
</Box>
</ModalDialog>
</Modal>
);
}
src/renderer/components/Settings/AIProvidersSettings.tsx
+ 17
− 109
View file @ 65bd0fe1
...@@ -15,6 +15,7 @@ import { ...@@ -15,6 +15,7 @@ import {
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk'; import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
import useSWR from 'swr'; import useSWR from 'swr';
import { ChevronLeftIcon } from 'lucide-react'; import { ChevronLeftIcon } from 'lucide-react';
import AIProviderModal from './AIProviderModal';
const fetcher = (url: string) => fetch(url).then((res) => res.json()); const fetcher = (url: string) => fetch(url).then((res) => res.json());
...@@ -204,115 +205,22 @@ export default function AIProvidersSettings({ ...@@ -204,115 +205,22 @@ export default function AIProvidersSettings({
); );
})} })}
</List> </List>
{/* API Key Modal */} <AIProviderModal
<Modal open={dialogOpen} onClose={() => setDialogOpen(false)}> dialogOpen={dialogOpen}
<ModalDialog setDialogOpen={setDialogOpen}
aria-labelledby="connect-dialog-title" selectedProvider={selectedProvider}
sx={{ apiKey={apiKey}
position: 'absolute', setApiKey={setApiKey}
top: '50%', customApiName={customApiName}
left: '50%', setCustomApiName={setCustomApiName}
transform: 'translate(-50%, -50%)', customBaseURL={customBaseURL}
maxWidth: 400, setCustomBaseURL={setCustomBaseURL}
width: '90%', customApiKey={customApiKey}
}} setCustomApiKey={setCustomApiKey}
> customModelName={customModelName}
<Typography id="connect-dialog-title" component="h2"> setCustomModelName={setCustomModelName}
Connect to {selectedProvider?.name} handleSave={handleSave}
</Typography>
{selectedProvider?.name === 'Custom API' ? (
<>
<FormControl sx={{ mt: 2 }}>
<FormLabel>API Name</FormLabel>
<Input
value={customApiName}
onChange={(e) => setCustomApiName(e.target.value)}
/>
</FormControl>
<FormControl sx={{ mt: 2 }}>
<FormLabel>Base URL</FormLabel>
<Input
value={customBaseURL}
onChange={(e) => setCustomBaseURL(e.target.value)}
/> />
</FormControl>
<FormControl sx={{ mt: 2 }}>
<FormLabel>API Key</FormLabel>
<Input
type="password"
value={customApiKey}
onChange={(e) => setCustomApiKey(e.target.value)}
/>
</FormControl>
<FormControl sx={{ mt: 2 }}>
<FormLabel>Model Name</FormLabel>
<Input
value={customModelName}
onChange={(e) => setCustomModelName(e.target.value)}
/>
</FormControl>
</>
) : (
<FormControl sx={{ mt: 2 }}>
<FormLabel>{selectedProvider?.name} API Key</FormLabel>
<Input
type="password"
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
/>
</FormControl>
)}
{/* Conditional help steps */}
{selectedProvider?.name === 'OpenAI' && (
<Box sx={{ mt: 2 }}>
<Typography level="body2">
Steps to get an OpenAI API Key:
</Typography>
<ol>
<li>
Visit{' '}
<a
href="https://platform.openai.com/account/api-keys"
target="_blank"
rel="noreferrer"
>
OpenAI API website
</a>
</li>
<li>Log in to your OpenAI account.</li>
<li>Create a new API key and copy it.</li>
</ol>
</Box>
)}
{selectedProvider?.name === 'Anthropic' && (
<Box sx={{ mt: 2 }}>
<Typography level="body2">
Steps to get a Anthropic API Key:
</Typography>
<ol>
<li>
Visit{' '}
<a
href="https://console.anthropic.com/settings/keys"
target="_blank"
rel="noreferrer"
>
Anthropic API Keys Console
</a>
</li>
<li>Log in/Create an account.</li>
<li>Follow instructions to generate an API key.</li>
</ol>
</Box>
)}
<Box
sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}
>
<Button onClick={() => setDialogOpen(false)}>Cancel</Button>
<Button onClick={handleSave}>Save</Button>
</Box>
</ModalDialog>
</Modal>
</Box> </Box>
); );
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment

:feet::heart: Strive to be the person your dogs believe you are :heart::feet: