chat.tsx 37 KB

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