40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import type { ReactElement } from 'react';
|
|
import type { ChatTranscriptMessage } from './use-chat-connection';
|
|
|
|
interface MessageTranscriptProps {
|
|
messages: ChatTranscriptMessage[];
|
|
streaming: boolean;
|
|
text: string;
|
|
}
|
|
|
|
export function MessageTranscript({
|
|
messages,
|
|
streaming,
|
|
text,
|
|
}: MessageTranscriptProps): ReactElement {
|
|
return (
|
|
<div
|
|
role="log"
|
|
aria-live="polite"
|
|
aria-label="Conversation"
|
|
className="flex flex-1 flex-col gap-3 overflow-y-auto p-4"
|
|
>
|
|
{messages.map((message) => (
|
|
<div key={message.id} data-role={message.role} className="whitespace-pre-wrap text-sm">
|
|
<span className="font-medium">{message.role === 'user' ? 'You' : 'Assistant'}: </span>
|
|
<span>{message.text}</span>
|
|
{message.thinking ? (
|
|
<div className="pt-1 text-xs italic opacity-70">{message.thinking}</div>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
{streaming ? (
|
|
<div data-role="assistant-streaming" className="whitespace-pre-wrap text-sm">
|
|
<span className="font-medium">Assistant: </span>
|
|
<span>{text || 'Thinking…'}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|