|
|
|
@ -2,7 +2,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
require("../polyfill");
|
|
|
|
require("../polyfill");
|
|
|
|
|
|
|
|
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
import {
|
|
|
|
|
|
|
|
useState,
|
|
|
|
|
|
|
|
useEffect,
|
|
|
|
|
|
|
|
useRef,
|
|
|
|
|
|
|
|
useCallback,
|
|
|
|
|
|
|
|
MouseEventHandler,
|
|
|
|
|
|
|
|
} from "react";
|
|
|
|
|
|
|
|
|
|
|
|
import { IconButton } from "./button";
|
|
|
|
import { IconButton } from "./button";
|
|
|
|
import styles from "./home.module.scss";
|
|
|
|
import styles from "./home.module.scss";
|
|
|
|
@ -24,6 +30,7 @@ import { Chat } from "./chat";
|
|
|
|
import dynamic from "next/dynamic";
|
|
|
|
import dynamic from "next/dynamic";
|
|
|
|
import { REPO_URL } from "../constant";
|
|
|
|
import { REPO_URL } from "../constant";
|
|
|
|
import { ErrorBoundary } from "./error";
|
|
|
|
import { ErrorBoundary } from "./error";
|
|
|
|
|
|
|
|
import { useDebounce } from "use-debounce";
|
|
|
|
|
|
|
|
|
|
|
|
export function Loading(props: { noLogo?: boolean }) {
|
|
|
|
export function Loading(props: { noLogo?: boolean }) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
@ -75,6 +82,49 @@ function useSwitchTheme() {
|
|
|
|
}, [config.theme]);
|
|
|
|
}, [config.theme]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function useDragSideBar() {
|
|
|
|
|
|
|
|
const limit = (x: number) => Math.min(500, Math.max(220, x));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const chatStore = useChatStore();
|
|
|
|
|
|
|
|
const startX = useRef(0);
|
|
|
|
|
|
|
|
const startDragWidth = useRef(chatStore.config.sidebarWidth ?? 300);
|
|
|
|
|
|
|
|
const lastUpdateTime = useRef(Date.now());
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleMouseMove = useRef((e: MouseEvent) => {
|
|
|
|
|
|
|
|
if (Date.now() < lastUpdateTime.current + 100) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
lastUpdateTime.current = Date.now();
|
|
|
|
|
|
|
|
const d = e.clientX - startX.current;
|
|
|
|
|
|
|
|
const nextWidth = limit(startDragWidth.current + d);
|
|
|
|
|
|
|
|
chatStore.updateConfig((config) => (config.sidebarWidth = nextWidth));
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleMouseUp = useRef(() => {
|
|
|
|
|
|
|
|
startDragWidth.current = chatStore.config.sidebarWidth ?? 300;
|
|
|
|
|
|
|
|
window.removeEventListener("mousemove", handleMouseMove.current);
|
|
|
|
|
|
|
|
window.removeEventListener("mouseup", handleMouseUp.current);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onDragMouseDown = (e: MouseEvent) => {
|
|
|
|
|
|
|
|
startX.current = e.clientX;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener("mousemove", handleMouseMove.current);
|
|
|
|
|
|
|
|
window.addEventListener("mouseup", handleMouseUp.current);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
|
|
"--sidebar-width",
|
|
|
|
|
|
|
|
`${limit(chatStore.config.sidebarWidth ?? 300)}px`,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}, [chatStore.config.sidebarWidth]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
onDragMouseDown,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const useHasHydrated = () => {
|
|
|
|
const useHasHydrated = () => {
|
|
|
|
const [hasHydrated, setHasHydrated] = useState<boolean>(false);
|
|
|
|
const [hasHydrated, setHasHydrated] = useState<boolean>(false);
|
|
|
|
|
|
|
|
|
|
|
|
@ -101,6 +151,9 @@ function _Home() {
|
|
|
|
const [openSettings, setOpenSettings] = useState(false);
|
|
|
|
const [openSettings, setOpenSettings] = useState(false);
|
|
|
|
const config = useChatStore((state) => state.config);
|
|
|
|
const config = useChatStore((state) => state.config);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// drag side bar
|
|
|
|
|
|
|
|
const { onDragMouseDown } = useDragSideBar();
|
|
|
|
|
|
|
|
|
|
|
|
useSwitchTheme();
|
|
|
|
useSwitchTheme();
|
|
|
|
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
if (loading) {
|
|
|
|
@ -174,6 +227,11 @@ function _Home() {
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className={styles["sidebar-drag"]}
|
|
|
|
|
|
|
|
onMouseDown={(e) => onDragMouseDown(e as any)}
|
|
|
|
|
|
|
|
></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className={styles["window-content"]}>
|
|
|
|
<div className={styles["window-content"]}>
|
|
|
|
|
Yifei Zhang
2 years ago
committed by
GitHub
