shadimage

Chat UI Primitives

Virtualized chat with measured markdown. Auto-scroll, message strategies, typing indicators.

components/infsh/agent/chat-container.tsx

import React, { forwardRef, type ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface ChatContainerProps {
  children: ReactNode;
  className?: string;
}

/**
 * ChatContainer - Grid layout wrapper for chat components
 * 
 * @example
 * ```tsx
 * <ChatContainer className="h-screen">
 *   <Header />
 *   <ChatMessages>...</ChatMessages>
 *   <ChatInput />
 * </ChatContainer>
 * ```
 */
export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>(
  ({ children, className }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          'grid max-h-full w-full grid-rows-[auto_1fr_auto]',
          className
        )}
      >
        {children}
      </div>
    );
  }
);

ChatContainer.displayName = 'ChatContainer';

Where it goes
chat
Interaction
text-animation

DependenciesBundle weight · light

@inferencesh/sdk