jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed scrolling to bottom when writing on chat

Browse source
This commit is contained in:
Lucas Oliveira 2023-05-30 15:48:18 -03:00
commit 20cc70db36
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/src/modals/chatModal/index.tsx
View file

@ -33,8 +33,15 @@ export default function ChatModal({
const ws = useRef<WebSocket | null>(null); const ws = useRef<WebSocket | null>(null);
const [lockChat, setLockChat] = useState(false); const [lockChat, setLockChat] = useState(false);
const isOpen = useRef(open); const isOpen = useRef(open);
const messagesRef = useRef(null);
const id = useRef(flow.id); const id = useRef(flow.id);
useEffect(() => {
if (messagesRef.current) {
messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
}
}, [chatHistory]);
useEffect(() => { useEffect(() => {
isOpen.current = open; isOpen.current = open;
}, [open]); }, [open]);
@ -401,7 +408,10 @@ export default function ChatModal({
<HiX className="w-5 h-5" /> <HiX className="w-5 h-5" />
</button> </button>
</div> </div>
<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide"> <div
ref={messagesRef}
className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide"
>
{chatHistory.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => ( chatHistory.map((c, i) => (
<ChatMessage lockChat={lockChat} chat={c} key={i} /> <ChatMessage lockChat={lockChat} chat={c} key={i} />