Refactor chat message type switching logic

src/editMessage.tsx

@@ -44,17 +44,29 @@ export function EditMessage(props: EditMessageProps) {
           />
         )}
         <div className={"w-full flex justify-center"}>
-          {chatStore.develop_mode && <button
+          {chatStore.develop_mode && (
-            className="w-full m-2 p-1 rounded bg-red-500"
+            <button
-            onClick={() => {
+              className="w-full m-2 p-1 rounded bg-red-500"
-              if (typeof chat.content === "string") {
+              onClick={() => {
-                chat.content = []
+                const confirm = window.confirm(
-              } else {
+                  "Change message type will clear the content, are you sure?"
-                chat.content = ''
+                );
-              }
+                if (!confirm) return;
-              setChatStore({ ...chatStore })
+
-            }}
+                if (typeof chat.content === "string") {
-          >Switch to {typeof chat.content === 'string' ? "media message" : "string message"}</button>}
+                  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"}
             onClick={() => {