home.tsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701
  1. "use client";
  2. import { useState, useRef, useEffect, useLayoutEffect } from "react";
  3. import { useDebouncedCallback } from "use-debounce";
  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 SendWhiteIcon from "../icons/send-white.svg";
  10. import BrainIcon from "../icons/brain.svg";
  11. import ExportIcon from "../icons/export.svg";
  12. import BotIcon from "../icons/bot.svg";
  13. import AddIcon from "../icons/add.svg";
  14. import DeleteIcon from "../icons/delete.svg";
  15. import LoadingIcon from "../icons/three-dots.svg";
  16. import MenuIcon from "../icons/menu.svg";
  17. import CloseIcon from "../icons/close.svg";
  18. import CopyIcon from "../icons/copy.svg";
  19. import DownloadIcon from "../icons/download.svg";
  20. import { Message, SubmitKey, useChatStore, ChatSession } from "../store";
  21. import { showModal, showToast } from "./ui-lib";
  22. import { copyToClipboard, downloadAs, isIOS, selectOrCopy } from "../utils";
  23. import Locale from "../locales";
  24. import dynamic from "next/dynamic";
  25. import { REPO_URL } from "../constant";
  26. import { ControllerPool } from "../requests";
  27. import { Prompt, usePromptStore } from "../store/prompt";
  28. export function Loading(props: { noLogo?: boolean }) {
  29. return (
  30. <div className={styles["loading-content"]}>
  31. {!props.noLogo && <BotIcon />}
  32. <LoadingIcon />
  33. </div>
  34. );
  35. }
  36. const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  37. loading: () => <LoadingIcon />,
  38. });
  39. const Settings = dynamic(async () => (await import("./settings")).Settings, {
  40. loading: () => <Loading noLogo />,
  41. });
  42. const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
  43. loading: () => <LoadingIcon />,
  44. });
  45. export function Avatar(props: { role: Message["role"] }) {
  46. const config = useChatStore((state) => state.config);
  47. if (props.role === "assistant") {
  48. return <BotIcon className={styles["user-avtar"]} />;
  49. }
  50. return (
  51. <div className={styles["user-avtar"]}>
  52. <Emoji unified={config.avatar} size={18} />
  53. </div>
  54. );
  55. }
  56. export function ChatItem(props: {
  57. onClick?: () => void;
  58. onDelete?: () => void;
  59. title: string;
  60. count: number;
  61. time: string;
  62. selected: boolean;
  63. }) {
  64. return (
  65. <div
  66. className={`${styles["chat-item"]} ${
  67. props.selected && styles["chat-item-selected"]
  68. }`}
  69. onClick={props.onClick}
  70. >
  71. <div className={styles["chat-item-title"]}>{props.title}</div>
  72. <div className={styles["chat-item-info"]}>
  73. <div className={styles["chat-item-count"]}>
  74. {Locale.ChatItem.ChatItemCount(props.count)}
  75. </div>
  76. <div className={styles["chat-item-date"]}>{props.time}</div>
  77. </div>
  78. <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
  79. <DeleteIcon />
  80. </div>
  81. </div>
  82. );
  83. }
  84. export function ChatList() {
  85. const [sessions, selectedIndex, selectSession, removeSession] = useChatStore(
  86. (state) => [
  87. state.sessions,
  88. state.currentSessionIndex,
  89. state.selectSession,
  90. state.removeSession,
  91. ],
  92. );
  93. return (
  94. <div className={styles["chat-list"]}>
  95. {sessions.map((item, i) => (
  96. <ChatItem
  97. title={item.topic}
  98. time={item.lastUpdate}
  99. count={item.messages.length}
  100. key={i}
  101. selected={i === selectedIndex}
  102. onClick={() => selectSession(i)}
  103. onDelete={() => removeSession(i)}
  104. />
  105. ))}
  106. </div>
  107. );
  108. }
  109. function useSubmitHandler() {
  110. const config = useChatStore((state) => state.config);
  111. const submitKey = config.submitKey;
  112. const shouldSubmit = (e: KeyboardEvent) => {
  113. if (e.key !== "Enter") return false;
  114. return (
  115. (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
  116. (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
  117. (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
  118. (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
  119. (config.submitKey === SubmitKey.Enter &&
  120. !e.altKey &&
  121. !e.ctrlKey &&
  122. !e.shiftKey &&
  123. !e.metaKey)
  124. );
  125. };
  126. return {
  127. submitKey,
  128. shouldSubmit,
  129. };
  130. }
  131. export function PromptHints(props: {
  132. prompts: Prompt[];
  133. onPromptSelect: (prompt: Prompt) => void;
  134. }) {
  135. if (props.prompts.length === 0) return null;
  136. return (
  137. <div className={styles["prompt-hints"]}>
  138. {props.prompts.map((prompt, i) => (
  139. <div
  140. className={styles["prompt-hint"]}
  141. key={prompt.title + i.toString()}
  142. onClick={() => props.onPromptSelect(prompt)}
  143. >
  144. <div className={styles["hint-title"]}>{prompt.title}</div>
  145. <div className={styles["hint-content"]}>{prompt.content}</div>
  146. </div>
  147. ))}
  148. </div>
  149. );
  150. }
  151. export function Chat(props: {
  152. showSideBar?: () => void;
  153. sideBarShowing?: boolean;
  154. }) {
  155. type RenderMessage = Message & { preview?: boolean };
  156. const chatStore = useChatStore();
  157. const [session, sessionIndex] = useChatStore((state) => [
  158. state.currentSession(),
  159. state.currentSessionIndex,
  160. ]);
  161. const fontSize = useChatStore((state) => state.config.fontSize);
  162. const inputRef = useRef<HTMLTextAreaElement>(null);
  163. const [userInput, setUserInput] = useState("");
  164. const [isLoading, setIsLoading] = useState(false);
  165. const { submitKey, shouldSubmit } = useSubmitHandler();
  166. // prompt hints
  167. const promptStore = usePromptStore();
  168. const [promptHints, setPromptHints] = useState<Prompt[]>([]);
  169. const onSearch = useDebouncedCallback(
  170. (text: string) => {
  171. setPromptHints(promptStore.search(text));
  172. },
  173. 100,
  174. { leading: true, trailing: true },
  175. );
  176. const onPromptSelect = (prompt: Prompt) => {
  177. setUserInput(prompt.content);
  178. setPromptHints([]);
  179. inputRef.current?.focus();
  180. };
  181. const scrollInput = () => {
  182. const dom = inputRef.current;
  183. if (!dom) return;
  184. const paddingBottomNum: number = parseInt(
  185. window.getComputedStyle(dom).paddingBottom,
  186. 10,
  187. );
  188. dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
  189. };
  190. // only search prompts when user input is short
  191. const SEARCH_TEXT_LIMIT = 30;
  192. const onInput = (text: string) => {
  193. scrollInput();
  194. setUserInput(text);
  195. const n = text.trim().length;
  196. // clear search results
  197. if (n === 0) {
  198. setPromptHints([]);
  199. } else if (!chatStore.config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
  200. // check if need to trigger auto completion
  201. if (text.startsWith("/") && text.length > 1) {
  202. onSearch(text.slice(1));
  203. }
  204. }
  205. };
  206. // submit user input
  207. const onUserSubmit = () => {
  208. if (userInput.length <= 0) return;
  209. setIsLoading(true);
  210. chatStore.onUserInput(userInput).then(() => setIsLoading(false));
  211. setUserInput("");
  212. setPromptHints([]);
  213. inputRef.current?.focus();
  214. };
  215. // stop response
  216. const onUserStop = (messageIndex: number) => {
  217. console.log(ControllerPool, sessionIndex, messageIndex);
  218. ControllerPool.stop(sessionIndex, messageIndex);
  219. };
  220. // check if should send message
  221. const onInputKeyDown = (e: KeyboardEvent) => {
  222. if (shouldSubmit(e)) {
  223. onUserSubmit();
  224. e.preventDefault();
  225. }
  226. };
  227. const onRightClick = (e: any, message: Message) => {
  228. // auto fill user input
  229. if (message.role === "user") {
  230. setUserInput(message.content);
  231. }
  232. // copy to clipboard
  233. if (selectOrCopy(e.currentTarget, message.content)) {
  234. e.preventDefault();
  235. }
  236. };
  237. const onResend = (botIndex: number) => {
  238. // find last user input message and resend
  239. for (let i = botIndex; i >= 0; i -= 1) {
  240. if (messages[i].role === "user") {
  241. setIsLoading(true);
  242. chatStore
  243. .onUserInput(messages[i].content)
  244. .then(() => setIsLoading(false));
  245. inputRef.current?.focus();
  246. return;
  247. }
  248. }
  249. };
  250. // for auto-scroll
  251. const latestMessageRef = useRef<HTMLDivElement>(null);
  252. // wont scroll while hovering messages
  253. const [autoScroll, setAutoScroll] = useState(false);
  254. // preview messages
  255. const messages = (session.messages as RenderMessage[])
  256. .concat(
  257. isLoading
  258. ? [
  259. {
  260. role: "assistant",
  261. content: "……",
  262. date: new Date().toLocaleString(),
  263. preview: true,
  264. },
  265. ]
  266. : [],
  267. )
  268. .concat(
  269. userInput.length > 0
  270. ? [
  271. {
  272. role: "user",
  273. content: userInput,
  274. date: new Date().toLocaleString(),
  275. preview: true,
  276. },
  277. ]
  278. : [],
  279. );
  280. // auto scroll
  281. useLayoutEffect(() => {
  282. setTimeout(() => {
  283. const dom = latestMessageRef.current;
  284. const inputDom = inputRef.current;
  285. // only scroll when input overlaped message body
  286. let shouldScroll = true;
  287. if (dom && inputDom) {
  288. const domRect = dom.getBoundingClientRect();
  289. const inputRect = inputDom.getBoundingClientRect();
  290. shouldScroll = domRect.top > inputRect.top;
  291. }
  292. if (dom && autoScroll && shouldScroll) {
  293. dom.scrollIntoView({
  294. block: "end",
  295. });
  296. }
  297. }, 500);
  298. });
  299. return (
  300. <div className={styles.chat} key={session.id}>
  301. <div className={styles["window-header"]}>
  302. <div
  303. className={styles["window-header-title"]}
  304. onClick={props?.showSideBar}
  305. >
  306. <div
  307. className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
  308. onClick={() => {
  309. const newTopic = prompt(Locale.Chat.Rename, session.topic);
  310. if (newTopic && newTopic !== session.topic) {
  311. chatStore.updateCurrentSession(
  312. (session) => (session.topic = newTopic!),
  313. );
  314. }
  315. }}
  316. >
  317. {session.topic}
  318. </div>
  319. <div className={styles["window-header-sub-title"]}>
  320. {Locale.Chat.SubTitle(session.messages.length)}
  321. </div>
  322. </div>
  323. <div className={styles["window-actions"]}>
  324. <div className={styles["window-action-button"] + " " + styles.mobile}>
  325. <IconButton
  326. icon={<MenuIcon />}
  327. bordered
  328. title={Locale.Chat.Actions.ChatList}
  329. onClick={props?.showSideBar}
  330. />
  331. </div>
  332. <div className={styles["window-action-button"]}>
  333. <IconButton
  334. icon={<BrainIcon />}
  335. bordered
  336. title={Locale.Chat.Actions.CompressedHistory}
  337. onClick={() => {
  338. showMemoryPrompt(session);
  339. }}
  340. />
  341. </div>
  342. <div className={styles["window-action-button"]}>
  343. <IconButton
  344. icon={<ExportIcon />}
  345. bordered
  346. title={Locale.Chat.Actions.Export}
  347. onClick={() => {
  348. exportMessages(session.messages, session.topic);
  349. }}
  350. />
  351. </div>
  352. </div>
  353. </div>
  354. <div className={styles["chat-body"]}>
  355. {messages.map((message, i) => {
  356. const isUser = message.role === "user";
  357. return (
  358. <div
  359. key={i}
  360. className={
  361. isUser ? styles["chat-message-user"] : styles["chat-message"]
  362. }
  363. >
  364. <div className={styles["chat-message-container"]}>
  365. <div className={styles["chat-message-avatar"]}>
  366. <Avatar role={message.role} />
  367. </div>
  368. {(message.preview || message.streaming) && (
  369. <div className={styles["chat-message-status"]}>
  370. {Locale.Chat.Typing}
  371. </div>
  372. )}
  373. <div className={styles["chat-message-item"]}>
  374. {!isUser &&
  375. !(message.preview || message.content.length === 0) && (
  376. <div className={styles["chat-message-top-actions"]}>
  377. {message.streaming ? (
  378. <div
  379. className={styles["chat-message-top-action"]}
  380. onClick={() => onUserStop(i)}
  381. >
  382. {Locale.Chat.Actions.Stop}
  383. </div>
  384. ) : (
  385. <div
  386. className={styles["chat-message-top-action"]}
  387. onClick={() => onResend(i)}
  388. >
  389. {Locale.Chat.Actions.Retry}
  390. </div>
  391. )}
  392. <div
  393. className={styles["chat-message-top-action"]}
  394. onClick={() => copyToClipboard(message.content)}
  395. >
  396. {Locale.Chat.Actions.Copy}
  397. </div>
  398. </div>
  399. )}
  400. {(message.preview || message.content.length === 0) &&
  401. !isUser ? (
  402. <LoadingIcon />
  403. ) : (
  404. <div
  405. className="markdown-body"
  406. style={{ fontSize: `${fontSize}px` }}
  407. onContextMenu={(e) => onRightClick(e, message)}
  408. onDoubleClickCapture={() => setUserInput(message.content)}
  409. >
  410. <Markdown content={message.content} />
  411. </div>
  412. )}
  413. </div>
  414. {!isUser && !message.preview && (
  415. <div className={styles["chat-message-actions"]}>
  416. <div className={styles["chat-message-action-date"]}>
  417. {message.date.toLocaleString()}
  418. </div>
  419. </div>
  420. )}
  421. </div>
  422. </div>
  423. );
  424. })}
  425. <div ref={latestMessageRef} style={{ opacity: 0, height: "4em" }}>
  426. -
  427. </div>
  428. </div>
  429. <div className={styles["chat-input-panel"]}>
  430. <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
  431. <div className={styles["chat-input-panel-inner"]}>
  432. <textarea
  433. ref={inputRef}
  434. className={styles["chat-input"]}
  435. placeholder={Locale.Chat.Input(submitKey)}
  436. rows={4}
  437. onInput={(e) => onInput(e.currentTarget.value)}
  438. value={userInput}
  439. onKeyDown={(e) => onInputKeyDown(e as any)}
  440. onFocus={() => setAutoScroll(true)}
  441. onBlur={() => {
  442. setAutoScroll(false);
  443. setTimeout(() => setPromptHints([]), 100);
  444. }}
  445. autoFocus={!props?.sideBarShowing}
  446. />
  447. <IconButton
  448. icon={<SendWhiteIcon />}
  449. text={Locale.Chat.Send}
  450. className={styles["chat-input-send"] + " no-dark"}
  451. onClick={onUserSubmit}
  452. />
  453. </div>
  454. </div>
  455. </div>
  456. );
  457. }
  458. function useSwitchTheme() {
  459. const config = useChatStore((state) => state.config);
  460. useEffect(() => {
  461. document.body.classList.remove("light");
  462. document.body.classList.remove("dark");
  463. if (config.theme === "dark") {
  464. document.body.classList.add("dark");
  465. } else if (config.theme === "light") {
  466. document.body.classList.add("light");
  467. }
  468. const themeColor = getComputedStyle(document.body)
  469. .getPropertyValue("--theme-color")
  470. .trim();
  471. const metaDescription = document.querySelector('meta[name="theme-color"]');
  472. metaDescription?.setAttribute("content", themeColor);
  473. }, [config.theme]);
  474. }
  475. function exportMessages(messages: Message[], topic: string) {
  476. const mdText =
  477. `# ${topic}\n\n` +
  478. messages
  479. .map((m) => {
  480. return m.role === "user" ? `## ${m.content}` : m.content.trim();
  481. })
  482. .join("\n\n");
  483. const filename = `${topic}.md`;
  484. showModal({
  485. title: Locale.Export.Title,
  486. children: (
  487. <div className="markdown-body">
  488. <pre className={styles["export-content"]}>{mdText}</pre>
  489. </div>
  490. ),
  491. actions: [
  492. <IconButton
  493. key="copy"
  494. icon={<CopyIcon />}
  495. bordered
  496. text={Locale.Export.Copy}
  497. onClick={() => copyToClipboard(mdText)}
  498. />,
  499. <IconButton
  500. key="download"
  501. icon={<DownloadIcon />}
  502. bordered
  503. text={Locale.Export.Download}
  504. onClick={() => downloadAs(mdText, filename)}
  505. />,
  506. ],
  507. });
  508. }
  509. function showMemoryPrompt(session: ChatSession) {
  510. showModal({
  511. title: `${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`,
  512. children: (
  513. <div className="markdown-body">
  514. <pre className={styles["export-content"]}>
  515. {session.memoryPrompt || Locale.Memory.EmptyContent}
  516. </pre>
  517. </div>
  518. ),
  519. actions: [
  520. <IconButton
  521. key="copy"
  522. icon={<CopyIcon />}
  523. bordered
  524. text={Locale.Memory.Copy}
  525. onClick={() => copyToClipboard(session.memoryPrompt)}
  526. />,
  527. ],
  528. });
  529. }
  530. const useHasHydrated = () => {
  531. const [hasHydrated, setHasHydrated] = useState<boolean>(false);
  532. useEffect(() => {
  533. setHasHydrated(true);
  534. }, []);
  535. return hasHydrated;
  536. };
  537. export function Home() {
  538. const [createNewSession, currentIndex, removeSession] = useChatStore(
  539. (state) => [
  540. state.newSession,
  541. state.currentSessionIndex,
  542. state.removeSession,
  543. ],
  544. );
  545. const loading = !useHasHydrated();
  546. const [showSideBar, setShowSideBar] = useState(true);
  547. // setting
  548. const [openSettings, setOpenSettings] = useState(false);
  549. const config = useChatStore((state) => state.config);
  550. useSwitchTheme();
  551. if (loading) {
  552. return <Loading />;
  553. }
  554. return (
  555. <div
  556. className={`${
  557. config.tightBorder ? styles["tight-container"] : styles.container
  558. }`}
  559. >
  560. <div
  561. className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
  562. >
  563. <div className={styles["sidebar-header"]}>
  564. <div className={styles["sidebar-title"]}>ChatGPT Next</div>
  565. <div className={styles["sidebar-sub-title"]}>
  566. Build your own AI assistant.
  567. </div>
  568. <div className={styles["sidebar-logo"]}>
  569. <ChatGptIcon />
  570. </div>
  571. </div>
  572. <div
  573. className={styles["sidebar-body"]}
  574. onClick={() => {
  575. setOpenSettings(false);
  576. setShowSideBar(false);
  577. }}
  578. >
  579. <ChatList />
  580. </div>
  581. <div className={styles["sidebar-tail"]}>
  582. <div className={styles["sidebar-actions"]}>
  583. <div className={styles["sidebar-action"] + " " + styles.mobile}>
  584. <IconButton
  585. icon={<CloseIcon />}
  586. onClick={() => {
  587. if (confirm(Locale.Home.DeleteChat)) {
  588. removeSession(currentIndex);
  589. }
  590. }}
  591. />
  592. </div>
  593. <div className={styles["sidebar-action"]}>
  594. <IconButton
  595. icon={<SettingsIcon />}
  596. onClick={() => {
  597. setOpenSettings(true);
  598. setShowSideBar(false);
  599. }}
  600. />
  601. </div>
  602. <div className={styles["sidebar-action"]}>
  603. <a href={REPO_URL} target="_blank">
  604. <IconButton icon={<GithubIcon />} />
  605. </a>
  606. </div>
  607. </div>
  608. <div>
  609. <IconButton
  610. icon={<AddIcon />}
  611. text={Locale.Home.NewChat}
  612. onClick={() => {
  613. createNewSession();
  614. setShowSideBar(false);
  615. }}
  616. />
  617. </div>
  618. </div>
  619. </div>
  620. <div className={styles["window-content"]}>
  621. {openSettings ? (
  622. <Settings
  623. closeSettings={() => {
  624. setOpenSettings(false);
  625. setShowSideBar(true);
  626. }}
  627. />
  628. ) : (
  629. <Chat
  630. key="chat"
  631. showSideBar={() => setShowSideBar(true)}
  632. sideBarShowing={showSideBar}
  633. />
  634. )}
  635. </div>
  636. </div>
  637. );
  638. }