diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index a3ab5606..d407d28e 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 7f54a7dd..edd9fcaf 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -370,18 +370,27 @@ function ChatAction(props: { function useScrollToBottom() { // for auto-scroll const scrollRef = useRef(null); - const [autoScroll, setAutoScroll] = useState(true); + const autoScroll = useRef(true); const scrollToBottom = useCallback(() => { const dom = scrollRef.current; if (dom) { requestAnimationFrame(() => dom.scrollTo(0, dom.scrollHeight)); } }, []); + const setAutoScroll = (enable: boolean) => { + autoScroll.current = enable; + }; // auto scroll useEffect(() => { - autoScroll && scrollToBottom(); - }); + const intervalId = setInterval(() => { + if (autoScroll.current) { + scrollToBottom(); + } + }, 100); + return () => clearInterval(intervalId); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return { scrollRef, @@ -504,6 +513,7 @@ export function ChatActions(props: { {showModelSelector && ( ({ title: m, value: m, @@ -531,7 +541,7 @@ export function EditMessageModal(props: { onClose: () => void }) { return (
[ - state.currentSession(), - state.currentSessionIndex, - ]); + const session = chatStore.currentSession(); const config = useAppConfig(); const fontSize = config.fontSize; @@ -607,9 +614,14 @@ export function Chat() { const isMobileScreen = useMobileScreen(); const navigate = useNavigate(); + const lastBodyScroolTop = useRef(0); const onChatBodyScroll = (e: HTMLElement) => { const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 10; setHitBottom(isTouchBottom); + + // only enable auto scroll when scroll down and touched bottom + setAutoScroll(e.scrollTop >= lastBodyScroolTop.current && isTouchBottom); + lastBodyScroolTop.current = e.scrollTop; }; // prompt hints @@ -1035,7 +1047,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); @@ -1147,7 +1158,7 @@ export function Chat() { }} fontSize={fontSize} parentRef={scrollRef} - defaultShow={i >= messages.length - 10} + defaultShow={i >= messages.length - 6} />
@@ -1192,7 +1203,6 @@ export function Chat() { value={userInput} onKeyDown={onInputKeyDown} onFocus={() => setAutoScroll(true)} - onBlur={() => setAutoScroll(false)} rows={inputRows} autoFocus={autoFocus} style={{ diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx index 76866129..63950a40 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 bf83712d..7025daf7 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/locales/cn.ts b/app/locales/cn.ts index 656cd5fe..73dc7866 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/en.ts b/app/locales/en.ts index 2d83de92..5bdd0b50 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/store/config.ts b/app/store/config.ts index b1998b93..d963d39d 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);