home.tsx 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. "use client";
  2. require("../polyfill");
  3. import { useState, useEffect, useRef } from "react";
  4. import { IconButton } from "./button";
  5. import styles from "./home.module.scss";
  6. import SettingsIcon from "../icons/settings.svg";
  7. import GithubIcon from "../icons/github.svg";
  8. import ChatGptIcon from "../icons/chatgpt.svg";
  9. import BotIcon from "../icons/bot.svg";
  10. import AddIcon from "../icons/add.svg";
  11. import LoadingIcon from "../icons/three-dots.svg";
  12. import CloseIcon from "../icons/close.svg";
  13. import { useChatStore } from "../store";
  14. import { isMobileScreen } from "../utils";
  15. import Locale from "../locales";
  16. import { Chat } from "./chat";
  17. import dynamic from "next/dynamic";
  18. import { REPO_URL } from "../constant";
  19. import { ErrorBoundary } from "./error";
  20. export function Loading(props: { noLogo?: boolean }) {
  21. return (
  22. <div className={styles["loading-content"]}>
  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. const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
  32. loading: () => <Loading noLogo />,
  33. });
  34. function useSwitchTheme() {
  35. const config = useChatStore((state) => state.config);
  36. useEffect(() => {
  37. document.body.classList.remove("light");
  38. document.body.classList.remove("dark");
  39. if (config.theme === "dark") {
  40. document.body.classList.add("dark");
  41. } else if (config.theme === "light") {
  42. document.body.classList.add("light");
  43. }
  44. const metaDescriptionDark = document.querySelector(
  45. 'meta[name="theme-color"][media]',
  46. );
  47. const metaDescriptionLight = document.querySelector(
  48. 'meta[name="theme-color"]:not([media])',
  49. );
  50. if (config.theme === "auto") {
  51. metaDescriptionDark?.setAttribute("content", "#151515");
  52. metaDescriptionLight?.setAttribute("content", "#fafafa");
  53. } else {
  54. const themeColor = getComputedStyle(document.body)
  55. .getPropertyValue("--theme-color")
  56. .trim();
  57. metaDescriptionDark?.setAttribute("content", themeColor);
  58. metaDescriptionLight?.setAttribute("content", themeColor);
  59. }
  60. }, [config.theme]);
  61. }
  62. function useDragSideBar() {
  63. const limit = (x: number) => Math.min(500, Math.max(220, x));
  64. const chatStore = useChatStore();
  65. const startX = useRef(0);
  66. const startDragWidth = useRef(chatStore.config.sidebarWidth ?? 300);
  67. const lastUpdateTime = useRef(Date.now());
  68. const handleMouseMove = useRef((e: MouseEvent) => {
  69. if (Date.now() < lastUpdateTime.current + 100) {
  70. return;
  71. }
  72. lastUpdateTime.current = Date.now();
  73. const d = e.clientX - startX.current;
  74. const nextWidth = limit(startDragWidth.current + d);
  75. chatStore.updateConfig((config) => (config.sidebarWidth = nextWidth));
  76. });
  77. const handleMouseUp = useRef(() => {
  78. startDragWidth.current = chatStore.config.sidebarWidth ?? 300;
  79. window.removeEventListener("mousemove", handleMouseMove.current);
  80. window.removeEventListener("mouseup", handleMouseUp.current);
  81. });
  82. const onDragMouseDown = (e: MouseEvent) => {
  83. startX.current = e.clientX;
  84. window.addEventListener("mousemove", handleMouseMove.current);
  85. window.addEventListener("mouseup", handleMouseUp.current);
  86. };
  87. useEffect(() => {
  88. if (isMobileScreen()) {
  89. return;
  90. }
  91. document.documentElement.style.setProperty(
  92. "--sidebar-width",
  93. `${limit(chatStore.config.sidebarWidth ?? 300)}px`,
  94. );
  95. }, [chatStore.config.sidebarWidth]);
  96. return {
  97. onDragMouseDown,
  98. };
  99. }
  100. const useHasHydrated = () => {
  101. const [hasHydrated, setHasHydrated] = useState<boolean>(false);
  102. useEffect(() => {
  103. setHasHydrated(true);
  104. }, []);
  105. return hasHydrated;
  106. };
  107. function _Home() {
  108. const [createNewSession, currentIndex, removeSession] = useChatStore(
  109. (state) => [
  110. state.newSession,
  111. state.currentSessionIndex,
  112. state.removeSession,
  113. ],
  114. );
  115. const chatStore = useChatStore();
  116. const loading = !useHasHydrated();
  117. const [showSideBar, setShowSideBar] = useState(true);
  118. // setting
  119. const [openSettings, setOpenSettings] = useState(false);
  120. const config = useChatStore((state) => state.config);
  121. // drag side bar
  122. const { onDragMouseDown } = useDragSideBar();
  123. useSwitchTheme();
  124. if (loading) {
  125. return <Loading />;
  126. }
  127. return (
  128. <div
  129. className={`${
  130. config.tightBorder && !isMobileScreen()
  131. ? styles["tight-container"]
  132. : styles.container
  133. }`}
  134. >
  135. <div
  136. className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
  137. >
  138. <div className={styles["sidebar-header"]}>
  139. <div className={styles["sidebar-title"]}>ChatGPT Next</div>
  140. <div className={styles["sidebar-sub-title"]}>
  141. Build your own AI assistant.
  142. </div>
  143. <div className={styles["sidebar-logo"]}>
  144. <ChatGptIcon />
  145. </div>
  146. </div>
  147. <div
  148. className={styles["sidebar-body"]}
  149. onClick={() => {
  150. setOpenSettings(false);
  151. setShowSideBar(false);
  152. }}
  153. >
  154. <ChatList />
  155. </div>
  156. <div className={styles["sidebar-tail"]}>
  157. <div className={styles["sidebar-actions"]}>
  158. <div className={styles["sidebar-action"] + " " + styles.mobile}>
  159. <IconButton
  160. icon={<CloseIcon />}
  161. onClick={chatStore.deleteSession}
  162. />
  163. </div>
  164. <div className={styles["sidebar-action"]}>
  165. <IconButton
  166. icon={<SettingsIcon />}
  167. onClick={() => {
  168. setOpenSettings(true);
  169. setShowSideBar(false);
  170. }}
  171. shadow
  172. />
  173. </div>
  174. <div className={styles["sidebar-action"]}>
  175. <a href={REPO_URL} target="_blank">
  176. <IconButton icon={<GithubIcon />} shadow />
  177. </a>
  178. </div>
  179. </div>
  180. <div>
  181. <IconButton
  182. icon={<AddIcon />}
  183. text={Locale.Home.NewChat}
  184. onClick={() => {
  185. createNewSession();
  186. setShowSideBar(false);
  187. }}
  188. shadow
  189. />
  190. </div>
  191. </div>
  192. <div
  193. className={styles["sidebar-drag"]}
  194. onMouseDown={(e) => onDragMouseDown(e as any)}
  195. ></div>
  196. </div>
  197. <div className={styles["window-content"]}>
  198. {openSettings ? (
  199. <Settings
  200. closeSettings={() => {
  201. setOpenSettings(false);
  202. setShowSideBar(true);
  203. }}
  204. />
  205. ) : (
  206. <Chat
  207. key="chat"
  208. showSideBar={() => setShowSideBar(true)}
  209. sideBarShowing={showSideBar}
  210. />
  211. )}
  212. </div>
  213. </div>
  214. );
  215. }
  216. export function Home() {
  217. return (
  218. <ErrorBoundary>
  219. <_Home></_Home>
  220. </ErrorBoundary>
  221. );
  222. }