147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
require("../polyfill");
|
|
|
|
import { HashRouter as Router, Routes, Route } from "react-router-dom";
|
|
import { useState, useEffect, useLayoutEffect } from "react";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { Path } from "@/app/constant";
|
|
import { ErrorBoundary } from "@/app/components/error";
|
|
import { getISOLang } from "@/app/locales";
|
|
import { useSwitchTheme } from "@/app/hooks/useSwitchTheme";
|
|
import { AuthPage } from "@/app/components/auth";
|
|
import { getClientConfig } from "@/app/config/client";
|
|
import { useAccessStore, useAppConfig } from "@/app/store";
|
|
import { useLoadData } from "@/app/hooks/useLoadData";
|
|
import Loading from "@/app/components/Loading";
|
|
import Screen from "@/app/components/Screen";
|
|
import { SideBar } from "./Sidebar";
|
|
import GlobalLoading from "@/app/components/GlobalLoading";
|
|
import { MOBILE_MAX_WIDTH } from "../hooks/useListenWinResize";
|
|
|
|
const Settings = dynamic(
|
|
async () => await import("@/app/containers/Settings"),
|
|
{
|
|
loading: () => <Loading noLogo />,
|
|
},
|
|
);
|
|
|
|
const Chat = dynamic(async () => await import("@/app/containers/Chat"), {
|
|
loading: () => <Loading noLogo />,
|
|
});
|
|
|
|
const NewChat = dynamic(
|
|
async () => (await import("@/app/components/new-chat")).NewChat,
|
|
{
|
|
loading: () => <Loading noLogo />,
|
|
},
|
|
);
|
|
|
|
const MaskPage = dynamic(
|
|
async () => (await import("@/app/components/mask")).MaskPage,
|
|
{
|
|
loading: () => <Loading noLogo />,
|
|
},
|
|
);
|
|
|
|
function useHtmlLang() {
|
|
useEffect(() => {
|
|
const lang = getISOLang();
|
|
const htmlLang = document.documentElement.lang;
|
|
|
|
if (lang !== htmlLang) {
|
|
document.documentElement.lang = lang;
|
|
}
|
|
}, []);
|
|
}
|
|
|
|
const useHasHydrated = () => {
|
|
const [hasHydrated, setHasHydrated] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
setHasHydrated(true);
|
|
}, []);
|
|
|
|
return hasHydrated;
|
|
};
|
|
|
|
const loadAsyncGoogleFont = () => {
|
|
const linkEl = document.createElement("link");
|
|
const proxyFontUrl = "/google-fonts";
|
|
const remoteFontUrl = "https://fonts.googleapis.com";
|
|
const googleFontUrl =
|
|
getClientConfig()?.buildMode === "export" ? remoteFontUrl : proxyFontUrl;
|
|
linkEl.rel = "stylesheet";
|
|
linkEl.href =
|
|
googleFontUrl +
|
|
"/css2?family=" +
|
|
encodeURIComponent("Noto Sans:wght@300;400;700;900") +
|
|
"&display=swap";
|
|
document.head.appendChild(linkEl);
|
|
};
|
|
|
|
export default function Home() {
|
|
useSwitchTheme();
|
|
useLoadData();
|
|
useHtmlLang();
|
|
const config = useAppConfig();
|
|
|
|
useEffect(() => {
|
|
console.log("[Config] got config from build time", getClientConfig());
|
|
useAccessStore.getState().fetch();
|
|
}, []);
|
|
|
|
useLayoutEffect(() => {
|
|
loadAsyncGoogleFont();
|
|
config.update(
|
|
(config) =>
|
|
(config.isMobileScreen = window.innerWidth <= MOBILE_MAX_WIDTH),
|
|
);
|
|
}, []);
|
|
|
|
if (!useHasHydrated()) {
|
|
return <GlobalLoading />;
|
|
}
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<Router>
|
|
<Screen noAuth={<AuthPage />} sidebar={<SideBar />}>
|
|
<ErrorBoundary>
|
|
<Routes>
|
|
<Route path={Path.Home} element={<Chat />} />
|
|
<Route
|
|
path={Path.NewChat}
|
|
element={
|
|
<NewChat
|
|
className={`
|
|
md:w-[100%] px-1
|
|
${config.theme === "dark" ? "" : "bg-gray-50"}
|
|
${config.isMobileScreen ? "pb-chat-panel-mobile" : ""}
|
|
`}
|
|
/>
|
|
}
|
|
/>
|
|
<Route
|
|
path={Path.Masks}
|
|
element={
|
|
<MaskPage
|
|
className={`
|
|
md:w-[100%]
|
|
${config.theme === "dark" ? "" : "bg-gray-50"}
|
|
${config.isMobileScreen ? "pb-chat-panel-mobile" : ""}
|
|
`}
|
|
/>
|
|
}
|
|
/>
|
|
<Route path={Path.Chat} element={<Chat />} />
|
|
<Route path={Path.Settings} element={<Settings />} />
|
|
</Routes>
|
|
</ErrorBoundary>
|
|
</Screen>
|
|
</Router>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|