forked from XiaoMo/ChatGPT-Next-Web
fix(scroll): scroll after click submit button
The behavior of SubmitKey and SubmitButton should be the same
This commit is contained in:
parent
d822f333c2
commit
a2807c9815
@ -204,9 +204,21 @@ export function Chat(props: { showSideBar?: () => void }) {
|
|||||||
|
|
||||||
// for auto-scroll
|
// for auto-scroll
|
||||||
const latestMessageRef = useRef<HTMLDivElement>(null);
|
const latestMessageRef = useRef<HTMLDivElement>(null);
|
||||||
|
const inputPanelRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
// wont scroll while hovering messages
|
// wont scroll while hovering messages
|
||||||
const [autoScroll, setAutoScroll] = useState(false);
|
const [autoScroll, setAutoScroll] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
const handleMouseDown = (e: MouseEvent) => {
|
||||||
|
// check if click on input panel
|
||||||
|
setAutoScroll(
|
||||||
|
!!inputPanelRef.current &&
|
||||||
|
inputPanelRef.current.contains(e.target as HTMLElement)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
document.addEventListener("mousedown", handleMouseDown);
|
||||||
|
return () => document.removeEventListener("mousedown", handleMouseDown);
|
||||||
|
});
|
||||||
|
|
||||||
// preview messages
|
// preview messages
|
||||||
const messages = (session.messages as RenderMessage[])
|
const messages = (session.messages as RenderMessage[])
|
||||||
@ -369,7 +381,7 @@ export function Chat(props: { showSideBar?: () => void }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles["chat-input-panel"]}>
|
<div className={styles["chat-input-panel"]} ref={inputPanelRef}>
|
||||||
<div className={styles["chat-input-panel-inner"]}>
|
<div className={styles["chat-input-panel-inner"]}>
|
||||||
<textarea
|
<textarea
|
||||||
className={styles["chat-input"]}
|
className={styles["chat-input"]}
|
||||||
@ -378,8 +390,6 @@ export function Chat(props: { showSideBar?: () => void }) {
|
|||||||
onInput={(e) => setUserInput(e.currentTarget.value)}
|
onInput={(e) => setUserInput(e.currentTarget.value)}
|
||||||
value={userInput}
|
value={userInput}
|
||||||
onKeyDown={(e) => onInputKeyDown(e as any)}
|
onKeyDown={(e) => onInputKeyDown(e as any)}
|
||||||
onFocus={() => setAutoScroll(true)}
|
|
||||||
onBlur={() => setAutoScroll(false)}
|
|
||||||
autoFocus
|
autoFocus
|
||||||
/>
|
/>
|
||||||
<IconButton
|
<IconButton
|
||||||
|
Loading…
Reference in New Issue
Block a user