forked from React-Group/interstellar_ai
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import React, { ForwardedRef, useEffect, useRef } from 'react';
|
|
|
|
type Message = {
|
|
role: string
|
|
content: string
|
|
}
|
|
|
|
interface ConversationProps {
|
|
messages: Message[];
|
|
onStopClick: () => void;
|
|
onResendClick: () => void;
|
|
onEditClick: () => void;
|
|
onCopyClick: () => void;
|
|
isClicked: boolean
|
|
}
|
|
|
|
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
|
|
({ 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])
|
|
|
|
return (
|
|
<div className="output" ref={ref}>
|
|
<div className="conversation resize" id="conversation">
|
|
{messages.map((message, index) => {
|
|
if (index >= 1) {
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={message.role === "user" ? 'user-message' : 'ai-message'}
|
|
>
|
|
<p> {message.content}</p>
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
|
|
<div className="button-container">
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default ConversationFrontend;
|