home.tsx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. "use client";
  2. require("../polyfill");
  3. import { useState, useEffect } from "react";
  4. import styles from "./home.module.scss";
  5. import BotIcon from "../icons/bot.svg";
  6. import LoadingIcon from "../icons/three-dots.svg";
  7. import { getCSSVar, useMobileScreen } from "../utils";
  8. import dynamic from "next/dynamic";
  9. import { Path, SlotID } from "../constant";
  10. import { ErrorBoundary } from "./error";
  11. import { getLang } from "../locales";
  12. import {
  13. HashRouter as Router,
  14. Routes,
  15. Route,
  16. useLocation,
  17. } from "react-router-dom";
  18. import { SideBar } from "./sidebar";
  19. import { useAppConfig } from "../store/config";
  20. import { AuthPage } from "./auth";
  21. import { getClientConfig } from "../config/client";
  22. import { api } from "../client/api";
  23. import { useAccessStore } from "../store";
  24. export function Loading(props: { noLogo?: boolean }) {
  25. return (
  26. <div className={styles["loading-content"] + " no-dark"}>
  27. {!props.noLogo && <BotIcon />}
  28. <LoadingIcon />
  29. </div>
  30. );
  31. }
  32. const Settings = dynamic(async () => (await import("./settings")).Settings, {
  33. loading: () => <Loading noLogo />,
  34. });
  35. const Chat = dynamic(async () => (await import("./chat")).Chat, {
  36. loading: () => <Loading noLogo />,
  37. });
  38. const NewChat = dynamic(async () => (await import("./new-chat")).NewChat, {
  39. loading: () => <Loading noLogo />,
  40. });
  41. const MaskPage = dynamic(async () => (await import("./mask")).MaskPage, {
  42. loading: () => <Loading noLogo />,
  43. });
  44. export function useSwitchTheme() {
  45. const config = useAppConfig();
  46. useEffect(() => {
  47. document.body.classList.remove("light");
  48. document.body.classList.remove("dark");
  49. if (config.theme === "dark") {
  50. document.body.classList.add("dark");
  51. } else if (config.theme === "light") {
  52. document.body.classList.add("light");
  53. }
  54. const metaDescriptionDark = document.querySelector(
  55. 'meta[name="theme-color"][media*="dark"]',
  56. );
  57. const metaDescriptionLight = document.querySelector(
  58. 'meta[name="theme-color"][media*="light"]',
  59. );
  60. if (config.theme === "auto") {
  61. metaDescriptionDark?.setAttribute("content", "#151515");
  62. metaDescriptionLight?.setAttribute("content", "#fafafa");
  63. } else {
  64. const themeColor = getCSSVar("--theme-color");
  65. metaDescriptionDark?.setAttribute("content", themeColor);
  66. metaDescriptionLight?.setAttribute("content", themeColor);
  67. }
  68. }, [config.theme]);
  69. }
  70. const useHasHydrated = () => {
  71. const [hasHydrated, setHasHydrated] = useState<boolean>(false);
  72. useEffect(() => {
  73. setHasHydrated(true);
  74. }, []);
  75. return hasHydrated;
  76. };
  77. const loadAsyncGoogleFont = () => {
  78. const linkEl = document.createElement("link");
  79. const proxyFontUrl = "/google-fonts";
  80. const remoteFontUrl = "https://fonts.googleapis.com";
  81. const googleFontUrl =
  82. getClientConfig()?.buildMode === "export" ? remoteFontUrl : proxyFontUrl;
  83. linkEl.rel = "stylesheet";
  84. linkEl.href =
  85. googleFontUrl + "/css2?family=Noto+Sans:wght@300;400;700;900&display=swap";
  86. document.head.appendChild(linkEl);
  87. };
  88. function Screen() {
  89. const config = useAppConfig();
  90. const location = useLocation();
  91. const isHome = location.pathname === Path.Home;
  92. const isAuth = location.pathname === Path.Auth;
  93. const isMobileScreen = useMobileScreen();
  94. useEffect(() => {
  95. loadAsyncGoogleFont();
  96. }, []);
  97. return (
  98. <div
  99. className={
  100. styles.container +
  101. ` ${
  102. config.tightBorder && !isMobileScreen
  103. ? styles["tight-container"]
  104. : styles.container
  105. } ${getLang() === "ar" ? styles["rtl-screen"] : ""}`
  106. }
  107. >
  108. {isAuth ? (
  109. <>
  110. <AuthPage />
  111. </>
  112. ) : (
  113. <>
  114. <SideBar className={isHome ? styles["sidebar-show"] : ""} />
  115. <div className={styles["window-content"]} id={SlotID.AppBody}>
  116. <Routes>
  117. <Route path={Path.Home} element={<Chat />} />
  118. <Route path={Path.NewChat} element={<NewChat />} />
  119. <Route path={Path.Masks} element={<MaskPage />} />
  120. <Route path={Path.Chat} element={<Chat />} />
  121. <Route path={Path.Settings} element={<Settings />} />
  122. </Routes>
  123. </div>
  124. </>
  125. )}
  126. </div>
  127. );
  128. }
  129. export function useLoadData() {
  130. const config = useAppConfig();
  131. useEffect(() => {
  132. (async () => {
  133. const models = await api.llm.models();
  134. config.mergeModels(models);
  135. })();
  136. // eslint-disable-next-line react-hooks/exhaustive-deps
  137. }, []);
  138. }
  139. export function Home() {
  140. useSwitchTheme();
  141. useLoadData();
  142. useEffect(() => {
  143. console.log("[Config] got config from build time", getClientConfig());
  144. useAccessStore.getState().fetch();
  145. }, []);
  146. if (!useHasHydrated()) {
  147. return <Loading />;
  148. }
  149. return (
  150. <ErrorBoundary>
  151. <Router>
  152. <Screen />
  153. </Router>
  154. </ErrorBoundary>
  155. );
  156. }