Show button as disabled when form submission is in progress

src-svelte/src/lib/controls/Button.stories.ts

@@ -16,3 +16,9 @@ export const Regular: StoryObj = Template.bind({}) as any;
 Regular.args = {
   text: "Simulate",
 };
+
+export const Disabled: StoryObj = Template.bind({}) as any;
+Disabled.args = {
+  text: "Simulate",
+  disabled: true,
+};

src-svelte/src/lib/controls/Button.svelte

@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte";
 
   export let unwrapped = false;
+  export let disabled = false;
   export let leftEnd = false;
   export let rightEnd = false;
   export let ariaLabel: string | undefined = undefined;
@@ -17,6 +18,7 @@
     class="cut-corners inner"
     class:left-end={leftEnd}
     class:right-end={rightEnd}
+    class:disabled
     type="submit"
     aria-label={ariaLabel}
     on:click={handleClick}
@@ -28,6 +30,7 @@
     class="cut-corners outer"
     class:left-end={leftEnd}
     class:right-end={rightEnd}
+    class:disabled
     type="submit"
     aria-label={ariaLabel}
     on:click={handleClick}
@@ -75,6 +78,23 @@
     transform: translateY(0.08rem) scale(0.98);
   }
 
+  .inner.disabled,
+  .disabled .inner {
+    filter: grayscale(1);
+    color: var(--color-faded);
+    pointer-events: none;
+  }
+
+  .inner.disabled:hover,
+  .disabled .inner:hover {
+    filter: grayscale(1);
+  }
+
+  .inner.disabled:active,
+  .disabled .inner:active {
+    transform: none;
+  }
+
   .outer {
     --background-color: #eee;
     display: inline-block;

src-svelte/src/lib/controls/ButtonView.svelte

@@ -4,4 +4,4 @@
   export let text: string;
 </script>
 
-<Button>{text}</Button>
+<Button {...$$restProps}>{text}</Button>

src-svelte/src/routes/api-calls/new/ApiCallEditor.stories.ts

@@ -31,3 +31,21 @@ EditContinuedConversation.parameters = {
     },
   },
 };
+
+export const Busy: StoryObj = Template.bind({}) as any;
+Busy.args = {
+  expectingResponse: true,
+};
+Busy.parameters = {
+  stores: {
+    apiCallEditing: {
+      canonicalRef: {
+        id: "c13c1e67-2de3-48de-a34c-a32079c03316",
+        snippet:
+          "Sure, here's a joke for you: Why don't scientists trust atoms? " +
+          "Because they make up everything!",
+      },
+      prompt: CONTINUE_CONVERSATION_CALL.request.prompt,
+    },
+  },
+};

src-svelte/src/routes/api-calls/new/ApiCallEditor.svelte

@@ -30,7 +30,7 @@
   import { snackbarError } from "$lib/snackbar/Snackbar.svelte";
   import { goto } from "$app/navigation";
 
-  let expectingResponse = false;
+  export let expectingResponse = false;
 
   async function submitApiCall() {
     if (expectingResponse) {
@@ -69,7 +69,8 @@
   <PromptComponent editable bind:prompt={$prompt} />
 
   <div class="action">
-    <Button on:click={submitApiCall}>Submit</Button>
+    <Button disabled={expectingResponse} on:click={submitApiCall}>Submit</Button
+    >
   </div>
 </InfoBox>
 

src-svelte/src/routes/chat/Form.svelte

@@ -53,7 +53,9 @@
     bind:this={textareaInput}
     bind:value={currentMessage}
   />
-  <Button ariaLabel="Send" unwrapped rightEnd><IconSend /></Button>
+  <Button ariaLabel="Send" disabled={chatBusy} unwrapped rightEnd
+    ><IconSend /></Button
+  >
 </form>
 
 <style>

src-svelte/src/routes/storybook.test.ts

@@ -56,7 +56,7 @@ const components: ComponentTestConfig[] = [
   },
   {
     path: ["reusable", "button"],
-    variants: ["regular"],
+    variants: ["regular", "disabled"],
   },
   {
     path: ["reusable", "infobox"],
@@ -178,7 +178,7 @@ const components: ComponentTestConfig[] = [
   },
   {
     path: ["screens", "llm-call", "new"],
-    variants: ["blank", "edit-continued-conversation"],
+    variants: ["blank", "edit-continued-conversation", "busy"],
     screenshotEntireBody: true,
   },
   {