React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into main

Browse source
This commit is contained in:
Patrick 2024-10-01 13:25:53 +02:00
commit 7b25153361
6 changed files with 59 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/components/ConversationFrontend.tsx
View file

@ -14,32 +14,31 @@ interface ConversationProps {
}
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
const endOfMessagesRef = useRef<HTMLDivElement>(null);
({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
const messagesEndRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
messagesEndRef.current?.scrollIntoView()
}, [messages])
return (
<div className="output">
<div className="conversation resize" id="conversation" ref={ref}>
<div className="output" ref={ref}>
<div className="conversation resize" id="conversation">
{messages.map((message, index) => {
let isUserMessage
if (message.role == "user") {
isUserMessage = message
}
if (index >= 1){
if (index >= 1) {
return (
<div
key={index}
className={isUserMessage ? 'user-message' : 'ai-message'}
>
className={message.role === "user" ? '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" />
@ -50,8 +49,9 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
<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>
<p id="copiedText" style={{ opacity: isClicked ? "1" : "0", transition: "all 0.3s ease-in-out" }}>Copied!</p>
</div>
<div ref={messagesEndRef} />
</div>
</div>
);