add package for model list

frontend/libs/build-env/src/index.ts

@@ -1,3 +1,2 @@
 
-export * from './lib/BuildEnv';
-export * from './lib/BuildEnvType';
+export * from './lib/build-env';

frontend/libs/build-env/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types='vitest' />
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
@@ -7,7 +7,7 @@ import * as path from 'path';
 export default defineConfig(() => ({
   root: __dirname,
   cacheDir: '../../node_modules/.vite/libs/build-env',
-  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') }), ],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],
@@ -15,35 +15,33 @@ export default defineConfig(() => ({
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
-    outDir: './dist',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: '@frontend/build-env',
-      fileName: 'index',
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ['es' as const]
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: ['react','react-dom','react/jsx-runtime']
+    'emptyOutDir': true,
+    'transformMixedEsModules': true,
+    'entry': 'src/index.ts',
+    'name': '@frontend/build-env',
+    'fileName': 'index',
+    'formats': ['es' as const],
+    'external': ['react','react-dom','react/jsx-runtime'],
+    'lib': {
+      'entry': "src/index.ts",
+      'name': "@frontend/build-env",
+      'fileName': "index",
+      'formats': ['es' as const],
     },
+    'rollupOptions': {"external":["'react'","'react-dom'","'react/jsx-runtime'"]},
+    'outDir': "./dist",
+    'reportCompressedSize': true,
+    'commonjsOptions': {"transformMixedEsModules":true},
   },
   test: {
-    watch: false,
-    globals: true,
-    environment: 'jsdom',
-    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: './test-output/vitest/coverage',
-      provider: 'v8' as const,
-    }
+    'watch': false,
+    'globals': true,
+    'environment': "jsdom",
+    'include': ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    'reporters': ["default"],
+    'coverage': {
+    'reportsDirectory': './test-output/vitest/coverage',
+    'provider': 'v8' as const,
+}
   },
 }));

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

@@ -1,6 +1,7 @@
 import type { PopoverItem } from "@storyteller/ui-popover";
 import { faClock, faFilm, faImage } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IMAGE_MODELS } from "@storyteller/model-list";
 
 export type ModelList = Omit<PopoverItem, "selected">[];
 
@@ -44,39 +45,39 @@ export const allModels = {
   ],
   image: [
     {
-      id: "todo",
       label: "Flux Pro 1.1 Ultra",
       icon: <FontAwesomeIcon icon={faImage} className="h-4 w-4" />,
       description: "High quality model",
       badges: [{ label: "15 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
+      modelInfo: IMAGE_MODELS.flux_pro_1_1_ultra,
     },
     {
-      id: "todo",
       label: "Flux Pro 1.1",
       icon: <FontAwesomeIcon icon={faImage} className="h-4 w-4" />,
       description: "High quality model",
       badges: [{ label: "15 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
+      modelInfo: IMAGE_MODELS.flux_pro_1_1,
     },
     {
-      id: "todo",
       label: "Flux 1 Dev",
       icon: <FontAwesomeIcon icon={faImage} className="h-4 w-4" />,
       description: "High quality model",
       badges: [{ label: "15 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
+      modelInfo: IMAGE_MODELS.flux_1_dev,
     },
     {
-      id: "todo",
       label: "Flux 1 Schnell",
       icon: <FontAwesomeIcon icon={faImage} className="h-4 w-4" />,
       description: "High quality model",
       badges: [{ label: "15 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
+      modelInfo: IMAGE_MODELS.flux_1_schnell,
     },
     {
-      id: "todo",
       label: "GPT Image 1 (GPT-4o)",
       icon: <FontAwesomeIcon icon={faImage} className="h-4 w-4" />,
       description: "Slow, ultra instructive model",
       badges: [{ label: "45 sec.", icon: <FontAwesomeIcon icon={faClock} /> }],
+      modelInfo: IMAGE_MODELS.gpt_image_1,
     },
     //{
     //  id: "todo",

frontend/libs/components/model-selector/tsconfig.json

@@ -5,6 +5,9 @@
     {
       "path": "../popover"
     },
+    {
+      "path": "../../model-list"
+    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/components/model-selector/tsconfig.lib.json

@@ -45,6 +45,9 @@
   "references": [
     {
       "path": "../popover/tsconfig.lib.json"
+    },
+    {
+      "path": "../../model-list/tsconfig.lib.json"
     }
   ]
 }

frontend/libs/components/popover/src/lib/popover.tsx

@@ -13,6 +13,7 @@ import {
   faChevronUp,
   faCircleCheck,
 } from "@fortawesome/pro-solid-svg-icons";
+import { ModelInfo } from "@storyteller/model-list";
 
 export interface PopoverItem {
   label: string;
@@ -25,6 +26,7 @@ export interface PopoverItem {
     label: string;
     icon?: ReactNode;
   }>;
+  modelInfo?: ModelInfo;
 }
 
 interface PopoverMenuProps {

frontend/libs/components/popover/tsconfig.json

@@ -5,6 +5,9 @@
     {
       "path": "../button"
     },
+    {
+      "path": "../../model-list"
+    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/components/popover/tsconfig.lib.json

@@ -45,6 +45,9 @@
   "references": [
     {
       "path": "../button/tsconfig.lib.json"
+    },
+    {
+      "path": "../../model-list/tsconfig.lib.json"
     }
   ]
 }

frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx

@@ -52,6 +52,8 @@ export const PromptBoxImage = ({
 }: PromptBoxImageProps) => {
   useSignals();
 
+  console.log("PromptBoxImage - model", model);
+
   // for the image media id and url, we need to set the reference image gallery panel.
   useEffect(() => {
     if (imageMediaId && url) {

frontend/package-lock.json

@@ -1522,6 +1522,10 @@
       "name": "@frontend/login",
       "version": "0.0.1"
     },
+    "libs/model-list": {
+      "name": "@storyteller/model-list",
+      "version": "0.0.1"
+    },
     "libs/soundboard": {
       "name": "@storyteller/soundboard",
       "version": "0.0.1",
@@ -9649,6 +9653,10 @@
       "resolved": "libs/common",
       "link": true
     },
+    "node_modules/@storyteller/model-list": {
+      "resolved": "libs/model-list",
+      "link": true
+    },
     "node_modules/@storyteller/soundboard": {
       "resolved": "libs/soundboard",
       "link": true

frontend/tsconfig.json

@@ -143,6 +143,9 @@
     },
     {
       "path": "./libs/components/pricing-modal"
+    },
+    {
+      "path": "./libs/model-list"
     }
   ]
 }