feat: check for openAI API key

src/client/apps/story/index.tsx

@@ -31,6 +31,7 @@ export function Story() {
 
 	const [story, setStory] = useState("");
 	const [generating, setGenerating] = useState(false);
+	const [hasOpenAiApiKey, setHasOpenAiApiKey] = useState(false);
 
 	const saveStory = useCallback(
 		async (story_: string) => {
@@ -73,6 +74,8 @@ export function Story() {
 			});
 	}, [setImages]);
 
+	const isDisabled = selectedImages.length === 0 || !hasOpenAiApiKey;
+
 	useSDK<unknown, { done: boolean; story: string }>(APP_ID, {
 		async onMessage(message) {
 			console.log(message);
@@ -104,6 +107,16 @@ export function Story() {
 		};
 	}, [loadImages, setImages]);
 
+	useEffect(() => {
+		window.ipc.send("hasOpenAiApiKey");
+		const unsubscribe = window.ipc.on("openAiApiKey", (hasKey: boolean) => {
+			setHasOpenAiApiKey(hasKey);
+		});
+		return () => {
+			unsubscribe();
+		};
+	}, []);
+
 	if (story) {
 		return (
 			<CustomScrollbars>
@@ -154,6 +167,8 @@ export function Story() {
 				</Grid>
 				<Grid xs={1} sx={{ display: "flex" }}>
 					<StoryForm
+						disabled={isDisabled}
+						hasOpenAiApiKey={hasOpenAiApiKey}
 						onSubmit={() => {
 							setGenerating(true);
 						}}

src/client/apps/story/story-form.tsx

@@ -1,5 +1,7 @@
 import { CustomScrollbars } from "@captn/joy/custom-scrollbars";
 import { useSDK } from "@captn/react/use-sdk";
+import WarningIcon from "@mui/icons-material/Warning";
+import Alert from "@mui/joy/Alert";
 import Box from "@mui/joy/Box";
 import Button from "@mui/joy/Button";
 import FormControl from "@mui/joy/FormControl";
@@ -19,7 +21,15 @@ import { APP_ID } from "./constants";
 
 import type { FormInput } from "#/types/story";
 
-export function StoryForm({ onSubmit }: { onSubmit?(): void }) {
+export function StoryForm({
+	hasOpenAiApiKey,
+	disabled,
+	onSubmit,
+}: {
+	onSubmit?(): void;
+	disabled?: boolean;
+	hasOpenAiApiKey?: boolean;
+}) {
 	const {
 		t,
 		i18n: { language: locale },
@@ -57,6 +67,19 @@ export function StoryForm({ onSubmit }: { onSubmit?(): void }) {
 		>
 			<Box sx={{ flex: 1, position: "relative" }}>
 				<CustomScrollbars>
+					{!hasOpenAiApiKey && (
+						<Alert
+							color="warning"
+							variant="soft"
+							startDecorator={<WarningIcon />}
+							slotProps={{ startDecorator: { sx: { alignSelf: "flexStart" } } }}
+							sx={{ mb: 2 }}
+						>
+							<Typography>
+								{t("common:pages.dataset.enterKeyToUseGPTVision")}
+							</Typography>
+						</Alert>
+					)}
 					<Typography sx={{ mb: 2 }}>{t("texts:storyFormIntroduction")}</Typography>
 					<FormControl required>
 						<FormLabel>{t("labels:formLabel.length")}</FormLabel>
@@ -153,7 +176,7 @@ export function StoryForm({ onSubmit }: { onSubmit?(): void }) {
 				</CustomScrollbars>
 			</Box>
 			<Box>
-				<Button fullWidth type="submit" color="primary" variant="solid">
+				<Button fullWidth disabled={disabled} type="submit" color="primary" variant="solid">
 					{t("labels:submitButtonText")}
 				</Button>
 			</Box>

src/electron/background.ts

@@ -53,6 +53,9 @@ import "@/ipc/testing";
 // Import the vector store
 import "@/ipc/vector-store";
 
+// Import keys
+import "@/ipc/keys";
+
 let unsubscribe: (() => Promise<void>) | undefined;
 // Initialize the application by calling the main function.
 // Upon completion, log to the console indicating the application has started.

src/electron/future/ipc/keys.ts

@@ -0,0 +1,7 @@
+import { ipcMain } from "electron";
+
+import { keyStore } from "@/stores";
+
+ipcMain.on("hasOpenAiApiKey", event => {
+	event.sender.send("openAiApiKey", Boolean(keyStore.get("openAiApiKey")));
+});