chat.tsx 21 KB

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