fix(scroll): scroll after click submit button

The behavior of SubmitKey and SubmitButton should be the same
This commit is contained in:
xiaotianxt 2023-03-28 01:26:49 +08:00 committed by xiaotianxt
parent d822f333c2
commit a2807c9815

View File

@ -204,9 +204,21 @@ export function Chat(props: { showSideBar?: () => void }) {
// for auto-scroll
const latestMessageRef = useRef<HTMLDivElement>(null);
const inputPanelRef = useRef<HTMLDivElement>(null);
// wont scroll while hovering messages
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
const messages = (session.messages as RenderMessage[])
@ -369,7 +381,7 @@ export function Chat(props: { showSideBar?: () => void }) {
</div>
</div>
<div className={styles["chat-input-panel"]}>
<div className={styles["chat-input-panel"]} ref={inputPanelRef}>
<div className={styles["chat-input-panel-inner"]}>
<textarea
className={styles["chat-input"]}
@ -378,8 +390,6 @@ export function Chat(props: { showSideBar?: () => void }) {
onInput={(e) => setUserInput(e.currentTarget.value)}
value={userInput}
onKeyDown={(e) => onInputKeyDown(e as any)}
onFocus={() => setAutoScroll(true)}
onBlur={() => setAutoScroll(false)}
autoFocus
/>
<IconButton