From b7f519a679f6f033d8e129174e08bca6edff0474 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Fri, 10 Nov 2023 20:51:51 +0800
Subject: [PATCH] split editMessage code

---
 src/editMessage.tsx       |  59 +++++++++
 src/editMessageDetail.tsx | 161 ++++++++++++++++++++++++
 src/editMessageString.tsx |  84 +++++++++++++
 src/message.tsx           | 251 +-------------------------------------
 4 files changed, 305 insertions(+), 250 deletions(-)
 create mode 100644 src/editMessage.tsx
 create mode 100644 src/editMessageDetail.tsx
 create mode 100644 src/editMessageString.tsx

diff --git a/src/editMessage.tsx b/src/editMessage.tsx
new file mode 100644
index 0000000..39751d1
--- /dev/null
+++ b/src/editMessage.tsx
@@ -0,0 +1,59 @@
+import { Tr, langCodeContext, LANG_OPTIONS } from "./translate";
+import { useState, useEffect, StateUpdater } from "preact/hooks";
+import { ChatStore, ChatStoreMessage } from "./app";
+import { calculate_token_length, getMessageText } from "./chatgpt";
+import { isVailedJSON } from "./message";
+import { EditMessageString } from "./editMessageString";
+import { EditMessageDetail } from "./editMessageDetail";
+
+interface EditMessageProps {
+  chat: ChatStoreMessage;
+  chatStore: ChatStore;
+  setShowEdit: StateUpdater<boolean>;
+  setChatStore: (cs: ChatStore) => void;
+}
+export function EditMessage(props: EditMessageProps) {
+  const { 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();
+        }}
+      >
+        {typeof chat.content === "string" ? (
+          <EditMessageString
+            chat={chat}
+            chatStore={chatStore}
+            setChatStore={setChatStore}
+            setShowEdit={setShowEdit}
+          />
+        ) : (
+          <EditMessageDetail
+            chat={chat}
+            chatStore={chatStore}
+            setChatStore={setChatStore}
+            setShowEdit={setShowEdit}
+          />
+        )}
+        <div className={"w-full flex justify-center"}>
+          <button
+            className={"w-full m-2 p-1 rounded bg-purple-500"}
+            onClick={() => {
+              setShowEdit(false);
+            }}
+          >
+            {Tr("Close")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/editMessageDetail.tsx b/src/editMessageDetail.tsx
new file mode 100644
index 0000000..ef03e14
--- /dev/null
+++ b/src/editMessageDetail.tsx
@@ -0,0 +1,161 @@
+import { ChatStore, ChatStoreMessage } from "./app";
+import { calculate_token_length } from "./chatgpt";
+import { Tr } from "./translate";
+
+interface Props {
+  chat: ChatStoreMessage;
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+  setShowEdit: (se: boolean) => void;
+}
+export function EditMessageDetail({
+  chat,
+  chatStore,
+  setChatStore,
+  setShowEdit,
+}: 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-between">
+            {mdt.type === "text" ? (
+              <textarea
+                className={"w-full"}
+                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>
+            ) : (
+              <>
+                <img
+                  className="max-h-32 max-w-xs cursor-pointer"
+                  src={mdt.image_url?.url}
+                  onClick={() => {
+                    window.open(mdt.image_url?.url, "_blank");
+                  }}
+                />
+                <button
+                  className="bg-blue-300 p-1 rounded"
+                  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"
+                  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;
+                      }
+                      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"
+                  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.token = calculate_token_length(chat.content);
+                    setChatStore({ ...chatStore });
+                  }}
+                >
+                  <label>High Resolution</label>
+                  <input
+                    type="checkbox"
+                    checked={mdt.image_url?.detail === "high"}
+                  />
+                </span>
+              </>
+            )}
+
+            <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>
+  );
+}
diff --git a/src/editMessageString.tsx b/src/editMessageString.tsx
new file mode 100644
index 0000000..1890c01
--- /dev/null
+++ b/src/editMessageString.tsx
@@ -0,0 +1,84 @@
+import { ChatStore, ChatStoreMessage } from "./app";
+import { isVailedJSON } from "./message";
+import { calculate_token_length } from "./chatgpt";
+
+interface Props {
+  chat: ChatStoreMessage;
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+  setShowEdit: (se: boolean) => void;
+}
+export function EditMessageString({
+  chat,
+  chatStore,
+  setChatStore,
+  setShowEdit,
+}: Props) {
+  if (typeof chat.content !== "string") return <div>error</div>;
+  return (
+    <div className="flex flex-col">
+      {chat.tool_call_id && (
+        <span className="my-2">
+          <label>tool_call_id: </label>
+          <input
+            className="rounded border border-gray-400"
+            value={chat.tool_call_id}
+            onChange={(event: any) => {
+              chat.tool_call_id = event.target.value;
+              setChatStore({ ...chatStore });
+            }}
+          />
+        </span>
+      )}
+      {chat.tool_calls &&
+        chat.tool_calls.map((tool_call) => (
+          <div className="flex flex-col w-full">
+            <span className="my-2 w-full">
+              <label>Tool Call ID: </label>
+              <input
+                value={tool_call.id}
+                className="rounded border border-gray-400"
+              />
+            </span>
+            <span className="my-2 w-full">
+              <label>Function: </label>
+              <input
+                value={tool_call.function.name}
+                className="rounded border border-gray-400"
+              />
+            </span>
+            <span className="my-2">
+              <label>Arguments: </label>
+              <span className="underline">
+                Vailed JSON:{" "}
+                {isVailedJSON(tool_call.function.arguments) ? "🆗" : "❌"}
+              </span>
+              <textarea
+                className="rounded border border-gray-400 w-full h-32 my-2"
+                value={tool_call.function.arguments}
+                onChange={(event: any) => {
+                  tool_call.function.arguments = event.target.value.trim();
+                  setChatStore({ ...chatStore });
+                }}
+              ></textarea>
+            </span>
+            <hr className="my-2" />
+          </div>
+        ))}
+      <textarea
+        className="rounded border border-gray-400 w-full h-32 my-2"
+        value={chat.content}
+        onChange={(event: any) => {
+          chat.content = event.target.value;
+          chat.token = calculate_token_length(chat.content);
+          setChatStore({ ...chatStore });
+        }}
+        onKeyPress={(event: any) => {
+          if (event.keyCode == 27) {
+            setShowEdit(false);
+          }
+        }}
+      ></textarea>
+    </div>
+  );
+}
diff --git a/src/message.tsx b/src/message.tsx
index 853098f..a592fd8 100644
--- a/src/message.tsx
+++ b/src/message.tsx
@@ -8,13 +8,7 @@ import { MessageHide } from "./messageHide";
 import { MessageDetail } from "./messageDetail";
 import { MessageToolCall } from "./messageToolCall";
 import { MessageToolResp } from "./messageToolResp";
