Refactor model selection to use ModelCategory enum across PageEditor, TextToImage, and ImageToVideo components

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -75,7 +75,10 @@ import {
 } from "@storyteller/ui-gallery-modal";
 import {
   imageGenerationModels,
+  // ModelCategory,
   ModelSelector,
+  // videoGenerationModels,
+  // useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
 
 export const PageEditor = () => {
@@ -85,6 +88,12 @@ export const PageEditor = () => {
     event.stopPropagation();
   };
 
+  // TODO: For 3d Promptbox to accept this later on
+  // const { selectedModels } = useModelSelectorStore();
+  // const selectedModel =
+  // selectedModels[ModelCategory.Editor3D] ||
+  // videoGenerationModels[0]?.label;
+
   useEffect(() => {
     timelineHeight.value = 0; //timelineHeight.value = 208;
     sidePanelWidth.value = 340;
@@ -460,7 +469,7 @@ export const PageEditor = () => {
                 <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
                   <ModelSelector
                     items={imageGenerationModels}
-                    category="image-generation"
+                    category="3d-editor"
                     panelTitle="Select Model"
                     panelClassName="min-w-[280px]"
                     buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"

frontend/apps/editor3d/app/src/pages/PageImage/TextToImage.tsx

@@ -4,6 +4,7 @@ import { PromptBoxImage } from "@storyteller/ui-promptbox";
 import BackgroundGallery from "./BackgroundGallery";
 import {
   imageGenerationModels,
+  ModelCategory,
   ModelSelector,
   useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
@@ -17,7 +18,8 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { selectedModels } = useModelSelectorStore();
   const selectedModel =
-    selectedModels["text-to-image"] || imageGenerationModels[0]?.label;
+    selectedModels[ModelCategory.TextToImage] ||
+    imageGenerationModels[0]?.label;
 
   const jobContext: JobContextType = {
     jobTokens: [],
@@ -58,7 +60,7 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={imageGenerationModels}
-              category="text-to-image"
+              category={ModelCategory.TextToImage}
               mode="hoverSelect"
               panelTitle="Select Model"
               panelClassName="min-w-[280px]"

frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx

@@ -3,6 +3,7 @@ import { JobContextType } from "@storyteller/common";
 import { PromptBoxVideo } from "@storyteller/ui-promptbox";
 import BackgroundGallery from "./BackgroundGallery";
 import {
+  ModelCategory,
   ModelSelector,
   useModelSelectorStore,
   videoGenerationModels,
@@ -17,7 +18,8 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { selectedModels } = useModelSelectorStore();
   const selectedModel =
-    selectedModels["image-to-video"] || videoGenerationModels[0]?.label;
+    selectedModels[ModelCategory.ImageToVideo] ||
+    videoGenerationModels[0]?.label;
 
   const jobContext: JobContextType = {
     jobTokens: [],
@@ -59,7 +61,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
           <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
             <ModelSelector
               items={videoGenerationModels}
-              category="image-to-video"
+              category={ModelCategory.ImageToVideo}
               panelTitle="Select Model"
               panelClassName="min-w-[280px]"
               buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"

frontend/libs/components/model-selector/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./lib/model-selector";
 export * from "./lib/model-selector-store";
 export * from "./lib/model-lists";
+export * from "./lib/model-categories";

frontend/libs/components/model-selector/src/lib/model-categories.ts

@@ -0,0 +1,10 @@
+/**
+ * Defines the unique categories for each product or context where a model
+ * selection is required. Using an enum prevents typos and ensures type safety.
+ */
+export enum ModelCategory {
+  TextToImage = "text-to-image",
+  ImageToVideo = "image-to-video",
+  Canvas2D = "2d-canvas",
+  Editor3D = "3d-editor",
+}

frontend/libs/components/model-selector/src/lib/model-lists.tsx

@@ -38,6 +38,12 @@ export const allModels = {
       description: "Fast and high-quality model",
       badges: [{ label: "15 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
     },
+    {
+      label: "Flux.1 Kontext",
+      icon: <FontAwesomeIcon icon={faImage} className="h-4 w-4" />,
+      description: "New model with advanced context",
+      badges: [{ label: "25 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
+    },
   ],
 };
 

frontend/libs/components/model-selector/src/lib/model-selector-store.ts

@@ -1,8 +1,9 @@
 import { create } from "zustand";
+import { ModelCategory } from "./model-categories";
 
 interface ModelSelectorState {
-  selectedModels: { [category: string]: string | undefined };
-  setSelectedModel: (category: string, modelLabel: string) => void;
+  selectedModels: { [category in ModelCategory]?: string };
+  setSelectedModel: (category: ModelCategory, modelLabel: string) => void;
 }
 
 export const useModelSelectorStore = create<ModelSelectorState>((set) => ({

frontend/libs/components/model-selector/src/lib/model-selector.tsx

@@ -1,10 +1,11 @@
 import { PopoverMenu, type PopoverItem } from "@storyteller/ui-popover";
 import { useModelSelectorStore } from "./model-selector-store";
 import { useMemo } from "react";
+import { ModelCategory } from "./model-categories";
 
 interface ModelSelectorProps {
   items: Omit<PopoverItem, "selected">[];
-  category: string;
+  category: ModelCategory;
   mode?: "hoverSelect" | "default" | "toggle" | "button";
   panelTitle?: string;
   buttonClassName?: string;