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
+    <Dialog open={showEdit} onOpenChange={setShowEdit}>
-      className={
+      {/* <DialogTrigger>
-        "absolute bg-black bg-opacity-50 w-full h-full top-0 left-0 rounded z-10 overflow-scroll"
+        <button className="btn btn-sm btn-outline"></button>
-      }
+      </DialogTrigger> */}
-      onClick={() => setShowEdit(false)}
+      <DialogContent className="sm:max-w-[425px]">
-    >
+        <DialogHeader>
-      <div
+          <DialogTitle>Edit Message</DialogTitle>
-        className="m-10 p-2 bg-white rounded"
+          <DialogDescription>
-        onClick={(event: any) => {
+            Make changes to the message content.
-          event.stopPropagation();
+          </DialogDescription>
-        }}
+        </DialogHeader>
-      >
         {typeof chat.content === "string" ? (
           <EditMessageString
             chat={chat}
@@ -41,13 +51,13 @@ export function EditMessage(props: EditMessageProps) {
             setShowEdit={setShowEdit}
           />
         )}
-        <div className={"w-full flex justify-center"}>
         {chatStore.develop_mode && (
-            <button
+          <Button
-              className="w-full m-2 p-1 rounded bg-red-500"
+            variant="destructive"
+            className="w-full"
             onClick={() => {
               const confirm = window.confirm(
-                  "Change message type will clear the content, are you sure?",
+                "Change message type will clear the content, are you sure?"
               );
               if (!confirm) return;
 
@@ -63,18 +73,10 @@ export function EditMessage(props: EditMessageProps) {
             {typeof chat.content === "string"
               ? "media message"
               : "string message"}
-            </button>
+          </Button>
         )}
-          <button
+        <Button onClick={() => setShowEdit(false)}>Save & Close</Button>
-            className={"w-full m-2 p-1 rounded bg-purple-500"}
+      </DialogContent>
-            onClick={() => {
+    </Dialog>
-              setShowEdit(false);
-            }}
-          >
-            {Tr("Close")}
-          </button>
-        </div>
-      </div>
-    </div>
   );
 }

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
+      <Textarea
-        className="rounded border border-gray-400 w-full h-32 my-2"
+        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
+        showEdit={showEdit}
         setShowEdit={setShowEdit}
         chat={chat}
         chatStore={chatStore}
         setChatStore={setChatStore}
       />
-      )}
       {chatStore.develop_mode && (
         <div
           className={`flex flex-wrap items-center gap-2 mt-2 ${