From cbabb9392c6a2f07235f9765061d7620391ec3ff Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Wed, 2 Aug 2023 22:53:36 +0800 Subject: [PATCH 1/2] feat: improve ChatAction ux --- app/components/chat.module.scss | 5 ++++- app/components/chat.tsx | 1 + app/components/ui-lib.tsx | 17 ++++++++++++++++- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index a3ab56062..0297a56a5 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -18,6 +18,7 @@ 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..b4297a7a2 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -504,6 +504,7 @@ export function ChatActions(props: { {showModelSelector && ( ({ title: m, value: m, 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 ? ( +
+ ) : ( + <> + )} + ); })} From b5ef552c253bfc7e1a13b0a44ddea4d5a907deb3 Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Wed, 2 Aug 2023 23:35:51 +0800 Subject: [PATCH 2/2] feat: improve auto scroll ux and edit model title --- app/components/chat.module.scss | 2 +- app/components/chat.tsx | 31 ++++++++++++++++++++----------- app/components/model-config.tsx | 4 ++-- app/locales/cn.ts | 3 ++- app/locales/en.ts | 1 + app/store/config.ts | 2 +- 6 files changed, 27 insertions(+), 16 deletions(-) diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index 0297a56a5..d407d28e4 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -14,7 +14,7 @@ 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); diff --git a/app/components/chat.tsx b/app/components/chat.tsx index b4297a7a2..edd9fcaf4 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, @@ -532,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; @@ -608,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 @@ -1036,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); @@ -1148,7 +1158,7 @@ export function Chat() { }} fontSize={fontSize} parentRef={scrollRef} - defaultShow={i >= messages.length - 10} + defaultShow={i >= messages.length - 6} />
@@ -1193,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 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/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/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/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);