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

stop button

Browse source
This commit is contained in:
YasinOnm08 2024-10-01 14:29:15 +02:00
parent 39ea1a2954
commit 9453dd1349
3 changed files with 94 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

48
app/components/ConversationFrontend.tsx
View file

@ -7,6 +7,7 @@ type Message = {
interface ConversationProps {
messages: Message[];
onStopClick: () => void;
onResendClick: () => void;
onEditClick: () => void;
onCopyClick: () => void;
@ -14,10 +15,21 @@ interface ConversationProps {
}
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
({ messages,onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
const messagesEndRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
if (messagesEndRef.current) {
const rect = messagesEndRef.current.getBoundingClientRect();
console.log('Position of the target div:');
console.log('Top:', rect.top); // Distance from the top of the viewport
console.log('Left:', rect.left); // Distance from the left of the viewport
console.log('Width:', rect.width); // Width of the element
console.log('Height:', rect.height); // Height of the element
}
}, [messages]);
useEffect(() => {
messagesEndRef.current?.scrollIntoView()
}, [messages])
@ -40,16 +52,30 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
})}
<div className="button-container">
<button type="button" onClick={onResendClick}>
<img src="/img/resend.svg" alt="resend" />
</button>
<button type="button" onClick={onEditClick}>
<img src="/img/edit.svg" alt="edit" />
</button>
<button type="button" onClick={onCopyClick}>
<img src="/img/copy.svg" alt="copy" />
</button>
<p id="copiedText" style={{ opacity: isClicked ? "1" : "0", transition: "all 0.3s ease-in-out" }}>Copied!</p>
<div className="tooltip">
<button type="button" onClick={onStopClick}>
<img src="/img/resend.svg" alt="stop" />
</button>
<span className="tooltiptext">Stop</span>
</div>
<div className="tooltip">
<button type="button" onClick={onResendClick}>
<img src="/img/resend.svg" alt="resend" />
</button>
<span className="tooltiptext">Resend</span>
</div>
<div className="tooltip">
<button type="button" onClick={onEditClick}>
<img src="/img/edit.svg" alt="edit" />
</button>
<span className="tooltiptext">Edit</span>
</div>
<div className="tooltip">
<button type="button" onClick={onCopyClick}>
<img src="/img/copy.svg" alt="copy" />
</button>
<span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
</div>
</div>
<div ref={messagesEndRef} />
</div>