Refactor EditMessage component to use Dialog for improved user experience; replace textarea with custom Textarea component for better styling and functionality

src/editMessage.tsx

@@ -4,28 +4,38 @@ import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
 import { EditMessageString } from "@/editMessageString";
 import { EditMessageDetail } from "@/editMessageDetail";
 
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "./components/ui/button";
+
 interface EditMessageProps {
   chat: ChatStoreMessage;
   chatStore: ChatStore;
+  showEdit: boolean;
   setShowEdit: Dispatch<StateUpdater<boolean>>;
   setChatStore: (cs: ChatStore) => void;
 }
 export function EditMessage(props: EditMessageProps) {
-  const { setShowEdit, chat, setChatStore, chatStore } = props;
+  const { showEdit, setShowEdit, chat, setChatStore, chatStore } = props;
 
   return (
-    <div
-      className={
-        "absolute bg-black bg-opacity-50 w-full h-full top-0 left-0 rounded z-10 overflow-scroll"
-      }
-      onClick={() => setShowEdit(false)}
-    >
-      <div
-        className="m-10 p-2 bg-white rounded"
-        onClick={(event: any) => {
-          event.stopPropagation();
-        }}
-      >
+    <Dialog open={showEdit} onOpenChange={setShowEdit}>
+      {/* <DialogTrigger>
+        <button className="btn btn-sm btn-outline"></button>
+      </DialogTrigger> */}
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit Message</DialogTitle>
+          <DialogDescription>
+            Make changes to the message content.
+          </DialogDescription>
+        </DialogHeader>
         {typeof chat.content === "string" ? (
           <EditMessageString
             chat={chat}
@@ -41,40 +51,32 @@ export function EditMessage(props: EditMessageProps) {
             setShowEdit={setShowEdit}
           />
         )}
-        <div className={"w-full flex justify-center"}>
-          {chatStore.develop_mode && (
-            <button
-              className="w-full m-2 p-1 rounded bg-red-500"
-              onClick={() => {
-                const confirm = window.confirm(
-                  "Change message type will clear the content, are you sure?",
-                );
-                if (!confirm) return;
-
-                if (typeof chat.content === "string") {
-                  chat.content = [];
-                } else {
-                  chat.content = "";
-                }
-                setChatStore({ ...chatStore });
-              }}
-            >
-              Switch to{" "}
-              {typeof chat.content === "string"
-                ? "media message"
-                : "string message"}
-            </button>
-          )}
-          <button
-            className={"w-full m-2 p-1 rounded bg-purple-500"}
+        {chatStore.develop_mode && (
+          <Button
+            variant="destructive"
+            className="w-full"
             onClick={() => {
-              setShowEdit(false);
+              const confirm = window.confirm(
+                "Change message type will clear the content, are you sure?"
+              );
+              if (!confirm) return;
+
+              if (typeof chat.content === "string") {
+                chat.content = [];
+              } else {
+                chat.content = "";
+              }
+              setChatStore({ ...chatStore });
             }}
           >
-            {Tr("Close")}
-          </button>
-        </div>
-      </div>
-    </div>
+            Switch to{" "}
+            {typeof chat.content === "string"
+              ? "media message"
+              : "string message"}
+          </Button>
+        )}
+        <Button onClick={() => setShowEdit(false)}>Save & Close</Button>
+      </DialogContent>
+    </Dialog>
   );
 }

src/editMessageString.tsx

@@ -3,6 +3,8 @@ import { isVailedJSON } from "@/message";
 import { calculate_token_length } from "@/chatgpt";
 import { Tr } from "@/translate";
 
+import { Textarea } from "@/components/ui/textarea";
+
 interface Props {
   chat: ChatStoreMessage;
   chatStore: ChatStore;
@@ -69,7 +71,7 @@ export function EditMessageString({
                 onClick={() => {
                   if (!chat.tool_calls) return;
                   chat.tool_calls = chat.tool_calls.filter(
-                    (tc) => tc.id !== tool_call.id,
+                    (tc) => tc.id !== tool_call.id
                   );
                   setChatStore({ ...chatStore });
                 }}
@@ -100,20 +102,20 @@ export function EditMessageString({
             </span>
           </div>
         ))}
-      <textarea
-        className="rounded border border-gray-400 w-full h-32 my-2"
+      <Textarea
+        className="w-full h-32 my-2"
         value={chat.content}
-        onChange={(event: any) => {
+        onChange={(event) => {
           chat.content = event.target.value;
           chat.token = calculate_token_length(chat.content);
           setChatStore({ ...chatStore });
         }}
-        onKeyPress={(event: any) => {
+        onKeyPress={(event) => {
           if (event.keyCode == 27) {
             setShowEdit(false);
           }
         }}
-      ></textarea>
+      />
     </div>
   );
 }

src/message.tsx

@@ -189,14 +189,13 @@ export default function Message(props: Props) {
           <TTSPlay chat={chat} />
         </ChatBubbleActionWrapper>
       </ChatBubble>
-      {showEdit && (
-        <EditMessage
-          setShowEdit={setShowEdit}
-          chat={chat}
-          chatStore={chatStore}
-          setChatStore={setChatStore}
-        />
-      )}
+      <EditMessage
+        showEdit={showEdit}
+        setShowEdit={setShowEdit}
+        chat={chat}
+        chatStore={chatStore}
+        setChatStore={setChatStore}
+      />
       {chatStore.develop_mode && (
         <div
           className={`flex flex-wrap items-center gap-2 mt-2 ${