YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Compare commits

base: YasinOnm08:99a42a1f3ad05090cee80447b8442ba1161cb1d7
Branches Tags
YasinOnm08:main
React-Group:main
..
compare: YasinOnm08:119832ee395237aa572ac7384fb6cb556edfc084
Branches Tags
YasinOnm08:main
React-Group:main

No commits in common. "99a42a1f3ad05090cee80447b8442ba1161cb1d7" and "119832ee395237aa572ac7384fb6cb556edfc084" have entirely different histories.
99a42a1f3a ... 119832ee39

2 changed files with 17 additions and 54 deletions
Show stats Expand all files Collapse all files

56
app/components/ConversationFrontend.tsx
View file

@ -1,4 +1,4 @@
import React, { ForwardedRef, useState, useEffect, useRef } from 'react'; import React, { ForwardedRef, useEffect, useRef } from 'react';
type Message = { type Message = {
role: string role: string
@ -15,45 +15,24 @@ interface ConversationProps {
} }
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>( const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
({ messages, onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => { ({ messages,onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
const [isScrolling, setIsScrolling] = useState(true);
const messagesEndRef = useRef<HTMLDivElement | null>(null); const messagesEndRef = useRef<HTMLDivElement | null>(null)
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( if (messagesEndRef.current) {
(entries) => { const rect = messagesEndRef.current.getBoundingClientRect();
if (entries[0].isIntersecting) { console.log('Position of the target div:');
console.log('End of messages reached'); console.log('Top:', rect.top); // Distance from the top of the viewport
setIsScrolling(true); console.log('Left:', rect.left); // Distance from the left of the viewport
} else { console.log('Width:', rect.width); // Width of the element
console.log('End of messages not reached'); console.log('Height:', rect.height); // Height of the element
setIsScrolling(false); }
} }, [messages]);
},
{
root: document.querySelector('.output'),
threshold: 1.0, // Ensure the whole element is visible
}
);
const endOfMessages = messagesEndRef.current;
if (endOfMessages) {
observer.observe(endOfMessages);
}
return () => {
if (endOfMessages) {
observer.unobserve(endOfMessages);
}
};
}, [messages]);
// Scroll to bottom when new messages arrive
useEffect(() => { useEffect(() => {
if (isScrolling) { messagesEndRef.current?.scrollIntoView()
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages])
}
}, [messages, isScrolling]);
return ( return (
<div className="output" ref={ref}> <div className="output" ref={ref}>
@ -98,12 +77,11 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
<span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span> <span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
</div> </div>
</div> </div>
<div className={"endOfMessages"} ref={messagesEndRef} style={{height:"10px"}}/> <div ref={messagesEndRef} />
</div> </div>
<button id="scrollToBottom" disabled={isScrolling?true:false} style={{visibility: isScrolling?"hidden":"visible"}} onClick={()=> setIsScrolling(true)}>Down</button>
</div> </div>
); );
} }
); );
export default ConversationFrontend; export default ConversationFrontend;

15
app/styles/output.css
View file

@ -1,6 +1,5 @@
/* Output Section */ /* Output Section */
.output { .output {
scroll-behavior: smooth;
grid-column: 2; grid-column: 2;
grid-row: 1 / 4; grid-row: 1 / 4;
background-color: var(--output-background-color); background-color: var(--output-background-color);
@ -14,7 +13,6 @@
overflow-y: auto; overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */ width: calc(100% - 2em); /* Corrected calculation for width */
height: 86dvh; height: 86dvh;
position: relative;
} }
#conversation { #conversation {
@ -129,16 +127,3 @@
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
#scrollToBottom{
scroll-behavior: smooth;
visibility: hidden;
position: absolute;
height: 50px;
width: 50px;
margin: auto;
border-radius: 100%;
bottom: 16dvh;
left: 50%;
translate: -25px;
}