chat.tsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. import { useDebouncedCallback } from "use-debounce";
  2. import { 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 MenuIcon from "../icons/menu.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 {
  12. Message,
  13. SubmitKey,
  14. useChatStore,
  15. ChatSession,
  16. BOT_HELLO,
  17. } from "../store";
  18. import {
  19. copyToClipboard,
  20. downloadAs,
  21. isMobileScreen,
  22. selectOrCopy,
  23. } from "../utils";
  24. import dynamic from "next/dynamic";
  25. import { ControllerPool } from "../requests";
  26. import { Prompt, usePromptStore } from "../store/prompt";
  27. import Locale from "../locales";
  28. import { IconButton } from "./button";
  29. import styles from "./home.module.scss";
  30. import { showModal, showToast } from "./ui-lib";
  31. const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  32. loading: () => <LoadingIcon />,
  33. });
  34. const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
  35. loading: () => <LoadingIcon />,
  36. });
  37. export function Avatar(props: { role: Message["role"] }) {
  38. const config = useChatStore((state) => state.config);
  39. if (props.role === "assistant") {
  40. return <BotIcon className={styles["user-avtar"]} />;
  41. }
  42. return (
  43. <div className={styles["user-avtar"]}>
  44. <Emoji unified={config.avatar} size={18} />
  45. </div>
  46. );
  47. }
  48. function exportMessages(messages: Message[], topic: string) {
  49. const mdText =
  50. `# ${topic}\n\n` +
  51. messages
  52. .map((m) => {
  53. return m.role === "user" ? `## ${m.content}` : m.content.trim();
  54. })
  55. .join("\n\n");
  56. const filename = `${topic}.md`;
  57. showModal({
  58. title: Locale.Export.Title,
  59. children: (
  60. <div className="markdown-body">
  61. <pre className={styles["export-content"]}>{mdText}</pre>
  62. </div>
  63. ),
  64. actions: [
  65. <IconButton
  66. key="copy"
  67. icon={<CopyIcon />}
  68. bordered
  69. text={Locale.Export.Copy}
  70. onClick={() => copyToClipboard(mdText)}
  71. />,
  72. <IconButton
  73. key="download"
  74. icon={<DownloadIcon />}
  75. bordered
  76. text={Locale.Export.Download}
  77. onClick={() => downloadAs(mdText, filename)}
  78. />,
  79. ],
  80. });
  81. }
  82. function showMemoryPrompt(session: ChatSession) {
  83. showModal({
  84. title: `${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`,
  85. children: (
  86. <div className="markdown-body">
  87. <pre className={styles["export-content"]}>
  88. {session.memoryPrompt || Locale.Memory.EmptyContent}
  89. </pre>
  90. </div>
  91. ),
  92. actions: [
  93. <IconButton
  94. key="copy"
  95. icon={<CopyIcon />}
  96. bordered
  97. text={Locale.Memory.Copy}
  98. onClick={() => copyToClipboard(session.memoryPrompt)}
  99. />,
  100. ],
  101. });
  102. }
  103. function useSubmitHandler() {
  104. const config = useChatStore((state) => state.config);
  105. const submitKey = config.submitKey;
  106. const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  107. if (e.key !== "Enter") return false;
  108. if (e.key === "Enter" && e.nativeEvent.isComposing) return false;
  109. return (
  110. (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
  111. (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
  112. (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
  113. (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
  114. (config.submitKey === SubmitKey.Enter &&
  115. !e.altKey &&
  116. !e.ctrlKey &&
  117. !e.shiftKey &&
  118. !e.metaKey)
  119. );
  120. };
  121. return {
  122. submitKey,
  123. shouldSubmit,
  124. };
  125. }
  126. export function PromptHints(props: {
  127. prompts: Prompt[];
  128. onPromptSelect: (prompt: Prompt) => void;
  129. }) {
  130. if (props.prompts.length === 0) return null;
  131. return (
  132. <div className={styles["prompt-hints"]}>
  133. {props.prompts.map((prompt, i) => (
  134. <div
  135. className={styles["prompt-hint"]}
  136. key={prompt.title + i.toString()}
  137. onClick={() => props.onPromptSelect(prompt)}
  138. >
  139. <div className={styles["hint-title"]}>{prompt.title}</div>
  140. <div className={styles["hint-content"]}>{prompt.content}</div>
  141. </div>
  142. ))}
  143. </div>
  144. );
  145. }
  146. function useScrollToBottom() {
  147. // for auto-scroll
  148. const scrollRef = useRef<HTMLDivElement>(null);
  149. const [autoScroll, setAutoScroll] = useState(true);
  150. // auto scroll
  151. useLayoutEffect(() => {
  152. const dom = scrollRef.current;
  153. if (dom && autoScroll) {
  154. dom.scrollTop = dom.scrollHeight;
  155. }
  156. });
  157. return {
  158. scrollRef,
  159. autoScroll,
  160. setAutoScroll,
  161. };
  162. }
  163. export function Chat(props: {
  164. showSideBar?: () => void;
  165. sideBarShowing?: boolean;
  166. }) {
  167. type RenderMessage = Message & { preview?: boolean };
  168. const chatStore = useChatStore();
  169. const [session, sessionIndex] = useChatStore((state) => [
  170. state.currentSession(),
  171. state.currentSessionIndex,
  172. ]);
  173. const fontSize = useChatStore((state) => state.config.fontSize);
  174. const inputRef = useRef<HTMLTextAreaElement>(null);
  175. const [userInput, setUserInput] = useState("");
  176. const [isLoading, setIsLoading] = useState(false);
  177. const { submitKey, shouldSubmit } = useSubmitHandler();
  178. const { scrollRef, setAutoScroll } = useScrollToBottom();
  179. // prompt hints
  180. const promptStore = usePromptStore();
  181. const [promptHints, setPromptHints] = useState<Prompt[]>([]);
  182. const onSearch = useDebouncedCallback(
  183. (text: string) => {
  184. setPromptHints(promptStore.search(text));
  185. },
  186. 100,
  187. { leading: true, trailing: true },
  188. );
  189. const onPromptSelect = (prompt: Prompt) => {
  190. setUserInput(prompt.content);
  191. setPromptHints([]);
  192. inputRef.current?.focus();
  193. };
  194. const scrollInput = () => {
  195. const dom = inputRef.current;
  196. if (!dom) return;
  197. const paddingBottomNum: number = parseInt(
  198. window.getComputedStyle(dom).paddingBottom,
  199. 10,
  200. );
  201. dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
  202. };
  203. // only search prompts when user input is short
  204. const SEARCH_TEXT_LIMIT = 30;
  205. const onInput = (text: string) => {
  206. scrollInput();
  207. setUserInput(text);
  208. const n = text.trim().length;
  209. // clear search results
  210. if (n === 0) {
  211. setPromptHints([]);
  212. } else if (!chatStore.config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
  213. // check if need to trigger auto completion
  214. if (text.startsWith("/") && text.length > 1) {
  215. onSearch(text.slice(1));
  216. }
  217. }
  218. };
  219. // submit user input
  220. const onUserSubmit = () => {
  221. if (userInput.length <= 0) return;
  222. setIsLoading(true);
  223. chatStore.onUserInput(userInput).then(() => setIsLoading(false));
  224. setUserInput("");
  225. setPromptHints([]);
  226. inputRef.current?.focus();
  227. };
  228. // stop response
  229. const onUserStop = (messageIndex: number) => {
  230. ControllerPool.stop(sessionIndex, messageIndex);
  231. };
  232. // check if should send message
  233. const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  234. if (shouldSubmit(e)) {
  235. onUserSubmit();
  236. e.preventDefault();
  237. }
  238. };
  239. const onRightClick = (e: any, message: Message) => {
  240. // auto fill user input
  241. if (message.role === "user") {
  242. setUserInput(message.content);
  243. }
  244. // copy to clipboard
  245. if (selectOrCopy(e.currentTarget, message.content)) {
  246. e.preventDefault();
  247. }
  248. };
  249. const onResend = (botIndex: number) => {
  250. // find last user input message and resend
  251. for (let i = botIndex; i >= 0; i -= 1) {
  252. if (messages[i].role === "user") {
  253. setIsLoading(true);
  254. chatStore
  255. .onUserInput(messages[i].content)
  256. .then(() => setIsLoading(false));
  257. inputRef.current?.focus();
  258. return;
  259. }
  260. }
  261. };
  262. const config = useChatStore((state) => state.config);
  263. // preview messages
  264. const messages = (session.messages as RenderMessage[])
  265. .concat(
  266. isLoading
  267. ? [
  268. {
  269. role: "assistant",
  270. content: "……",
  271. date: new Date().toLocaleString(),
  272. preview: true,
  273. },
  274. ]
  275. : [],
  276. )
  277. .concat(
  278. userInput.length > 0 && config.sendPreviewBubble
  279. ? [
  280. {
  281. role: "user",
  282. content: userInput,
  283. date: new Date().toLocaleString(),
  284. preview: false,
  285. },
  286. ]
  287. : [],
  288. );
  289. return (
  290. <div className={styles.chat} key={session.id}>
  291. <div className={styles["window-header"]}>
  292. <div
  293. className={styles["window-header-title"]}
  294. onClick={props?.showSideBar}
  295. >
  296. <div
  297. className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
  298. onClick={() => {
  299. const newTopic = prompt(Locale.Chat.Rename, session.topic);
  300. if (newTopic && newTopic !== session.topic) {
  301. chatStore.updateCurrentSession(
  302. (session) => (session.topic = newTopic!),
  303. );
  304. }
  305. }}
  306. >
  307. {session.topic}
  308. </div>
  309. <div className={styles["window-header-sub-title"]}>
  310. {Locale.Chat.SubTitle(session.messages.length)}
  311. </div>
  312. </div>
  313. <div className={styles["window-actions"]}>
  314. <div className={styles["window-action-button"] + " " + styles.mobile}>
  315. <IconButton
  316. icon={<MenuIcon />}
  317. bordered
  318. title={Locale.Chat.Actions.ChatList}
  319. onClick={props?.showSideBar}
  320. />
  321. </div>
  322. <div className={styles["window-action-button"]}>
  323. <IconButton
  324. icon={<BrainIcon />}
  325. bordered
  326. title={Locale.Chat.Actions.CompressedHistory}
  327. onClick={() => {
  328. showMemoryPrompt(session);
  329. }}
  330. />
  331. </div>
  332. <div className={styles["window-action-button"]}>
  333. <IconButton
  334. icon={<ExportIcon />}
  335. bordered
  336. title={Locale.Chat.Actions.Export}
  337. onClick={() => {
  338. exportMessages(session.messages, session.topic);
  339. }}
  340. />
  341. </div>
  342. </div>
  343. </div>
  344. <div className={styles["chat-body"]} ref={scrollRef}>
  345. {messages.map((message, i) => {
  346. const isUser = message.role === "user";
  347. return (
  348. <div
  349. key={i}
  350. className={
  351. isUser ? styles["chat-message-user"] : styles["chat-message"]
  352. }
  353. >
  354. <div className={styles["chat-message-container"]}>
  355. <div className={styles["chat-message-avatar"]}>
  356. <Avatar role={message.role} />
  357. </div>
  358. {(message.preview || message.streaming) && (
  359. <div className={styles["chat-message-status"]}>
  360. {Locale.Chat.Typing}
  361. </div>
  362. )}
  363. <div className={styles["chat-message-item"]}>
  364. {!isUser &&
  365. !(message.preview || message.content.length === 0) && (
  366. <div className={styles["chat-message-top-actions"]}>
  367. {message.streaming ? (
  368. <div
  369. className={styles["chat-message-top-action"]}
  370. onClick={() => onUserStop(i)}
  371. >
  372. {Locale.Chat.Actions.Stop}
  373. </div>
  374. ) : (
  375. <div
  376. className={styles["chat-message-top-action"]}
  377. onClick={() => onResend(i)}
  378. >
  379. {Locale.Chat.Actions.Retry}
  380. </div>
  381. )}
  382. <div
  383. className={styles["chat-message-top-action"]}
  384. onClick={() => copyToClipboard(message.content)}
  385. >
  386. {Locale.Chat.Actions.Copy}
  387. </div>
  388. </div>
  389. )}
  390. {(message.preview || message.content.length === 0) &&
  391. !isUser ? (
  392. <LoadingIcon />
  393. ) : (
  394. <div
  395. className="markdown-body"
  396. style={{ fontSize: `${fontSize}px` }}
  397. onContextMenu={(e) => onRightClick(e, message)}
  398. onDoubleClickCapture={() => {
  399. if (!isMobileScreen()) return;
  400. setUserInput(message.content);
  401. }}
  402. >
  403. <Markdown content={message.content} />
  404. </div>
  405. )}
  406. </div>
  407. {!isUser && !message.preview && (
  408. <div className={styles["chat-message-actions"]}>
  409. <div className={styles["chat-message-action-date"]}>
  410. {message.date.toLocaleString()}
  411. </div>
  412. </div>
  413. )}
  414. </div>
  415. </div>
  416. );
  417. })}
  418. </div>
  419. <div className={styles["chat-input-panel"]}>
  420. <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
  421. <div className={styles["chat-input-panel-inner"]}>
  422. <textarea
  423. ref={inputRef}
  424. className={styles["chat-input"]}
  425. placeholder={Locale.Chat.Input(submitKey)}
  426. rows={4}
  427. onInput={(e) => onInput(e.currentTarget.value)}
  428. value={userInput}
  429. onKeyDown={onInputKeyDown}
  430. onFocus={() => setAutoScroll(true)}
  431. onBlur={() => {
  432. setAutoScroll(false);
  433. setTimeout(() => setPromptHints([]), 500);
  434. }}
  435. autoFocus={!props?.sideBarShowing}
  436. />
  437. <IconButton
  438. icon={<SendWhiteIcon />}
  439. text={Locale.Chat.Send}
  440. className={styles["chat-input-send"] + " no-dark"}
  441. onClick={onUserSubmit}
  442. />
  443. </div>
  444. </div>
  445. </div>
  446. );
  447. }