|
@@ -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
|