diff --git a/src/pages/addToolMsg.tsx b/src/pages/addToolMsg.tsx
new file mode 100644
index 0000000..d52a185
--- /dev/null
+++ b/src/pages/addToolMsg.tsx
@@ -0,0 +1,95 @@
+import { useState } from "preact/hooks";
+import { Dispatch, StateUpdater } from "preact/hooks";
+
+import { Tr } from "@/translate";
+import { calculate_token_length } from "@/chatgpt";
+import { ChatStore } from "@/types/chatstore";
+
+const AddToolMsg = (props: {
+  setShowAddToolMsg: Dispatch<StateUpdater<boolean>>;
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+  update_total_tokens: () => void;
+}) => {
+  const { setShowAddToolMsg, chatStore, update_total_tokens, setChatStore } =
+    props;
+
+  const [newToolCallID, setNewToolCallID] = useState("");
+  const [newToolContent, setNewToolContent] = useState("");
+  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={() => {
+        setShowAddToolMsg(false);
+      }}
+    >
+      <div
+        className="bg-white rounded p-2 z-20 flex flex-col"
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        <h2>Add Tool Message</h2>
+        <hr className="my-2" />
+        <span>
+          <label>tool_call_id</label>
+          <input
+            className="rounded m-1 p-1 border-2 border-gray-400"
+            type="text"
+            value={newToolCallID}
+            onChange={(event: any) => setNewToolCallID(event.target.value)}
+          />
+        </span>
+        <span>
+          <label>Content</label>
+          <textarea
+            className="rounded m-1 p-1 border-2 border-gray-400"
+            rows={5}
+            value={newToolContent}
+            onChange={(event: any) => setNewToolContent(event.target.value)}
+          ></textarea>
+        </span>
+        <span className={`flex justify-between p-2`}>
+          <button
+            className="btn btn-info m-1 p-1"
+            onClick={() => setShowAddToolMsg(false)}
+          >
+            {Tr("Cancle")}
+          </button>
+          <button
+            className="rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
+            onClick={() => {
+              if (!newToolCallID.trim()) {
+                alert("tool_call_id is empty");
+                return;
+              }
+              if (!newToolContent.trim()) {
+                alert("content is empty");
+                return;
+              }
+              chatStore.history.push({
+                role: "tool",
+                tool_call_id: newToolCallID.trim(),
+                content: newToolContent.trim(),
+                token: calculate_token_length(newToolContent),
+                hide: false,
+                example: false,
+                audio: null,
+                logprobs: null,
+              });
+              update_total_tokens();
+              setChatStore({ ...chatStore });
+              setNewToolCallID("");
+              setNewToolContent("");
+              setShowAddToolMsg(false);
+            }}
+          >
+            {Tr("Add")}
+          </button>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default AddToolMsg;
diff --git a/src/pages/chatbox.tsx b/src/pages/chatbox.tsx
index 851c98c..d268c04 100644
--- a/src/pages/chatbox.tsx
+++ b/src/pages/chatbox.tsx
@@ -38,6 +38,7 @@ import Templates from "@/components/Templates";
 import VersionHint from "@/components/VersionHint";
 import StatusBar from "@/components/StatusBar";
 import WhisperButton from "@/components/WhisperButton";
+import AddToolMsg from "./addToolMsg";
 
 export default function ChatBOX(props: {
   db: Promise<IDBPDatabase<ChatStore>>;
@@ -56,8 +57,6 @@ export default function ChatBOX(props: {
   const [generatingMessage, setGeneratingMessage] = useState("");
   const [showRetry, setShowRetry] = useState(false);
   const [showAddToolMsg, setShowAddToolMsg] = useState(false);
-  const [newToolCallID, setNewToolCallID] = useState("");
-  const [newToolContent, setNewToolContent] = useState("");
   const [showSearch, setShowSearch] = useState(false);
   let default_follow = localStorage.getItem("follow");
   if (default_follow === null) {
@@ -803,82 +802,12 @@ export default function ChatBOX(props: {
           </button>
         )}
         {showAddToolMsg && (
-          <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={() => {
-              setShowAddToolMsg(false);
-            }}
-          >
-            <div
-              className="bg-white rounded p-2 z-20 flex flex-col"
-              onClick={(event) => {
-                event.stopPropagation();
-              }}
-            >
-              <h2>Add Tool Message</h2>
-              <hr className="my-2" />
-              <span>
-                <label>tool_call_id</label>
-                <input
-                  className="rounded m-1 p-1 border-2 border-gray-400"
-                  type="text"
-                  value={newToolCallID}
-                  onChange={(event: any) =>
-                    setNewToolCallID(event.target.value)
-                  }
-                />
-              </span>
-              <span>
-                <label>Content</label>
-                <textarea
-                  className="rounded m-1 p-1 border-2 border-gray-400"
-                  rows={5}
-                  value={newToolContent}
-                  onChange={(event: any) =>
-                    setNewToolContent(event.target.value)
-                  }
-                ></textarea>
-              </span>
-              <span className={`flex justify-between p-2`}>
-                <button
-                  className="btn btn-info m-1 p-1"
-                  onClick={() => setShowAddToolMsg(false)}
-                >
-                  {Tr("Cancle")}
-                </button>
-                <button
-                  className="rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
-                  onClick={() => {
-                    if (!newToolCallID.trim()) {
-                      alert("tool_call_id is empty");
-                      return;
-                    }
-                    if (!newToolContent.trim()) {
-                      alert("content is empty");
-                      return;
-                    }
-                    chatStore.history.push({
-                      role: "tool",
-                      tool_call_id: newToolCallID.trim(),
-                      content: newToolContent.trim(),
-                      token: calculate_token_length(newToolContent),
-                      hide: false,
-                      example: false,
-                      audio: null,
-                      logprobs: null,
-                    });
-                    update_total_tokens();
-                    setChatStore({ ...chatStore });
-                    setNewToolCallID("");
-                    setNewToolContent("");
-                    setShowAddToolMsg(false);
-                  }}
-                >
-                  {Tr("Add")}
-                </button>
-              </span>
-            </div>
-          </div>
+          <AddToolMsg
+            chatStore={chatStore}
+            setChatStore={setChatStore}
+            setShowAddToolMsg={setShowAddToolMsg}
+            update_total_tokens={update_total_tokens}
+          />
         )}
       </div>
     </div>