Chat Message

import { ComponentPropsWithoutRef, ReactNode } from 'react';

import './chat-message-list.css';

export interface ChatMessageListProps extends ComponentPropsWithoutRef<'div'> {
	/**
	 * The messages, as `ChatMessage` components.
	 */
	children: ReactNode;
	/**
	 * Additional class names.
	 */
	className?: string;
}

// Stand-in for the v2 `mergeClasses` util, which the published package does
// not export. The port uses the real one.
const mergeClasses = (classes: Array<string | null | undefined>) =>
	classes.filter(Boolean).join(' ');

/**
 * ChatMessageList UI component. Stacks `ChatMessage`s and owns the gap between
 * turns.
 */
export const ChatMessageList = ({
	children,
	className,
	...props
}: ChatMessageListProps) => {
	const baseClass = 'pds-chat-message-list';

	return (
		<div className={mergeClasses([baseClass, className])} {...props}>
			{children}
		</div>
	);
};