@marimo-team/islands 0.15.1-dev20 → 0.15.1-dev23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.15.1-dev20",
+  "version": "0.15.1-dev23",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -60,29 +60,29 @@
     "@open-rpc/client-js": "^1.8.1",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/primitive": "~1.1.2",
-    "@radix-ui/react-accordion": "~1.2.11",
-    "@radix-ui/react-alert-dialog": "~1.1.14",
-    "@radix-ui/react-checkbox": "~1.3.2",
+    "@radix-ui/primitive": "~1.1.3",
+    "@radix-ui/react-accordion": "~1.2.12",
+    "@radix-ui/react-alert-dialog": "~1.1.15",
+    "@radix-ui/react-checkbox": "~1.3.3",
     "@radix-ui/react-compose-refs": "~1.1.2",
-    "@radix-ui/react-context-menu": "~2.2.15",
-    "@radix-ui/react-dialog": "~1.1.14",
-    "@radix-ui/react-dropdown-menu": "~2.1.15",
+    "@radix-ui/react-context-menu": "~2.2.16",
+    "@radix-ui/react-dialog": "~1.1.15",
+    "@radix-ui/react-dropdown-menu": "~2.1.16",
     "@radix-ui/react-icons": "~1.3.2",
     "@radix-ui/react-label": "~2.1.7",
-    "@radix-ui/react-navigation-menu": "~1.2.13",
-    "@radix-ui/react-popover": "~1.1.14",
+    "@radix-ui/react-navigation-menu": "~1.2.14",
+    "@radix-ui/react-popover": "~1.1.15",
     "@radix-ui/react-progress": "~1.1.7",
-    "@radix-ui/react-radio-group": "~1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "~2.2.5",
-    "@radix-ui/react-slider": "~1.3.5",
+    "@radix-ui/react-radio-group": "~1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "~2.2.6",
+    "@radix-ui/react-slider": "~1.3.6",
     "@radix-ui/react-slot": "~1.2.3",
-    "@radix-ui/react-switch": "~1.2.5",
-    "@radix-ui/react-tabs": "~1.1.12",
-    "@radix-ui/react-toast": "~1.2.14",
-    "@radix-ui/react-toggle": "~1.1.9",
-    "@radix-ui/react-tooltip": "~1.2.7",
+    "@radix-ui/react-switch": "~1.2.6",
+    "@radix-ui/react-tabs": "~1.1.13",
+    "@radix-ui/react-toast": "~1.2.15",
+    "@radix-ui/react-toggle": "~1.1.10",
+    "@radix-ui/react-tooltip": "~1.2.8",
     "@radix-ui/react-use-callback-ref": "~1.1.1",
     "@radix-ui/react-use-controllable-state": "~1.2.2",
     "@replit/codemirror-vim": "^6.3.0",

package/src/components/ai/ai-model-dropdown.tsx

@@ -31,6 +31,7 @@ import {
 } from "../ui/dropdown-menu";
 import { Tooltip } from "../ui/tooltip";
 import { AiProviderIcon } from "./ai-provider-icon";
