diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx
index 12ee8290ca..75adf898d6 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx
@@ -1,4 +1,3 @@
-import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackProvider";
import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent";
import { EngineProvider } from "./contexts/EngineContext";
import { useActiveJobs } from "~/hooks/useActiveJobs";
@@ -28,12 +27,16 @@ import { useGenerationCompleteEvent } from "./TauriEvents/generations/useGenerat
import { PageEditor } from "~/pages/PageEnigma/PageEditor";
import { GalleryDragComponent } from "@storyteller/ui-gallery-modal";
import { LoadingDots } from "@storyteller/ui-loading";
+import {
+ isActionReminderOpen,
+ actionReminderProps,
+ ActionReminderModal,
+} from "@storyteller/ui-action-reminder-modal";
export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
useSignals();
useActiveJobs();
useBackgroundLoadingMedia();
- // implement the code to handle incoming messages from the Engine
useQueueHandler();
const [validGpu, setValidGpu] = useState("unknown");
@@ -110,8 +113,9 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
return ;
}
- return (
+ const currentReminderModalProps = actionReminderProps.value;
+ return (
@@ -127,7 +131,22 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
-
+ {currentReminderModalProps && (
+
+ )}
+
);
};
diff --git a/frontend/apps/editor3d/tsconfig.json b/frontend/apps/editor3d/tsconfig.json
index e364cb141b..cb9ae01121 100644
--- a/frontend/apps/editor3d/tsconfig.json
+++ b/frontend/apps/editor3d/tsconfig.json
@@ -58,6 +58,9 @@
{
"path": "../../libs/components/button-dropdown"
},
+ {
+ "path": "../../libs/components/action-reminder-modal"
+ },
{
"path": "../../libs/components/login-modal"
},
diff --git a/frontend/libs/components/action-reminder-modal/.babelrc b/frontend/libs/components/action-reminder-modal/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/.babelrc
@@ -0,0 +1,12 @@
+{
+ "presets": [
+ [
+ "@nx/react/babel",
+ {
+ "runtime": "automatic",
+ "useBuiltIns": "usage"
+ }
+ ]
+ ],
+ "plugins": []
+}
diff --git a/frontend/libs/components/action-reminder-modal/README.md b/frontend/libs/components/action-reminder-modal/README.md
new file mode 100644
index 0000000000..5a6c2ac9f6
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/README.md
@@ -0,0 +1,7 @@
+# @storyteller/ui-action-reminder-modal
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-action-reminder-modal` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/action-reminder-modal/package.json b/frontend/libs/components/action-reminder-modal/package.json
new file mode 100644
index 0000000000..0ddb51960f
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@storyteller/ui-action-reminder-modal",
+ "version": "0.0.1",
+ "type": "module",
+ "main": "./dist/index.js",
+ "module": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "exports": {
+ "./package.json": "./package.json",
+ ".": {
+ "development": "./src/index.ts",
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.js",
+ "default": "./dist/index.js"
+ }
+ }
+}
diff --git a/frontend/libs/components/action-reminder-modal/src/index.ts b/frontend/libs/components/action-reminder-modal/src/index.ts
new file mode 100644
index 0000000000..ea40603be8
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./lib/action-reminder-modal-signals";
+export * from "./lib/action-reminder-modal";
diff --git a/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal-signals.ts b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal-signals.ts
new file mode 100644
index 0000000000..075a2d32f4
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal-signals.ts
@@ -0,0 +1,48 @@
+// frontend/apps/editor3d/app/src/signals/actionReminderSignals.ts
+import { signal } from "@preact/signals-react";
+import { ReactNode } from "react";
+import { ReminderType } from "@storyteller/ui-action-reminder-modal";
+
+export interface ShowActionReminderOptions {
+ reminderType: ReminderType;
+ onPrimaryAction: () => void;
+ title?: string;
+ message?: ReactNode;
+ primaryActionText?: string;
+ secondaryActionText?: string;
+ onSecondaryAction?: () => void;
+ isLoading?: boolean;
+ openAiLogo?: string;
+}
+
+interface ActionReminderModalFullProps extends ShowActionReminderOptions {
+ onClose: () => void;
+}
+
+export const isActionReminderOpen = signal(false);
+export const actionReminderProps = signal(
+ null
+);
+
+export function showActionReminder(options: ShowActionReminderOptions): void {
+ actionReminderProps.value = {
+ ...options,
+ onClose: () => {
+ isActionReminderOpen.value = false;
+ },
+ };
+ isActionReminderOpen.value = true;
+}
+
+// Example of how to trigger it - BFlat:
+// import { showGlobalActionReminder } from "@storyteller/ui-action-reminder-modal";
+// import openAiLogo from 'path/to/logo.svg';
+//
+// function someAction() {
+// showActionReminder({
+// reminderType: 'soraLogin',
+// onPrimaryAction: () => console.log('Login with Sora!'),
+// openAiLogo: openAiLogo,
+// title: 'Sora Login Needed'
+// });
+// }
diff --git a/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.module.css b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.module.css
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
\ No newline at end of file
diff --git a/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.spec.tsx b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.spec.tsx
new file mode 100644
index 0000000000..019db4d868
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import ActionReminderModal from './action-reminder-modal';
+
+describe('ActionReminderModal', () => {
+
+ it('should render successfully', () => {
+ const { baseElement } = render();
+ expect(baseElement).toBeTruthy();
+ });
+
+});
diff --git a/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.tsx b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.tsx
new file mode 100644
index 0000000000..643a3e90a2
--- /dev/null
+++ b/frontend/libs/components/action-reminder-modal/src/lib/action-reminder-modal.tsx
@@ -0,0 +1,140 @@
+import { Button } from "@storyteller/ui-button";
+import { Modal } from "@storyteller/ui-modal";
+import { ReactNode } from "react";
+import { faRightToBracket } from "@fortawesome/pro-solid-svg-icons";
+
+export type ReminderType = "default" | "soraLogin" | "artcraftLogin";
+
+interface ActionReminderModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ reminderType?: ReminderType;
+ onPrimaryAction: () => void;
+ title?: string;
+ hideTitle?: boolean;
+ message?: ReactNode;
+ children?: ReactNode;
+ primaryActionText?: string;
+ secondaryActionText?: string;
+ onSecondaryAction?: () => void;
+ isLoading?: boolean;
+ openAiLogo?: string;
+ modalClassName?: string;
+}
+
+export function ActionReminderModal({
+ isOpen,
+ onClose,
+ reminderType = "default",
+ onPrimaryAction,
+ title: customTitle,
+ hideTitle = false,
+ message: customMessage,
+ children: customChildren,
+ primaryActionText: customPrimaryActionText,
+ secondaryActionText: customSecondaryActionText,
+ onSecondaryAction,
+ isLoading = false,
+ openAiLogo,
+ modalClassName: customModalClassName = "",
+}: ActionReminderModalProps) {
+ let titleText: string | undefined;
+ let messageContent: ReactNode;
+ let primaryActionBtnText: string;
+ let primaryActionIcon = faRightToBracket;
+
+ if (!hideTitle) {
+ switch (reminderType) {
+ case "soraLogin":
+ titleText = customTitle || "Link Your OpenAI Sora Account";
+ break;
+ case "artcraftLogin":
+ titleText = customTitle || "Login to ArtCraft";
+ break;
+ default:
+ titleText = customTitle || "Action Required";
+ break;
+ }
+ } else {
+ titleText = undefined;
+ }
+
+ switch (reminderType) {
+ case "soraLogin":
+ titleText = customTitle || "Link Your OpenAI Account";
+ messageContent = customMessage || (
+
+ To use this feature, please connect your OpenAI account. This allows
+ us to leverage your existing subscription.
+
+ );
+ primaryActionBtnText = customPrimaryActionText || "Login with OpenAI";
+ break;
+ case "artcraftLogin":
+ messageContent = customMessage || (
+
+ Please log in or sign up to ArtCraft to proceed. This will allow you
+ to save your work and access all features.
+
+ );
+ primaryActionBtnText = customPrimaryActionText || "Login / Sign Up";
+ break;
+ default:
+ messageContent = customMessage || (
+
+ Please complete the required action.
+
+ );
+ primaryActionBtnText = customPrimaryActionText || "Proceed";
+ break;
+ }
+
+ const effectiveSecondaryAction = onSecondaryAction || onClose;
+ const effectiveSecondaryActionText = customSecondaryActionText || "Cancel";
+
+ let modalSpecificClasses = "";
+
+ const finalModalClassName =
+ `${customModalClassName} ${modalSpecificClasses}`.trim();
+
+ return (
+
+
+ {customChildren ? (
+
{customChildren}
+ ) : (
+
{messageContent}
+ )}
+
+
+
+ {(onSecondaryAction || customSecondaryActionText) && (
+
+ )}
+
+