@admin-layout/tailwind-chat-pro 12.2.4-alpha.102

package/src/components/messages-container-ui/MessagesContainerUI.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import clsx from 'clsx';
+import { PlanModeView } from './PlanModeView';
+import type { PlanMessage, MessageGroupComponentType } from './types';
+import type { PlanModeViewInputToolbarProps } from './PlanModeView';
+
+export interface MessagesContainerUIProps {
+    messages: PlanMessage[];
+    streamingContent?: string;
+    currentUser: { id: string; name?: string; avatar?: string; [key: string]: any };
+    onSend: (text: string) => void;
+    /** Optional classes applied to the container root (useful for width/padding tweaks). */
+    className?: string;
+    /** Optional ref for the scroll container inside PlanModeView. */
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+    /** Optional className applied to PlanModeView root wrapper. */
+    planModeViewClassName?: string;
+    /** Optional className applied to PlanModeView scroll container element. */
+    planModeScrollContainerClassName?: string;
+    /** When true, hide scrollbar visuals but keep it scrollable. */
+    hideScrollbar?: boolean;
+    disabled?: boolean;
+    isLoading?: boolean;
+    onStop?: () => void;
+    showDate?: boolean;
+    showAvatar?: boolean;
+    showMessageBubbleBorder?: boolean;
+    /** When false (default), do NOT create an internal scroll container (avoids nested scroll). */
+    useInternalScroll?: boolean;
+    /** When true, the built-in input toolbar area is not rendered. */
+    hideInputToolbar?: boolean;
+    /**
+     * Where to place the input toolbar.
+     * - `bottom` (default): render toolbar in the bottom area.
+     * - `inlineWhenEmpty`: when there are no messages and no streaming/loading, render the toolbar inline
+     *   inside the empty state (matches landing UI), otherwise use bottom placement.
+     */
+    inputPlacement?: 'bottom' | 'inlineWhenEmpty';
+    /**
+     * Optional: render the input composer; receives value, onChange, onSend, disabled.
+     * Defaults to `@admin-layout/tailwind-ui`'s `InputToolBar`, so the base works out of the box.
+     */
+    renderInputToolbar?: (props: PlanModeViewInputToolbarProps) => React.ReactNode;
+    /** Placeholder for the default input composer (ignored when `renderInputToolbar` is provided). */
+    inputPlaceholder?: string;
+    /** Optional: passed to the injected message-group renderer */
+    onOpen?: (element?: any) => void;
+    onMessageClick?: (msg: any) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    sandboxErrors?: any[];
+    currentFiles?: Record<string, string>;
+    onFixError?: (errorMessage: string) => Promise<void>;
+    /** Optional: error message to show above messages; use with onRetry for retry button */
+    error?: string | null;
+    /** Optional: called when user clicks retry (e.g. after error) */
+    onRetry?: () => void;
+    /**
+     * Optional: custom content when there are no messages and no streaming/loading.
+     * Receives input toolbar props so you can render the composer inline (e.g. landing UI).
+     */
+    renderEmptyState?: (ctx: { inputToolbarProps: PlanModeViewInputToolbarProps }) => React.ReactNode;
+    /**
+     * Optional: when provided, scroll to bottom whenever these deps change (e.g. [streamingContent, messages.length]).
+     * Use from the parent to keep the view at bottom on each stream chunk.
+     */
+    scrollToBottomDeps?: React.DependencyList;
+    /** Optional: className applied to the content wrapper inside PlanModeView. */
+    contentClassName?: string;
+    /** Optional: className applied to the post container inside PlanModeView. */
+    postContainerClassName?: string;
+    /** When true, code blocks show copy and download actions (default: true). */
+    showCopyDownloadOnCodeBlock?: boolean;
+
+    // ----- Customization (the "base, customizable" surface) -----
+    /**
+     * The message-group renderer. Defaults to a plain-text bubble renderer so the base
+     * works standalone. Inject a rich renderer (e.g. messenger-box's
+     * `ModernMessageGroupComponent`) for markdown / code / widget-card rendering.
+     */
+    MessageGroupComponent?: MessageGroupComponentType;
+    /** Optional: how to render the in-flight streaming assistant content (default: plain text). */
+    renderStreamingContent?: (content: string) => React.ReactNode;
+    /** Optional: override how a PlanMessage is mapped to the post shape handed to the renderer. */
+    mapMessageToPost?: (msg: PlanMessage, currentUser: MessagesContainerUIProps['currentUser']) => any;
+}
+
+/**
+ * MessagesContainerUI — a customizable base chat container for plan mode
+ * (chat / search / research). Owns the layout, scrolling, streaming area,
+ * empty / error / loading states and the input-toolbar slot. The actual message
+ * rendering is delegated to an injectable `MessageGroupComponent` (defaults to a
+ * plain-text bubble renderer), so consumers plug in their own rich renderer.
+ */
+export function MessagesContainerUI({
+    messages,
+    streamingContent,
+    currentUser,
+    onSend,
+    className,
+    scrollContainerRef,
+    planModeViewClassName,
+    planModeScrollContainerClassName,
+    hideScrollbar = false,
+    disabled = false,
+    isLoading = false,
+    onStop,
+    showDate = false,
+    showAvatar = false,
+    showMessageBubbleBorder = false,
+    useInternalScroll = false,
+    hideInputToolbar = false,
+    inputPlacement = 'bottom',
+    renderInputToolbar,
+    inputPlaceholder,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+    sandboxErrors,
+    currentFiles,
+    onFixError,
+    error = null,
+    onRetry,
+    renderEmptyState,
+    scrollToBottomDeps,
+    contentClassName,
+    postContainerClassName,
+    showCopyDownloadOnCodeBlock = true,
+    MessageGroupComponent,
+    renderStreamingContent,
+    mapMessageToPost,
+}: MessagesContainerUIProps) {
+    return (
+        <div className={clsx('flex flex-col flex-1 min-h-0', className)}>
+            <PlanModeView
+                messages={messages}
+                streamingContent={streamingContent}
+                currentUser={currentUser}
+                onSend={onSend}
+                disabled={disabled}
+                isLoading={isLoading}
+                onStop={onStop}
+                showDate={showDate}
+                showAvatar={showAvatar}
+                showMessageBubbleBorder={showMessageBubbleBorder}
+                useInternalScroll={useInternalScroll}
+                scrollContainerRef={scrollContainerRef}
+                className={planModeViewClassName}
+                scrollContainerClassName={planModeScrollContainerClassName}
+                hideScrollbar={hideScrollbar}
+                hideInputToolbar={hideInputToolbar}
+                inputPlacement={inputPlacement}
+                renderInputToolbar={renderInputToolbar}
+                inputPlaceholder={inputPlaceholder}
+                onOpen={onOpen}
+                onMessageClick={onMessageClick}
+                isDesktopView={isDesktopView}
+                isSmallScreen={isSmallScreen}
+                sandboxErrors={sandboxErrors}
+                currentFiles={currentFiles}
+                onFixError={onFixError}
+                error={error}
+                onRetry={onRetry}
+                renderEmptyState={renderEmptyState}
+                scrollToBottomDeps={scrollToBottomDeps}
+                contentClassName={contentClassName}
+                postContainerClassName={postContainerClassName}
+                showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                MessageGroupComponent={MessageGroupComponent}
+                renderStreamingContent={renderStreamingContent}
+                mapMessageToPost={mapMessageToPost}
+            />
+        </div>
+    );
+}
+
+export default MessagesContainerUI;