+import { getCurrentRoleTooltip, getTagColour } from "./display-helpers";
 
 interface AIModelDropdownProps {
   value?: string;
@@ -104,7 +105,7 @@ export const AIModelDropdown = ({
         </div>
 
         <div className="ml-auto flex gap-1">
-          <Tooltip content={getTagTooltip(role)}>
+          <Tooltip content={getCurrentRoleTooltip(role)}>
             <span
               key={role}
               className={`text-xs px-1.5 py-0.5 rounded font-medium ${getTagColour(role)}`}
@@ -248,8 +249,7 @@ const ProviderDropdownContent = ({
             </>
           )}
           {models.map((model) => {
-            const qualifiedModelId =
-              `${provider}/${model.model}` as QualifiedModelId;
+            const qualifiedModelId: QualifiedModelId = `${provider}/${model.model}`;
             return (
               <DropdownMenuSub key={qualifiedModelId}>
                 <DropdownMenuSubTrigger showChevron={false} className="py-2">
@@ -309,7 +309,7 @@ const AiModelDropdownItem = ({
   );
 };
 
-const AiModelInfoDisplay = ({
+export const AiModelInfoDisplay = ({
   model,
   provider,
 }: {
@@ -339,7 +339,7 @@ const AiModelInfoDisplay = ({
               <span
                 key={role}
                 className={`px-2 py-1 text-xs rounded-md font-medium ${getTagColour(role)}`}
-                title={getTagTooltip(role)}
+                title={getCurrentRoleTooltip(role)}
               >
                 {role}
               </span>
@@ -374,32 +374,3 @@ function getProviderLabel(provider: ProviderId): string {
   }
   return capitalize(provider);
 }
-
-function getTagColour(role: Role | "thinking"): string {
-  switch (role) {
-    case "chat":
-      return "bg-[var(--purple-3)] text-[var(--purple-11)]";
-    case "autocomplete":
-      return "bg-[var(--green-3)] text-[var(--green-11)]";
-    case "edit":
-      return "bg-[var(--blue-3)] text-[var(--blue-11)]";
-    case "thinking":
-      return "bg-[var(--purple-4)] text-[var(--purple-12)]";
-  }
-  return "bg-[var(--mauve-3)] text-[var(--mauve-11)]";
-}
-
-function getTagTooltip(role: Role): string {
-  switch (role) {
-    case "chat":
-      return "Current model used for chat conversations";
-    case "autocomplete":
-      return "Current model used for autocomplete autocomplete";
-    case "edit":
-      return "Current model used for code edits";
-    case "rerank":
-      return "Current model used for reranking completions";
-    case "embed":
-      return "Current model used for embedding";
-  }
-}

package/src/components/ai/display-helpers.tsx

@@ -0,0 +1,32 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { Role } from "@marimo-team/llm-info";
+
+export function getTagColour(role: Role | "thinking"): string {
+  switch (role) {
+    case "chat":
+      return "bg-[var(--purple-3)] text-[var(--purple-11)]";
+    case "autocomplete":
+      return "bg-[var(--green-3)] text-[var(--green-11)]";
+    case "edit":
+      return "bg-[var(--blue-3)] text-[var(--blue-11)]";
+    case "thinking":
+      return "bg-[var(--purple-4)] text-[var(--purple-12)]";
+  }
+  return "bg-[var(--mauve-3)] text-[var(--mauve-11)]";
+}
+
+export function getCurrentRoleTooltip(role: Role): string {
+  switch (role) {
+    case "chat":
+      return "Current model used for chat conversations";
+    case "autocomplete":
+      return "Current model used for autocomplete autocomplete";
+    case "edit":
+      return "Current model used for code edits";
+    case "rerank":
+      return "Current model used for reranking completions";
+    case "embed":
+      return "Current model used for embedding";
+  }
+}

package/src/components/app-config/ai-config.tsx

@@ -1,8 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { InfoIcon } from "lucide-react";
-import React from "react";
+import { BrainIcon, ChevronRightIcon, InfoIcon } from "lucide-react";
+import React, { useMemo } from "react";
+import {
+  Button as AriaButton,
+  Tree,
+  TreeItem,
+  TreeItemContent,
+} from "react-aria-components";
 import type { FieldPath, UseFormReturn } from "react-hook-form";
+import { useWatch } from "react-hook-form";
+import useEvent from "react-use-event-hook";
 import {
   FormControl,
   FormDescription,
@@ -16,24 +24,34 @@ import { Input } from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
 import { NativeSelect } from "@/components/ui/native-select";
 import { Textarea } from "@/components/ui/textarea";
-import type { QualifiedModelId } from "@/core/ai/ids/ids";
+import {
+  AiModelId,
+  type ProviderId,
+  type QualifiedModelId,
+} from "@/core/ai/ids/ids";
+import { type AiModel, AiModelRegistry } from "@/core/ai/model-registry";
 import { CopilotConfig } from "@/core/codemirror/copilot/copilot-config";
 import { DEFAULT_AI_MODEL, type UserConfig } from "@/core/config/config-schema";
 import { isWasm } from "@/core/wasm/utils";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
+import { Strings } from "@/utils/strings";
 import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import {
   AiProviderIcon,
   type AiProviderIconProps,
 } from "../ai/ai-provider-icon";
+import { getTagColour } from "../ai/display-helpers";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../ui/accordion";
+import { Checkbox } from "../ui/checkbox";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { ExternalLink } from "../ui/links";
+import { Switch } from "../ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { Tooltip } from "../ui/tooltip";
 import { SettingSubtitle } from "./common";
@@ -46,7 +64,7 @@ const formItemClasses = "flex flex-row items-center space-x-1 space-y-0";
 interface AiConfigProps {
   form: UseFormReturn<UserConfig>;
   config: UserConfig;
-  onSubmit: (values: UserConfig) => Promise<void>;
+  onSubmit: (values: UserConfig) => void;
 }
 
 interface AiProviderTitleProps {
@@ -189,7 +207,7 @@ interface ModelSelectorProps {
   description?: React.ReactNode;
   disabled?: boolean;
   label: string;
-  onSubmit: (values: UserConfig) => Promise<void>;
+  onSubmit: (values: UserConfig) => void;
 }
 
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
@@ -213,6 +231,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
         const selectModel = (modelId: QualifiedModelId) => {
           field.onChange(modelId);
+          // Usually not needed, but a hack to force form values to be updated
           onSubmit(form.getValues());
         };
 
@@ -340,7 +359,7 @@ const renderCopilotProvider = ({
 }: {
   form: UseFormReturn<UserConfig>;
   config: UserConfig;
-  onSubmit: (values: UserConfig) => Promise<void>;
+  onSubmit: (values: UserConfig) => void;
 }) => {
   const copilot = form.getValues("completion.copilot");
   if (copilot === false) {
@@ -388,8 +407,88 @@ const renderCopilotProvider = ({
   }
 };
 
-const SettingGroup = ({ children }: { children: React.ReactNode }) => {
-  return <div className="flex flex-col gap-4 pb-4">{children}</div>;
+const SettingGroup = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn("flex flex-col gap-4 pb-4", className)}>{children}</div>
+  );
+};
+
+interface ModelListItemProps {
+  qualifiedId: QualifiedModelId;
+  model: AiModel;
+  isEnabled: boolean;
+  onToggle: (modelId: QualifiedModelId) => void;
+}
+
+const ModelListItem: React.FC<ModelListItemProps> = ({
+  qualifiedId,
+  model,
+  isEnabled,
+  onToggle,
+}) => {
+  const handleToggle = () => {
+    onToggle(qualifiedId);
+  };
+
+  return (
+    <TreeItem
+      id={qualifiedId}
+      textValue={model.name}
+      className="pl-6 outline-none data-focused:bg-muted/50 hover:bg-muted/50"
+      onAction={handleToggle}
+    >
+      <TreeItemContent>
+        <div className="flex items-center justify-between px-4 py-3 border-b last:border-b-0 cursor-pointer outline-none">
+          <ModelInfoCard model={model} qualifiedId={qualifiedId} />
+          <Switch checked={isEnabled} onClick={handleToggle} size="sm" />
+        </div>
+      </TreeItemContent>
+    </TreeItem>
+  );
+};
+
+const ModelInfoCard = ({
+  model,
+  qualifiedId,
+}: {
+  model: AiModel;
+  qualifiedId: QualifiedModelId;
+}) => {
+  return (
+    <div className="flex items-center gap-3 flex-1">
+      <div className="flex flex-col flex-1">
+        <div className="flex items-center gap-2">
+          <h3 className="font-medium">{model.name}</h3>
+        </div>
+        <span className="text-xs text-muted-foreground font-mono">
+          {qualifiedId}
+        </span>
+        {model.description && !model.custom && (
+          <p className="text-sm text-muted-secondary mt-1 line-clamp-2">
+            {model.description}
+          </p>
+        )}
+
+        {model.thinking && (
+          <div
+            className={cn(
+              "flex items-center gap-1 rounded px-1 py-0.5 w-fit mt-1.5",
+              getTagColour("thinking"),
+            )}
+          >
+            <BrainIcon className="h-3 w-3" />
+            <span className="text-xs font-medium">Reasoning</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 };
 
 export const AiCodeCompletionConfig: React.FC<AiConfigProps> = ({
@@ -827,16 +926,170 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
   );
 };
 
+interface ProviderTreeItemProps {
+  providerId: ProviderId;
+  models: AiModel[];
+  enabledModels: Set<QualifiedModelId>;
+  onToggleModel: (modelId: QualifiedModelId) => void;
+  onToggleProvider: (providerId: ProviderId, enable: boolean) => void;
+}
+
+const ProviderTreeItem: React.FC<ProviderTreeItemProps> = ({
+  providerId,
+  models,
+  enabledModels,
+  onToggleModel,
+  onToggleProvider,
+}) => {
+  const enabledCount = models.filter((model) =>
+    enabledModels.has(new AiModelId(providerId, model.model).id),
+  ).length;
+  const totalCount = models.length;
+  const maybeProviderInfo = AiModelRegistry.getProviderInfo(providerId);
+  const name = maybeProviderInfo?.name || Strings.startCase(providerId);
+
+  const checkboxState =
+    enabledCount === 0
+      ? false
+      : enabledCount === totalCount
+        ? true
+        : "indeterminate";
+
+  const handleProviderToggle = useEvent(() => {
+    const shouldEnable = enabledCount < totalCount / 2;
+    onToggleProvider(providerId, shouldEnable);
+  });
+
+  return (
+    <TreeItem
+      id={providerId}
+      hasChildItems={true}
+      textValue={providerId}
+      className="outline-none data-focused:bg-muted/50 group"
+    >
+      <TreeItemContent>
+        <div className="flex items-center gap-3 px-3 py-3 hover:bg-muted/50 cursor-pointer outline-none focus-visible:outline-none">
+          <Checkbox
+            checked={checkboxState}
+            onCheckedChange={handleProviderToggle}
+            onClick={Events.stopPropagation()}
+          />
+          <AiProviderIcon provider={providerId} className="h-5 w-5" />
+          <div className="flex items-center justify-between w-full">
+            <h2 className="font-semibold">{name}</h2>
+            <p className="text-sm text-muted-secondary">
+              {enabledCount}/{totalCount} models
+            </p>
+          </div>
+          <AriaButton slot="chevron">
+            <ChevronRightIcon className="h-4 w-4 text-muted-foreground shrink-0 transition-transform duration-200 group-data-[expanded]:rotate-90" />
+          </AriaButton>
+        </div>
+      </TreeItemContent>
+
+      {models.map((model) => {
+        const qualifiedId = new AiModelId(providerId, model.model).id;
+        return (
+          <ModelListItem
+            key={qualifiedId}
+            qualifiedId={qualifiedId}
+            model={model}
+            isEnabled={enabledModels.has(qualifiedId)}
+            onToggle={onToggleModel}
+          />
+        );
+      })}
+    </TreeItem>
+  );
+};
+
+export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
+  form,
+  onSubmit,
+}) => {
+  const aiModelRegistry = useMemo(
+    () =>
+      AiModelRegistry.create({
+        displayedModels: [],
+        customModels: ["openrouter/deepseek-r1-distill-llama-70b"],
+      }),
+    [],
+  );
+  const currentDisplayedModels = useWatch({
+    control: form.control,
+    name: "ai.models.displayed_models",
+    defaultValue: [],
+  }) as QualifiedModelId[];
+  const currentDisplayedModelsSet = new Set(currentDisplayedModels);
+  const modelsByProvider = aiModelRegistry.getGroupedModelsByProvider();
+
+  const toggleModelDisplay = useEvent((modelId: QualifiedModelId) => {
+    const newModels = currentDisplayedModelsSet.has(modelId)
+      ? currentDisplayedModels.filter((id) => id !== modelId)
+      : [...currentDisplayedModels, modelId];
+
+    form.setValue("ai.models.displayed_models", newModels);
+    onSubmit(form.getValues());
+  });
+
+  const toggleProviderModels = useEvent(
+    async (providerId: ProviderId, enable: boolean) => {
+      const providerModels = modelsByProvider.get(providerId) || [];
+      const qualifiedModelIds = new Set(
+        providerModels.map((m) => new AiModelId(providerId, m.model).id),
+      );
+
+      // If enabled, we add all provider models that aren't already enabled
+      // Else, remove all provider models
+      const newModels: QualifiedModelId[] = enable
+        ? [...new Set([...currentDisplayedModels, ...qualifiedModelIds])]
+        : currentDisplayedModels.filter((id) => !qualifiedModelIds.has(id));
+
+      form.setValue("ai.models.displayed_models", newModels);
+      onSubmit(form.getValues());
+    },
+  );
+
+  return (
+    <SettingGroup>
+      <p className="text-sm text-muted-secondary mb-4">
+        Control which AI models are displayed in model selection dropdowns. When
+        no models are selected, all available models will be shown.
+      </p>
+
+      <div className="border rounded-md bg-background">
+        <Tree
+          aria-label="AI Models by Provider"
+          className="flex-1 overflow-auto outline-none focus-visible:outline-none"
+          selectionMode="none"
+        >
+          {[...modelsByProvider.entries()].map(([providerId, models]) => (
+            <ProviderTreeItem
+              key={providerId}
+              providerId={providerId}
+              models={models}
+              enabledModels={currentDisplayedModelsSet}
+              onToggleModel={toggleModelDisplay}
+              onToggleProvider={toggleProviderModels}
+            />
+          ))}
+        </Tree>
+      </div>
+    </SettingGroup>
+  );
+};
+
 export const AiConfig: React.FC<AiConfigProps> = ({
   form,
   config,
   onSubmit,
 }) => {
   return (
-    <Tabs defaultValue="ai-features">
+    <Tabs defaultValue="ai-features" className="flex-1">
       <TabsList className="mb-2">
         <TabsTrigger value="ai-features">AI Features</TabsTrigger>
         <TabsTrigger value="ai-providers">AI Providers</TabsTrigger>
+        <TabsTrigger value="ai-models">AI Models</TabsTrigger>
       </TabsList>
 
       <TabsContent value="ai-features">
@@ -850,6 +1103,9 @@ export const AiConfig: React.FC<AiConfigProps> = ({
       <TabsContent value="ai-providers">
         <AiProvidersConfig form={form} config={config} onSubmit={onSubmit} />
       </TabsContent>
+      <TabsContent value="ai-models">
+        <AiModelDisplayConfig form={form} config={config} onSubmit={onSubmit} />
+      </TabsContent>
     </Tabs>
   );
 };

package/src/components/app-config/app-config-button.tsx

@@ -51,7 +51,7 @@ export const ConfigButton: React.FC<Props> = ({
   );
 
   const userSettingsDialog = (
-    <DialogContent className="w-[80vw] h-[70vh] overflow-hidden sm:max-w-5xl top-[15vh] p-0">
+    <DialogContent className="w-[90vw] h-[90vh] overflow-hidden sm:max-w-5xl top-[5vh] p-0">
       <VisuallyHidden>
         <DialogTitle>User settings</DialogTitle>
       </VisuallyHidden>

package/src/components/app-config/app-config-form.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
+import { useEffect, useId } from "react";
 import { useForm } from "react-hook-form";
 import {
   Form,
@@ -14,6 +14,7 @@ import {
 import { useAppConfig } from "@/core/config/config";
 import { getAppWidths } from "@/core/config/widths";
 import { useRequestClient } from "@/core/network/requests";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
 import { arrayToggle } from "@/utils/arrays";
 import {
   type AppConfig,
@@ -32,9 +33,13 @@ import {
   SQL_OUTPUT_SELECT_OPTIONS,
 } from "./common";
 
+const FORM_DEBOUNCE = 100; // ms;
+
 export const AppConfigForm: React.FC = () => {
   const [config, setConfig] = useAppConfig();
   const { saveAppConfig } = useRequestClient();
+  const htmlCheckboxId = useId();
+  const ipynbCheckboxId = useId();
 
   // Create form
   const form = useForm<AppConfig>({
@@ -52,6 +57,10 @@ export const AppConfigForm: React.FC = () => {
       });
   };
 
+  const debouncedSubmit = useDebouncedCallback((v: AppConfig) => {
+    onSubmit(v);
+  }, FORM_DEBOUNCE);
+
   // When width is changed, dispatch a resize event so widgets know to resize
   useEffect(() => {
     window.dispatchEvent(new Event("resize"));
@@ -60,7 +69,7 @@ export const AppConfigForm: React.FC = () => {
   return (
     <Form {...form}>
       <form
-        onChange={form.handleSubmit(onSubmit)}
+        onChange={form.handleSubmit(debouncedSubmit)}
         className="flex flex-col gap-6"
       >
         <div>
@@ -253,23 +262,25 @@ export const AppConfigForm: React.FC = () => {
                       <div className="flex gap-4">
                         <div className="flex items-center space-x-2">
                           <Checkbox
-                            id="html-checkbox"
+                            id={htmlCheckboxId}
+                            data-testid="html-checkbox"
                             checked={field.value.includes("html")}
                             onCheckedChange={() => {
                               field.onChange(arrayToggle(field.value, "html"));
                             }}
                           />
-                          <FormLabel htmlFor="html-checkbox">HTML</FormLabel>
+                          <FormLabel htmlFor={htmlCheckboxId}>HTML</FormLabel>
                         </div>
                         <div className="flex items-center space-x-2">
                           <Checkbox
-                            id="ipynb-checkbox"
+                            id={ipynbCheckboxId}
+                            data-testid="ipynb-checkbox"
                             checked={field.value.includes("ipynb")}
                             onCheckedChange={() => {
                               field.onChange(arrayToggle(field.value, "ipynb"));
                             }}
                           />
-                          <FormLabel htmlFor="ipynb-checkbox">IPYNB</FormLabel>
+                          <FormLabel htmlFor={ipynbCheckboxId}>IPYNB</FormLabel>
                         </div>
                       </div>
                     </FormControl>

package/src/components/app-config/user-config-form.tsx

@@ -41,6 +41,7 @@ import { getAppWidths } from "@/core/config/widths";
 import { marimoVersionAtom } from "@/core/meta/state";
 import { useRequestClient } from "@/core/network/requests";
 import { isWasm } from "@/core/wasm/utils";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import { THEMES } from "@/theme/useTheme";
 import { arrayToggle } from "@/utils/arrays";
@@ -106,6 +107,8 @@ export const activeUserConfigCategoryAtom = atom<SettingCategoryId>(
   categories[0].id,
 );
 
+const FORM_DEBOUNCE = 100; // ms;
+
 export const UserConfigForm: React.FC = () => {
   const [config, setConfig] = useUserConfig();
   const formElement = useRef<HTMLFormElement>(null);
@@ -123,11 +126,12 @@ export const UserConfigForm: React.FC = () => {
     defaultValues: config,
   });
 
-  const onSubmit = async (values: UserConfig) => {
+  const onSubmitNotDebounced = async (values: UserConfig) => {
     await saveUserConfig({ config: values }).then(() => {
       setConfig(values);
     });
   };
+  const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 
   const isWasmRuntime = isWasm();
   const htmlCheckboxId = useId();