From 08504930d45d499469194c888fa7e7e63a5082a8 Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Wed, 25 Dec 2024 16:12:10 +0800
Subject: [PATCH] Refactor Chatbox to improve AddImage component handling and
 button functionality

---
 src/addImage.tsx          | 608 ++++++++++++++++++++------------------
 src/editMessageDetail.tsx | 282 ++++++++++--------
 src/pages/Chatbox.tsx     |  20 +-
 3 files changed, 484 insertions(+), 426 deletions(-)

diff --git a/src/addImage.tsx b/src/addImage.tsx
index 48cfd3e..78259d2 100644
--- a/src/addImage.tsx
+++ b/src/addImage.tsx
@@ -3,10 +3,29 @@ import { ChatStore } from "@/types/chatstore";
 import { MessageDetail } from "@/chatgpt";
 import { Tr } from "@/translate";
 
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+import { Button } from "./components/ui/button";
+import { PenIcon, XIcon } from "lucide-react";
+import { Checkbox } from "./components/ui/checkbox";
+import { Label } from "./components/ui/label";
+import { Textarea } from "./components/ui/textarea";
+import { Separator } from "./components/ui/separator";
+
 interface Props {
   chatStore: ChatStore;
   setChatStore: (cs: ChatStore) => void;
   images: MessageDetail[];
+  showAddImage: boolean;
   setShowAddImage: (se: boolean) => void;
   setImages: (images: MessageDetail[]) => void;
 }
