interstellar_ai/app/ConversationFrontend.tsx
2024-09-18 14:52:04 +02:00

43 lines
1.3 KiB
TypeScript

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;