@messenger-box/tailwind-ui-inbox 10.0.3-alpha.0

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

@@ -0,0 +1,426 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import {
+    CodeFormatter,
+    detectContentType,
+    FormattedMessageContent,
+    ModernMessageGroupComponent,
+} from '../InboxMessage/message-widgets/ModernMessageGroup';
+import { AiAgentMessageRole, PostTypeEnum } from 'common';
+import type { PlanMessage } from './types';
+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';
+    /** Input is passed from outside; receives value, onChange, onSend, disabled */
+    renderInputToolbar: (props: PlanModeViewInputToolbarProps) => React.ReactNode;
+    /** Optional: passed to ModernMessageGroupComponent */
+    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;
+}
+
+/** Map PlanMessage to the post-like shape expected by ModernMessageGroupComponent */
+function planMessageToPost(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,
+    onOpen = () => {},
+    onMessageClick = () => {},
+    isDesktopView = false,
+    isSmallScreen = false,
+    sandboxErrors = [],
+    currentFiles = {},
+    onFixError,
+    error = null,
+    onRetry,
+    renderEmptyState,
+    scrollToBottomDeps,
+    showCopyDownloadOnCodeBlock = true,
+}: 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,
+    };
+
+    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) => planMessageToPost(m, currentUser)), [messages, currentUser]);
+
+    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">{renderInputToolbar(inputToolbarProps)}</div>
+                            )}
+                        </div>
+                    )}
+
+                    {posts.map((post) => (
+                        <div key={post.id} className={clsx('mb-3', postContainerClassName)}>
+                            <ModernMessageGroupComponent
+                                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={`max-w-[85%] rounded-2xl px-4 py-3 ${ASSISTANT_BUBBLE_BG} text-gray-900 ${
+                                    showMessageBubbleBorder ? `border ${BORDER_COLOR}` : ''
+                                }`}
+                            >
+                                <div className="text-[15px] leading-relaxed break-words min-w-0">
+                                    {detectContentType(streamingContent) === 'code' ? (
+                                        <CodeFormatter
+                                            content={streamingContent}
+                                            showCopyDownload={showCopyDownloadOnCodeBlock}
+                                        />
+                                    ) : (
+                                        <FormattedMessageContent
+                                            content={streamingContent}
+                                            showCopyDownloadOnCodeBlock={showCopyDownloadOnCodeBlock}
+                                        />
+                                    )}
+                                </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">{renderInputToolbar(inputToolbarProps)}</div>
+            )}
+        </div>
+    );
+}

package/src/components/messages-container-ui/README.md

