Chat UI Primitives

1import React, { forwardRef, type ReactNode } from 'react';
2import { cn } from '@/lib/utils';
3 
4interface ChatContainerProps {
5  children: ReactNode;
6  className?: string;
7}
8 
9/**
10 * ChatContainer - Grid layout wrapper for chat components
11 * 
12 * @example
13 * ```tsx
14 * <ChatContainer className="h-screen">
15 *   <Header />
16 *   <ChatMessages>...</ChatMessages>
17 *   <ChatInput />
18 * </ChatContainer>
19 * ```
20 */
21export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>(
22  ({ children, className }, ref) => {
23    return (
24      <div
25        ref={ref}
26        className={cn(
27          'grid max-h-full w-full grid-rows-[auto_1fr_auto]',
28          className
29        )}
30      >
31        {children}
32      </div>
33    );
34  }
35);
36 
37ChatContainer.displayName = 'ChatContainer';
38