@@ -18,6 +37,7 @@ interface ImageResponse {
 export function AddImage({
   chatStore,
   setChatStore,
+  showAddImage,
   setShowAddImage,
   setImages,
   images,
@@ -34,308 +54,316 @@ export function AddImage({
   const [imageGenGenerating, setImageGenGenerating] = useState(false);
   useState("b64_json");
   return (
-    <div
-      className="absolute z-10 bg-black bg-opacity-50 w-full h-full flex justify-center items-center left-0 top-0 overflow-scroll"
-      onClick={() => {
-        setShowAddImage(false);
-      }}
-    >
-      <div
-        className="bg-base-200 p-2 z-20"
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
-      >
-        <div className="flex justify-between items-center p-1">
-          <h3>Add Images</h3>
-          <button
-            className="btn btn-sm btn-neutral"
-            onClick={() => {
-              setShowAddImage(false);
-            }}
-          >
-            Done
-          </button>
-        </div>
-        <span className="">
-          <button
-            className="btn btn-secondary btn-sm disabled:btn-disabled"
-            onClick={() => {
-              const image_url = prompt("Image URL");
-              if (!image_url) {
-                return;
-              }
-              setImages([
-                ...images,
-                {
-                  type: "image_url",
-                  image_url: {
-                    url: image_url,
-                    detail: enableHighResolution ? "high" : "low",
-                  },
-                },
-              ]);
-            }}
-          >
-            Add from URL
-          </button>
-          <button
-            className="btn btn-primary btn-sm disabled:btn-disabled"
-            onClick={() => {
-              // select file and load it to base64 image URL format
-              const input = document.createElement("input");
-              input.type = "file";
-              input.accept = "image/*";
-              input.onchange = (event) => {
-                const file = (event.target as HTMLInputElement).files?.[0];
-                if (!file) {
+    <Drawer open={showAddImage} onOpenChange={setShowAddImage}>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-lg">
+          <DrawerHeader>
+            <DrawerTitle>Add Images</DrawerTitle>
+          </DrawerHeader>
+          <div className="flex gap-2 items-center">
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={false}
+              onClick={() => {
+                const image_url = prompt("Image URL");
+                if (!image_url) {
                   return;
                 }
-                const reader = new FileReader();
-                reader.readAsDataURL(file);
-                reader.onloadend = () => {
-                  const base64data = reader.result;
-                  setImages([
-                    ...images,
-                    {
-                      type: "image_url",
-                      image_url: {
-                        url: String(base64data),
-                        detail: enableHighResolution ? "high" : "low",
-                      },
-                    },
-                  ]);
-                };
-              };
-              input.click();
-            }}
-          >
-            Add from local file
-          </button>
-          <span
-            onClick={() => {
-              setEnableHighResolution(!enableHighResolution);
-            }}
-          >
-            <label>High resolution</label>
-            <input type="checkbox" checked={enableHighResolution} />
-          </span>
-        </span>
-        <div className="divider"></div>
-        {chatStore.image_gen_api && chatStore.image_gen_key && (
-          <div className="flex flex-col">
-            <h3>Generate Image</h3>
-            <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
-                className="btn btn-primary btn-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(chatStore.image_gen_api, {
-                        method: "POST",
-                        headers: {
-                          "Content-Type": "application/json",
-                          Authorization: `Bearer ${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;
-
-                      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,
-                      });
-
-                      setChatStore({ ...chatStore });
-                    }
-                  } catch (e) {
-                    console.error(e);
-                    alert("Failed to generate image: " + e);
-                  } finally {
-                    setImageGenGenerating(false);
-                  }
-                }}
-              >
-                {Tr("Generate")}
-              </button>
-            </span>
-          </div>
-        )}
-        <div className="flex flex-wrap">
-          {images.map((image, index) => (
-            <div className="flex flex-col">
-              {image.type === "image_url" && (
-                <img
-                  className="rounded m-1 p-1 border-2 border-gray-400 w-32"
-                  src={image.image_url?.url}
-                />
-              )}
-              <span className="flex justify-between">
-                <button
-                  onClick={() => {
-                    const image_url = prompt("Image URL");
-                    if (!image_url) {
-                      return;
-                    }
-                    images[index].image_url = {
+                setImages([
+                  ...images,
+                  {
+                    type: "image_url",
+                    image_url: {
                       url: image_url,
                       detail: enableHighResolution ? "high" : "low",
-                    };
-                    setImages([...images]);
+                    },
+                  },
+                ]);
+              }}
+            >
+              Add from URL
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              disabled={false}
+              onClick={() => {
+                const input = document.createElement("input");
+                input.type = "file";
+                input.accept = "image/*";
+                input.onchange = (event) => {
+                  const file = (event.target as HTMLInputElement).files?.[0];
+                  if (!file) {
+                    return;
+                  }
+                  const reader = new FileReader();
+                  reader.readAsDataURL(file);
+                  reader.onloadend = () => {
+                    const base64data = reader.result;
+                    setImages([
+                      ...images,
+                      {
+                        type: "image_url",
+                        image_url: {
+                          url: String(base64data),
+                          detail: enableHighResolution ? "high" : "low",
+                        },
+                      },
+                    ]);
+                  };
+                };
+                input.click();
+              }}
+            >
+              Add from local file
+            </Button>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                checked={enableHighResolution}
+                onCheckedChange={(checked) =>
+                  setEnableHighResolution(checked === true)
+                }
+              />
+              <label
+                htmlFor="terms"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                High resolution
+              </label>
+            </div>
+          </div>
+          <Separator className="my-2" />
+          {chatStore.image_gen_api && chatStore.image_gen_key && (
+            <div className="flex flex-col">
+              <h3>Generate Image</h3>
+              <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);
                   }}
                 >
-                  🖋
-                </button>
-                <span
-                  onClick={() => {
-                    if (image.image_url === undefined) return;
-                    image.image_url.detail =
-                      image.image_url?.detail === "low" ? "high" : "low";
-                    setImages([...images]);
-                  }}
+                  <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)}
                 >
-                  <label>HiRes</label>
-                  <input
-                    type="checkbox"
-                    checked={image.image_url?.detail === "high"}
-                  />
-                </span>
-                <button
-                  onClick={() => {
-                    if (!confirm("Are you sure to delete this image?")) {
-                      return;
+                  <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(chatStore.image_gen_api, {
+                          method: "POST",
+                          headers: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${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;
+
+                        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,
+                        });
+
+                        setChatStore({ ...chatStore });
+                      }
+                    } catch (e) {
+                      console.error(e);
+                      alert("Failed to generate image: " + e);
+                    } finally {
+                      setImageGenGenerating(false);
                     }
-                    images.splice(index, 1);
-                    setImages([...images]);
                   }}
                 >
-                  ❌
-                </button>
+                  {Tr("Generate")}
+                </Button>
               </span>
             </div>
-          ))}
+          )}
+          <div className="flex flex-wrap">
+            {images.map((image, index) => (
+              <div className="flex flex-col">
+                {image.type === "image_url" && (
+                  <img
+                    className="rounded m-1 p-1 border-2 border-gray-400 w-32"
+                    src={image.image_url?.url}
+                  />
+                )}
+                <span className="flex justify-between">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const image_url = prompt("Image URL");
+                      if (!image_url) {
+                        return;
+                      }
+                      images[index].image_url = {
+                        url: image_url,
+                        detail: enableHighResolution ? "high" : "low",
+                      };
+                      setImages([...images]);
+                    }}
+                  >
+                    <PenIcon />
+                  </Button>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`hires-${index}`}
+                      checked={image.image_url?.detail === "high"}
+                      onCheckedChange={() => {
+                        if (image.image_url === undefined) return;
+                        image.image_url.detail =
+                          image.image_url?.detail === "low" ? "high" : "low";
+                        setImages([...images]);
+                      }}
+                    />
+                    <label
+                      htmlFor={`hires-${index}`}
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      HiRes
+                    </label>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      if (!confirm("Are you sure to delete this image?")) {
+                        return;
+                      }
+                      images.splice(index, 1);
+                      setImages([...images]);
+                    }}
+                  >
+                    <XIcon />
+                  </Button>
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <DrawerFooter>
+            <Button onClick={() => setShowAddImage(false)}>Done</Button>
+          </DrawerFooter>
         </div>
-      </div>
-    </div>
+      </DrawerContent>
+    </Drawer>
   );
 }
diff --git a/src/editMessageDetail.tsx b/src/editMessageDetail.tsx
index b58f84b..c0a116c 100644
--- a/src/editMessageDetail.tsx
+++ b/src/editMessageDetail.tsx
@@ -2,6 +2,19 @@ import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
 import { calculate_token_length } from "@/chatgpt";
 import { Tr } from "@/translate";
 
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+import { Button } from "./components/ui/button";
+
 interface Props {
   chat: ChatStoreMessage;
   chatStore: ChatStore;
@@ -16,146 +29,163 @@ export function EditMessageDetail({
 }: Props) {
   if (typeof chat.content !== "object") return <div>error</div>;
   return (
-    <div
-      className={"w-full h-full flex flex-col overflow-scroll"}
-      onClick={(event) => event.stopPropagation()}
-    >
-      {chat.content.map((mdt, index) => (
-        <div className={"w-full p-2 px-4"}>
-          <div className="flex justify-center">
-            {mdt.type === "text" ? (
-              <textarea
-                className={"w-full border p-1 rounded"}
-                value={mdt.text}
-                onChange={(event: any) => {
-                  if (typeof chat.content === "string") return;
-                  chat.content[index].text = event.target.value;
-                  chat.token = calculate_token_length(chat.content);
-                  console.log("calculated token length", chat.token);
-                  setChatStore({ ...chatStore });
-                }}
-                onKeyPress={(event: any) => {
-                  if (event.keyCode == 27) {
-                    setShowEdit(false);
-                  }
-                }}
-              ></textarea>
-            ) : (
-              <div className="border p-1 rounded">
-                <img
-                  className="max-h-32 max-w-xs cursor-pointer m-2"
-                  src={mdt.image_url?.url}
-                  onClick={() => {
-                    window.open(mdt.image_url?.url, "_blank");
-                  }}
-                />
-                <button
-                  className="bg-blue-300 p-1 rounded m-1"
-                  onClick={() => {
-                    const image_url = prompt("image url", mdt.image_url?.url);
-                    if (image_url) {
+    <Drawer open={true} onOpenChange={setShowEdit}>
+      <DrawerTrigger>Open</DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Edit Message Detail</DrawerTitle>
+          <DrawerDescription>
+            Modify the content of the message.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className={"w-full h-full flex flex-col overflow-scroll"}>
+          {chat.content.map((mdt, index) => (
+            <div className={"w-full p-2 px-4"} key={index}>
+              <div className="flex justify-center">
+                {mdt.type === "text" ? (
+                  <textarea
+                    className={"w-full border p-1 rounded"}
+                    value={mdt.text}
+                    onChange={(event: any) => {
                       if (typeof chat.content === "string") return;
-                      const obj = chat.content[index].image_url;
-                      if (obj === undefined) return;
-                      obj.url = image_url;
+                      chat.content[index].text = event.target.value;
+                      chat.token = calculate_token_length(chat.content);
+                      console.log("calculated token length", chat.token);
                       setChatStore({ ...chatStore });
-                    }
-                  }}
-                >
-                  {Tr("Edit URL")}
-                </button>
-                <button
-                  className="bg-blue-300 p-1 rounded m-1"
-                  onClick={() => {
-                    // select file and load it to base64 image URL format
-                    const input = document.createElement("input");
-                    input.type = "file";
-                    input.accept = "image/*";
-                    input.onchange = (event) => {
-                      const file = (event.target as HTMLInputElement)
-                        .files?.[0];
-                      if (!file) {
-                        return;
+                    }}
+                    onKeyPress={(event: any) => {
+                      if (event.keyCode == 27) {
+                        setShowEdit(false);
                       }
-                      const reader = new FileReader();
-                      reader.readAsDataURL(file);
-                      reader.onloadend = () => {
-                        const base64data = reader.result;
-                        if (!base64data) return;
+                    }}
+                  ></textarea>
+                ) : (
+                  <div className="border p-1 rounded">
+                    <img
+                      className="max-h-32 max-w-xs cursor-pointer m-2"
+                      src={mdt.image_url?.url}
+                      onClick={() => {
+                        window.open(mdt.image_url?.url, "_blank");
+                      }}
+                    />
+                    <Button
+                      className="bg-blue-300 p-1 rounded m-1"
+                      onClick={() => {
+                        const image_url = prompt(
+                          "image url",
+                          mdt.image_url?.url
+                        );
+                        if (image_url) {
+                          if (typeof chat.content === "string") return;
+                          const obj = chat.content[index].image_url;
+                          if (obj === undefined) return;
+                          obj.url = image_url;
+                          setChatStore({ ...chatStore });
+                        }
+                      }}
+                    >
+                      {Tr("Edit URL")}
+                    </Button>
+                    <Button
+                      className="bg-blue-300 p-1 rounded m-1"
+                      onClick={() => {
+                        const input = document.createElement("input");
+                        input.type = "file";
+                        input.accept = "image/*";
+                        input.onchange = (event) => {
+                          const file = (event.target as HTMLInputElement)
+                            .files?.[0];
+                          if (!file) {
+                            return;
+                          }
+                          const reader = new FileReader();
+                          reader.readAsDataURL(file);
+                          reader.onloadend = () => {
+                            const base64data = reader.result;
+                            if (!base64data) return;
+                            if (typeof chat.content === "string") return;
+                            const obj = chat.content[index].image_url;
+                            if (obj === undefined) return;
+                            obj.url = String(base64data);
+                            setChatStore({ ...chatStore });
+                          };
+                        };
+                        input.click();
+                      }}
+                    >
+                      {Tr("Upload")}
+                    </Button>
+                    <span
+                      className="bg-blue-300 p-1 rounded m-1"
+                      onClick={() => {
                         if (typeof chat.content === "string") return;
                         const obj = chat.content[index].image_url;
                         if (obj === undefined) return;
-                        obj.url = String(base64data);
+                        obj.detail = obj.detail === "high" ? "low" : "high";
+                        chat.token = calculate_token_length(chat.content);
                         setChatStore({ ...chatStore });
-                      };
-                    };
-                    input.click();
-                  }}
-                >
-                  {Tr("Upload")}
-                </button>
-                <span
-                  className="bg-blue-300 p-1 rounded m-1"
+                      }}
+                    >
+                      <label>High Resolution</label>
+                      <input
+                        type="checkbox"
+                        checked={mdt.image_url?.detail === "high"}
+                      />
+                    </span>
+                  </div>
+                )}
+                <Button
                   onClick={() => {
                     if (typeof chat.content === "string") return;
-                    const obj = chat.content[index].image_url;
-                    if (obj === undefined) return;
-                    obj.detail = obj.detail === "high" ? "low" : "high";
+                    chat.content.splice(index, 1);
                     chat.token = calculate_token_length(chat.content);
                     setChatStore({ ...chatStore });
                   }}
                 >
-                  <label>High Resolution</label>
-                  <input
-                    type="checkbox"
-                    checked={mdt.image_url?.detail === "high"}
-                  />
-                </span>
+                  ❌
+                </Button>
               </div>
-            )}
-
-            <button
-              onClick={() => {
-                if (typeof chat.content === "string") return;
-                chat.content.splice(index, 1);
-                chat.token = calculate_token_length(chat.content);
-                setChatStore({ ...chatStore });
-              }}
-            >
-              ❌
-            </button>
-          </div>
+            </div>
+          ))}
+          <Button
+            className={"m-2 p-1 rounded bg-green-500"}
+            onClick={() => {
+              if (typeof chat.content === "string") return;
+              chat.content.push({
+                type: "text",
+                text: "",
+              });
+              setChatStore({ ...chatStore });
+            }}
+          >
+            {Tr("Add text")}
+          </Button>
+          <Button
+            className={"m-2 p-1 rounded bg-green-500"}
+            onClick={() => {
+              if (typeof chat.content === "string") return;
+              chat.content.push({
+                type: "image_url",
+                image_url: {
+                  url: "",
+                  detail: "high",
+                },
+              });
+              setChatStore({ ...chatStore });
+            }}
+          >
+            {Tr("Add image")}
+          </Button>
         </div>
-      ))}
-      <button
-        className={"m-2 p-1 rounded bg-green-500"}
-        onClick={() => {
-          if (typeof chat.content === "string") return;
-          chat.content.push({
-            type: "text",
-            text: "",
-          });
-          setChatStore({ ...chatStore });
-        }}
-      >
-        {Tr("Add text")}
-      </button>
-      <button
-        className={"m-2 p-1 rounded bg-green-500"}
-        onClick={() => {
-          if (typeof chat.content === "string") return;
-          chat.content.push({
-            type: "image_url",
-            image_url: {
-              url: "",
-              detail: "high",
-            },
-          });
-          setChatStore({ ...chatStore });
-        }}
-      >
-        {Tr("Add image")}
-      </button>
-    </div>
+        <DrawerFooter>
+          <Button
+            className="bg-blue-500 p-2 rounded"
+            onClick={() => setShowEdit(false)}
+          >
+            {Tr("Close")}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   );
 }
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index 12478ec..2d0f266 100644
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -803,7 +803,8 @@ export default function ChatBOX(props: {
               <Button
                 variant="ghost"
                 size="icon"
-                onClick={() => setShowAddImage(!showAddImage)}
+                type="button"
+                onClick={() => setShowAddImage(true)}
                 disabled={showGenerating || !chatStore.apiKey}
               >
                 <ImageIcon className="size-4" />
@@ -837,15 +838,14 @@ export default function ChatBOX(props: {
             </div>
           </form>
 
-          {showAddImage && (
-            <AddImage
-              chatStore={chatStore}
-              setChatStore={setChatStore}
-              setShowAddImage={setShowAddImage}
-              images={images}
-              setImages={setImages}
-            />
-          )}
+          <AddImage
+            chatStore={chatStore}
+            setChatStore={setChatStore}
+            setShowAddImage={setShowAddImage}
+            images={images}
+            showAddImage={showAddImage}
+            setImages={setImages}
+          />
         </div>
       </div>
     </>