refactor: simplify ImageUploadDrawer usage and integrate it into Chatbox for improved image handling

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;
+  disableFactor: boolean[];
-  setShowGenImage: (se: boolean) => void;
 }
 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,7 +41,20 @@ export function ImageGenDrawer({ showGenImage, setShowGenImage }: Props) {
   const [imageGenGenerating, setImageGenGenerating] = useState(false);
   useState("b64_json");
   return (
+    <>
+      {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>
@@ -77,7 +92,9 @@ export function ImageGenDrawer({ showGenImage, setShowGenImage }: Props) {
                     type="number"
                     min={1}
                     max={10}
-                onChange={(e: any) => setImageGenN(parseInt(e.target.value))}
+                    onChange={(e: any) =>
+                      setImageGenN(parseInt(e.target.value))
+                    }
                   />
                 </span>
                 <span className="flex flex-row justify-between items-center m-1 p-1">
@@ -96,7 +113,9 @@ export function ImageGenDrawer({ showGenImage, setShowGenImage }: Props) {
                   <select
                     className="select select-sm select-bordered"
                     value={imageGenResponseFormat}
-                onChange={(e: any) => setImageGenResponseFormat(e.target.value)}
+                    onChange={(e: any) =>
+                      setImageGenResponseFormat(e.target.value)
+                    }
                   >
                     <option value="b64_json">b64_json</option>
                     <option value="url">url</option>
@@ -209,5 +228,12 @@ export function ImageGenDrawer({ showGenImage, setShowGenImage }: Props) {
             </div>
           </DrawerContent>
         </Drawer>
+      ) : (
+        <Button variant="ghost" size="icon" type="button" disabled={true}>
+          <PaintBucketIcon className="size-4" />
+          <span className="sr-only">Generate Image</span>
+        </Button>
+      )}
+    </>
   );
 }

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({
+export function ImageUploadDrawer({ setImages, images, disableFactor }: Props) {
-  showAddImage,
-  setShowAddImage,
-  setImages,
-  images,
-}: 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>

src/components/WhisperButton.tsx

@@ -1,7 +1,6 @@
 import { createRef, useContext } from "react";
 
-import { ChatStore } from "@/types/chatstore";
+import { useState, Dispatch } from "react";
-import { useEffect, useState, Dispatch } from "react";
 import { Button } from "@/components/ui/button";
 import { AudioWaveformIcon, CircleStopIcon, MicIcon } from "lucide-react";
 import { AppContext } from "@/pages/App";
@@ -18,10 +17,12 @@ const WhisperButton = (props: {
   const mediaRef = createRef();
   const [isRecording, setIsRecording] = useState("Mic");
   return (
+    <>
+      {chatStore.whisper_api && chatStore.whisper_key ? (
         <Button
           variant="ghost"
           size="icon"
-      className={`m-1 p-1 ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
+          className={`${isRecording !== "Mic" ? "animate-pulse" : ""}`}
           disabled={isRecording === "Transcribing"}
           ref={mediaRef as any}
           onClick={async (event) => {
@@ -140,6 +141,13 @@ const WhisperButton = (props: {
             <AudioWaveformIcon />
           )}
         </Button>
+      ) : (
+        <Button variant="ghost" size="icon" disabled={true}>
+          <MicIcon />
+        </Button>
+      )}
+      <span className="sr-only">Use Microphone</span>
+    </>
   );
 };
 

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
+            <ImageUploadDrawer
-              variant="ghost"
+              images={images}
-              size="icon"
+              setImages={setImages}
-              type="button"
+              disableFactor={[showGenerating]}
-              onClick={() => setShowAddImage(true)}
+            />
-              disabled={showGenerating}
+            <ImageGenDrawer disableFactor={[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>
 
-            {chatStore.whisper_api && chatStore.whisper_key && (
-              <>
             <WhisperButton inputMsg={inputMsg} setInputMsg={setInputMsg} />
-                <span className="sr-only">Use Microphone</span>
-              </>
-            )}
 
             <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>
     </>
   );