diff --git a/src/components/ImageGenDrawer.tsx b/src/components/ImageGenDrawer.tsx
index c138c0b..0677071 100644
--- a/src/components/ImageGenDrawer.tsx
+++ b/src/components/ImageGenDrawer.tsx
@@ -8,26 +8,28 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
+  DrawerTrigger,
 } from "@/components/ui/drawer";
 
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { AppContext } from "@/pages/App";
+import { PaintBucketIcon } from "lucide-react";
 
 interface Props {
-  showGenImage: boolean;
-  setShowGenImage: (se: boolean) => void;
+  disableFactor: boolean[];
 }
 interface ImageResponse {
   url?: string;
   b64_json?: string;
   revised_prompt: string;
 }
-export function ImageGenDrawer({ showGenImage, setShowGenImage }: Props) {
+export function ImageGenDrawer({ disableFactor }: Props) {
   const ctx = useContext(AppContext);
   if (ctx === null) return <></>;
 
+  const [showGenImage, setShowGenImage] = useState(false);
   const [imageGenPrompt, setImageGenPrompt] = useState("");
   const [imageGenModel, setImageGenModel] = useState("dall-e-3");
   const [imageGenN, setImageGenN] = useState(1);
@@ -39,175 +41,199 @@ export function ImageGenDrawer({ showGenImage, setShowGenImage }: Props) {
   const [imageGenGenerating, setImageGenGenerating] = useState(false);
   useState("b64_json");
   return (
-    <Drawer open={showGenImage} onOpenChange={setShowGenImage}>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-lg">
-          <DrawerHeader>
-            <DrawerTitle>Generate Image</DrawerTitle>
-          </DrawerHeader>
-          <div className="flex flex-col">
-            <span className="flex flex-col justify-between m-1 p-1">
-              <Label>Prompt: </Label>
-              <Textarea
-                className="textarea textarea-sm textarea-bordered"
-                value={imageGenPrompt}
-                onChange={(e: any) => {
-                  setImageGenPrompt(e.target.value);
-                }}
-              />
-            </span>
-            <span className="flex flex-row justify-between items-center m-1 p-1">
-              <label>Model: </label>
-              <select
-                className="select select-sm select-bordered"
-                value={imageGenModel}
-                onChange={(e: any) => {
-                  setImageGenModel(e.target.value);
-                }}
-              >
-                <option value="dall-e-3">DALL-E 3</option>
-                <option value="dall-e-2">DALL-E 2</option>
-              </select>
-            </span>
-            <span className="flex flex-row justify-between items-center m-1 p-1">
-              <label>n: </label>
-              <input
-                className="input input-sm input-bordered"
-                value={imageGenN}
-                type="number"
-                min={1}
-                max={10}
-                onChange={(e: any) => setImageGenN(parseInt(e.target.value))}
-              />
-            </span>
-            <span className="flex flex-row justify-between items-center m-1 p-1">
-              <label>Quality: </label>
-              <select
-                className="select select-sm select-bordered"
-                value={imageGenQuality}
-                onChange={(e: any) => setImageGEnQuality(e.target.value)}
-              >
-                <option value="hd">HD</option>
-                <option value="standard">Standard</option>
-              </select>
-            </span>
-            <span className="flex flex-row justify-between items-center m-1 p-1">
-              <label>Response Format: </label>
-              <select
-                className="select select-sm select-bordered"
-                value={imageGenResponseFormat}
-                onChange={(e: any) => setImageGenResponseFormat(e.target.value)}
-              >
-                <option value="b64_json">b64_json</option>
-                <option value="url">url</option>
-              </select>
-            </span>
-            <span className="flex flex-row justify-between items-center m-1 p-1">
-              <label>Size: </label>
-              <select
-                className="select select-sm select-bordered"
-                value={imageGenSize}
-                onChange={(e: any) => setImageGenSize(e.target.value)}
-              >
-                <option value="256x256">256x256 (dall-e-2)</option>
-                <option value="512x512">512x512 (dall-e-2)</option>
-                <option value="1024x1024">1024x1024 (dall-e-2/3)</option>
-                <option value="1792x1024">1792x1024 (dall-e-3)</option>
-                <option value="1024x1792">1024x1792 (dall-e-3)</option>
-              </select>
-            </span>
-            <span className="flex flex-row justify-between items-center m-1 p-1">
-              <label>Style (only dall-e-3): </label>
-              <select
-                className="select select-sm select-bordered"
-                value={imageGenStyle}
-                onChange={(e: any) => setImageGenStyle(e.target.value)}
-              >
-                <option value="vivid">vivid</option>
-                <option value="natural">natural</option>
-              </select>
-            </span>
-            <span className="flex flex-row justify-between items-center m-1 p-1">
-              <Button
-                variant="default"
-                size="sm"
-                disabled={imageGenGenerating}
-                onClick={async () => {
-                  try {
-                    setImageGenGenerating(true);
-                    const body: any = {
-                      prompt: imageGenPrompt,
-                      model: imageGenModel,
-                      n: imageGenN,
-                      quality: imageGenQuality,
-                      response_format: imageGenResponseFormat,
-                      size: imageGenSize,
-                    };
-                    if (imageGenModel === "dall-e-3") {
-                      body.style = imageGenStyle;
+    <>
+      {ctx.chatStore.image_gen_api && ctx.chatStore.image_gen_key ? (
+        <Drawer open={showGenImage} onOpenChange={setShowGenImage}>
+          <DrawerTrigger>
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              disabled={disableFactor.some((factor) => factor)}
+            >
+              <PaintBucketIcon className="size-4" />
+              <span className="sr-only">Generate Image</span>
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <div className="mx-auto w-full max-w-lg">
+              <DrawerHeader>
+                <DrawerTitle>Generate Image</DrawerTitle>
+              </DrawerHeader>
+              <div className="flex flex-col">
+                <span className="flex flex-col justify-between m-1 p-1">
+                  <Label>Prompt: </Label>
+                  <Textarea
+                    className="textarea textarea-sm textarea-bordered"
+                    value={imageGenPrompt}
+                    onChange={(e: any) => {
+                      setImageGenPrompt(e.target.value);
+                    }}
+                  />
+                </span>
+                <span className="flex flex-row justify-between items-center m-1 p-1">
+                  <label>Model: </label>
+                  <select
+                    className="select select-sm select-bordered"
+                    value={imageGenModel}
+                    onChange={(e: any) => {
+                      setImageGenModel(e.target.value);
+                    }}
+                  >
+                    <option value="dall-e-3">DALL-E 3</option>
+                    <option value="dall-e-2">DALL-E 2</option>
+                  </select>
+                </span>
+                <span className="flex flex-row justify-between items-center m-1 p-1">
+                  <label>n: </label>
+                  <input
+                    className="input input-sm input-bordered"
+                    value={imageGenN}
+                    type="number"
+                    min={1}
+                    max={10}
+                    onChange={(e: any) =>
+                      setImageGenN(parseInt(e.target.value))
                     }
-                    const resp: ImageResponse[] = (
-                      await fetch(ctx.chatStore.image_gen_api, {
-                        method: "POST",
-                        headers: {
-                          "Content-Type": "application/json",
-                          Authorization: `Bearer ${ctx.chatStore.image_gen_key}`,
-                        },
-                        body: JSON.stringify(body),
-                      }).then((resp) => resp.json())
-                    ).data;
-                    console.log("image gen resp", resp);
-
-                    for (const image of resp) {
-                      let url = "";
-                      if (image.url) url = image.url;
-                      if (image.b64_json)
-                        url = "data:image/png;base64," + image.b64_json;
-                      if (!url) continue;
-
-                      ctx.chatStore.history.push({
-                        role: "assistant",
-                        content: [
-                          {
-                            type: "image_url",
-                            image_url: {
-                              url,
-                              detail: "low",
+                  />
+                </span>
+                <span className="flex flex-row justify-between items-center m-1 p-1">
+                  <label>Quality: </label>
+                  <select
+                    className="select select-sm select-bordered"
+                    value={imageGenQuality}
+                    onChange={(e: any) => setImageGEnQuality(e.target.value)}
+                  >
+                    <option value="hd">HD</option>
+                    <option value="standard">Standard</option>
+                  </select>
+                </span>
+                <span className="flex flex-row justify-between items-center m-1 p-1">
+                  <label>Response Format: </label>
+                  <select
+                    className="select select-sm select-bordered"
+                    value={imageGenResponseFormat}
+                    onChange={(e: any) =>
+                      setImageGenResponseFormat(e.target.value)
+                    }
+                  >
+                    <option value="b64_json">b64_json</option>
+                    <option value="url">url</option>
+                  </select>
+                </span>
+                <span className="flex flex-row justify-between items-center m-1 p-1">
+                  <label>Size: </label>
+                  <select
+                    className="select select-sm select-bordered"
+                    value={imageGenSize}
+                    onChange={(e: any) => setImageGenSize(e.target.value)}
+                  >
+                    <option value="256x256">256x256 (dall-e-2)</option>
+                    <option value="512x512">512x512 (dall-e-2)</option>
+                    <option value="1024x1024">1024x1024 (dall-e-2/3)</option>
+                    <option value="1792x1024">1792x1024 (dall-e-3)</option>
+                    <option value="1024x1792">1024x1792 (dall-e-3)</option>
+                  </select>
+                </span>
+                <span className="flex flex-row justify-between items-center m-1 p-1">
+                  <label>Style (only dall-e-3): </label>
+                  <select
+                    className="select select-sm select-bordered"
+                    value={imageGenStyle}
+                    onChange={(e: any) => setImageGenStyle(e.target.value)}
+                  >
+                    <option value="vivid">vivid</option>
+                    <option value="natural">natural</option>
+                  </select>
+                </span>
+                <span className="flex flex-row justify-between items-center m-1 p-1">
+                  <Button
+                    variant="default"
+                    size="sm"
+                    disabled={imageGenGenerating}
+                    onClick={async () => {
+                      try {
+                        setImageGenGenerating(true);
+                        const body: any = {
+                          prompt: imageGenPrompt,
+                          model: imageGenModel,
+                          n: imageGenN,
+                          quality: imageGenQuality,
+                          response_format: imageGenResponseFormat,
+                          size: imageGenSize,
+                        };
+                        if (imageGenModel === "dall-e-3") {
+                          body.style = imageGenStyle;
+                        }
+                        const resp: ImageResponse[] = (
+                          await fetch(ctx.chatStore.image_gen_api, {
+                            method: "POST",
+                            headers: {
+                              "Content-Type": "application/json",
+                              Authorization: `Bearer ${ctx.chatStore.image_gen_key}`,
                             },
-                          },
-                          {
-                            type: "text",
-                            text: image.revised_prompt,
-                          },
-                        ],
-                        hide: false,
-                        token: 65,
-                        example: false,
-                        audio: null,
-                        logprobs: null,
-                        response_model_name: imageGenModel,
-                      });
+                            body: JSON.stringify(body),
+                          }).then((resp) => resp.json())
+                        ).data;
+                        console.log("image gen resp", resp);
 
-                      ctx.setChatStore({ ...ctx.chatStore });
-                    }
-                  } catch (e) {
-                    console.error(e);
-                    alert("Failed to generate image: " + e);
-                  } finally {
-                    setImageGenGenerating(false);
-                  }
-                }}
-              >
-                {Tr("Generate")}
-              </Button>
-            </span>
-          </div>
+                        for (const image of resp) {
+                          let url = "";
+                          if (image.url) url = image.url;
+                          if (image.b64_json)
+                            url = "data:image/png;base64," + image.b64_json;
+                          if (!url) continue;
 
-          <DrawerFooter>
-            <Button onClick={() => setShowGenImage(false)}>Done</Button>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
+                          ctx.chatStore.history.push({
+                            role: "assistant",
+                            content: [
+                              {
+                                type: "image_url",
+                                image_url: {
+                                  url,
+                                  detail: "low",
+                                },
+                              },
+                              {
+                                type: "text",
+                                text: image.revised_prompt,
+                              },
+                            ],
+                            hide: false,
+                            token: 65,
+                            example: false,
+                            audio: null,
+                            logprobs: null,
+                            response_model_name: imageGenModel,
+                          });
+
+                          ctx.setChatStore({ ...ctx.chatStore });
+                        }
+                      } catch (e) {
+                        console.error(e);
+                        alert("Failed to generate image: " + e);
+                      } finally {
+                        setImageGenGenerating(false);
+                      }
+                    }}
+                  >
+                    {Tr("Generate")}
+                  </Button>
+                </span>
+              </div>
+
+              <DrawerFooter>
+                <Button onClick={() => setShowGenImage(false)}>Done</Button>
+              </DrawerFooter>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      ) : (
+        <Button variant="ghost" size="icon" type="button" disabled={true}>
+          <PaintBucketIcon className="size-4" />
+          <span className="sr-only">Generate Image</span>
+        </Button>
+      )}
+    </>
   );
 }
diff --git a/src/components/ImageUploadDrawer.tsx b/src/components/ImageUploadDrawer.tsx
index 4c2c529..494e29d 100644
--- a/src/components/ImageUploadDrawer.tsx
+++ b/src/components/ImageUploadDrawer.tsx
@@ -8,33 +8,38 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
+  DrawerTrigger,
 } from "@/components/ui/drawer";
 
 import { Button } from "@/components/ui/button";
-import { PenIcon, XIcon } from "lucide-react";
+import { PenIcon, XIcon, ImageIcon } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Separator } from "@/components/ui/separator";
 import { AppContext } from "@/pages/App";
 
 interface Props {
   images: MessageDetail[];
-  showAddImage: boolean;
-  setShowAddImage: (se: boolean) => void;
   setImages: (images: MessageDetail[]) => void;
+  disableFactor: boolean[];
 }
-export function ImageUploadDrawer({
-  showAddImage,
-  setShowAddImage,
-  setImages,
-  images,
-}: Props) {
+export function ImageUploadDrawer({ setImages, images, disableFactor }: Props) {
   const ctx = useContext(AppContext);
   if (ctx === null) return <></>;
-
+  const [showAddImage, setShowAddImage] = useState(false);
   const [enableHighResolution, setEnableHighResolution] = useState(true);
   useState("b64_json");
   return (
     <Drawer open={showAddImage} onOpenChange={setShowAddImage}>
+      <DrawerTrigger>
+        <Button
+          variant="ghost"
+          size="icon"
+          type="button"
+          disabled={disableFactor.some((factor) => factor)}
+        >
+          <ImageIcon className="size-4" />
+          <span className="sr-only">Add Image</span>
+        </Button>
+      </DrawerTrigger>
       <DrawerContent>
         <div className="mx-auto w-full max-w-lg">
           <DrawerHeader>
diff --git a/src/components/WhisperButton.tsx b/src/components/WhisperButton.tsx
index 4791be2..b0165ab 100644
--- a/src/components/WhisperButton.tsx
+++ b/src/components/WhisperButton.tsx
@@ -1,7 +1,6 @@
 import { createRef, useContext } from "react";
 
-import { ChatStore } from "@/types/chatstore";
-import { useEffect, useState, Dispatch } from "react";
+import { useState, Dispatch } from "react";
 import { Button } from "@/components/ui/button";
 import { AudioWaveformIcon, CircleStopIcon, MicIcon } from "lucide-react";
 import { AppContext } from "@/pages/App";
@@ -18,128 +17,137 @@ const WhisperButton = (props: {
   const mediaRef = createRef();
   const [isRecording, setIsRecording] = useState("Mic");
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className={`m-1 p-1 ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
-      disabled={isRecording === "Transcribing"}
-      ref={mediaRef as any}
-      onClick={async (event) => {
-        event.preventDefault(); // Prevent the default behavior
+    <>
+      {chatStore.whisper_api && chatStore.whisper_key ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          className={`${isRecording !== "Mic" ? "animate-pulse" : ""}`}
+          disabled={isRecording === "Transcribing"}
+          ref={mediaRef as any}
+          onClick={async (event) => {
+            event.preventDefault(); // Prevent the default behavior
 
-        if (isRecording === "Recording") {
-          // @ts-ignore
-          window.mediaRecorder.stop();
-          setIsRecording("Transcribing");
-          return;
-        }
+            if (isRecording === "Recording") {
+              // @ts-ignore
+              window.mediaRecorder.stop();
+              setIsRecording("Transcribing");
+              return;
+            }
 
-        // build prompt
-        const prompt = [chatStore.systemMessageContent]
-          .concat(
-            chatStore.history
-              .filter(({ hide }) => !hide)
-              .slice(chatStore.postBeginIndex)
-              .map(({ content }) => {
-                if (typeof content === "string") {
-                  return content;
-                } else {
-                  return content.map((c) => c?.text).join(" ");
-                }
-              })
-          )
-          .concat([inputMsg])
-          .join(" ");
-        console.log({ prompt });
+            // build prompt
+            const prompt = [chatStore.systemMessageContent]
+              .concat(
+                chatStore.history
+                  .filter(({ hide }) => !hide)
+                  .slice(chatStore.postBeginIndex)
+                  .map(({ content }) => {
+                    if (typeof content === "string") {
+                      return content;
+                    } else {
+                      return content.map((c) => c?.text).join(" ");
+                    }
+                  })
+              )
+              .concat([inputMsg])
+              .join(" ");
+            console.log({ prompt });
 
-        setIsRecording("Recording");
-        console.log("start recording");
+            setIsRecording("Recording");
+            console.log("start recording");
 
-        try {
-          const mediaRecorder = new MediaRecorder(
-            await navigator.mediaDevices.getUserMedia({
-              audio: true,
-            }),
-            { audioBitsPerSecond: 64 * 1000 }
-          );
+            try {
+              const mediaRecorder = new MediaRecorder(
+                await navigator.mediaDevices.getUserMedia({
+                  audio: true,
+                }),
+                { audioBitsPerSecond: 64 * 1000 }
+              );
 
-          // mount mediaRecorder to ref
-          // @ts-ignore
-          window.mediaRecorder = mediaRecorder;
+              // mount mediaRecorder to ref
+              // @ts-ignore
+              window.mediaRecorder = mediaRecorder;
 
-          mediaRecorder.start();
-          const audioChunks: Blob[] = [];
-          mediaRecorder.addEventListener("dataavailable", (event) => {
-            audioChunks.push(event.data);
-          });
-          mediaRecorder.addEventListener("stop", async () => {
-            // Stop the MediaRecorder
-            mediaRecorder.stop();
-            // Stop the media stream
-            mediaRecorder.stream.getTracks()[0].stop();
+              mediaRecorder.start();
+              const audioChunks: Blob[] = [];
+              mediaRecorder.addEventListener("dataavailable", (event) => {
+                audioChunks.push(event.data);
+              });
+              mediaRecorder.addEventListener("stop", async () => {
+                // Stop the MediaRecorder
+                mediaRecorder.stop();
+                // Stop the media stream
+                mediaRecorder.stream.getTracks()[0].stop();
 
-            setIsRecording("Transcribing");
-            const audioBlob = new Blob(audioChunks);
-            const audioUrl = URL.createObjectURL(audioBlob);
-            console.log({ audioUrl });
-            const audio = new Audio(audioUrl);
-            // audio.play();
-            const reader = new FileReader();
-            reader.readAsDataURL(audioBlob);
+                setIsRecording("Transcribing");
+                const audioBlob = new Blob(audioChunks);
+                const audioUrl = URL.createObjectURL(audioBlob);
+                console.log({ audioUrl });
+                const audio = new Audio(audioUrl);
+                // audio.play();
+                const reader = new FileReader();
+                reader.readAsDataURL(audioBlob);
 
-            // file-like object with mimetype
-            const blob = new Blob([audioBlob], {
-              type: "application/octet-stream",
-            });
-
-            reader.onloadend = async () => {
-              try {
-                const base64data = reader.result;
-
-                // post to openai whisper api
-                const formData = new FormData();
-                // append file
-                formData.append("file", blob, "audio.ogg");
-                formData.append("model", "whisper-1");
-                formData.append("response_format", "text");
-                formData.append("prompt", prompt);
-
-                const response = await fetch(chatStore.whisper_api, {
-                  method: "POST",
-                  headers: {
-                    Authorization: `Bearer ${
-                      chatStore.whisper_key || chatStore.apiKey
-                    }`,
-                  },
-                  body: formData,
+                // file-like object with mimetype
+                const blob = new Blob([audioBlob], {
+                  type: "application/octet-stream",
                 });
 
-                const text = await response.text();
+                reader.onloadend = async () => {
+                  try {
+                    const base64data = reader.result;
 
-                setInputMsg(inputMsg ? inputMsg + " " + text : text);
-              } catch (error) {
-                alert(error);
-                console.log(error);
-              } finally {
-                setIsRecording("Mic");
-              }
-            };
-          });
-        } catch (error) {
-          alert(error);
-          console.log(error);
-          setIsRecording("Mic");
-        }
-      }}
-    >
-      {isRecording === "Mic" ? (
-        <MicIcon />
-      ) : isRecording === "Recording" ? (
-        <CircleStopIcon />
+                    // post to openai whisper api
+                    const formData = new FormData();
+                    // append file
+                    formData.append("file", blob, "audio.ogg");
+                    formData.append("model", "whisper-1");
+                    formData.append("response_format", "text");
+                    formData.append("prompt", prompt);
+
+                    const response = await fetch(chatStore.whisper_api, {
+                      method: "POST",
+                      headers: {
+                        Authorization: `Bearer ${
+                          chatStore.whisper_key || chatStore.apiKey
+                        }`,
+                      },
+                      body: formData,
+                    });
+
+                    const text = await response.text();
+
+                    setInputMsg(inputMsg ? inputMsg + " " + text : text);
+                  } catch (error) {
+                    alert(error);
+                    console.log(error);
+                  } finally {
+                    setIsRecording("Mic");
+                  }
+                };
+              });
+            } catch (error) {
+              alert(error);
+              console.log(error);
+              setIsRecording("Mic");
+            }
+          }}
+        >
+          {isRecording === "Mic" ? (
+            <MicIcon />
+          ) : isRecording === "Recording" ? (
+            <CircleStopIcon />
+          ) : (
+            <AudioWaveformIcon />
+          )}
+        </Button>
       ) : (
-        <AudioWaveformIcon />
+        <Button variant="ghost" size="icon" disabled={true}>
+          <MicIcon />
+        </Button>
       )}
-    </Button>
+      <span className="sr-only">Use Microphone</span>
+    </>
   );
 };
 
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index 36e831d..46ed68e 100644
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -584,33 +584,14 @@ export default function ChatBOX() {
             className="min-h-12 resize-none rounded-lg bg-background border-0 p-3 shadow-none focus-visible:ring-0"
           />
           <div className="flex items-center p-3 pt-0">
-            <Button
-              variant="ghost"
-              size="icon"
-              type="button"
-              onClick={() => setShowAddImage(true)}
-              disabled={showGenerating}
-            >
-              <ImageIcon className="size-4" />
-              <span className="sr-only">Add Image</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              type="button"
-              onClick={() => setShowGenImage(true)}
-              disabled={showGenerating}
-            >
-              <PaintBucketIcon className="size-4" />
-              <span className="sr-only">Generate Image</span>
-            </Button>
+            <ImageUploadDrawer
+              images={images}
+              setImages={setImages}
+              disableFactor={[showGenerating]}
+            />
+            <ImageGenDrawer disableFactor={[showGenerating]} />
 
-            {chatStore.whisper_api && chatStore.whisper_key && (
-              <>
-                <WhisperButton inputMsg={inputMsg} setInputMsg={setInputMsg} />
-                <span className="sr-only">Use Microphone</span>
-              </>
-            )}
+            <WhisperButton inputMsg={inputMsg} setInputMsg={setInputMsg} />
 
             <Button
               size="sm"
@@ -628,17 +609,6 @@ export default function ChatBOX() {
             </Button>
           </div>
         </form>
-
-        <ImageUploadDrawer
-          setShowAddImage={setShowAddImage}
-          images={images}
-          showAddImage={showAddImage}
-          setImages={setImages}
-        />
-        <ImageGenDrawer
-          showGenImage={showGenImage}
-          setShowGenImage={setShowGenImage}
-        />
       </div>
     </>
   );