feat: add URL parameter configuration import dialog and related functionality

2025-03-25 10:49:10 +08:00
parent 9b32948cfa
commit 667b334dfc
8 changed files with 177 additions and 85 deletions
--- a/src/components/ImportDialog.tsx
+++ b/src/components/ImportDialog.tsx
@@ -0,0 +1,129 @@
+import { Tr } from "@/translate";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { useContext } from "react";
+import { AppChatStoreContext, AppContext } from "@/pages/App";
+import { STORAGE_NAME } from "@/const";
+
+const Item = ({ children }: { children: React.ReactNode }) => (
+  <div className="mt-2">{children}</div>
+);
+
+const ImportDialog = ({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) => {
+  const { handleNewChatStoreWithOldOne } = useContext(AppContext);
+  const { chatStore } = useContext(AppChatStoreContext);
+
+  const params = new URLSearchParams(window.location.search);
+  const api = params.get("api");
+  const key = params.get("key");
+  const sys = params.get("sys");
+  const mode = params.get("mode");
+  const model = params.get("model");
+  const max = params.get("max");
+  const temp = params.get("temp");
+  const dev = params.get("dev");
+  const whisper_api = params.get("whisper-api");
+  const whisper_key = params.get("whisper-key");
+  const tts_api = params.get("tts-api");
+  const tts_key = params.get("tts-key");
+  return (
+    <AlertDialog open={open}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Tr>Import Configuration</Tr>
+          </AlertDialogTitle>
+          <AlertDialogDescription className="message-content">
+            <Tr>There are some configurations in the URL, import them?</Tr>
+            {key && <Item>Key: {key}</Item>}
+            {api && <Item>API: {api}</Item>}
+            {sys && <Item>Sys: {sys}</Item>}
+            {mode && <Item>Mode: {mode}</Item>}
+            {model && <Item>Model: {model}</Item>}
+            {max && <Item>Max: {max}</Item>}
+            {temp && <Item>Temp: {temp}</Item>}
+            {dev && <Item>Dev: {dev}</Item>}
+            {whisper_api && <Item>Whisper API: {whisper_api}</Item>}
+            {whisper_key && <Item>Whisper Key: {whisper_key}</Item>}
+            {tts_api && <div className="mt-2">TTS API: {tts_api}</div>}
+            {tts_key && <div className="mt-2">TTS Key: {tts_key}</div>}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => setOpen(false)}>
+            <Tr>Cancel</Tr>
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={async () => {
+              params.delete("key");
+              params.delete("api");
+              params.delete("sys");
+              params.delete("mode");
+              params.delete("model");
+              params.delete("max");
+              params.delete("temp");
+              params.delete("dev");
+              params.delete("whisper-api");
+              params.delete("whisper-key");
+              params.delete("tts-api");
+              params.delete("tts-key");
+
+              const newChatStore = structuredClone(chatStore);
+              if (key) newChatStore.apiKey = key;
+              if (api) newChatStore.apiEndpoint = api;
+              if (sys) newChatStore.systemMessageContent = sys;
+              if (mode) newChatStore.streamMode = mode === "stream";
+              if (model) newChatStore.model = model;
+              if (max) {
+                try {
+                  newChatStore.maxTokens = parseInt(max);
+                } catch (e) {
+                  console.error(e);
+                }
+              }
+              if (temp) {
+                try {
+                  newChatStore.temperature = parseFloat(temp);
+                } catch (e) {
+                  console.error(e);
+                }
+              }
+              if (dev) newChatStore.develop_mode = dev === "true";
+              if (whisper_api) newChatStore.whisper_api = whisper_api;
+              if (whisper_key) newChatStore.whisper_key = whisper_key;
+              if (tts_api) newChatStore.tts_api = tts_api;
+              if (tts_key) newChatStore.tts_key = tts_key;
+
+              await handleNewChatStoreWithOldOne(newChatStore);
+
+              const newUrl =
+                window.location.pathname +
+                (params.toString() ? `?${params}` : "");
+              window.history.replaceState(null, "", newUrl); // 替换URL不刷新页面
+
+              setOpen(false);
+            }}
+          >
+            <Tr>Import</Tr>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default ImportDialog;