From eb228e9941ed532e40fd929dfdfd128ab317fc32 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Wed, 5 Mar 2025 14:58:33 -0500
Subject: [PATCH] remove most of the code from AIProviderModal
---
.../components/Settings/AIProviderModal.tsx | 236 +++++++++---------
1 file changed, 119 insertions(+), 117 deletions(-)
diff --git a/src/renderer/components/Settings/AIProviderModal.tsx b/src/renderer/components/Settings/AIProviderModal.tsx
index 03aab3e0..484518c0 100644
--- a/src/renderer/components/Settings/AIProviderModal.tsx
+++ b/src/renderer/components/Settings/AIProviderModal.tsx
@@ -8,48 +8,52 @@ import {
Input,
Box,
Typography,
+ IconButton,
} from '@mui/joy';
+import useSWR from 'swr';
+
+import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
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) {
+}: {
+ dialogOpen: boolean;
+ setDialogOpen: (open: boolean) => void;
+ selectedProvider: Provider | null;
+}) {
+ const [showApiKey, setShowApiKey] = React.useState(false);
+ const { data: apiKey, mutate: mutateApiKey } = useSWR(
+ chatAPI.Endpoints.Config.Get(selectedProvider?.keyName),
+ fetcher,
+ );
+
+ const saveProvider = async (provider: Provider, token: string) => {
+ await fetch(chatAPI.Endpoints.Config.Set(provider.keyName, token));
+ mutateApiKey();
+ };
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ const data = new FormData(e.target as HTMLFormElement);
+ const apiKey = data.get('apiKey') as string;
+ alert(JSON.stringify(Object.fromEntries(data.entries())));
+ saveProvider(selectedProvider!, apiKey);
+ setDialogOpen(false);
+ };
+
+ if (!selectedProvider) {
+ return null;
+ }
+
return (
<Modal open={dialogOpen} onClose={() => setDialogOpen(false)}>
<ModalDialog
@@ -66,97 +70,95 @@ export default function AIProviderModal({
<Typography id="connect-dialog-title" component="h2">
Connect to {selectedProvider?.name}
</Typography>
- {selectedProvider?.name === 'Custom API' ? (
- <>
+ <form onSubmit={handleSubmit}>
+ {selectedProvider?.name === 'Custom API' ? (
+ <>
+ <FormControl sx={{ mt: 2 }}>
+ <FormLabel>API Name</FormLabel>
+ <Input name="customApiName" />
+ </FormControl>
+ <FormControl sx={{ mt: 2 }}>
+ <FormLabel>Base URL</FormLabel>
+ <Input name="customBaseURL" />
+ </FormControl>
+ <FormControl sx={{ mt: 2 }}>
+ <FormLabel>API Key</FormLabel>
+ <Input name="customApiKey" type="password" />
+ </FormControl>
+ <FormControl sx={{ mt: 2 }}>
+ <FormLabel>Model Name</FormLabel>
+ <Input name="customModelName" />
+ </FormControl>
+ </>
+ ) : (
<FormControl sx={{ mt: 2 }}>
- <FormLabel>API Name</FormLabel>
+ <FormLabel>{selectedProvider?.name} API Key</FormLabel>
<Input
- value={customApiName}
- onChange={(e) => setCustomApiName(e.target.value)}
+ endDecorator={
+ <IconButton
+ onClick={() => {
+ setShowApiKey(!showApiKey);
+ }}
+ >
+ {showApiKey ? <EyeOffIcon /> : <EyeIcon />}
+ </IconButton>
+ }
+ name="apiKey"
+ type={showApiKey ? 'text' : 'password'}
+ defaultValue={apiKey}
/>
</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>
+ )}
+ {/* Conditional help steps */}
+ {selectedProvider?.name === 'OpenAI' && (
+ <>
+ <Typography level="title-md" mt={2}>
+ 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>
+ </>
+ )}
+ {selectedProvider?.name === 'Anthropic' && (
+ <>
+ <Typography level="title-md" mt={2}>
+ 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
+ sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}
+ >
+ <Button onClick={() => setDialogOpen(false)}>Cancel</Button>
+ <Button type="submit">Save</Button>
</Box>
- )}
- <Box
- sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}
- >
- <Button onClick={() => setDialogOpen(false)}>Cancel</Button>
- <Button onClick={handleSave}>Save</Button>
- </Box>
+ </form>
</ModalDialog>
</Modal>
);
--
GitLab