From e185206b8daf995e79ed098fc664c867681f54d9 Mon Sep 17 00:00:00 2001 From: jakedahn Date: Mon, 3 Mar 2025 12:53:57 -0700 Subject: [PATCH 1/5] remove variant tray component, no longer in use --- .../jumble/src/components/VariantTray.tsx | 157 ------------------ 1 file changed, 157 deletions(-) delete mode 100644 typescript/packages/jumble/src/components/VariantTray.tsx diff --git a/typescript/packages/jumble/src/components/VariantTray.tsx b/typescript/packages/jumble/src/components/VariantTray.tsx deleted file mode 100644 index 889cb707c..000000000 --- a/typescript/packages/jumble/src/components/VariantTray.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import { Charm } from "@commontools/charm"; -import { CharmRenderer } from "@/components/CharmRunner.tsx"; -import { charmId } from "@/utils/charms.ts"; -import { useNavigate, useParams } from "react-router-dom"; -import { Cell } from "@commontools/runner"; -import { createPath } from "@/routes.ts"; -import { useCallback } from "react"; - -interface VariantTrayProps { - variants: Cell[]; - selectedVariant: Cell | null; - onSelectVariant: (charm: Cell) => void; - variantModels: readonly string[]; - totalExpectedVariants: number; - onCancel: () => void; - originalCharm: Cell; -} - -export function VariantTray({ - variants, - selectedVariant, - onSelectVariant, - variantModels, - totalExpectedVariants, - onCancel, - originalCharm, -}: VariantTrayProps) { - const navigate = useNavigate(); - const { replicaName } = useParams(); - - const remainingCount = Math.max(0, totalExpectedVariants - variants.length); - const loadingPlaceholders = Array(remainingCount).fill(null); - - const handleChooseClick = useCallback(() => { - if (!selectedVariant) return; - - const id = charmId(selectedVariant); - if (!id || !replicaName) { - console.error("Missing required params", { id, replicaName }); - return; - } - - navigate(createPath("charmShow", { charmId: id, replicaName })); - }, [selectedVariant, replicaName, navigate]); - - return ( -
-
-

Choose a variant

-
- - -
-
-
-
- -
-
Original
-
{charmId(originalCharm)}
-
-
- {variants.map((variant, i) => ( -
- -
-
{variantModels[i]}
-
{charmId(variant)}
-
-
- ))} - - {loadingPlaceholders.map((_, i) => ( -
-
-
- Generating... -
-
-
-
Loading...
-
-
- ))} -
-
- ); -} From d59b8d576f9342590d349481d44eada35153b7d2 Mon Sep 17 00:00:00 2001 From: jakedahn Date: Mon, 3 Mar 2025 12:55:24 -0700 Subject: [PATCH 2/5] formatter spam --- .../jumble/src/views/CharmDetailView.tsx | 216 +++++------------- 1 file changed, 61 insertions(+), 155 deletions(-) diff --git a/typescript/packages/jumble/src/views/CharmDetailView.tsx b/typescript/packages/jumble/src/views/CharmDetailView.tsx index c3abeb30b..229ce340c 100644 --- a/typescript/packages/jumble/src/views/CharmDetailView.tsx +++ b/typescript/packages/jumble/src/views/CharmDetailView.tsx @@ -1,17 +1,5 @@ -import { - Charm, - getIframeRecipe, - IFrameRecipe, - saveNewRecipeVersion, -} from "@commontools/charm"; -import React, { - createContext, - useCallback, - useContext, - useEffect, - useRef, - useState, -} from "react"; +import { Charm, getIframeRecipe, IFrameRecipe, saveNewRecipeVersion } from "@commontools/charm"; +import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"; import { useLocation, useNavigate, useParams } from "react-router-dom"; import { useCharmManager } from "@/contexts/CharmManagerContext.tsx"; import { LoadingSpinner } from "@/components/Loader.tsx"; @@ -58,16 +46,12 @@ interface CharmOperationContextType { handleCancelVariants: () => void; } -const CharmOperationContext = createContext( - null, -); +const CharmOperationContext = createContext(null); const useCharmOperationContext = () => { const context = useContext(CharmOperationContext); if (!context) { - throw new Error( - "useCharmOperationContext must be used within a CharmOperationProvider", - ); + throw new Error("useCharmOperationContext must be used within a CharmOperationProvider"); } return context; }; @@ -185,9 +169,7 @@ function useTabNavigation() { const location = useLocation(); const navigate = useNavigate(); - const [activeTab, setActiveTab] = useState( - (location.hash.slice(1) as Tab) || "iterate", - ); + const [activeTab, setActiveTab] = useState((location.hash.slice(1) as Tab) || "iterate"); useEffect(() => { setActiveTab((location.hash.slice(1) as Tab) || "iterate"); @@ -245,10 +227,7 @@ function useSuggestions(charm: Cell | null) { } // Hook for code editing -function useCodeEditor( - charm: Cell | null, - iframeRecipe: IFrameRecipe | null, -) { +function useCodeEditor(charm: Cell | null, iframeRecipe: IFrameRecipe | null) { const { charmManager } = useCharmManager(); const [workingSrc, setWorkingSrc] = useState(undefined); @@ -283,16 +262,12 @@ function useCharmOperation() { // Shared state const [input, setInput] = useState(""); - const [selectedModel, setSelectedModel] = useState( - "anthropic:claude-3-7-sonnet-latest", - ); + const [selectedModel, setSelectedModel] = useState("anthropic:claude-3-7-sonnet-latest"); const [operationType, setOperationType] = useState("iterate"); const [showVariants, setShowVariants] = useState(true); const [loading, setLoading] = useState(false); const [variants, setVariants] = useState[]>([]); - const [selectedVariant, setSelectedVariant] = useState | null>( - null, - ); + const [selectedVariant, setSelectedVariant] = useState | null>(null); const [expectedVariantCount, setExpectedVariantCount] = useState(0); // Function that performs the selected operation (iterate or extend) @@ -305,23 +280,9 @@ function useCharmOperation() { model: string, ) => { if (operationType === "iterate") { - return await iterateCharm( - charmManager, - charmId, - replicaName, - input, - replace, - model, - ); + return await iterateCharm(charmManager, charmId, replicaName, input, replace, model); } else { - return await extendCharm( - charmManager, - charmId, - replicaName, - input, - replace, - model, - ); + return await extendCharm(charmManager, charmId, replicaName, input, replace, model); } }, [operationType, charmManager], @@ -338,13 +299,7 @@ function useCharmOperation() { try { const variantPromises = variantModels.map((model) => - performOperation( - charmId(charm)!, - replicaName!, - input, - false, - model, - ) + performOperation(charmId(charm)!, replicaName!, input, false, model), ); // Handle promises as they complete @@ -583,21 +538,12 @@ const Variants = () => { ))} {/* Loading placeholders */} - {Array.from({ length: expectedVariantCount - variants.length }).map(( - _, - idx, - ) => ( + {Array.from({ length: expectedVariantCount - variants.length }).map((_, idx) => (
- +
))} @@ -610,12 +556,8 @@ const Suggestions = () => { const { charmId: paramCharmId } = useParams(); const { currentFocus: charm } = useCharm(paramCharmId); const { suggestions, loadingSuggestions } = useSuggestions(charm); - const { - setInput, - setShowVariants, - handlePerformOperation, - setOperationType, - } = useCharmOperationContext(); + const { setInput, setShowVariants, handlePerformOperation, setOperationType } = + useCharmOperationContext(); const handleSuggestion = (suggestion: CharmSuggestion) => { setInput(suggestion.prompt); @@ -635,35 +577,27 @@ const Suggestions = () => { return (

Suggestions

- {loadingSuggestions - ? ( -
- -
- ) - : ( -
- {suggestions.map((suggestion, index) => ( - - ))} -
- )} + {loadingSuggestions ? ( +
+ +
+ ) : ( +
+ {suggestions.map((suggestion, index) => ( + + ))} +
+ )}
); }; @@ -712,9 +646,9 @@ const OperationTab = () => {