home.tsx 5.2 KB

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