@weirdfingers/baseboards 0.4.1 → 0.5.0

package/templates/web/src/components/boards/GenerationGrid.tsx

@@ -1,3 +1,4 @@
+import { useGeneratorSelection } from "@weirdfingers/boards";
 import { ArtifactPreview } from "./ArtifactPreview";
 
 interface Generation {
@@ -19,6 +20,8 @@ export function GenerationGrid({
   generations,
   onGenerationClick,
 }: GenerationGridProps) {
+  const { canArtifactBeAdded, addArtifactToSlot } = useGeneratorSelection();
+
   if (generations.length === 0) {
     return (
       <div className="flex items-center justify-center py-12 text-gray-500">
@@ -27,19 +30,56 @@ export function GenerationGrid({
     );
   }
 
+  const handleDownload = (generation: Generation) => {
+    if (generation.storageUrl) {
+      window.open(generation.storageUrl, "_blank");
+    }
+  };
+
+  const handlePreview = (generation: Generation) => {
+    // For now, use the same handler as onClick
+    onGenerationClick?.(generation);
+  };
+
+  const handleAddToSlot = (generation: Generation) => {
+    const success = addArtifactToSlot({
+      id: generation.id,
+      artifactType: generation.artifactType,
+      storageUrl: generation.storageUrl,
+      thumbnailUrl: generation.thumbnailUrl,
+    });
+
+    if (success) {
+      // Scroll to the generation input to show the user where the artifact was added
+      const generationInput = document.getElementById('generation-input');
+      if (generationInput) {
+        generationInput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    }
+  };
+
   return (
     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-      {generations.map((generation) => (
-        <ArtifactPreview
-          key={generation.id}
-          artifactType={generation.artifactType}
-          storageUrl={generation.storageUrl}
-          thumbnailUrl={generation.thumbnailUrl}
-          status={generation.status}
-          errorMessage={generation.errorMessage}
-          onClick={() => onGenerationClick?.(generation)}
-        />
-      ))}
+      {generations.map((generation) => {
+        const canAdd = generation.status === "COMPLETED" && canArtifactBeAdded(generation.artifactType);
+
+        return (
+          <ArtifactPreview
+            key={generation.id}
+            artifactId={generation.id}
+            artifactType={generation.artifactType}
+            storageUrl={generation.storageUrl}
+            thumbnailUrl={generation.thumbnailUrl}
+            status={generation.status}
+            errorMessage={generation.errorMessage}
+            onClick={() => onGenerationClick?.(generation)}
+            onAddToSlot={() => handleAddToSlot(generation)}
+            canAddToSlot={canAdd}
+            onDownload={() => handleDownload(generation)}
+            onPreview={() => handlePreview(generation)}
+          />
+        );
+      })}
     </div>
   );
 }

package/templates/web/src/components/boards/GenerationInput.tsx

@@ -4,8 +4,7 @@ import { useState, useMemo, useEffect } from "react";
 import { Settings, ArrowUp, X } from "lucide-react";
 import Image from "next/image";
 import {
-  ParsedGeneratorSchema,
-  parseGeneratorSchema,
+  useGeneratorSelection,
 } from "@weirdfingers/boards";
 import { GeneratorSelector, GeneratorInfo } from "./GeneratorSelector";
 import { ArtifactInputSlots } from "./ArtifactInputSlots";
@@ -35,44 +34,49 @@ export function GenerationInput({
   onSubmit,
   isGenerating = false,
 }: GenerationInputProps) {
-  const [selectedGenerator, setSelectedGenerator] =
-    useState<GeneratorInfo | null>(generators[0] || null);
+  const {
+    selectedGenerator,
+    setSelectedGenerator,
+    parsedSchema,
+    selectedArtifacts,
+    setSelectedArtifacts
+  } = useGeneratorSelection();
+
   const [prompt, setPrompt] = useState("");
-  const [selectedArtifacts, setSelectedArtifacts] = useState<
-    Map<string, Generation>
-  >(new Map());
   const [attachedImage, setAttachedImage] = useState<Generation | null>(null);
   const [showSettings, setShowSettings] = useState(false);
   const [settings, setSettings] = useState<Record<string, unknown>>({});
 
-  // Parse input schema using the toolkit's schema parser
-  const parsedSchema = useMemo((): ParsedGeneratorSchema => {
-    if (!selectedGenerator) {
-      return { artifactSlots: [], promptField: null, settingsFields: [] };
+  // Initialize selected generator if not set
+  useEffect(() => {
+    if (!selectedGenerator && generators.length > 0) {
+      setSelectedGenerator(generators[0]);
     }
-    return parseGeneratorSchema(selectedGenerator.inputSchema);
-  }, [selectedGenerator]);
+  }, [generators, selectedGenerator, setSelectedGenerator]);
 
   const artifactSlots = useMemo(() => {
+    if (!parsedSchema) return [];
     return parsedSchema.artifactSlots.map((slot) => ({
       name: slot.fieldName,
       type: slot.artifactType,
       required: slot.required,
     }));
-  }, [parsedSchema.artifactSlots]);
+  }, [parsedSchema]);
 
   const needsArtifactInputs = artifactSlots.length > 0;
 
   // Initialize settings with defaults when generator changes
   const defaultSettings = useMemo(() => {
     const defaults: Record<string, unknown> = {};
-    parsedSchema.settingsFields.forEach((field) => {
-      if (field.default !== undefined) {
-        defaults[field.fieldName] = field.default;
-      }
-    });
+    if (parsedSchema) {
+      parsedSchema.settingsFields.forEach((field) => {
+        if (field.default !== undefined) {
+          defaults[field.fieldName] = field.default;
+        }
+      });
+    }
     return defaults;
-  }, [parsedSchema.settingsFields]);
+  }, [parsedSchema]);
 
   // Reset settings when generator changes or defaultSettings change
   useEffect(() => {
@@ -89,9 +93,8 @@ export function GenerationInput({
       settings,
     });
 
-    // Reset form
+    // Reset form (but keep selected artifacts and generator)
     setPrompt("");
-    setSelectedArtifacts(new Map());
     setAttachedImage(null);
     setSettings(defaultSettings);
   };
@@ -229,7 +232,7 @@ export function GenerationInput({
       {/* Settings panel (collapsed by default) */}
       {showSettings && (
         <div className="px-4 py-4 border-t border-gray-200 bg-gray-50">
-          {parsedSchema.settingsFields.length === 0 ? (
+          {!parsedSchema || parsedSchema.settingsFields.length === 0 ? (
             <p className="text-sm text-gray-600">
               No additional settings available for this generator
             </p>

package/templates/web/src/components/boards/GeneratorSelector.tsx

@@ -2,6 +2,7 @@
 
 import { Zap, Check } from "lucide-react";
 import type { JSONSchema7 } from "@weirdfingers/boards";
+import { useGeneratorSelection } from "@weirdfingers/boards";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,11 +28,19 @@ export function GeneratorSelector({
   selectedGenerator,
   onSelect,
 }: GeneratorSelectorProps) {
+  const { setSelectedGenerator } = useGeneratorSelection();
+
   const getGeneratorIcon = (name: string) => {
     // You can customize icons per generator here
     return <Zap className="w-4 h-4" />;
   };
 
+  const handleSelect = (generator: GeneratorInfo) => {
+    // Update both local state and context
+    setSelectedGenerator(generator);
+    onSelect(generator);
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -57,7 +66,7 @@ export function GeneratorSelector({
         {generators.map((generator) => (
           <DropdownMenuItem
             key={generator.name}
-            onClick={() => onSelect(generator)}
+            onClick={() => handleSelect(generator)}
             className="px-4 py-3 flex items-start gap-3 cursor-pointer"
           >
             <div className="flex-shrink-0 mt-0.5">