interstellar_ai/app/ConversationFrontend.tsx

import React, { ForwardedRef } from 'react';

interface ConversationProps {
  messages: string[];
  onResendClick: () => void;
  onEditClick: () => void;
  onCopyClick: () => void;
}

const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
  ({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef<HTMLDivElement>) => {
    return (
      <div className="output">
        <div className="conversation resize" id="conversation" ref={ref}>
          {messages.map((message, index) => {
            const isUserMessage = message.startsWith('User:');
            return (
              <div
                key={index}
                className={isUserMessage ? 'user-message' : 'ai-message'}
              >
                {message}
              </div>
            );
          })}
          <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>
          </div>
        </div>
      </div>
    );
  }
);

export default ConversationFrontend;