diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 5669cc9a3..51fe74fe7 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -960,9 +960,24 @@ function _Chat() { (scrollRef.current.scrollTop + scrollRef.current.clientHeight), ) <= 1 : false; + const isAttachWithTop = useMemo(() => { + const lastMessage = scrollRef.current?.lastElementChild as HTMLElement; + // if scrolllRef is not ready or no message, return false + if (!scrollRef?.current || !lastMessage) return false; + const topDistance = + lastMessage!.getBoundingClientRect().top - + scrollRef.current.getBoundingClientRect().top; + // leave some space for user question + return topDistance < 100; + }, [scrollRef?.current?.scrollHeight]); + + const isTyping = userInput !== ""; + + // if user is typing, should auto scroll to bottom + // if user is not typing, should auto scroll to bottom only if already at bottom const { setAutoScroll, scrollDomToBottom } = useScrollToBottom( scrollRef, - isScrolledToBottom, + (isScrolledToBottom || isAttachWithTop) && !isTyping, ); const [hitBottom, setHitBottom] = useState(true); const isMobileScreen = useMobileScreen(); diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index f58b16427..ba85f0970 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -248,6 +248,10 @@ function escapeBrackets(text: string) { function tryWrapHtmlCode(text: string) { // try add wrap html code (fixed: html codeblock include 2 newline) + // ignore embed codeblock + if (text.includes("```")) { + return text; + } return text .replace( /([`]*?)(\w*?)([\n\r]*?)()/g,