Merge branch 'Yidadaa:main' into main

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";

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;

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";
@@ -276,7 +276,7 @@ function CheckButton() {
 
   return (
     <IconButton
-      text="检查可用性"
+      text={Locale.Settings.Sync.Config.Modal.Check}
       bordered
       onClick={check}
       icon={
@@ -414,7 +414,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>

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,39 +58,57 @@ 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;
-    // Remembers the initial width each time the mouse is pressed
-    startDragWidth.current = config.sidebarWidth;
-    window.addEventListener("mousemove", handleMouseMove.current);
-    window.addEventListener("mouseup", handleMouseUp.current);
   };
+
+  const onDragStart = (e: MouseEvent) => {
+    // Remembers the initial width each time the mouse is pressed
+    startX.current = e.clientX;
+    startDragWidth.current = config.sidebarWidth;
+    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;
@@ -97,13 +116,13 @@ function useDragSideBar() {
   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>

app/constant.ts

@@ -46,6 +46,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;

app/locales/cn.ts

@@ -189,6 +189,7 @@ const cn = {
       Config: {
         Modal: {
           Title: "配置云同步",
+          Check: "检查可用性",
         },
         SyncType: {
           Title: "同步类型",
@@ -208,6 +209,12 @@ const cn = {
           UserName: "用户名",
           Password: "密码",
         },
+
+        UpStash: {
+          Endpoint: "UpStash Redis REST Url",
+          UserName: "备份名称",
+          Password: "UpStash Redis REST Token",
+        },
       },
 
       LocalState: "本地数据",

app/locales/en.ts

@@ -191,6 +191,7 @@ const en: LocaleType = {
       Config: {
         Modal: {
           Title: "Config Sync",
+          Check: "Check Connection",
         },
         SyncType: {
           Title: "Sync Type",
@@ -211,6 +212,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",

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,
 

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),
+const DEFAULT_SYNC_STATE = {
+  provider: ProviderType.WebDAV,
+  useProxy: true,
+  proxyUrl: corsPath(ApiPath.Cors),
 
-    webdav: {
-      endpoint: "",
-      username: "",
-      password: "",
-    },
-
-    upstash: {
-      endpoint: "",
-      username: "",
-      apiKey: "",
-    },
-
-    lastSyncTime: 0,
-    lastProvider: "",
+  webdav: {
+    endpoint: "",
+    username: "",
+    password: "",
   },
+
+  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;
+    },
   },
 );

app/utils/cloud/upstash.ts

@@ -1,25 +1,87 @@
+import { STORAGE_KEY } from "@/app/constant";
 import { SyncStore } from "@/app/store/sync";
+import { corsFetch } from "../cors";
+import { chunks } from "../format";
 
 export type UpstashConfig = SyncStore["upstash"];
 export type UpStashClient = ReturnType<typeof createUpstashClient>;
 
-export function createUpstashClient(config: UpstashConfig) {
+export function createUpstashClient(store: SyncStore) {
+  const config = store.upstash;
+  const storeKey = config.username.length === 0 ? STORAGE_KEY : config.username;
+  const chunkCountKey = `${storeKey}-chunk-count`;
+  const chunkIndexKey = (i: number) => `${storeKey}-chunk-${i}`;
+
+  const proxyUrl =
+    store.useProxy && store.proxyUrl.length > 0 ? store.proxyUrl : undefined;
+
   return {
     async check() {
-      return true;
+      try {
+        const res = await corsFetch(this.path(`get/${storeKey}`), {
+          method: "GET",
+          headers: this.headers(),
+          proxyUrl,
+        });
+        console.log("[Upstash] check", res.status, res.statusText);
+        return [200].includes(res.status);
+      } catch (e) {
+        console.error("[Upstash] failed to check", e);
+      }
+      return false;
+    },
+
+    async redisGet(key: string) {
+      const res = await corsFetch(this.path(`get/${key}`), {
+        method: "GET",
+        headers: this.headers(),
+        proxyUrl,
+      });
+
+      console.log("[Upstash] get key = ", key, res.status, res.statusText);
+      const resJson = (await res.json()) as { result: string };
+
+      return resJson.result;
+    },
+
+    async redisSet(key: string, value: string) {
+      const res = await corsFetch(this.path(`set/${key}`), {
+        method: "POST",
+        headers: this.headers(),
+        body: value,
+        proxyUrl,
+      });
+
+      console.log("[Upstash] set key = ", key, res.status, res.statusText);
     },
 
     async get() {
-      throw Error("[Sync] not implemented");
+      const chunkCount = Number(await this.redisGet(chunkCountKey));
+      if (!Number.isInteger(chunkCount)) return;
+
+      const chunks = await Promise.all(
+        new Array(chunkCount)
+          .fill(0)
+          .map((_, i) => this.redisGet(chunkIndexKey(i))),
+      );
+      console.log("[Upstash] get full chunks", chunks);
+      return chunks.join("");
     },
 
-    async set() {
-      throw Error("[Sync] not implemented");
+    async set(_: string, value: string) {
+      // upstash limit the max request size which is 1Mb for “Free” and “Pay as you go”
+      // so we need to split the data to chunks
+      let index = 0;
+      for await (const chunk of chunks(value)) {
+        await this.redisSet(chunkIndexKey(index), chunk);
+        index += 1;
+      }
+      await this.redisSet(chunkCountKey, index.toString());
     },
 
     headers() {
       return {
-        Authorization: `Basic ${config.apiKey}`,
+        Authorization: `Bearer ${config.apiKey}`,
       };
     },
     path(path: string) {

app/utils/cloud/webdav.ts

@@ -20,10 +20,8 @@ export function createWebDavClient(store: SyncStore) {
           headers: this.headers(),
           proxyUrl,
         });
-
         console.log("[WebDav] check", res.status, res.statusText);
-
-        return [201, 200, 404].includes(res.status);
+        return [201, 200, 404, 401].includes(res.status);
       } catch (e) {
         console.error("[WebDav] failed to check", e);
       }

app/utils/format.ts

@@ -11,3 +11,18 @@ export function prettyObject(msg: any) {
   }
   return ["```json", msg, "```"].join("\n");
 }
+
+export function* chunks(s: string, maxBytes = 1000 * 1000) {
+  const decoder = new TextDecoder("utf-8");
+  let buf = new TextEncoder().encode(s);
+  while (buf.length) {
+    let i = buf.lastIndexOf(32, maxBytes + 1);
+    // If no space found, try forward search
+    if (i < 0) i = buf.indexOf(32, maxBytes);
+    // If there's no space at all, take all
+    if (i < 0) i = buf.length;
+    // This is a safe cut-off point; never half-way a multi-byte
+    yield decoder.decode(buf.slice(0, i));
+    buf = buf.slice(i + 1); // Skip space (if any)
+  }
+}

app/utils/sync.ts

@@ -69,6 +69,9 @@ const MergeStates: StateMerger = {
     localState.sessions.forEach((s) => (localSessions[s.id] = s));
 
     remoteState.sessions.forEach((remoteSession) => {
+      // skip empty chats
+      if (remoteSession.messages.length === 0) return;
+
       const localSession = localSessions[remoteSession.id];
       if (!localSession) {
         // if remote session is new, just merge it