From b5ef552c253bfc7e1a13b0a44ddea4d5a907deb3 Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Wed, 2 Aug 2023 23:35:51 +0800
Subject: [PATCH] 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 0297a56a..d407d28e 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 b4297a7a..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<HTMLDivElement>(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 (
     <div className="modal-mask">
       <Modal
-        title={Locale.UI.Edit}
+        title={Locale.Chat.EditMessage.Title}
         onClose={props.onClose}
         actions={[
           <IconButton
@@ -590,10 +599,7 @@ export 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;
 
@@ -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}
                     />
                   </div>
 
@@ -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 76866129..63950a40 100644
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -76,7 +76,7 @@ export function ModelConfigList(props: {
         <input
           type="number"
           min={100}
-          max={32000}
+          max={100000}
           value={props.modelConfig.max_tokens}
           onChange={(e) =>
             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 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);