Add loading info when image is being generated (#539)

* show loading when generating image

* add info type

* fix typo

* make id optional

src/hooks/use-alert.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { useToast } from "@chakra-ui/react";
 
-type AlertArguments = {
+export type AlertArguments = {
   // Use `id` if you want to avoid duplicate alerts showing
   id?: string;
   title: string;

src/lib/commands/ImageCommand.ts

@@ -2,29 +2,39 @@ import { ChatCraftCommand } from "../ChatCraftCommand";
 import { ChatCraftChat } from "../ChatCraftChat";
 import { ChatCraftHumanMessage } from "../ChatCraftMessage";
 import { generateImage, isGenerateImageSupported } from "../../lib/ai";
+import { utilizeAlert } from "../../lib/utils";
 
 export class ImageCommand extends ChatCraftCommand {
   constructor() {
     super("image");
   }
 
   async execute(chat: ChatCraftChat, user: User | undefined, args?: string[]) {
+    const { loading, closeLoading } = await utilizeAlert();
+
     if (!(await isGenerateImageSupported())) {
       throw new Error("Failed to generate image, no image generation models available");
     }
     if (!(args && args[0])) {
       throw new Error("must include a prompt");
     }
+
     const prompt = args.join(" ");
     let imageUrls: string[] = [];
     const text = `(DALL·E 3 result of the prompt: ${prompt})`;
 
+    const alertId = loading({
+      title: `Generating image, please wait.`,
+    });
+
     try {
       imageUrls = await generateImage(prompt);
     } catch (error: any) {
       console.error(`Failed to generate image: ${error.message}`);
       throw new Error(`Failed to generate image: ${error.message}`);
     }
+
+    closeLoading(alertId);
     return chat.addMessage(new ChatCraftHumanMessage({ user, text, imageUrls }));
   }
 }

src/lib/utils.ts

@@ -147,3 +147,51 @@ export const updateImageUrls = (
     }
   });
 };
+
+/**
+ * Only meant to be used outside components or hooks
+ * where useAlert cannot be used.
+ */
+import type { AlertArguments } from "../hooks/use-alert";
+export const utilizeAlert = async () => {
+  const { createStandaloneToast } = await import("@chakra-ui/react");
+  const { toast } = createStandaloneToast();
+
+  const info = ({ id, title, message }: AlertArguments) => {
+    toast({
+      id,
+      title,
+      description: message,
+      colorScheme: "blue",
+      status: "info",
+      position: "top",
+      isClosable: true,
+      duration: 3000,
+    });
+  };
+
+  const loading = ({ id, title, message }: AlertArguments) => {
+    const fallbackId = new Date().toISOString();
+    toast({
+      id: id ?? fallbackId,
+      title,
+      description: message,
+      colorScheme: "blue",
+      status: "loading",
+      position: "top",
+      isClosable: true,
+      duration: null,
+    });
+    return id ?? fallbackId;
+  };
+
+  const closeLoading = (id: string) => {
+    toast.close(id);
+  };
+
+  return {
+    info,
+    loading,
+    closeLoading,
+  };
+};