-
-interface EditMessageProps {
-  chat: ChatStoreMessage;
-  chatStore: ChatStore;
-  setShowEdit: StateUpdater<boolean>;
-  setChatStore: (cs: ChatStore) => void;
-}
+import { EditMessage } from "./editMessage";
 
 export const isVailedJSON = (str: string): boolean => {
   try {
@@ -25,249 +19,6 @@ export const isVailedJSON = (str: string): boolean => {
   return true;
 };
 
-function EditMessage(props: EditMessageProps) {
-  const { 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();
-        }}
-      >
-        {typeof chat.content === "string" ? (
-          <div className="flex flex-col">
-            {chat.tool_call_id && (
-              <span className="my-2">
-                <label>tool_call_id: </label>
-                <input
-                  className="rounded border border-gray-400"
-                  value={chat.tool_call_id}
-                  onChange={(event: any) => {
-                    chat.tool_call_id = event.target.value;
-                    setChatStore({ ...chatStore });
-                  }}
-                />
-              </span>
-            )}
-            {chat.tool_calls &&
-              chat.tool_calls.map((tool_call) => (
-                <div className="flex flex-col w-full">
-                  <span className="my-2 w-full">
-                    <label>Tool Call ID: </label>
-                    <input
-                      value={tool_call.id}
-                      className="rounded border border-gray-400"
-                    />
-                  </span>
-                  <span className="my-2 w-full">
-                    <label>Function: </label>
-                    <input
-                      value={tool_call.function.name}
-                      className="rounded border border-gray-400"
-                    />
-                  </span>
-                  <span className="my-2">
-                    <label>Arguments: </label>
-                    <span className="underline">
-                      Vailed JSON:{" "}
-                      {isVailedJSON(tool_call.function.arguments) ? "🆗" : "❌"}
-                    </span>
-                    <textarea
-                      className="rounded border border-gray-400 w-full h-32 my-2"
-                      value={tool_call.function.arguments}
-                      onChange={(event: any) => {
-                        tool_call.function.arguments =
-                          event.target.value.trim();
-                        setChatStore({ ...chatStore });
-                      }}
-                    ></textarea>
-                  </span>
-                  <hr className="my-2" />
-                </div>
-              ))}
-            <textarea
-              className="rounded border border-gray-400 w-full h-32 my-2"
-              value={chat.content}
-              onChange={(event: any) => {
-                chat.content = event.target.value;
-                chat.token = calculate_token_length(chat.content);
-                setChatStore({ ...chatStore });
-              }}
-              onKeyPress={(event: any) => {
-                if (event.keyCode == 27) {
-                  setShowEdit(false);
-                }
-              }}
-            ></textarea>
-          </div>
-        ) : (
-          <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-between">
-                  {mdt.type === "text" ? (
-                    <textarea
-                      className={"w-full"}
-                      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>
-                  ) : (
-                    <>
-                      <img
-                        className="max-h-32 max-w-xs cursor-pointer"
-                        src={mdt.image_url?.url}
-                        onClick={() => {
-                          window.open(mdt.image_url?.url, "_blank");
-                        }}
-                      />
-                      <button
-                        className="bg-blue-300 p-1 rounded"
-                        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"
-                        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;
-                            }
-                            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"
-                        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.token = calculate_token_length(chat.content);
-                          setChatStore({ ...chatStore });
-                        }}
-                      >
-                        <label>High Resolution</label>
-                        <input
-                          type="checkbox"
-                          checked={mdt.image_url?.detail === "high"}
-                        />
-                      </span>
-                    </>
-                  )}
-
-                  <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>
-        )}
-        <div className={"w-full flex justify-center"}>
-          <button
-            className={"w-full m-2 p-1 rounded bg-purple-500"}
-            onClick={() => {
-              setShowEdit(false);
-            }}
-          >
-            {Tr("Close")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 interface Props {
   messageIndex: number;
   chatStore: ChatStore;