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

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

@@ -0,0 +1,457 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { AiAgentMessageRole, PostTypeEnum } from 'common';
+import type { MessageGroupComponentType, PlanMessage } from './types';
+import { DefaultMessageGroup } from './DefaultMessageGroup';
+import { DefaultInputToolBar } from './DefaultInputToolBar';
+
+const ASSISTANT_BUBBLE_BG = 'bg-white';
+const BORDER_COLOR = 'border-gray-200';
+
+const HIDE_SCROLLBAR_CSS = `
+/* Hide scrollbar while keeping scrollability */
+.ym-hide-scrollbar {
+  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.ym-hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+  width: 0;
+  height: 0;
+}
+`;
+
+const DEFAULT_ASSISTANT_AUTHOR = {
+    id: 'ai-assistant',
+    givenName: 'AI',
+    familyName: 'Assistant',
+    fullName: 'AI Assistant',
+    username: 'ai-assistant',
+    email: 'ai@assistant.com',
+    picture: null,
+    alias: [],
+    tokens: [],
+};
+
+export interface PlanModeViewInputToolbarProps {
+    value: string;
+    onChange: (text: string) => void;
+    onSend: () => void;
+    disabled?: boolean;
+}
+
+export interface PlanModeViewProps {
+    messages: PlanMessage[];
+    streamingContent?: string;
+    currentUser: { id: string; name?: string; avatar?: string; [key: string]: any };
+    onSend: (text: string) => void;
+    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;
+    /**
+     * Optional ref for the scroll container element (defaults to the internal
+     * message list wrapper).
+     *
+     * If provided, it will be attached to the internal scroll container div
+     * (so parent code can read/scroll it).
+     */
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+    /** Optional className applied to the scroll container element. */
+    scrollContainerClassName?: string;
+    /** When true, hide the scrollbar visuals but keep it scrollable. */
+    hideScrollbar?: boolean;
+    contentClassName?: string;
+    postContainerClassName?: string;
+
+    /** Optional className applied to the root wrapper element. */
+    className?: string;
+    /** 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 toolbar; receives value, onChange, onSend, disabled.
+     * Defaults to {@link DefaultInputToolBar} (which wraps `@admin-layout/tailwind-ui`'s
+     * `InputToolBar`), so the base ships a working composer out of the box.
+     */
+    renderInputToolbar?: (props: PlanModeViewInputToolbarProps) => React.ReactNode;
+    /** Placeholder for the default input toolbar (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]).
+     * Lets the parent force scroll on each stream chunk when the internal ResizeObserver/layout effect miss.
+     */
+    scrollToBottomDeps?: React.DependencyList;
+    /** When true, fenced / raw code blocks show copy and download actions (default: true). */
+    showCopyDownloadOnCodeBlock?: boolean;
+
+    // ----- Customization (the "base, customizable" surface) -----
+    /**
+     * The message-group renderer. Each rendered group receives a single mapped post.
+     * Defaults to {@link DefaultMessageGroup} (plain-text bubbles) so the base works
+     * standalone. Inject a rich renderer (e.g. messenger-box's
+     * `ModernMessageGroupComponent`) to get markdown / code / widget-card rendering.
+     */
+    MessageGroupComponent?: MessageGroupComponentType;
+    /**
+     * Optional: how to render the in-flight streaming assistant content. Defaults to a
+     * plain-text bubble. Inject a richer renderer (markdown / code) if desired.
+     */
+    renderStreamingContent?: (content: string) => React.ReactNode;
+    /**
+     * Optional: override how a PlanMessage is mapped to the post shape handed to
+     * `MessageGroupComponent`. Defaults to {@link defaultPlanMessageToPost}.
+     */
+    mapMessageToPost?: (msg: PlanMessage, currentUser: PlanModeViewProps['currentUser']) => any;
+}
+
+/** Default mapping of a PlanMessage to the post-like shape expected by message-group renderers. */
+export function defaultPlanMessageToPost(msg: PlanMessage, currentUser: PlanModeViewProps['currentUser']): any {
+    const isUser = msg.role === 'user';
+    const author =
+        msg.author ??
+        (isUser
+            ? {
+                  id: currentUser.id,
+                  givenName: currentUser.givenName ?? currentUser.name ?? 'User',
+                  familyName: currentUser.familyName ?? '',
+                  fullName: currentUser.fullName ?? currentUser.name ?? 'User',
+                  username: currentUser.username ?? currentUser.id,
+                  email: currentUser.email ?? '',
+                  picture: currentUser.picture ?? currentUser.avatar ?? null,
+                  alias: currentUser.alias ?? [],
+                  tokens: currentUser.tokens ?? [],
+              }
+            : DEFAULT_ASSISTANT_AUTHOR);
+
+    return {
+        id: msg.id,
+        message: msg.content,
+        author,
+        createdAt: msg.createdAt ?? new Date().toISOString(),
+        type: msg.type ?? PostTypeEnum.Aiassistant,
+        isDelivered: false,
+        isRead: false,
+        parentId: null,
+        fromServer: null,
+        updatedAt: msg.createdAt ?? new Date().toISOString(),
+        propsConfiguration: {
+            ...(msg.propsConfiguration ?? { contents: {} }),
+            contents: {
+                ...((msg.propsConfiguration as any)?.contents ?? {}),
+                role:
+                    (msg.propsConfiguration as any)?.contents?.role ??
+                    (isUser ? AiAgentMessageRole.User : AiAgentMessageRole.Assistant),
+                // Plan/build mode: consumers (e.g. ModernMessageBubble) read propsConfiguration.contents.mode
+                ...((msg.props as { mode?: string } | undefined)?.mode != null
+                    ? { mode: (msg.props as { mode?: string }).mode }
+                    : {}),
+            },
+        },
+        props: msg.props ?? {},
+        files: msg.files ?? [],
+        replies: null,
+        channel: null,
+        isPinned: false,
+    };
+}
+
+export function PlanModeView({
+    messages,
+    streamingContent,
+    currentUser,
+    onSend,
+    disabled = false,
+    isLoading = false,
+    onStop,
+    showDate = false,
+    showAvatar = false,
+    showMessageBubbleBorder = false,
+    useInternalScroll = false,
+    scrollContainerRef,
+    scrollContainerClassName,
+    hideScrollbar = false,
+    contentClassName,
+    postContainerClassName,
+    className,
+    hideInputToolbar = false,
+    inputPlacement = 'bottom',
+    renderInputToolbar,
+    inputPlaceholder,
+    onOpen = () => {},
+    onMessageClick = () => {},
+    isDesktopView = false,
+    isSmallScreen = false,
+    sandboxErrors = [],
+    currentFiles = {},
+    onFixError,
+    error = null,
+    onRetry,
+    renderEmptyState,
+    scrollToBottomDeps,
+    showCopyDownloadOnCodeBlock = true,
+    MessageGroupComponent = DefaultMessageGroup,
+    renderStreamingContent,
+    mapMessageToPost = defaultPlanMessageToPost,
+}: PlanModeViewProps) {
+    const [inputValue, setInputValue] = useState('');
+    const internalListRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const shouldAutoScrollRef = useRef(true);
+
+    const setScrollContainerRef = useCallback(
+        (node: HTMLDivElement | null) => {
+            internalListRef.current = node;
+
+            if (!scrollContainerRef) return;
+            if (typeof scrollContainerRef === 'function') {
+                scrollContainerRef(node);
+                return;
+            }
+
+            // RefObject / MutableRefObject
+            (scrollContainerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        },
+        [scrollContainerRef],
+    );
+
+    const scrollToBottom = useCallback(() => {
+        const el = internalListRef.current;
+        if (el && shouldAutoScrollRef.current) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }, []);
+
+    const handleSendFromInput = useCallback(() => {
+        const t = inputValue.trim();
+        if (!t) return;
+        onSend(t);
+        setInputValue('');
+    }, [inputValue, onSend]);
+
+    const inputToolbarProps: PlanModeViewInputToolbarProps = {
+        value: inputValue,
+        onChange: setInputValue,
+        onSend: handleSendFromInput,
+        disabled: disabled || isLoading,
+    };
+
+    // Default the input composer to @admin-layout/tailwind-ui's InputToolBar (the shared
+    // "ai-tool-box"); consumers can override with `renderInputToolbar` for a richer composer.
+    const renderToolbar =
+        renderInputToolbar ??
+        ((p: PlanModeViewInputToolbarProps) => (
+            <DefaultInputToolBar {...p} isLoading={isLoading} onStop={onStop} placeholder={inputPlaceholder} />
+        ));
+
+    const currentUserForGroup = useMemo(
+        () => ({
+            id: currentUser.id,
+            givenName: currentUser.givenName ?? currentUser.name ?? 'You',
+            familyName: currentUser.familyName ?? '',
+            fullName: currentUser.fullName ?? currentUser.name ?? 'You',
+            username: currentUser.username ?? currentUser.id,
+            email: currentUser.email ?? '',
+            picture: currentUser.picture ?? currentUser.avatar ?? null,
+            alias: currentUser.alias ?? [],
+            tokens: currentUser.tokens ?? [],
+        }),
+        [currentUser],
+    );
+
+    const posts = useMemo(
+        () => messages.map((m) => mapMessageToPost(m, currentUser)),
+        [messages, currentUser, mapMessageToPost],
+    );
+
+    const isEmpty = posts.length === 0 && !streamingContent?.trim() && !isLoading;
+    const shouldInlineToolbar = inputPlacement === 'inlineWhenEmpty' && isEmpty;
+    const shouldRenderBottomToolbar = !hideInputToolbar && !shouldInlineToolbar;
+
+    // Auto-scroll to bottom while user stays near bottom.
+    useLayoutEffect(() => {
+        if (!useInternalScroll) return;
+        if (!shouldAutoScrollRef.current) return;
+        scrollToBottom();
+        const id = requestAnimationFrame(() => {
+            scrollToBottom();
+            requestAnimationFrame(scrollToBottom);
+        });
+        return () => cancelAnimationFrame(id);
+    }, [useInternalScroll, scrollToBottom, posts.length, streamingContent, isLoading]);
+
+    // When internal scroll is (re)enabled, force follow-to-bottom.
+    useEffect(() => {
+        if (!useInternalScroll) return;
+        shouldAutoScrollRef.current = true;
+        scrollToBottom();
+    }, [useInternalScroll, scrollToBottom]);
+
+    // When inner content grows (stream chunks, markdown expand), scroll to bottom if user was near bottom.
+    // Observing the content wrapper ensures we react to content height changes; the scroll container size often does not change.
+    useEffect(() => {
+        if (!useInternalScroll) return;
+        const el = contentRef.current;
+        if (!el) return;
+        if (typeof ResizeObserver === 'undefined') return;
+
+        const ro = new ResizeObserver(() => {
+            if (!shouldAutoScrollRef.current) return;
+            scrollToBottom();
+        });
+
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [useInternalScroll, scrollToBottom]);
+
+    // Parent-controlled scroll: when scrollToBottomDeps change (e.g. each stream chunk), force scroll to bottom.
+    useEffect(() => {
+        if (!useInternalScroll || !scrollToBottomDeps?.length) return;
+        scrollToBottom();
+        const id = requestAnimationFrame(() => {
+            scrollToBottom();
+        });
+        return () => cancelAnimationFrame(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: parent passes deps
+    }, scrollToBottomDeps ?? []);
+
+    const handleScroll = useCallback(() => {
+        const el = internalListRef.current;
+        if (!el) return;
+        const thresholdPx = 160;
+        const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        shouldAutoScrollRef.current = distanceFromBottom <= thresholdPx;
+    }, []);
+
+    return (
+        <div className={clsx('flex flex-col flex-1 min-h-0 overflow-hidden', className)}>
+            {useInternalScroll && hideScrollbar && <style>{HIDE_SCROLLBAR_CSS}</style>}
+            <div
+                ref={setScrollContainerRef}
+                onScroll={useInternalScroll ? handleScroll : undefined}
+                className={
+                    useInternalScroll
+                        ? clsx(
+                              'flex-1 min-h-0 overflow-y-auto',
+                              hideScrollbar && 'ym-hide-scrollbar',
+                              scrollContainerClassName,
+                          )
+                        : (scrollContainerClassName ?? '')
+                }
+            >
+                <div ref={contentRef} className={clsx('w-full pb-4 pt-2 space-y-3 px-4', contentClassName ?? '')}>
+                    {error && (
+                        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 flex items-center justify-between gap-2">
+                            <span className="text-sm text-red-800">{error}</span>
+                            {onRetry && (
+                                <button
+                                    type="button"
+                                    onClick={onRetry}
+                                    className="shrink-0 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-100 rounded-md transition-colors"
+                                >
+                                    Retry
+                                </button>
+                            )}
+                        </div>
+                    )}
+                    {isEmpty && (
+                        <div className="px-4 py-8 text-center">
+                            {renderEmptyState ? (
+                                renderEmptyState({ inputToolbarProps })
+                            ) : (
+                                <>
+                                    <div className="text-gray-500 text-lg font-medium mb-2">
+                                        Describe your idea and I'll help you create it step by step
+                                    </div>
+                                    <div className="text-gray-400 text-sm">
+                                        Start a new conversation by typing your message below
+                                    </div>
+                                </>
+                            )}
+                            {shouldInlineToolbar && (
+                                <div className="mt-6 text-left">{renderToolbar(inputToolbarProps)}</div>
+                            )}
+                        </div>
+                    )}
+
+                    {posts.map((post) => (
+                        <div key={post.id} className={clsx('mb-3', postContainerClassName)}>
+                            <MessageGroupComponent
+                                messages={[post]}
+                                currentUser={currentUserForGroup}
+                                onOpen={onOpen}
+                                onMessageClick={onMessageClick}
+                                isDesktopView={isDesktopView}
+                                isSmallScreen={isSmallScreen}
+                                showAuthorName={showAvatar}
+                                showAvatar={showAvatar}
+                                showTimestamp={showDate}
+                                sandboxErrors={sandboxErrors}
+                                currentFiles={currentFiles}
+                                onFixError={onFixError}
+                                showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                            />
+                        </div>
+                    ))}
+
+                    {streamingContent?.trim() && (
+                        <div className="flex justify-start">
+                            <div
+                                className={clsx(
+                                    'max-w-[85%] w-full rounded-2xl px-4 py-3 text-gray-900',
+                                    ASSISTANT_BUBBLE_BG,
+                                    showMessageBubbleBorder && `border ${BORDER_COLOR}`,
+                                )}
+                            >
+                                <div className="min-w-0 text-[15px] leading-relaxed break-words whitespace-pre-wrap">
+                                    {renderStreamingContent
+                                        ? renderStreamingContent(streamingContent)
+                                        : streamingContent}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    {isLoading && (
+                        <div className="flex justify-start">
+                            <div className="rounded-2xl px-4 py-3 bg-gray-100 border border-gray-200 flex items-center gap-2">
+                                <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
+                                <span className="text-sm text-gray-600">Thinking...</span>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+            {shouldRenderBottomToolbar && (
+                <div className="border-t border-gray-200 bg-white p-3">{renderToolbar(inputToolbarProps)}</div>
+            )}
+        </div>
+    );
+}

package/src/components/messages-container-ui/index.ts

@@ -0,0 +1,18 @@
+export { MessagesContainerUI } from './MessagesContainerUI';
+export type { MessagesContainerUIProps } from './MessagesContainerUI';
+export { PlanModeView, defaultPlanMessageToPost } from './PlanModeView';
+export type { PlanModeViewProps, PlanModeViewInputToolbarProps } from './PlanModeView';
+export { DefaultMessageGroup } from './DefaultMessageGroup';
+export { DefaultInputToolBar } from './DefaultInputToolBar';
+export type { DefaultInputToolBarProps } from './DefaultInputToolBar';
+// Rich (markdown / code / widget-card) renderer, moved here from messenger-box so consumers can
+// render rich chat without depending on @messenger-box/tailwind-ui-inbox. Inject as MessageGroupComponent.
+export {
+    ModernMessageGroupComponent,
+    FormattedMessageContent,
+    CodeFormatter,
+    detectContentType,
+} from './ModernMessageGroup';
+export { renderModernStreamingContent } from './modernStreaming';
+export { MessengerSlotFillNameEnum } from './messenger-slot-fill-name-enum';
+export type { PlanMessage, CurrentUser, MessageGroupRenderProps, MessageGroupComponentType } from './types';

package/src/components/messages-container-ui/messenger-slot-fill-name-enum.ts

@@ -0,0 +1,15 @@
+export enum MessengerSlotFillNameEnum {
+    INBOX_RIGHT_SIDEBAR = 'inbox-right-sidebar',
+    INBOX_WITH_AI_RIGHT_SIDEBAR = 'inbox-with-ai-right-sidebar',
+    CHAT_SETTINGS = 'chat-settings',
+    TOOLUSE_NAME = 'tooluse',
+    THINKING_NAME = 'thinking',
+    CODEBLOCK_NAME = 'codeblock',
+    AIASSISTANT_NAME = 'aiassistant',
+    SERVICE_NAME = 'service',
+    TRAVEL_NAME = 'travel',
+    MEDIA_NAME = 'media',
+    WORKFLOW_NAME = 'workflow',
+    CONNECTOR_NAME = 'connector',
+    GENERIC_NAME = 'generic',
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CodeFormatter, detectContentType, FormattedMessageContent } from './ModernMessageGroup';
+
+/**
+ * Renders in-flight streaming assistant content with the rich Modern renderer:
+ * raw-code content goes through {@link CodeFormatter}, everything else through
+ * {@link FormattedMessageContent} (markdown + embedded code blocks).
+ *
+ * Pass this as `MessagesContainerUI` / `PlanModeView`'s `renderStreamingContent` to keep
+ * markdown / code rendering while streaming (the base default is plain text).
+ */
+export function renderModernStreamingContent(content: string, showCopyDownloadOnCodeBlock = true): React.ReactNode {
+    return detectContentType(content) === 'code' ? (
+        <CodeFormatter content={content} showCopyDownload={showCopyDownloadOnCodeBlock} />
+    ) : (
+        <FormattedMessageContent content={content} showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock} />
+    );
+}

package/src/components/messages-container-ui/types.ts

@@ -0,0 +1,68 @@
+import type React from 'react';
+
+/**
+ * Messages container UI – types for plan mode (chat / search / research).
+ * Messages can be a simple PlanMessage or a full post-like shape passed through
+ * to the injected message-group renderer.
+ */
+
+export interface PlanMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    createdAt?: Date | string;
+    /** Optional: pass through to the injected message-group renderer (propsConfiguration, props, files, etc.) */
+    propsConfiguration?: any;
+    props?: any;
+    files?: any;
+    author?: any;
+    type?: string;
+}
+
+/** Props passed to the input toolbar render function. */
+export interface PlanModeViewInputToolbarProps {
+    value: string;
+    onChange: (text: string) => void;
+    onSend: () => void;
+    disabled?: boolean;
+}
+
+export interface CurrentUser {
+    id: string;
+    name?: string;
+    avatar?: string;
+    /** Optional: full author shape for the message-group renderer (givenName, familyName, username, etc.) */
+    givenName?: string;
+    familyName?: string;
+    fullName?: string;
+    username?: string;
+    email?: string;
+    picture?: string | null;
+    alias?: any[];
+    tokens?: any[];
+}
+
+/**
+ * Props the base passes to the injected message-group renderer (`MessageGroupComponent`).
+ * Mirrors the shape consumed by richer renderers (e.g. messenger-box's
+ * `ModernMessageGroupComponent`) so they can be dropped in directly.
+ */
+export interface MessageGroupRenderProps {
+    /** One post group to render (the base passes a single mapped post per group). */
+    messages: any[];
+    currentUser: any;
+    onOpen?: (element?: any) => void;
+    onMessageClick?: (msg: any) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    sandboxErrors?: any[];
+    currentFiles?: Record<string, string>;
+    onFixError?: (errorMessage: string) => Promise<void>;
+    showCopyDownloadOnCodeBlock?: boolean;
+}
+
+/** The injectable message-group renderer. Defaults to a plain-text bubble renderer. */
+export type MessageGroupComponentType = React.ComponentType<MessageGroupRenderProps>;

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "rootDir": "./src",
+        "outDir": "lib",
+        "declarationDir": "lib",
+        "declaration": true,
+        "declarationMap": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": false,
+        "types": ["@types/node", "@types/jest", "../../../typings", "vite/client"]
+    },
+    "exclude": [
+        "node_modules",
+        "lib",
+        "dist",
+        "webpack.config.js",
+        "rollup.config.js",
+        "src/**/__tests__/**",
+        "src/**/*.test.ts",
+        "src/**/*.test.tsx"
+    ],
+    "include": ["src"]
+}