diff --git a/src/components/versionHint.tsx b/src/components/versionHint.tsx
new file mode 100644
index 0000000..bcb5dcb
--- /dev/null
+++ b/src/components/versionHint.tsx
@@ -0,0 +1,49 @@
+import { ChatStore } from "@/types/chatstore";
+import { Tr } from "@/translate";
+
+const VersionHint = (props: { chatStore: ChatStore }) => {
+  const { chatStore } = props;
+  return (
+    <>
+      {chatStore.chatgpt_api_web_version < "v1.3.0" && (
+        <p className="p-2 my-2 text-center dark:text-white">
+          <br />
+          {Tr("Warning: current chatStore version")}:{" "}
+          {chatStore.chatgpt_api_web_version} {"< v1.3.0"}
+          <br />
+          v1.3.0
+          引入与旧版不兼容的消息裁切算法。继续使用旧版可能会导致消息裁切过多或过少（表现为失去上下文或输出不完整）。
+          <br />
+          请在左上角创建新会话：）
+        </p>
+      )}
+      {chatStore.chatgpt_api_web_version < "v1.4.0" && (
+        <p className="p-2 my-2 text-center dark:text-white">
+          <br />
+          {Tr("Warning: current chatStore version")}:{" "}
+          {chatStore.chatgpt_api_web_version} {"< v1.4.0"}
+          <br />
+          v1.4.0 增加了更多参数，继续使用旧版可能因参数确实导致未定义的行为
+          <br />
+          请在左上角创建新会话：）
+        </p>
+      )}
+      {chatStore.chatgpt_api_web_version < "v1.6.0" && (
+        <p className="p-2 my-2 text-center dark:text-white">
+          <br />
+          提示：当前会话版本 {chatStore.chatgpt_api_web_version}
+          {Tr("Warning: current chatStore version")}:{" "}
+          {chatStore.chatgpt_api_web_version} {"< v1.6.0"}
+          。
+          <br />
+          v1.6.0 开始保存会话模板时会将 apiKey 和 apiEndpoint
+          设置为空，继续使用旧版可能在保存读取模板时出现问题
+          <br />
+          请在左上角创建新会话：）
+        </p>
+      )}
+    </>
+  );
+};
+
+export default VersionHint;
\ No newline at end of file
diff --git a/src/pages/chatbox.tsx b/src/pages/chatbox.tsx
index 2ca3671..eb74eb7 100644
--- a/src/pages/chatbox.tsx
+++ b/src/pages/chatbox.tsx
@@ -46,6 +46,7 @@ import { ListToolsTempaltes } from "@/listToolsTemplates";
 import { autoHeight } from "@/textarea";
 import Search from "@/search";
 import Templates from "@/components/templates";
