73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import React, { ForwardedRef, useEffect, useRef } from 'react';
|
|
|
|
type Message = {
|
|
role: string
|
|
content: string
|
|
}
|
|
|
|
interface ConversationProps {
|
|
messages: Message[];
|
|
onResendClick: () => void;
|
|
onEditClick: () => void;
|
|
onCopyClick: () => void;
|
|
isClicked:boolean
|
|
}
|
|
|
|
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
|
|
({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
|
|
const endOfMessagesRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Auto-scroll to the bottom of the conversation whenever a new message is added
|
|
useEffect(() => {
|
|
if (endOfMessagesRef.current) {
|
|
endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}, [messages]); // Triggers the effect whenever the 'messages' array changes
|
|
|
|
useEffect(() => {
|
|
console.log(isClicked);
|
|
|
|
},[isClicked])
|
|
|
|
return (
|
|
<div className="output">
|
|
<div className="conversation resize" id="conversation" ref={ref}>
|
|
{messages.map((message, index) => {
|
|
let isUserMessage
|
|
if (message.role == "user") {
|
|
isUserMessage = message
|
|
}
|
|
if (index >= 1){
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={isUserMessage ? 'user-message' : 'ai-message'}
|
|
>
|
|
<p> {message.content}</p>
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
|
|
{/* Dummy div to mark the end of the conversation for auto-scrolling */}
|
|
<div ref={endOfMessagesRef} />
|
|
<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>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default ConversationFrontend;
|