Download Button [1/n]: Setup UI on the editor client

If the download callback is defined (not for local editor or VSCode, but will be for Gradio), then we display it and use the loading state to disable you from clicking on the button

## Test Plan
Rebase onto #1045

Go to `aiconfig/python/src/aiconfig/editor/client` and run this command:
```
rm -rf node_modules && yarn && yarn build
```

Then go to `aiconfig` dir and run this command:
```
aiconfig_path=./cookbooks/Gradio/huggingface.aiconfig.json
parsers_path=./cookbooks/Gradio/hf_model_parsers.py
aiconfig edit --aiconfig-path=$aiconfig_path --server-port=8080 --server-mode=debug_servers --parsers-module-path=$parsers_path
```

https://github.com/lastmile-ai/aiconfig/assets/151060367/123319cf-2e92-49e8-8f93-2d930a3b0ac7

Author: Rossdan Craig rossdan@lastmileai.dev

python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx

@@ -56,6 +56,7 @@ import {
 import { IconDeviceFloppy } from "@tabler/icons-react";
 import CopyButton from "./CopyButton";
 import AIConfigEditorThemeProvider from "../themes/AIConfigEditorThemeProvider";
+import DownloadButton from "./global/DownloadButton";
 import ShareButton from "./global/ShareButton";
 import PromptsContainer from "./prompt/PromptsContainer";
 
@@ -103,6 +104,7 @@ export type AIConfigCallbacks = {
   ) => Promise<{ aiconfig: AIConfig }>;
   clearOutputs: () => Promise<{ aiconfig: AIConfig }>;
   deletePrompt: (promptName: string) => Promise<void>;
+  download?: () => Promise<void>;
   getModels: (search: string) => Promise<string[]>;
   getServerStatus?: () => Promise<{ status: "OK" | "ERROR" }>;
   logEventHandler?: (event: LogEvent, data?: LogEventData) => void;
@@ -150,6 +152,23 @@ export default function AIConfigEditor({
 
   const logEventHandler = callbacks?.logEventHandler;
 
+  const downloadCallback = callbacks?.download;
+  const onDownload = useCallback(async () => {
+    if (!downloadCallback) {
+      return;
+    }
+    try {
+      await downloadCallback();
+    } catch (err: unknown) {
+      const message = (err as RequestCallbackError).message ?? null;
+      showNotification({
+        title: "Error downloading AIConfig",
+        message,
+        color: "red",
+      });
+    }
+  }, [downloadCallback]);
+
   const shareCallback = callbacks?.share;
   const onShare = useCallback(async () => {
     if (!shareCallback) {
@@ -962,6 +981,9 @@ export default function AIConfigEditor({
             <Flex justify="flex-end" mt="md" mb="xs">
               {!readOnly && (
                 <Group>
+                  {downloadCallback && (
+                    <DownloadButton onDownload={onDownload} />
+                  )}
                   {shareCallback && <ShareButton onShare={onShare} />}
                   {onClearOutputs && (
                     <Button

python/src/aiconfig/editor/client/src/components/global/DownloadButton.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@mantine/core";
+import { memo, useState } from "react";
+
+type Props = {
+  onDownload: () => Promise<string | void>;
+};
+
+export default memo(function ShareButton({ onDownload }: Props) {
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
+
+  const onClick = async () => {
+    if (isDownloading) {
+      return;
+    }
+    setIsDownloading(true);
+    await onDownload();
+    setIsDownloading(false);
+  };
+
+  return (
+    <Button
+      loaderPosition="center"
+      loading={isDownloading}
+      onClick={onClick}
+      size="xs"
+      variant="filled"
+    >
+      Download
+    </Button>
+  );
+});

python/src/aiconfig/editor/client/src/components/global/ShareButton.tsx

@@ -38,7 +38,6 @@ export default memo(function ShareButton({ onShare }: Props) {
         loaderPosition="center"
         loading={isLoading}
         onClick={onClick}
-        p="xs"
         size="xs"
         variant="filled"
       >

python/src/aiconfig/editor/server/static/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/static/js/main.175446b3.js",
+    "main.js": "/static/js/main.6eacb377.js",
     "index.html": "/index.html",
-    "main.175446b3.js.map": "/static/js/main.175446b3.js.map"
+    "main.6eacb377.js.map": "/static/js/main.6eacb377.js.map"
   },
   "entrypoints": [
-    "static/js/main.175446b3.js"
+    "static/js/main.6eacb377.js"
   ]
 }

python/src/aiconfig/editor/server/static/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>AIConfig Editor</title><script defer="defer" src="/static/js/main.175446b3.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>AIConfig Editor</title><script defer="defer" src="/static/js/main.6eacb377.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>