+import VersionHint from "@/components/versionHint";
 
 export default function ChatBOX(props: {
   db: Promise<IDBPDatabase<ChatStore>>;
@@ -93,7 +94,7 @@ export default function ChatBOX(props: {
   const update_total_tokens = () => {
     // manually estimate token
     client.total_tokens = calculate_token_length(
-      chatStore.systemMessageContent,
+      chatStore.systemMessageContent
     );
     for (const msg of chatStore.history
       .filter(({ hide }) => !hide)
@@ -149,7 +150,7 @@ export default function ChatBOX(props: {
 
           // update tool call arguments
           const tool = allChunkTool.find(
-            (tool) => tool.index === tool_call.index,
+            (tool) => tool.index === tool_call.index
           );
 
           if (!tool) {
@@ -164,7 +165,7 @@ export default function ChatBOX(props: {
         allChunkMessage.join("") +
           allChunkTool.map((tool) => {
             return `Tool Call ID: ${tool.id}\nType: ${tool.type}\nFunction: ${tool.function.name}\nArguments: ${tool.function.arguments}`;
-          }),
+          })
       );
     }
     setShowGenerating(false);
@@ -302,7 +303,7 @@ export default function ChatBOX(props: {
       setShowGenerating(true);
       const response = await client._fetch(
         chatStore.streamMode,
-        chatStore.logprobs,
+        chatStore.logprobs
       );
       const contentType = response.headers.get("content-type");
       if (contentType?.startsWith("text/event-stream")) {
@@ -372,33 +373,33 @@ export default function ChatBOX(props: {
 
   const [templates, _setTemplates] = useState(
     JSON.parse(
-      localStorage.getItem(STORAGE_NAME_TEMPLATE) || "[]",
-    ) as TemplateChatStore[],
+      localStorage.getItem(STORAGE_NAME_TEMPLATE) || "[]"
+    ) as TemplateChatStore[]
   );
   const [templateAPIs, _setTemplateAPIs] = useState(
     JSON.parse(
-      localStorage.getItem(STORAGE_NAME_TEMPLATE_API) || "[]",
-    ) as TemplateAPI[],
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API) || "[]"
+    ) as TemplateAPI[]
   );
   const [templateAPIsWhisper, _setTemplateAPIsWhisper] = useState(
     JSON.parse(
-      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_WHISPER) || "[]",
-    ) as TemplateAPI[],
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_WHISPER) || "[]"
+    ) as TemplateAPI[]
   );
   const [templateAPIsTTS, _setTemplateAPIsTTS] = useState(
     JSON.parse(
-      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_TTS) || "[]",
-    ) as TemplateAPI[],
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_TTS) || "[]"
+    ) as TemplateAPI[]
   );
   const [templateAPIsImageGen, _setTemplateAPIsImageGen] = useState(
     JSON.parse(
-      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_IMAGE_GEN) || "[]",
-    ) as TemplateAPI[],
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_IMAGE_GEN) || "[]"
+    ) as TemplateAPI[]
   );
   const [toolsTemplates, _setToolsTemplates] = useState(
     JSON.parse(
-      localStorage.getItem(STORAGE_NAME_TEMPLATE_TOOLS) || "[]",
-    ) as TemplateTools[],
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_TOOLS) || "[]"
+    ) as TemplateTools[]
   );
   const setTemplates = (templates: TemplateChatStore[]) => {
     localStorage.setItem(STORAGE_NAME_TEMPLATE, JSON.stringify(templates));
@@ -407,35 +408,35 @@ export default function ChatBOX(props: {
   const setTemplateAPIs = (templateAPIs: TemplateAPI[]) => {
     localStorage.setItem(
       STORAGE_NAME_TEMPLATE_API,
-      JSON.stringify(templateAPIs),
+      JSON.stringify(templateAPIs)
     );
     _setTemplateAPIs(templateAPIs);
   };
   const setTemplateAPIsWhisper = (templateAPIWhisper: TemplateAPI[]) => {
     localStorage.setItem(
       STORAGE_NAME_TEMPLATE_API_WHISPER,
-      JSON.stringify(templateAPIWhisper),
+      JSON.stringify(templateAPIWhisper)
     );
     _setTemplateAPIsWhisper(templateAPIWhisper);
   };
   const setTemplateAPIsTTS = (templateAPITTS: TemplateAPI[]) => {
     localStorage.setItem(
       STORAGE_NAME_TEMPLATE_API_TTS,
-      JSON.stringify(templateAPITTS),
+      JSON.stringify(templateAPITTS)
     );
     _setTemplateAPIsTTS(templateAPITTS);
   };
   const setTemplateAPIsImageGen = (templateAPIImageGen: TemplateAPI[]) => {
     localStorage.setItem(
       STORAGE_NAME_TEMPLATE_API_IMAGE_GEN,
-      JSON.stringify(templateAPIImageGen),
+      JSON.stringify(templateAPIImageGen)
     );
     _setTemplateAPIsImageGen(templateAPIImageGen);
   };
   const setTemplateTools = (templateTools: TemplateTools[]) => {
     localStorage.setItem(
       STORAGE_NAME_TEMPLATE_TOOLS,
-      JSON.stringify(templateTools),
+      JSON.stringify(templateTools)
     );
     _setToolsTemplates(templateTools);
   };
@@ -761,7 +762,7 @@ export default function ChatBOX(props: {
             <br />↖{Tr("Click the conor to create a new chat")}
             <br />⚠
             {Tr(
-              "All chat history and settings are stored in the local browser",
+              "All chat history and settings are stored in the local browser"
             )}
             <br />
           </p>
@@ -839,43 +840,7 @@ export default function ChatBOX(props: {
             </>
           )}
         </p>
-        {chatStore.chatgpt_api_web_version < "v1.3.0" && (
-          <p className="p-2 my-2 text-center dark:text-white">
-            <br />
-            {Tr("Warning: current chatStore version")}:{" "}
-            {chatStore.chatgpt_api_web_version} {"< v1.3.0"}
-            <br />
-            v1.3.0
-            引入与旧版不兼容的消息裁切算法。继续使用旧版可能会导致消息裁切过多或过少（表现为失去上下文或输出不完整）。
-            <br />
-            请在左上角创建新会话：）
-          </p>
-        )}
-        {chatStore.chatgpt_api_web_version < "v1.4.0" && (
-          <p className="p-2 my-2 text-center dark:text-white">
-            <br />
-            {Tr("Warning: current chatStore version")}:{" "}
-            {chatStore.chatgpt_api_web_version} {"< v1.4.0"}
-            <br />
-            v1.4.0 增加了更多参数，继续使用旧版可能因参数确实导致未定义的行为
-            <br />
-            请在左上角创建新会话：）
-          </p>
-        )}
-        {chatStore.chatgpt_api_web_version < "v1.6.0" && (
-          <p className="p-2 my-2 text-center dark:text-white">
-            <br />
-            提示：当前会话版本 {chatStore.chatgpt_api_web_version}
-            {Tr("Warning: current chatStore version")}:{" "}
-            {chatStore.chatgpt_api_web_version} {"< v1.6.0"}
-            。
-            <br />
-            v1.6.0 开始保存会话模板时会将 apiKey 和 apiEndpoint
-            设置为空，继续使用旧版可能在保存读取模板时出现问题
-            <br />
-            请在左上角创建新会话：）
-          </p>
-        )}
+        <VersionHint chatStore={chatStore} />
         {showRetry && (
           <p className="text-right p-2 my-2 dark:text-white">
             <button
@@ -1004,7 +969,7 @@ export default function ChatBOX(props: {
                         } else {
                           return content.map((c) => c?.text).join(" ");
                         }
-                      }),
+                      })
                   )
                   .concat([inputMsg])
                   .join(" ");
@@ -1018,7 +983,7 @@ export default function ChatBOX(props: {
                     await navigator.mediaDevices.getUserMedia({
                       audio: true,
                     }),
-                    { audioBitsPerSecond: 64 * 1000 },
+                    { audioBitsPerSecond: 64 * 1000 }
                   );
 
                   // mount mediaRecorder to ref