'use client';

/** Renders an in-progress assistant message from streaming text. */
interface StreamingMessageProps {
  text: string;
}

export function StreamingMessage({ text }: StreamingMessageProps): React.ReactElement | null {
  if (!text) return null;

  return (
    <div className="flex justify-start">
      <div className="max-w-[75%] rounded-xl border border-surface-border bg-surface-elevated px-4 py-3 text-sm text-text-primary">
        <div className="whitespace-pre-wrap break-words">{text}</div>
        <div className="mt-1 flex items-center gap-1 text-xs text-text-muted">
          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500" />
          Thinking...
        </div>
      </div>
    </div>
  );
}