@@ -0,0 +1,91 @@
+# messages-container-ui
+
+Plan-mode message container for chat, search, and research. Renders messages with **ModernMessageGroupComponent** (same as AIAgent) and delegates the input area to a toolbar you provide via props.
+
+## Exports
+
+| Export                                                                           | Description                                                             |
+| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `MessagesContainerUI`                                                            | Main container: message list + streaming + loading + input toolbar slot |
+| `PlanModeView`                                                                   | Lower-level view used by `MessagesContainerUI`                          |
+| `PlanMessage`, `CurrentUser`                                                     | Types from `types.ts`                                                   |
+| `MessagesContainerUIProps`, `PlanModeViewProps`, `PlanModeViewInputToolbarProps` | Component prop types                                                    |
+
+## Usage
+
+```tsx
+import {
+    MessagesContainerUI,
+    type PlanMessage,
+    type PlanModeViewInputToolbarProps,
+} from '@messenger-box/tailwind-ui-inbox';
+
+const [messages, setMessages] = useState<PlanMessage[]>([]);
+
+<MessagesContainerUI
+    messages={messages}
+    currentUser={{ id: userId, name: 'You' }}
+    onSend={(text) => {
+        setMessages((prev) => [...prev, { id: crypto.randomUUID(), role: 'user', content: text }]);
+        // send to API / gateway...
+    }}
+    isLoading={isLoading}
+    renderInputToolbar={({ value, onChange, onSend, disabled }) => (
+        <div className="flex gap-2">
+            <input
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && onSend()}
+                disabled={disabled}
+                className="flex-1 border rounded-lg px-3 py-2"
+            />
+            <button onClick={onSend} disabled={disabled}>
+                Send
+            </button>
+        </div>
+    )}
+/>;
+```
+
+## Props (MessagesContainerUI)
+
+| Prop                      | Type                                                                       | Required | Description                                                                            |
+| ------------------------- | -------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
+| `messages`                | `PlanMessage[]`                                                            | Yes      | List of messages to show                                                               |
+| `currentUser`             | `CurrentUser`                                                              | Yes      | Current user (id required; name, avatar, and full author fields optional)              |
+| `onSend`                  | `(text: string) => void`                                                   | Yes      | Called when the user sends a message                                                   |
+| `renderInputToolbar`      | `(props: PlanModeViewInputToolbarProps) => ReactNode`                      | Yes      | Renders the input area (value, onChange, onSend, disabled)                             |
+| `streamingContent`        | `string`                                                                   | No       | Optional streaming text shown below the last message                                   |
+| `disabled`                | `boolean`                                                                  | No       | Disables input                                                                         |
+| `isLoading`               | `boolean`                                                                  | No       | Shows “Thinking...” below messages                                                     |
+| `onStop`                  | `() => void`                                                               | No       | Stop handler (e.g. stop generation)                                                    |
+| `showDate`                | `boolean`                                                                  | No       | Show timestamps on messages                                                            |
+| `showAvatar`              | `boolean`                                                                  | No       | Show avatars (passed to ModernMessageGroupComponent)                                   |
+| `showMessageBubbleBorder` | `boolean`                                                                  | No       | Border on assistant bubbles                                                            |
+| `onOpen`                  | `(element?: any) => void`                                                  | No       | Passed to ModernMessageGroupComponent                                                  |
+| `onMessageClick`          | `(msg: any) => void`                                                       | No       | Passed to ModernMessageGroupComponent                                                  |
+| `isDesktopView`           | `boolean`                                                                  | No       | Layout flag for ModernMessageGroupComponent                                            |
+| `isSmallScreen`           | `boolean`                                                                  | No       | Layout flag for ModernMessageGroupComponent                                            |
+| `sandboxErrors`           | `any[]`                                                                    | No       | Errors for fix UI (same as AIAgent)                                                    |
+| `currentFiles`            | `Record<string, string>`                                                   | No       | File map for fix UI                                                                    |
+| `onFixError`              | `(errorMessage: string) => Promise<void>`                                  | No       | Fix-error handler                                                                      |
+| `error`                   | `string \| null`                                                           | No       | Error message to show above messages                                                   |
+| `onRetry`                 | `() => void`                                                               | No       | Called when user clicks retry (e.g. after error)                                       |
+| `useInternalScroll`       | `boolean`                                                                  | No       | When false (default), avoids creating an internal scroll container (no nested scroll)  |
+| `hideInputToolbar`        | `boolean`                                                                  | No       | When true, the built-in input toolbar area is not rendered                             |
+| `renderEmptyState`        | `(ctx: { inputToolbarProps: PlanModeViewInputToolbarProps }) => ReactNode` | No       | Custom empty state; you can render the input/composer inline using `inputToolbarProps` |
+
+## Types
+
+-   **PlanMessage**: `id`, `role` ('user' | 'assistant' | 'system'), `content`, optional `createdAt`, and optional `propsConfiguration`, `props`, `files`, `author`, `type` for full post-like data.
+-   **CurrentUser**: `id`; optional `name`, `avatar`, and full author fields (`givenName`, `familyName`, `username`, etc.) for ModernMessageGroupComponent.
+-   **PlanModeViewInputToolbarProps**: `value`, `onChange`, `onSend`, optional `disabled` — passed to `renderInputToolbar`.
+
+## Integration with AIAgent
+
+This container uses the same **ModernMessageGroupComponent** as AIAgent for message rendering. You can:
+
+-   Use **MessagesContainerUI** when you own the message list and send flow (e.g. Yantra chat/research) and pass everything as props.
+-   Use **AIAgent** when you want channel/GraphQL/subscriptions and the same message UI; both share the same message display.
+
+Build/workflow flows can stay in the host app and be wired via `onSend` and other callbacks.

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

