Browse Source

Merge pull request #404 from cyhhao/pr2

optimize: scrolling experience
Yifei Zhang 1 year ago
parent
commit
d923869dc3
1 changed files with 7 additions and 6 deletions
  1. 7 6
      app/components/chat.tsx

+ 7 - 6
app/components/chat.tsx

@@ -370,7 +370,8 @@ export function Chat(props: {
     chatStore.onUserInput(userInput).then(() => setIsLoading(false));
     setUserInput("");
     setPromptHints([]);
-    inputRef.current?.focus();
+    if (!isMobileScreen()) inputRef.current?.focus();
+    setAutoScroll(true);
   };
 
   // stop response
@@ -527,7 +528,11 @@ export function Chat(props: {
         className={styles["chat-body"]}
         ref={scrollRef}
         onScroll={(e) => onChatBodyScroll(e.currentTarget)}
-        onTouchStart={() => inputRef.current?.blur()}
+        onWheel={() => setAutoScroll(false)}
+        onTouchStart={() => {
+          inputRef.current?.blur();
+          setAutoScroll(false);
+        }}
       >
         {messages.map((message, i) => {
           const isUser = message.role === "user";
@@ -588,7 +593,6 @@ export function Chat(props: {
                         if (!isMobileScreen()) return;
                         setUserInput(message.content);
                       }}
-                      onMouseOver={() => inputRef.current?.blur()}
                     >
                       <Markdown content={message.content} />
                     </div>
@@ -623,9 +627,6 @@ export function Chat(props: {
               setAutoScroll(false);
               setTimeout(() => setPromptHints([]), 500);
             }}
-            onMouseOver={() => {
-              inputRef.current?.focus();
-            }}
             autoFocus={!props?.sideBarShowing}
           />
           <IconButton