fix from owner (#3)

* feat: close ChatGPTNextWeb#2848 click drag icon to toggle sidebar width * fix: ChatGPTNextWeb#2817 min-height for landscape orientation on mobile phone * fix: ChatGPTNextWeb#2820 try to fix 520 error code * fixup * feat: add upstash redis cloud sync * feat: auto fill upstash backup name * Update constant.ts * Update tauri.conf.json * Update README_CN.md --------- Co-authored-by: Yidadaa <yidadaa@qq.com>
H0llyW00dzZ · Sep 19, 2023 · a310b7b · a310b7b
1 parent 372ea0f
commit a310b7b
Show file tree

Hide file tree

Showing 15 changed files with 237 additions and 68 deletions.
diff --git a/README_CN.md b/README_CN.md
@@ -114,7 +114,7 @@ OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填
 OPENAI_API_KEY=<your api key here>
 
 # 中国大陆用户，可以使用本项目自带的代理进行开发，你也可以自由选择其他代理地址
-BASE_URL=https://chatgpt2.nextweb.fun/api/proxy
+BASE_URL=https://nb.nextweb.fun/api/proxy
 ```
 
 ### 本地开发

diff --git a/app/api/cors/[...path]/route.ts b/app/api/cors/[...path]/route.ts
@@ -26,13 +26,18 @@ async function handle(
     duplex: "half",
   };
 
-  console.log("[Any Proxy]", targetUrl);
+  const fetchResult = await fetch(targetUrl, fetchOptions);
 
-  const fetchResult = fetch(targetUrl, fetchOptions);
+  console.log("[Any Proxy]", targetUrl, {
+    status: fetchResult.status,
+    statusText: fetchResult.statusText,
+  });
 
   return fetchResult;
 }
 
 export const POST = handle;
+export const GET = handle;
+export const OPTIONS = handle;
 
-export const runtime = "edge";
+export const runtime = "nodejs";
diff --git a/app/components/home.module.scss b/app/components/home.module.scss
@@ -6,7 +6,7 @@
   color: var(--black);
   background-color: var(--white);
   min-width: 600px;
-  min-height: 480px;
+  min-height: 370px;
   max-width: 1200px;
 
   display: flex;

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
@@ -50,7 +50,7 @@ import Locale, {
 } from "../locales";
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
-import { Path, RELEASE_URL, UPDATE_URL } from "../constant";
+import { Path, RELEASE_URL, STORAGE_KEY, UPDATE_URL } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
 import { InputRange } from "./input-range";
@@ -275,7 +275,7 @@ function CheckButton() {
 
   return (
     <IconButton
-      text="检查可用性"
+      text={Locale.Settings.Sync.Config.Modal.Check}
       bordered
       onClick={check}
       icon={
@@ -413,7 +413,42 @@ function SyncConfigModal(props: { onClose?: () => void }) {
 
         {syncStore.provider === ProviderType.UpStash && (
           <List>
-            <ListItem title={Locale.WIP}></ListItem>
+            <ListItem title={Locale.Settings.Sync.Config.UpStash.Endpoint}>
+              <input
+                type="text"
+                value={syncStore.upstash.endpoint}
+                onChange={(e) => {
+                  syncStore.update(
+                    (config) =>
+                      (config.upstash.endpoint = e.currentTarget.value),
+                  );
+                }}
+              ></input>
+            </ListItem>
+
+            <ListItem title={Locale.Settings.Sync.Config.UpStash.UserName}>
+              <input
+                type="text"
+                value={syncStore.upstash.username}
+                placeholder={STORAGE_KEY}
+                onChange={(e) => {
+                  syncStore.update(
+                    (config) =>
+                      (config.upstash.username = e.currentTarget.value),
+                  );
+                }}
+              ></input>
+            </ListItem>
+            <ListItem title={Locale.Settings.Sync.Config.UpStash.Password}>
+              <PasswordInput
+                value={syncStore.upstash.apiKey}
+                onChange={(e) => {
+                  syncStore.update(
+                    (config) => (config.upstash.apiKey = e.currentTarget.value),
+                  );
+                }}
+              ></PasswordInput>
+            </ListItem>
           </List>
         )}
       </Modal>

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
@@ -17,6 +17,7 @@ import Locale from "../locales";
 import { useAppConfig, useChatStore } from "../store";
 
 import {
+  DEFAULT_SIDEBAR_WIDTH,
   MAX_SIDEBAR_WIDTH,
   MIN_SIDEBAR_WIDTH,
   NARROW_SIDEBAR_WIDTH,
@@ -57,53 +58,71 @@ function useDragSideBar() {
 
   const config = useAppConfig();
   const startX = useRef(0);
-  const startDragWidth = useRef(config.sidebarWidth ?? 300);
+  const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
   const lastUpdateTime = useRef(Date.now());
 
-  const handleMouseMove = useRef((e: MouseEvent) => {
-    if (Date.now() < lastUpdateTime.current + 50) {
-      return;
-    }
-    lastUpdateTime.current = Date.now();
-    const d = e.clientX - startX.current;
-    const nextWidth = limit(startDragWidth.current + d);
+  const toggleSideBar = () => {
     config.update((config) => {
-      if (nextWidth < MIN_SIDEBAR_WIDTH) {
-        config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
+      if (config.sidebarWidth < MIN_SIDEBAR_WIDTH) {
+        config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
       } else {
-        config.sidebarWidth = nextWidth;
+        config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
       }
     });
-  });
-
-  const handleMouseUp = useRef(() => {
-    // In useRef the data is non-responsive, so `config.sidebarWidth` can't get the dynamic sidebarWidth
-    // startDragWidth.current = config.sidebarWidth ?? 300;
-    window.removeEventListener("mousemove", handleMouseMove.current);
-    window.removeEventListener("mouseup", handleMouseUp.current);
-  });
+  };
 
-  const onDragMouseDown = (e: MouseEvent) => {
-    startX.current = e.clientX;
+  const onDragStart = (e: MouseEvent) => {
     // Remembers the initial width each time the mouse is pressed
+    startX.current = e.clientX;
     startDragWidth.current = config.sidebarWidth;
-    window.addEventListener("mousemove", handleMouseMove.current);
-    window.addEventListener("mouseup", handleMouseUp.current);
+    const dragStartTime = Date.now();
+
+    const handleDragMove = (e: MouseEvent) => {
+      if (Date.now() < lastUpdateTime.current + 20) {
+        return;
+      }
+      lastUpdateTime.current = Date.now();
+      const d = e.clientX - startX.current;
+      const nextWidth = limit(startDragWidth.current + d);
+      config.update((config) => {
+        if (nextWidth < MIN_SIDEBAR_WIDTH) {
+          config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
+        } else {
+          config.sidebarWidth = nextWidth;
+        }
+      });
+    };
+
+    const handleDragEnd = () => {
+      // In useRef the data is non-responsive, so `config.sidebarWidth` can't get the dynamic sidebarWidth
+      window.removeEventListener("pointermove", handleDragMove);
+      window.removeEventListener("pointerup", handleDragEnd);
+
+      // if user click the drag icon, should toggle the sidebar
+      const shouldFireClick = Date.now() - dragStartTime < 300;
+      if (shouldFireClick) {
+        toggleSideBar();
+      }
+    };
+
+    window.addEventListener("pointermove", handleDragMove);
+    window.addEventListener("pointerup", handleDragEnd);
   };
+
   const isMobileScreen = useMobileScreen();
   const shouldNarrow =
     !isMobileScreen && config.sidebarWidth < MIN_SIDEBAR_WIDTH;
 
   useEffect(() => {
     const barWidth = shouldNarrow
       ? NARROW_SIDEBAR_WIDTH
-      : limit(config.sidebarWidth ?? 300);
+      : limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
     const sideBarWidth = isMobileScreen ? "100vw" : `${barWidth}px`;
     document.documentElement.style.setProperty("--sidebar-width", sideBarWidth);
   }, [config.sidebarWidth, isMobileScreen, shouldNarrow]);
 
   return {
-    onDragMouseDown,
+    onDragStart,
     shouldNarrow,
   };
 }
@@ -112,7 +131,7 @@ export function SideBar(props: { className?: string }) {
   const chatStore = useChatStore();
 
   // drag side bar
-  const { onDragMouseDown, shouldNarrow } = useDragSideBar();
+  const { onDragStart, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
   const config = useAppConfig();
 
@@ -206,7 +225,7 @@ export function SideBar(props: { className?: string }) {
 
       <div
         className={styles["sidebar-drag"]}
-        onMouseDown={(e) => onDragMouseDown(e as any)}
+        onPointerDown={(e) => onDragStart(e as any)}
       >
         <DragIcon />
       </div>

diff --git a/app/constant.ts b/app/constant.ts
@@ -8,7 +8,7 @@ export const FETCH_COMMIT_URL = `https://api.github.com/repos/${OWNER}/${REPO}/c
 export const FETCH_TAG_URL = `https://api.github.com/repos/${OWNER}/${REPO}/tags?per_page=1`;
 export const RUNTIME_CONFIG_DOM = "danger-runtime-config";
 
-export const DEFAULT_CORS_HOST = "https://chatgpt2.nextweb.fun";
+export const DEFAULT_CORS_HOST = "https://nb.nextweb.fun";
 export const DEFAULT_API_HOST = `${DEFAULT_CORS_HOST}/api/proxy`;
 
 export enum Path {
@@ -43,6 +43,7 @@ export enum StoreKey {
   Sync = "sync",
 }
 
+export const DEFAULT_SIDEBAR_WIDTH = 300;
 export const MAX_SIDEBAR_WIDTH = 500;
 export const MIN_SIDEBAR_WIDTH = 230;
 export const NARROW_SIDEBAR_WIDTH = 100;

diff --git a/app/locales/cn.ts b/app/locales/cn.ts
@@ -187,6 +187,7 @@ const cn = {
       Config: {
         Modal: {
           Title: "配置云同步",
+          Check: "检查可用性",
         },
         SyncType: {
           Title: "同步类型",
@@ -206,6 +207,12 @@ const cn = {
           UserName: "用户名",
           Password: "密码",
         },
+
+        UpStash: {
+          Endpoint: "UpStash Redis REST Url",
+          UserName: "备份名称",
+          Password: "UpStash Redis REST Token",
+        },
       },
 
       LocalState: "本地数据",

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -189,6 +189,7 @@ const en: LocaleType = {
       Config: {
         Modal: {
           Title: "Config Sync",
+          Check: "Check Connection",
         },
         SyncType: {
           Title: "Sync Type",
@@ -209,6 +210,12 @@ const en: LocaleType = {
           UserName: "User Name",
           Password: "Password",
         },
+
+        UpStash: {
+          Endpoint: "UpStash Redis REST Url",
+          UserName: "Backup Name",
+          Password: "UpStash Redis REST Token",
+        },
       },
 
       LocalState: "Local Data",

diff --git a/app/store/config.ts b/app/store/config.ts
@@ -1,6 +1,11 @@
 import { LLMModel } from "../client/api";
 import { getClientConfig } from "../config/client";
-import { DEFAULT_INPUT_TEMPLATE, DEFAULT_MODELS, StoreKey } from "../constant";
+import {
+  DEFAULT_INPUT_TEMPLATE,
+  DEFAULT_MODELS,
+  DEFAULT_SIDEBAR_WIDTH,
+  StoreKey,
+} from "../constant";
 import { createPersistStore } from "../utils/store";
 
 export type ModelType = (typeof DEFAULT_MODELS)[number]["name"];
@@ -29,7 +34,7 @@ export const DEFAULT_CONFIG = {
   tightBorder: !!getClientConfig()?.isApp,
   sendPreviewBubble: true,
   enableAutoGenerateTitle: true,
-  sidebarWidth: 300,
+  sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
 
   disablePromptHint: false,
 

diff --git a/app/store/sync.ts b/app/store/sync.ts
@@ -1,5 +1,5 @@
 import { Updater } from "../typing";
-import { ApiPath, StoreKey } from "../constant";
+import { ApiPath, STORAGE_KEY, StoreKey } from "../constant";
 import { createPersistStore } from "../utils/store";
 import {
   AppState,
@@ -22,27 +22,29 @@ export interface WebDavConfig {
 
 export type SyncStore = GetStoreState<typeof useSyncStore>;
 
-export const useSyncStore = createPersistStore(
-  {
-    provider: ProviderType.WebDAV,
-    useProxy: true,
-    proxyUrl: corsPath(ApiPath.Cors),
-
-    webdav: {
-      endpoint: "",
-      username: "",
-      password: "",
-    },
+const DEFAULT_SYNC_STATE = {
+  provider: ProviderType.WebDAV,
+  useProxy: true,
+  proxyUrl: corsPath(ApiPath.Cors),
 
-    upstash: {
-      endpoint: "",
-      username: "",
-      apiKey: "",
-    },
+  webdav: {
+    endpoint: "",
+    username: "",
+    password: "",
+  },
 
-    lastSyncTime: 0,
-    lastProvider: "",
+  upstash: {
+    endpoint: "",
+    username: STORAGE_KEY,
+    apiKey: "",
   },
+
+  lastSyncTime: 0,
+  lastProvider: "",
+};
+
+export const useSyncStore = createPersistStore(
+  DEFAULT_SYNC_STATE,
   (set, get) => ({
     coundSync() {
       const config = get()[get().provider];
@@ -108,6 +110,16 @@ export const useSyncStore = createPersistStore(
   }),
   {
     name: StoreKey.Sync,
-    version: 1,
+    version: 1.1,
+
+    migrate(persistedState, version) {
+      const newState = persistedState as typeof DEFAULT_SYNC_STATE;
+
+      if (version < 1.1) {
+        newState.upstash.username = STORAGE_KEY;
+      }
+
+      return newState as any;
+    },
   },
 );