diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index a3ab56062..d407d28e4 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -14,10 +14,11 @@ padding: 4px 10px; animation: slide-in ease 0.3s; box-shadow: var(--card-shadow); - transition: all ease 0.3s; + transition: width ease 0.3s; align-items: center; height: 16px; width: var(--icon-width); + overflow: hidden; &:not(:last-child) { margin-right: 5px; @@ -29,14 +30,16 @@ opacity: 0; transform: translateX(-5px); transition: all ease 0.3s; - transition-delay: 0.1s; pointer-events: none; } &:hover { + --delay: 0.5s; width: var(--full-width); + transition-delay: var(--delay); .text { + transition-delay: var(--delay); opacity: 1; transform: translate(0); } diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 7f54a7dd5..a99f72f15 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -74,7 +74,13 @@ import { showToast, } from "./ui-lib"; import { useLocation, useNavigate } from "react-router-dom"; -import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant"; +import { + CHAT_PAGE_SIZE, + LAST_INPUT_KEY, + MAX_RENDER_MSG_COUNT, + Path, + REQUEST_TIMEOUT_MS, +} from "../constant"; import { Avatar } from "./emoji"; import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask"; import { useMaskStore } from "../store/mask"; @@ -371,23 +377,29 @@ function useScrollToBottom() { // for auto-scroll const scrollRef = useRef(null); const [autoScroll, setAutoScroll] = useState(true); - const scrollToBottom = useCallback(() => { + + function scrollDomToBottom() { const dom = scrollRef.current; if (dom) { - requestAnimationFrame(() => dom.scrollTo(0, dom.scrollHeight)); + requestAnimationFrame(() => { + setAutoScroll(true); + dom.scrollTo(0, dom.scrollHeight); + }); } - }, []); + } // auto scroll useEffect(() => { - autoScroll && scrollToBottom(); + if (autoScroll) { + scrollDomToBottom(); + } }); return { scrollRef, autoScroll, setAutoScroll, - scrollToBottom, + scrollDomToBottom, }; } @@ -504,6 +516,7 @@ export function ChatActions(props: { {showModelSelector && ( ({ title: m, value: m, @@ -531,7 +544,7 @@ export function EditMessageModal(props: { onClose: () => void }) { return (
void }) { ); } -export function Chat() { +function _Chat() { type RenderMessage = ChatMessage & { preview?: boolean }; const chatStore = useChatStore(); - const [session, sessionIndex] = useChatStore((state) => [ - state.currentSession(), - state.currentSessionIndex, - ]); + const session = chatStore.currentSession(); const config = useAppConfig(); const fontSize = config.fontSize; @@ -602,16 +612,11 @@ export function Chat() { const [userInput, setUserInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const { submitKey, shouldSubmit } = useSubmitHandler(); - const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom(); + const { scrollRef, setAutoScroll, scrollDomToBottom } = useScrollToBottom(); const [hitBottom, setHitBottom] = useState(true); const isMobileScreen = useMobileScreen(); const navigate = useNavigate(); - const onChatBodyScroll = (e: HTMLElement) => { - const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 10; - setHitBottom(isTouchBottom); - }; - // prompt hints const promptStore = usePromptStore(); const [promptHints, setPromptHints] = useState([]); @@ -853,10 +858,9 @@ export function Chat() { }); }; - const context: RenderMessage[] = session.mask.hideContext - ? [] - : session.mask.context.slice(); - + const context: RenderMessage[] = useMemo(() => { + return session.mask.hideContext ? [] : session.mask.context.slice(); + }, [session.mask.context, session.mask.hideContext]); const accessStore = useAccessStore(); if ( @@ -870,50 +874,98 @@ export function Chat() { context.push(copiedHello); } + // preview messages + const renderMessages = useMemo(() => { + return context + .concat(session.messages as RenderMessage[]) + .concat( + isLoading + ? [ + { + ...createMessage({ + role: "assistant", + content: "……", + }), + preview: true, + }, + ] + : [], + ) + .concat( + userInput.length > 0 && config.sendPreviewBubble + ? [ + { + ...createMessage({ + role: "user", + content: userInput, + }), + preview: true, + }, + ] + : [], + ); + }, [ + config.sendPreviewBubble, + context, + isLoading, + session.messages, + userInput, + ]); + + const [msgRenderIndex, _setMsgRenderIndex] = useState( + Math.max(0, renderMessages.length - CHAT_PAGE_SIZE), + ); + function setMsgRenderIndex(newIndex: number) { + newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex); + newIndex = Math.max(0, newIndex); + _setMsgRenderIndex(newIndex); + } + + const messages = useMemo(() => { + const endRenderIndex = Math.min( + msgRenderIndex + 3 * CHAT_PAGE_SIZE, + renderMessages.length, + ); + return renderMessages.slice(msgRenderIndex, endRenderIndex); + }, [msgRenderIndex, renderMessages]); + + const onChatBodyScroll = (e: HTMLElement) => { + const bottomHeight = e.scrollTop + e.clientHeight; + const edgeThreshold = e.clientHeight; + + const isTouchTopEdge = e.scrollTop <= edgeThreshold; + const isTouchBottomEdge = bottomHeight >= e.scrollHeight - edgeThreshold; + const isHitBottom = bottomHeight >= e.scrollHeight - 10; + + const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE; + const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE; + + if (isTouchTopEdge) { + setMsgRenderIndex(prevPageMsgIndex); + } else if (isTouchBottomEdge) { + setMsgRenderIndex(nextPageMsgIndex); + } + + setHitBottom(isHitBottom); + setAutoScroll(isHitBottom); + }; + + function scrollToBottom() { + setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE); + scrollDomToBottom(); + } + // clear context index = context length + index in messages const clearContextIndex = (session.clearContextIndex ?? -1) >= 0 - ? session.clearContextIndex! + context.length + ? session.clearContextIndex! + context.length - msgRenderIndex : -1; - // preview messages - const messages = context - .concat(session.messages as RenderMessage[]) - .concat( - isLoading - ? [ - { - ...createMessage({ - role: "assistant", - content: "……", - }), - preview: true, - }, - ] - : [], - ) - .concat( - userInput.length > 0 && config.sendPreviewBubble - ? [ - { - ...createMessage({ - role: "user", - content: userInput, - }), - preview: true, - }, - ] - : [], - ); - const [showPromptModal, setShowPromptModal] = useState(false); const clientConfig = useMemo(() => getClientConfig(), []); - const location = useLocation(); - const isChat = location.pathname === Path.Chat; - - const autoFocus = !isMobileScreen || isChat; // only focus in chat page + const autoFocus = !isMobileScreen; // wont auto focus on mobile screen const showMaxIcon = !isMobileScreen && !clientConfig?.isApp; useCommand({ @@ -1035,7 +1087,6 @@ export function Chat() { ref={scrollRef} onScroll={(e) => onChatBodyScroll(e.currentTarget)} onMouseDown={() => inputRef.current?.blur()} - onWheel={(e) => setAutoScroll(hitBottom && e.deltaY > 0)} onTouchStart={() => { inputRef.current?.blur(); setAutoScroll(false); @@ -1053,7 +1104,7 @@ export function Chat() { const shouldShowClearContextDivider = i === clearContextIndex - 1; return ( - +
onRightClick(e, message)} @@ -1147,7 +1199,7 @@ export function Chat() { }} fontSize={fontSize} parentRef={scrollRef} - defaultShow={i >= messages.length - 10} + defaultShow={i >= messages.length - 6} />
@@ -1191,8 +1243,8 @@ export function Chat() { onInput={(e) => onInput(e.currentTarget.value)} value={userInput} onKeyDown={onInputKeyDown} - onFocus={() => setAutoScroll(true)} - onBlur={() => setAutoScroll(false)} + onFocus={scrollToBottom} + onClick={scrollToBottom} rows={inputRows} autoFocus={autoFocus} style={{ @@ -1223,3 +1275,9 @@ export function Chat() {
); } + +export function Chat() { + const chatStore = useChatStore(); + const sessionIndex = chatStore.currentSessionIndex; + return <_Chat key={sessionIndex}>; +} diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 3168641c7..0c6a2d437 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -146,70 +146,23 @@ export function Markdown( } & React.DOMAttributes, ) { const mdRef = useRef(null); - const renderedHeight = useRef(0); - const renderedWidth = useRef(0); - const inView = useRef(!!props.defaultShow); - const [_, triggerRender] = useState(0); - const checkInView = useThrottledCallback( - () => { - const parent = props.parentRef?.current; - const md = mdRef.current; - if (parent && md && !props.defaultShow) { - const parentBounds = parent.getBoundingClientRect(); - const twoScreenHeight = Math.max(500, parentBounds.height * 2); - const mdBounds = md.getBoundingClientRect(); - const parentTop = parentBounds.top - twoScreenHeight; - const parentBottom = parentBounds.bottom + twoScreenHeight; - const isOverlap = - Math.max(parentTop, mdBounds.top) <= - Math.min(parentBottom, mdBounds.bottom); - inView.current = isOverlap; - triggerRender(Date.now()); - } - - if (inView.current && md) { - const rect = md.getBoundingClientRect(); - renderedHeight.current = Math.max(renderedHeight.current, rect.height); - renderedWidth.current = Math.max(renderedWidth.current, rect.width); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, - 300, - { - leading: true, - trailing: true, - }, - ); - - useEffect(() => { - props.parentRef?.current?.addEventListener("scroll", checkInView); - checkInView(); - return () => - props.parentRef?.current?.removeEventListener("scroll", checkInView); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const getSize = (x: number) => (!inView.current && x > 0 ? x : "auto"); return (
- {inView.current && - (props.loading ? ( - - ) : ( - - ))} + {props.loading ? ( + + ) : ( + + )}
); } diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx index 76866129b..63950a40d 100644 --- a/app/components/model-config.tsx +++ b/app/components/model-config.tsx @@ -76,7 +76,7 @@ export function ModelConfigList(props: { props.updateConfig( @@ -169,7 +169,7 @@ export function ModelConfigList(props: { title={props.modelConfig.historyMessageCount.toString()} value={props.modelConfig.historyMessageCount} min="0" - max="32" + max="64" step="1" onChange={(e) => props.updateConfig( diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index bf83712da..7025daf7e 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -443,6 +443,7 @@ export function Selector(props: { subTitle?: string; value: T; }>; + defaultSelectedValue?: T; onSelection?: (selection: T[]) => void; onClose?: () => void; multiple?: boolean; @@ -452,6 +453,7 @@ export function Selector(props: {
{props.items.map((item, i) => { + const selected = props.defaultSelectedValue === item.value; return ( (props: { props.onSelection?.([item.value]); props.onClose?.(); }} - > + > + {selected ? ( +
+ ) : ( + <> + )} + ); })}
diff --git a/app/constant.ts b/app/constant.ts index 387e2566a..75ca5ef34 100644 --- a/app/constant.ts +++ b/app/constant.ts @@ -109,3 +109,6 @@ export const DEFAULT_MODELS = [ available: true, }, ] as const; + +export const CHAT_PAGE_SIZE = 10; +export const MAX_RENDER_MSG_COUNT = 20; diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 656cd5fe3..73dc7866e 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -19,6 +19,7 @@ const cn = { Chat: { SubTitle: (count: number) => `共 ${count} 条对话`, EditMessage: { + Title: "编辑消息记录", Topic: { Title: "聊天主题", SubTitle: "更改当前聊天主题", @@ -274,7 +275,7 @@ const cn = { Context: { Toast: (x: any) => `包含 ${x} 条预设提示词`, Edit: "当前对话设置", - Add: "新增预设对话", + Add: "新增一条对话", Clear: "上下文已清除", Revert: "恢复上下文", }, diff --git a/app/locales/cs.ts b/app/locales/cs.ts index 63d2c237f..b8a3b974c 100644 --- a/app/locales/cs.ts +++ b/app/locales/cs.ts @@ -5,7 +5,7 @@ const cs: PartialLocaleType = { WIP: "V přípravě...", Error: { Unauthorized: - "Neoprávněný přístup, zadejte přístupový kód na stránce nastavení.", + "Neoprávněný přístup, zadejte přístupový kód na [stránce](/#/auth) nastavení.", }, ChatItem: { ChatItemCount: (count: number) => `${count} zpráv`, diff --git a/app/locales/de.ts b/app/locales/de.ts index e8d4dc9c7..59b1fc927 100644 --- a/app/locales/de.ts +++ b/app/locales/de.ts @@ -5,7 +5,7 @@ const de: PartialLocaleType = { WIP: "In Bearbeitung...", Error: { Unauthorized: - "Unbefugter Zugriff, bitte geben Sie den Zugangscode auf der Einstellungsseite ein.", + "Unbefugter Zugriff, bitte geben Sie den Zugangscode auf der [Einstellungsseite](/#/auth) ein.", }, ChatItem: { ChatItemCount: (count: number) => `${count} Nachrichten`, diff --git a/app/locales/en.ts b/app/locales/en.ts index 2d83de929..5bdd0b501 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -21,6 +21,7 @@ const en: LocaleType = { Chat: { SubTitle: (count: number) => `${count} messages`, EditMessage: { + Title: "Edit All Messages", Topic: { Title: "Topic", SubTitle: "Change the current topic", diff --git a/app/locales/es.ts b/app/locales/es.ts index 5f5ffc75d..6145eccc8 100644 --- a/app/locales/es.ts +++ b/app/locales/es.ts @@ -5,7 +5,7 @@ const es: PartialLocaleType = { WIP: "En construcción...", Error: { Unauthorized: - "Acceso no autorizado, por favor ingrese el código de acceso en la página de configuración.", + "Acceso no autorizado, por favor ingrese el código de acceso en la [página](/#/auth) de configuración.", }, ChatItem: { ChatItemCount: (count: number) => `${count} mensajes`, diff --git a/app/locales/fr.ts b/app/locales/fr.ts index f4cd1490d..a98d4a432 100644 --- a/app/locales/fr.ts +++ b/app/locales/fr.ts @@ -5,7 +5,7 @@ const fr: PartialLocaleType = { WIP: "Prochainement...", Error: { Unauthorized: - "Accès non autorisé, veuillez saisir le code d'accès dans la page des paramètres.", + "Accès non autorisé, veuillez saisir le code d'accès dans la [page](/#/auth) des paramètres.", }, ChatItem: { ChatItemCount: (count: number) => `${count} messages en total`, diff --git a/app/locales/it.ts b/app/locales/it.ts index 4b74ff3f0..6a2eabf40 100644 --- a/app/locales/it.ts +++ b/app/locales/it.ts @@ -5,7 +5,7 @@ const it: PartialLocaleType = { WIP: "Work in progress...", Error: { Unauthorized: - "Accesso non autorizzato, inserire il codice di accesso nella pagina delle impostazioni.", + "Accesso non autorizzato, inserire il codice di accesso nella [pagina](/#/auth) delle impostazioni.", }, ChatItem: { ChatItemCount: (count: number) => `${count} messaggi`, diff --git a/app/locales/ko.ts b/app/locales/ko.ts index ac5ee5df2..194e44769 100644 --- a/app/locales/ko.ts +++ b/app/locales/ko.ts @@ -5,7 +5,8 @@ import type { PartialLocaleType } from "./index"; const ko: PartialLocaleType = { WIP: "곧 출시 예정...", Error: { - Unauthorized: "권한이 없습니다. 설정 페이지에서 액세스 코드를 입력하세요.", + Unauthorized: + "권한이 없습니다. 설정 페이지에서 액세스 코드를 [입력하세요](/#/auth).", }, ChatItem: { ChatItemCount: (count: number) => `${count}개의 메시지`, diff --git a/app/locales/no.ts b/app/locales/no.ts index e4b834964..43c92916f 100644 --- a/app/locales/no.ts +++ b/app/locales/no.ts @@ -4,7 +4,8 @@ import type { PartialLocaleType } from "./index"; const no: PartialLocaleType = { WIP: "Arbeid pågår ...", Error: { - Unauthorized: "Du har ikke tilgang. Vennlig oppgi tildelt adgangskode.", + Unauthorized: + "Du har ikke tilgang. [Vennlig oppgi tildelt adgangskode](/#/auth).", }, ChatItem: { ChatItemCount: (count: number) => `${count} meldinger`, diff --git a/app/locales/ru.ts b/app/locales/ru.ts index 76be21a36..313acf544 100644 --- a/app/locales/ru.ts +++ b/app/locales/ru.ts @@ -5,7 +5,7 @@ const ru: PartialLocaleType = { WIP: "Скоро...", Error: { Unauthorized: - "Несанкционированный доступ. Пожалуйста, введите код доступа на странице настроек.", + "Несанкционированный доступ. Пожалуйста, введите код доступа на [странице](/#/auth) настроек.", }, ChatItem: { ChatItemCount: (count: number) => `${count} сообщений`, diff --git a/app/locales/tr.ts b/app/locales/tr.ts index ad6b66fd4..46fdd6285 100644 --- a/app/locales/tr.ts +++ b/app/locales/tr.ts @@ -5,7 +5,7 @@ const tr: PartialLocaleType = { WIP: "Çalışma devam ediyor...", Error: { Unauthorized: - "Yetkisiz erişim, lütfen erişim kodunu ayarlar sayfasından giriniz.", + "Yetkisiz erişim, lütfen erişim kodunu ayarlar [sayfasından](/#/auth) giriniz.", }, ChatItem: { ChatItemCount: (count: number) => `${count} mesaj`, diff --git a/app/locales/tw.ts b/app/locales/tw.ts index d64294fa2..45c3caa02 100644 --- a/app/locales/tw.ts +++ b/app/locales/tw.ts @@ -4,7 +4,7 @@ import type { PartialLocaleType } from "./index"; const tw: PartialLocaleType = { WIP: "該功能仍在開發中……", Error: { - Unauthorized: "目前您的狀態是未授權,請前往設定頁面輸入授權碼。", + Unauthorized: "目前您的狀態是未授權,請前往[設定頁面](/#/auth)輸入授權碼。", }, ChatItem: { ChatItemCount: (count: number) => `${count} 條對話`, diff --git a/app/store/config.ts b/app/store/config.ts index b1998b930..d963d39dd 100644 --- a/app/store/config.ts +++ b/app/store/config.ts @@ -81,7 +81,7 @@ export const ModalConfigValidator = { return x as ModelType; }, max_tokens(x: number) { - return limitNumber(x, 0, 32000, 2000); + return limitNumber(x, 0, 100000, 2000); }, presence_penalty(x: number) { return limitNumber(x, -2, 2, 0); diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 2c7398f0d..a8a66642a 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -9,7 +9,7 @@ }, "package": { "productName": "ChatGPT Next Web", - "version": "2.9.1" + "version": "2.9.2" }, "tauri": { "allowlist": {