@@ -0,0 +1,5 @@
+export { MessagesContainerUI } from './MessagesContainerUI';
+export { PlanModeView } from './PlanModeView';
+export type { MessagesContainerUIProps } from './MessagesContainerUI';
+export type { PlanModeViewProps, PlanModeViewInputToolbarProps } from './PlanModeView';
+export type { PlanMessage, CurrentUser } from './types';

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

@@ -0,0 +1,40 @@
+/**
+ * Messages container UI – types for plan mode (chat / search / research).
+ * Messages can be simple PlanMessage or full post-like shape for ModernMessageGroupComponent.
+ */
+
+export interface PlanMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    createdAt?: Date | string;
+    /** Optional: pass through to ModernMessageGroupComponent (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 ModernMessageGroupComponent (givenName, familyName, username, etc.) */
+    givenName?: string;
+    familyName?: string;
+    fullName?: string;
+    username?: string;
+    email?: string;
+    picture?: string | null;
+    alias?: any[];
+    tokens?: any[];
+}

package/src/components/slot-fill/chat-message-filler.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ChatMessageFiller } from './chat-message-slot';
+import { MessageSliceRenderer } from '../InboxMessage/message-widgets';
+
+export const ChatMessageFill = () => {
+    return <ChatMessageFiller>{(props) => <MessageSliceRenderer {...props} />}</ChatMessageFiller>;
+};
+
+export const ChatMessageFill2 = () => {
+    return (
+        <ChatMessageFiller>
+            {(props) => {
+                const { message, index, onOpen, currentUser } = props;
+                return <div>{message.message}</div>;
+            }}
+        </ChatMessageFiller>
+    );
+};

package/src/components/slot-fill/chat-message-slot.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from 'react';
+import { Slot, Fill } from '@common-stack/components-pro';
+import { MESSAGE_SLOT_FILL_NAME } from '@messenger-box/core';
+
+type ChatMessageProps = {
+    index: number;
+    message: any;
+    onOpen: any;
+    currentUser: any;
+};
+
+export const ChatMessageSlot: FunctionComponent<ChatMessageProps> = (props) => {
+    return <Slot name={MESSAGE_SLOT_FILL_NAME} fillProps={{ active: true, ...props }} />;
+};
+
+export const ChatMessageFiller = (props: any) => {
+    return <Fill {...props} name={MESSAGE_SLOT_FILL_NAME} />;
+};

package/src/components/slot-fill/index.ts

@@ -0,0 +1,3 @@
+export { ChatMessageFiller } from './chat-message-slot';
+export { ChatMessageFill2 } from './chat-message-filler';
+export { RightSidebarFill as RightSidebarFillDefault } from './right-sidebar-filler';

package/src/components/slot-fill/right-sidebar-filler.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Fill } from '@common-stack/components-pro';
+import { MessengerSlotFillNameEnum } from '../../enums';
+import { RightSidebarFillComponent } from '../filler-components/RightSiderBar';
+import { ICreateChannelInput } from 'common';
+
+type RightSidebarProps = {
+    channelId: string;
+    detailSidebarOptions: {
+        isMobileView: boolean;
+        isSmallTabletView: boolean;
+        isTabletView: boolean;
+        isDesktopView: boolean;
+        isLargeDesktopView: boolean;
+        isSmallScreen: boolean;
+        [key: string]: any;
+    };
+    windowWidth: number;
+    windowHeight: number;
+    activeTab?: string;
+    selectedPost?: any;
+    contextData?: any;
+    showContextTab?: boolean;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
+    messages?: any[];
+    setIsLoading?: (isLoading: boolean) => void;
+    handleSendMessage?: (createChannelInput: ICreateChannelInput) => void;
+    handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isMinimized?: boolean;
+    isLoading?: boolean;
+    isCreatingSandbox?: boolean;
+    setIsCreatingSandbox?: (isCreatingSandbox: boolean) => void;
+    [key: string]: any;
+};
+
+export const RightSidebarFiller = (props: any) => {
+    return <Fill {...props} name={MessengerSlotFillNameEnum.INBOX_WITH_AI_RIGHT_SIDEBAR} />;
+};
+
+export const RightSidebarFill = () => {
+    return (
+        <RightSidebarFiller>
+            {(props: RightSidebarProps) => {
+                return <RightSidebarFillComponent {...props} />;
+            }}
+        </RightSidebarFiller>
+    );
+};