interstellar_ai/app/components/ConversationFrontend.tsx

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;