chat.tsx 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140
  1. import { useDebouncedCallback } from "use-debounce";
  2. import React, {
  3. useState,
  4. useRef,
  5. useEffect,
  6. useMemo,
  7. useCallback,
  8. Fragment,
  9. } from "react";
  10. import SendWhiteIcon from "../icons/send-white.svg";
  11. import BrainIcon from "../icons/brain.svg";
  12. import RenameIcon from "../icons/rename.svg";
  13. import ExportIcon from "../icons/share.svg";
  14. import ReturnIcon from "../icons/return.svg";
  15. import CopyIcon from "../icons/copy.svg";
  16. import LoadingIcon from "../icons/three-dots.svg";
  17. import PromptIcon from "../icons/prompt.svg";
  18. import MaskIcon from "../icons/mask.svg";
  19. import MaxIcon from "../icons/max.svg";
  20. import MinIcon from "../icons/min.svg";
  21. import ResetIcon from "../icons/reload.svg";
  22. import BreakIcon from "../icons/break.svg";
  23. import SettingsIcon from "../icons/chat-settings.svg";
  24. import DeleteIcon from "../icons/clear.svg";
  25. import PinIcon from "../icons/pin.svg";
  26. import EditIcon from "../icons/rename.svg";
  27. import LightIcon from "../icons/light.svg";
  28. import DarkIcon from "../icons/dark.svg";
  29. import AutoIcon from "../icons/auto.svg";
  30. import BottomIcon from "../icons/bottom.svg";
  31. import StopIcon from "../icons/pause.svg";
  32. import RobotIcon from "../icons/robot.svg";
  33. import {
  34. ChatMessage,
  35. SubmitKey,
  36. useChatStore,
  37. BOT_HELLO,
  38. createMessage,
  39. useAccessStore,
  40. Theme,
  41. useAppConfig,
  42. DEFAULT_TOPIC,
  43. ModelType,
  44. } from "../store";
  45. import {
  46. copyToClipboard,
  47. selectOrCopy,
  48. autoGrowTextArea,
  49. useMobileScreen,
  50. } from "../utils";
  51. import dynamic from "next/dynamic";
  52. import { ChatControllerPool } from "../client/controller";
  53. import { Prompt, usePromptStore } from "../store/prompt";
  54. import Locale from "../locales";
  55. import { IconButton } from "./button";
  56. import styles from "./chat.module.scss";
  57. import {
  58. ListItem,
  59. Modal,
  60. Selector,
  61. showConfirm,
  62. showPrompt,
  63. showToast,
  64. } from "./ui-lib";
  65. import { useLocation, useNavigate } from "react-router-dom";
  66. import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant";
  67. import { Avatar } from "./emoji";
  68. import { MaskAvatar, MaskConfig } from "./mask";
  69. import { useMaskStore } from "../store/mask";
  70. import { ChatCommandPrefix, useChatCommand, useCommand } from "../command";
  71. import { prettyObject } from "../utils/format";
  72. import { ExportMessageModal } from "./exporter";
  73. import { getClientConfig } from "../config/client";
  74. const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  75. loading: () => <LoadingIcon />,
  76. });
  77. export function SessionConfigModel(props: { onClose: () => void }) {
  78. const chatStore = useChatStore();
  79. const session = chatStore.currentSession();
  80. const maskStore = useMaskStore();
  81. const navigate = useNavigate();
  82. return (
  83. <div className="modal-mask">
  84. <Modal
  85. title={Locale.Context.Edit}
  86. onClose={() => props.onClose()}
  87. actions={[
  88. <IconButton
  89. key="reset"
  90. icon={<ResetIcon />}
  91. bordered
  92. text={Locale.Chat.Config.Reset}
  93. onClick={async () => {
  94. if (await showConfirm(Locale.Memory.ResetConfirm)) {
  95. chatStore.updateCurrentSession(
  96. (session) => (session.memoryPrompt = ""),
  97. );
  98. }
  99. }}
  100. />,
  101. <IconButton
  102. key="copy"
  103. icon={<CopyIcon />}
  104. bordered
  105. text={Locale.Chat.Config.SaveAs}
  106. onClick={() => {
  107. navigate(Path.Masks);
  108. setTimeout(() => {
  109. maskStore.create(session.mask);
  110. }, 500);
  111. }}
  112. />,
  113. ]}
  114. >
  115. <MaskConfig
  116. mask={session.mask}
  117. updateMask={(updater) => {
  118. const mask = { ...session.mask };
  119. updater(mask);
  120. chatStore.updateCurrentSession((session) => (session.mask = mask));
  121. }}
  122. shouldSyncFromGlobal
  123. extraListItems={
  124. session.mask.modelConfig.sendMemory ? (
  125. <ListItem
  126. title={`${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`}
  127. subTitle={session.memoryPrompt || Locale.Memory.EmptyContent}
  128. ></ListItem>
  129. ) : (
  130. <></>
  131. )
  132. }
  133. ></MaskConfig>
  134. </Modal>
  135. </div>
  136. );
  137. }
  138. function PromptToast(props: {
  139. showToast?: boolean;
  140. showModal?: boolean;
  141. setShowModal: (_: boolean) => void;
  142. }) {
  143. const chatStore = useChatStore();
  144. const session = chatStore.currentSession();
  145. const context = session.mask.context;
  146. return (
  147. <div className={styles["prompt-toast"]} key="prompt-toast">
  148. {props.showToast && (
  149. <div
  150. className={styles["prompt-toast-inner"] + " clickable"}
  151. role="button"
  152. onClick={() => props.setShowModal(true)}
  153. >
  154. <BrainIcon />
  155. <span className={styles["prompt-toast-content"]}>
  156. {Locale.Context.Toast(context.length)}
  157. </span>
  158. </div>
  159. )}
  160. {props.showModal && (
  161. <SessionConfigModel onClose={() => props.setShowModal(false)} />
  162. )}
  163. </div>
  164. );
  165. }
  166. function useSubmitHandler() {
  167. const config = useAppConfig();
  168. const submitKey = config.submitKey;
  169. const isComposing = useRef(false);
  170. useEffect(() => {
  171. const onCompositionStart = () => {
  172. isComposing.current = true;
  173. };
  174. const onCompositionEnd = () => {
  175. isComposing.current = false;
  176. };
  177. window.addEventListener("compositionstart", onCompositionStart);
  178. window.addEventListener("compositionend", onCompositionEnd);
  179. return () => {
  180. window.removeEventListener("compositionstart", onCompositionStart);
  181. window.removeEventListener("compositionend", onCompositionEnd);
  182. };
  183. }, []);
  184. const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  185. if (e.key !== "Enter") return false;
  186. if (e.key === "Enter" && (e.nativeEvent.isComposing || isComposing.current))
  187. return false;
  188. return (
  189. (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
  190. (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
  191. (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
  192. (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
  193. (config.submitKey === SubmitKey.Enter &&
  194. !e.altKey &&
  195. !e.ctrlKey &&
  196. !e.shiftKey &&
  197. !e.metaKey)
  198. );
  199. };
  200. return {
  201. submitKey,
  202. shouldSubmit,
  203. };
  204. }
  205. export type RenderPompt = Pick<Prompt, "title" | "content">;
  206. export function PromptHints(props: {
  207. prompts: RenderPompt[];
  208. onPromptSelect: (prompt: RenderPompt) => void;
  209. }) {
  210. const noPrompts = props.prompts.length === 0;
  211. const [selectIndex, setSelectIndex] = useState(0);
  212. const selectedRef = useRef<HTMLDivElement>(null);
  213. useEffect(() => {
  214. setSelectIndex(0);
  215. }, [props.prompts.length]);
  216. useEffect(() => {
  217. const onKeyDown = (e: KeyboardEvent) => {
  218. if (noPrompts || e.metaKey || e.altKey || e.ctrlKey) {
  219. return;
  220. }
  221. // arrow up / down to select prompt
  222. const changeIndex = (delta: number) => {
  223. e.stopPropagation();
  224. e.preventDefault();
  225. const nextIndex = Math.max(
  226. 0,
  227. Math.min(props.prompts.length - 1, selectIndex + delta),
  228. );
  229. setSelectIndex(nextIndex);
  230. selectedRef.current?.scrollIntoView({
  231. block: "center",
  232. });
  233. };
  234. if (e.key === "ArrowUp") {
  235. changeIndex(1);
  236. } else if (e.key === "ArrowDown") {
  237. changeIndex(-1);
  238. } else if (e.key === "Enter") {
  239. const selectedPrompt = props.prompts.at(selectIndex);
  240. if (selectedPrompt) {
  241. props.onPromptSelect(selectedPrompt);
  242. }
  243. }
  244. };
  245. window.addEventListener("keydown", onKeyDown);
  246. return () => window.removeEventListener("keydown", onKeyDown);
  247. // eslint-disable-next-line react-hooks/exhaustive-deps
  248. }, [props.prompts.length, selectIndex]);
  249. if (noPrompts) return null;
  250. return (
  251. <div className={styles["prompt-hints"]}>
  252. {props.prompts.map((prompt, i) => (
  253. <div
  254. ref={i === selectIndex ? selectedRef : null}
  255. className={
  256. styles["prompt-hint"] +
  257. ` ${i === selectIndex ? styles["prompt-hint-selected"] : ""}`
  258. }
  259. key={prompt.title + i.toString()}
  260. onClick={() => props.onPromptSelect(prompt)}
  261. onMouseEnter={() => setSelectIndex(i)}
  262. >
  263. <div className={styles["hint-title"]}>{prompt.title}</div>
  264. <div className={styles["hint-content"]}>{prompt.content}</div>
  265. </div>
  266. ))}
  267. </div>
  268. );
  269. }
  270. function ClearContextDivider() {
  271. const chatStore = useChatStore();
  272. return (
  273. <div
  274. className={styles["clear-context"]}
  275. onClick={() =>
  276. chatStore.updateCurrentSession(
  277. (session) => (session.clearContextIndex = undefined),
  278. )
  279. }
  280. >
  281. <div className={styles["clear-context-tips"]}>{Locale.Context.Clear}</div>
  282. <div className={styles["clear-context-revert-btn"]}>
  283. {Locale.Context.Revert}
  284. </div>
  285. </div>
  286. );
  287. }
  288. function ChatAction(props: {
  289. text: string;
  290. icon: JSX.Element;
  291. onClick: () => void;
  292. }) {
  293. const iconRef = useRef<HTMLDivElement>(null);
  294. const textRef = useRef<HTMLDivElement>(null);
  295. const [width, setWidth] = useState({
  296. full: 16,
  297. icon: 16,
  298. });
  299. function updateWidth() {
  300. if (!iconRef.current || !textRef.current) return;
  301. const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
  302. const textWidth = getWidth(textRef.current);
  303. const iconWidth = getWidth(iconRef.current);
  304. setWidth({
  305. full: textWidth + iconWidth,
  306. icon: iconWidth,
  307. });
  308. }
  309. return (
  310. <div
  311. className={`${styles["chat-input-action"]} clickable`}
  312. onClick={() => {
  313. props.onClick();
  314. setTimeout(updateWidth, 1);
  315. }}
  316. onMouseEnter={updateWidth}
  317. onTouchStart={updateWidth}
  318. style={
  319. {
  320. "--icon-width": `${width.icon}px`,
  321. "--full-width": `${width.full}px`,
  322. } as React.CSSProperties
  323. }
  324. >
  325. <div ref={iconRef} className={styles["icon"]}>
  326. {props.icon}
  327. </div>
  328. <div className={styles["text"]} ref={textRef}>
  329. {props.text}
  330. </div>
  331. </div>
  332. );
  333. }
  334. function useScrollToBottom() {
  335. // for auto-scroll
  336. const scrollRef = useRef<HTMLDivElement>(null);
  337. const [autoScroll, setAutoScroll] = useState(true);
  338. const scrollToBottom = useCallback(() => {
  339. const dom = scrollRef.current;
  340. if (dom) {
  341. requestAnimationFrame(() => dom.scrollTo(0, dom.scrollHeight));
  342. }
  343. }, []);
  344. // auto scroll
  345. useEffect(() => {
  346. autoScroll && scrollToBottom();
  347. });
  348. return {
  349. scrollRef,
  350. autoScroll,
  351. setAutoScroll,
  352. scrollToBottom,
  353. };
  354. }
  355. export function ChatActions(props: {
  356. showPromptModal: () => void;
  357. scrollToBottom: () => void;
  358. showPromptHints: () => void;
  359. hitBottom: boolean;
  360. }) {
  361. const config = useAppConfig();
  362. const navigate = useNavigate();
  363. const chatStore = useChatStore();
  364. // switch themes
  365. const theme = config.theme;
  366. function nextTheme() {
  367. const themes = [Theme.Auto, Theme.Light, Theme.Dark];
  368. const themeIndex = themes.indexOf(theme);
  369. const nextIndex = (themeIndex + 1) % themes.length;
  370. const nextTheme = themes[nextIndex];
  371. config.update((config) => (config.theme = nextTheme));
  372. }
  373. // stop all responses
  374. const couldStop = ChatControllerPool.hasPending();
  375. const stopAll = () => ChatControllerPool.stopAll();
  376. // switch model
  377. const currentModel = chatStore.currentSession().mask.modelConfig.model;
  378. const models = useMemo(
  379. () =>
  380. config
  381. .allModels()
  382. .filter((m) => m.available)
  383. .map((m) => m.name),
  384. [config],
  385. );
  386. const [showModelSelector, setShowModelSelector] = useState(false);
  387. return (
  388. <div className={styles["chat-input-actions"]}>
  389. {couldStop && (
  390. <ChatAction
  391. onClick={stopAll}
  392. text={Locale.Chat.InputActions.Stop}
  393. icon={<StopIcon />}
  394. />
  395. )}
  396. {!props.hitBottom && (
  397. <ChatAction
  398. onClick={props.scrollToBottom}
  399. text={Locale.Chat.InputActions.ToBottom}
  400. icon={<BottomIcon />}
  401. />
  402. )}
  403. {props.hitBottom && (
  404. <ChatAction
  405. onClick={props.showPromptModal}
  406. text={Locale.Chat.InputActions.Settings}
  407. icon={<SettingsIcon />}
  408. />
  409. )}
  410. <ChatAction
  411. onClick={nextTheme}
  412. text={Locale.Chat.InputActions.Theme[theme]}
  413. icon={
  414. <>
  415. {theme === Theme.Auto ? (
  416. <AutoIcon />
  417. ) : theme === Theme.Light ? (
  418. <LightIcon />
  419. ) : theme === Theme.Dark ? (
  420. <DarkIcon />
  421. ) : null}
  422. </>
  423. }
  424. />
  425. <ChatAction
  426. onClick={props.showPromptHints}
  427. text={Locale.Chat.InputActions.Prompt}
  428. icon={<PromptIcon />}
  429. />
  430. <ChatAction
  431. onClick={() => {
  432. navigate(Path.Masks);
  433. }}
  434. text={Locale.Chat.InputActions.Masks}
  435. icon={<MaskIcon />}
  436. />
  437. <ChatAction
  438. text={Locale.Chat.InputActions.Clear}
  439. icon={<BreakIcon />}
  440. onClick={() => {
  441. chatStore.updateCurrentSession((session) => {
  442. if (session.clearContextIndex === session.messages.length) {
  443. session.clearContextIndex = undefined;
  444. } else {
  445. session.clearContextIndex = session.messages.length;
  446. session.memoryPrompt = ""; // will clear memory
  447. }
  448. });
  449. }}
  450. />
  451. <ChatAction
  452. onClick={() => setShowModelSelector(true)}
  453. text={currentModel}
  454. icon={<RobotIcon />}
  455. />
  456. {showModelSelector && (
  457. <Selector
  458. items={models.map((m) => ({
  459. title: m,
  460. value: m,
  461. }))}
  462. onClose={() => setShowModelSelector(false)}
  463. onSelection={(s) => {
  464. if (s.length === 0) return;
  465. chatStore.updateCurrentSession((session) => {
  466. session.mask.modelConfig.model = s[0] as ModelType;
  467. session.mask.syncGlobalConfig = false;
  468. });
  469. showToast(s[0]);
  470. }}
  471. />
  472. )}
  473. </div>
  474. );
  475. }
  476. export function Chat() {
  477. type RenderMessage = ChatMessage & { preview?: boolean };
  478. const chatStore = useChatStore();
  479. const [session, sessionIndex] = useChatStore((state) => [
  480. state.currentSession(),
  481. state.currentSessionIndex,
  482. ]);
  483. const config = useAppConfig();
  484. const fontSize = config.fontSize;
  485. const [showExport, setShowExport] = useState(false);
  486. const inputRef = useRef<HTMLTextAreaElement>(null);
  487. const [userInput, setUserInput] = useState("");
  488. const [isLoading, setIsLoading] = useState(false);
  489. const { submitKey, shouldSubmit } = useSubmitHandler();
  490. const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom();
  491. const [hitBottom, setHitBottom] = useState(true);
  492. const isMobileScreen = useMobileScreen();
  493. const navigate = useNavigate();
  494. const onChatBodyScroll = (e: HTMLElement) => {
  495. const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 10;
  496. setHitBottom(isTouchBottom);
  497. };
  498. // prompt hints
  499. const promptStore = usePromptStore();
  500. const [promptHints, setPromptHints] = useState<RenderPompt[]>([]);
  501. const onSearch = useDebouncedCallback(
  502. (text: string) => {
  503. const matchedPrompts = promptStore.search(text);
  504. setPromptHints(matchedPrompts);
  505. },
  506. 100,
  507. { leading: true, trailing: true },
  508. );
  509. // auto grow input
  510. const [inputRows, setInputRows] = useState(2);
  511. const measure = useDebouncedCallback(
  512. () => {
  513. const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
  514. const inputRows = Math.min(
  515. 20,
  516. Math.max(2 + Number(!isMobileScreen), rows),
  517. );
  518. setInputRows(inputRows);
  519. },
  520. 100,
  521. {
  522. leading: true,
  523. trailing: true,
  524. },
  525. );
  526. // eslint-disable-next-line react-hooks/exhaustive-deps
  527. useEffect(measure, [userInput]);
  528. // chat commands shortcuts
  529. const chatCommands = useChatCommand({
  530. new: () => chatStore.newSession(),
  531. newm: () => navigate(Path.NewChat),
  532. prev: () => chatStore.nextSession(-1),
  533. next: () => chatStore.nextSession(1),
  534. clear: () =>
  535. chatStore.updateCurrentSession(
  536. (session) => (session.clearContextIndex = session.messages.length),
  537. ),
  538. del: () => chatStore.deleteSession(chatStore.currentSessionIndex),
  539. });
  540. // only search prompts when user input is short
  541. const SEARCH_TEXT_LIMIT = 30;
  542. const onInput = (text: string) => {
  543. setUserInput(text);
  544. const n = text.trim().length;
  545. // clear search results
  546. if (n === 0) {
  547. setPromptHints([]);
  548. } else if (text.startsWith(ChatCommandPrefix)) {
  549. setPromptHints(chatCommands.search(text));
  550. } else if (!config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
  551. // check if need to trigger auto completion
  552. if (text.startsWith("/")) {
  553. let searchText = text.slice(1);
  554. onSearch(searchText);
  555. }
  556. }
  557. };
  558. const doSubmit = (userInput: string) => {
  559. if (userInput.trim() === "") return;
  560. const matchCommand = chatCommands.match(userInput);
  561. if (matchCommand.matched) {
  562. setUserInput("");
  563. setPromptHints([]);
  564. matchCommand.invoke();
  565. return;
  566. }
  567. setIsLoading(true);
  568. chatStore.onUserInput(userInput).then(() => setIsLoading(false));
  569. localStorage.setItem(LAST_INPUT_KEY, userInput);
  570. setUserInput("");
  571. setPromptHints([]);
  572. if (!isMobileScreen) inputRef.current?.focus();
  573. setAutoScroll(true);
  574. };
  575. const onPromptSelect = (prompt: RenderPompt) => {
  576. setTimeout(() => {
  577. setPromptHints([]);
  578. const matchedChatCommand = chatCommands.match(prompt.content);
  579. if (matchedChatCommand.matched) {
  580. // if user is selecting a chat command, just trigger it
  581. matchedChatCommand.invoke();
  582. setUserInput("");
  583. } else {
  584. // or fill the prompt
  585. setUserInput(prompt.content);
  586. }
  587. inputRef.current?.focus();
  588. }, 30);
  589. };
  590. // stop response
  591. const onUserStop = (messageId: string) => {
  592. ChatControllerPool.stop(session.id, messageId);
  593. };
  594. useEffect(() => {
  595. chatStore.updateCurrentSession((session) => {
  596. const stopTiming = Date.now() - REQUEST_TIMEOUT_MS;
  597. session.messages.forEach((m) => {
  598. // check if should stop all stale messages
  599. if (m.isError || new Date(m.date).getTime() < stopTiming) {
  600. if (m.streaming) {
  601. m.streaming = false;
  602. }
  603. if (m.content.length === 0) {
  604. m.isError = true;
  605. m.content = prettyObject({
  606. error: true,
  607. message: "empty response",
  608. });
  609. }
  610. }
  611. });
  612. // auto sync mask config from global config
  613. if (session.mask.syncGlobalConfig) {
  614. console.log("[Mask] syncing from global, name = ", session.mask.name);
  615. session.mask.modelConfig = { ...config.modelConfig };
  616. }
  617. });
  618. // eslint-disable-next-line react-hooks/exhaustive-deps
  619. }, []);
  620. // check if should send message
  621. const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  622. // if ArrowUp and no userInput, fill with last input
  623. if (
  624. e.key === "ArrowUp" &&
  625. userInput.length <= 0 &&
  626. !(e.metaKey || e.altKey || e.ctrlKey)
  627. ) {
  628. setUserInput(localStorage.getItem(LAST_INPUT_KEY) ?? "");
  629. e.preventDefault();
  630. return;
  631. }
  632. if (shouldSubmit(e) && promptHints.length === 0) {
  633. doSubmit(userInput);
  634. e.preventDefault();
  635. }
  636. };
  637. const onRightClick = (e: any, message: ChatMessage) => {
  638. // copy to clipboard
  639. if (selectOrCopy(e.currentTarget, message.content)) {
  640. if (userInput.length === 0) {
  641. setUserInput(message.content);
  642. }
  643. e.preventDefault();
  644. }
  645. };
  646. const findLastUserIndex = (messageId: string) => {
  647. // find last user input message
  648. let lastUserMessageIndex: number | null = null;
  649. for (let i = 0; i < session.messages.length; i += 1) {
  650. const message = session.messages[i];
  651. if (message.role === "user") {
  652. lastUserMessageIndex = i;
  653. }
  654. if (message.id === messageId) {
  655. break;
  656. }
  657. }
  658. return lastUserMessageIndex;
  659. };
  660. const deleteMessage = (msgId?: string) => {
  661. chatStore.updateCurrentSession(
  662. (session) =>
  663. (session.messages = session.messages.filter((m) => m.id !== msgId)),
  664. );
  665. };
  666. const onDelete = (msgId: string) => {
  667. deleteMessage(msgId);
  668. };
  669. const onResend = (message: ChatMessage) => {
  670. // when it is resending a message
  671. // 1. for a user's message, find the next bot response
  672. // 2. for a bot's message, find the last user's input
  673. // 3. delete original user input and bot's message
  674. // 4. resend the user's input
  675. const resendingIndex = session.messages.findIndex(
  676. (m) => m.id === message.id,
  677. );
  678. if (resendingIndex <= 0 || resendingIndex >= session.messages.length) {
  679. console.error("[Chat] failed to find resending message", message);
  680. return;
  681. }
  682. let userMessage: ChatMessage | undefined;
  683. let botMessage: ChatMessage | undefined;
  684. if (message.role === "assistant") {
  685. // if it is resending a bot's message, find the user input for it
  686. botMessage = message;
  687. for (let i = resendingIndex; i >= 0; i -= 1) {
  688. if (session.messages[i].role === "user") {
  689. userMessage = session.messages[i];
  690. break;
  691. }
  692. }
  693. } else if (message.role === "user") {
  694. // if it is resending a user's input, find the bot's response
  695. userMessage = message;
  696. for (let i = resendingIndex; i < session.messages.length; i += 1) {
  697. if (session.messages[i].role === "assistant") {
  698. botMessage = session.messages[i];
  699. break;
  700. }
  701. }
  702. }
  703. if (userMessage === undefined) {
  704. console.error("[Chat] failed to resend", message);
  705. return;
  706. }
  707. // delete the original messages
  708. deleteMessage(userMessage.id);
  709. deleteMessage(botMessage?.id);
  710. // resend the message
  711. setIsLoading(true);
  712. chatStore.onUserInput(userMessage.content).then(() => setIsLoading(false));
  713. inputRef.current?.focus();
  714. };
  715. const onPinMessage = (message: ChatMessage) => {
  716. chatStore.updateCurrentSession((session) =>
  717. session.mask.context.push(message),
  718. );
  719. showToast(Locale.Chat.Actions.PinToastContent, {
  720. text: Locale.Chat.Actions.PinToastAction,
  721. onClick: () => {
  722. setShowPromptModal(true);
  723. },
  724. });
  725. };
  726. const context: RenderMessage[] = session.mask.hideContext
  727. ? []
  728. : session.mask.context.slice();
  729. const accessStore = useAccessStore();
  730. if (
  731. context.length === 0 &&
  732. session.messages.at(0)?.content !== BOT_HELLO.content
  733. ) {
  734. const copiedHello = Object.assign({}, BOT_HELLO);
  735. if (!accessStore.isAuthorized()) {
  736. copiedHello.content = Locale.Error.Unauthorized;
  737. }
  738. context.push(copiedHello);
  739. }
  740. // clear context index = context length + index in messages
  741. const clearContextIndex =
  742. (session.clearContextIndex ?? -1) >= 0
  743. ? session.clearContextIndex! + context.length
  744. : -1;
  745. // preview messages
  746. const messages = context
  747. .concat(session.messages as RenderMessage[])
  748. .concat(
  749. isLoading
  750. ? [
  751. {
  752. ...createMessage({
  753. role: "assistant",
  754. content: "……",
  755. }),
  756. preview: true,
  757. },
  758. ]
  759. : [],
  760. )
  761. .concat(
  762. userInput.length > 0 && config.sendPreviewBubble
  763. ? [
  764. {
  765. ...createMessage({
  766. role: "user",
  767. content: userInput,
  768. }),
  769. preview: true,
  770. },
  771. ]
  772. : [],
  773. );
  774. const [showPromptModal, setShowPromptModal] = useState(false);
  775. const renameSession = () => {
  776. showPrompt(Locale.Chat.Rename, session.topic).then((newTopic) => {
  777. if (newTopic && newTopic !== session.topic) {
  778. chatStore.updateCurrentSession(
  779. (session) => (session.topic = newTopic!),
  780. );
  781. }
  782. });
  783. };
  784. const clientConfig = useMemo(() => getClientConfig(), []);
  785. const location = useLocation();
  786. const isChat = location.pathname === Path.Chat;
  787. const autoFocus = !isMobileScreen || isChat; // only focus in chat page
  788. const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
  789. useCommand({
  790. fill: setUserInput,
  791. submit: (text) => {
  792. doSubmit(text);
  793. },
  794. });
  795. return (
  796. <div className={styles.chat} key={session.id}>
  797. <div className="window-header" data-tauri-drag-region>
  798. {isMobileScreen && (
  799. <div className="window-actions">
  800. <div className={"window-action-button"}>
  801. <IconButton
  802. icon={<ReturnIcon />}
  803. bordered
  804. title={Locale.Chat.Actions.ChatList}
  805. onClick={() => navigate(Path.Home)}
  806. />
  807. </div>
  808. </div>
  809. )}
  810. <div className={`window-header-title ${styles["chat-body-title"]}`}>
  811. <div
  812. className={`window-header-main-title ${styles["chat-body-main-title"]}`}
  813. onClickCapture={renameSession}
  814. >
  815. {!session.topic ? DEFAULT_TOPIC : session.topic}
  816. </div>
  817. <div className="window-header-sub-title">
  818. {Locale.Chat.SubTitle(session.messages.length)}
  819. </div>
  820. </div>
  821. <div className="window-actions">
  822. {!isMobileScreen && (
  823. <div className="window-action-button">
  824. <IconButton
  825. icon={<RenameIcon />}
  826. bordered
  827. onClick={renameSession}
  828. />
  829. </div>
  830. )}
  831. <div className="window-action-button">
  832. <IconButton
  833. icon={<ExportIcon />}
  834. bordered
  835. title={Locale.Chat.Actions.Export}
  836. onClick={() => {
  837. setShowExport(true);
  838. }}
  839. />
  840. </div>
  841. {showMaxIcon && (
  842. <div className="window-action-button">
  843. <IconButton
  844. icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
  845. bordered
  846. onClick={() => {
  847. config.update(
  848. (config) => (config.tightBorder = !config.tightBorder),
  849. );
  850. }}
  851. />
  852. </div>
  853. )}
  854. </div>
  855. <PromptToast
  856. showToast={!hitBottom}
  857. showModal={showPromptModal}
  858. setShowModal={setShowPromptModal}
  859. />
  860. </div>
  861. <div
  862. className={styles["chat-body"]}
  863. ref={scrollRef}
  864. onScroll={(e) => onChatBodyScroll(e.currentTarget)}
  865. onMouseDown={() => inputRef.current?.blur()}
  866. onWheel={(e) => setAutoScroll(hitBottom && e.deltaY > 0)}
  867. onTouchStart={() => {
  868. inputRef.current?.blur();
  869. setAutoScroll(false);
  870. }}
  871. >
  872. {messages.map((message, i) => {
  873. const isUser = message.role === "user";
  874. const isContext = i < context.length;
  875. const showActions =
  876. i > 0 &&
  877. !(message.preview || message.content.length === 0) &&
  878. !isContext;
  879. const showTyping = message.preview || message.streaming;
  880. const shouldShowClearContextDivider = i === clearContextIndex - 1;
  881. return (
  882. <Fragment key={i}>
  883. <div
  884. className={
  885. isUser ? styles["chat-message-user"] : styles["chat-message"]
  886. }
  887. >
  888. <div className={styles["chat-message-container"]}>
  889. <div className={styles["chat-message-header"]}>
  890. <div className={styles["chat-message-avatar"]}>
  891. <div className={styles["chat-message-edit"]}>
  892. <IconButton
  893. icon={<EditIcon />}
  894. onClick={async () => {
  895. const newMessage = await showPrompt(
  896. Locale.Chat.Actions.Edit,
  897. message.content,
  898. 10,
  899. );
  900. chatStore.updateCurrentSession((session) => {
  901. const m = session.messages.find(
  902. (m) => m.id === message.id,
  903. );
  904. if (m) {
  905. m.content = newMessage;
  906. }
  907. });
  908. }}
  909. ></IconButton>
  910. </div>
  911. {isUser ? (
  912. <Avatar avatar={config.avatar} />
  913. ) : (
  914. <MaskAvatar mask={session.mask} />
  915. )}
  916. </div>
  917. {showActions && (
  918. <div className={styles["chat-message-actions"]}>
  919. <div className={styles["chat-input-actions"]}>
  920. {message.streaming ? (
  921. <ChatAction
  922. text={Locale.Chat.Actions.Stop}
  923. icon={<StopIcon />}
  924. onClick={() => onUserStop(message.id ?? i)}
  925. />
  926. ) : (
  927. <>
  928. <ChatAction
  929. text={Locale.Chat.Actions.Retry}
  930. icon={<ResetIcon />}
  931. onClick={() => onResend(message)}
  932. />
  933. <ChatAction
  934. text={Locale.Chat.Actions.Delete}
  935. icon={<DeleteIcon />}
  936. onClick={() => onDelete(message.id ?? i)}
  937. />
  938. <ChatAction
  939. text={Locale.Chat.Actions.Pin}
  940. icon={<PinIcon />}
  941. onClick={() => onPinMessage(message)}
  942. />
  943. <ChatAction
  944. text={Locale.Chat.Actions.Copy}
  945. icon={<CopyIcon />}
  946. onClick={() => copyToClipboard(message.content)}
  947. />
  948. </>
  949. )}
  950. </div>
  951. </div>
  952. )}
  953. </div>
  954. {showTyping && (
  955. <div className={styles["chat-message-status"]}>
  956. {Locale.Chat.Typing}
  957. </div>
  958. )}
  959. <div className={styles["chat-message-item"]}>
  960. <Markdown
  961. content={message.content}
  962. loading={
  963. (message.preview || message.content.length === 0) &&
  964. !isUser
  965. }
  966. onContextMenu={(e) => onRightClick(e, message)}
  967. onDoubleClickCapture={() => {
  968. if (!isMobileScreen) return;
  969. setUserInput(message.content);
  970. }}
  971. fontSize={fontSize}
  972. parentRef={scrollRef}
  973. defaultShow={i >= messages.length - 10}
  974. />
  975. </div>
  976. <div className={styles["chat-message-action-date"]}>
  977. {isContext
  978. ? Locale.Chat.IsContext
  979. : message.date.toLocaleString()}
  980. </div>
  981. </div>
  982. </div>
  983. {shouldShowClearContextDivider && <ClearContextDivider />}
  984. </Fragment>
  985. );
  986. })}
  987. </div>
  988. <div className={styles["chat-input-panel"]}>
  989. <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
  990. <ChatActions
  991. showPromptModal={() => setShowPromptModal(true)}
  992. scrollToBottom={scrollToBottom}
  993. hitBottom={hitBottom}
  994. showPromptHints={() => {
  995. // Click again to close
  996. if (promptHints.length > 0) {
  997. setPromptHints([]);
  998. return;
  999. }
  1000. inputRef.current?.focus();
  1001. setUserInput("/");
  1002. onSearch("");
  1003. }}
  1004. />
  1005. <div className={styles["chat-input-panel-inner"]}>
  1006. <textarea
  1007. ref={inputRef}
  1008. className={styles["chat-input"]}
  1009. placeholder={Locale.Chat.Input(submitKey)}
  1010. onInput={(e) => onInput(e.currentTarget.value)}
  1011. value={userInput}
  1012. onKeyDown={onInputKeyDown}
  1013. onFocus={() => setAutoScroll(true)}
  1014. onBlur={() => setAutoScroll(false)}
  1015. rows={inputRows}
  1016. autoFocus={autoFocus}
  1017. style={{
  1018. fontSize: config.fontSize,
  1019. }}
  1020. />
  1021. <IconButton
  1022. icon={<SendWhiteIcon />}
  1023. text={Locale.Chat.Send}
  1024. className={styles["chat-input-send"]}
  1025. type="primary"
  1026. onClick={() => doSubmit(userInput)}
  1027. />
  1028. </div>
  1029. </div>
  1030. {showExport && (
  1031. <ExportMessageModal onClose={() => setShowExport(false)} />
  1032. )}
  1033. </div>
  1034. );
  1035. }