home.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use client";
  2. require("../polyfill");
  3. import { useState, useEffect, StyleHTMLAttributes } 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 { Chat } from "./chat";
  9. import dynamic from "next/dynamic";
  10. import { Path } from "../constant";
  11. import { ErrorBoundary } from "./error";
  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. export function Loading(props: { noLogo?: boolean }) {
  21. return (
  22. <div className={styles["loading-content"] + " no-dark"}>
  23. {!props.noLogo && <BotIcon />}
  24. <LoadingIcon />
  25. </div>
  26. );
  27. }
  28. const Settings = dynamic(async () => (await import("./settings")).Settings, {
  29. loading: () => <Loading noLogo />,
  30. });
  31. export function useSwitchTheme() {
  32. const config = useAppConfig();
  33. useEffect(() => {
  34. document.body.classList.remove("light");
  35. document.body.classList.remove("dark");
  36. if (config.theme === "dark") {
  37. document.body.classList.add("dark");
  38. } else if (config.theme === "light") {
  39. document.body.classList.add("light");
  40. }
  41. const metaDescriptionDark = document.querySelector(
  42. 'meta[name="theme-color"][media]',
  43. );
  44. const metaDescriptionLight = document.querySelector(
  45. 'meta[name="theme-color"]:not([media])',
  46. );
  47. if (config.theme === "auto") {
  48. metaDescriptionDark?.setAttribute("content", "#151515");
  49. metaDescriptionLight?.setAttribute("content", "#fafafa");
  50. } else {
  51. const themeColor = getCSSVar("--themeColor");
  52. metaDescriptionDark?.setAttribute("content", themeColor);
  53. metaDescriptionLight?.setAttribute("content", themeColor);
  54. }
  55. }, [config.theme]);
  56. }
  57. const useHasHydrated = () => {
  58. const [hasHydrated, setHasHydrated] = useState<boolean>(false);
  59. useEffect(() => {
  60. setHasHydrated(true);
  61. }, []);
  62. return hasHydrated;
  63. };
  64. function WideScreen() {
  65. const config = useAppConfig();
  66. return (
  67. <div
  68. className={`${
  69. config.tightBorder ? styles["tight-container"] : styles.container
  70. }`}
  71. >
  72. <SideBar />
  73. <div className={styles["window-content"]}>
  74. <Routes>
  75. <Route path={Path.Home} element={<Chat />} />
  76. <Route path={Path.Chat} element={<Chat />} />
  77. <Route path={Path.Settings} element={<Settings />} />
  78. </Routes>
  79. </div>
  80. </div>
  81. );
  82. }
  83. function MobileScreen() {
  84. const location = useLocation();
  85. const isHome = location.pathname === Path.Home;
  86. return (
  87. <div className={styles.container}>
  88. <SideBar className={isHome ? styles["sidebar-show"] : ""} />
  89. <div className={styles["window-content"]}>
  90. <Routes>
  91. <Route path={Path.Home} element={null} />
  92. <Route path={Path.Chat} element={<Chat />} />
  93. <Route path={Path.Settings} element={<Settings />} />
  94. </Routes>
  95. </div>
  96. </div>
  97. );
  98. }
  99. export function Home() {
  100. const isMobileScreen = useMobileScreen();
  101. useSwitchTheme();
  102. if (!useHasHydrated()) {
  103. return <Loading />;
  104. }
  105. return (
  106. <ErrorBoundary>
  107. <Router>{isMobileScreen ? <MobileScreen /> : <WideScreen />}</Router>
  108. </ErrorBoundary>
  109. );
  110. }