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

package/src/components/AIAgent/AIAgent.tsx

@@ -0,0 +1,1468 @@
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import { useActor, useMachine } from '@xstate/react';
+import { aiAgentMachine } from '../../machines/aiAgentMachine.simple';
+import { InputComponent } from './InputComponent';
+import { format, isToday, isYesterday, formatDistanceToNow } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { ModernMessageGroupComponent } from '../InboxMessage/message-widgets/ModernMessageGroup';
+import { useUploadFiles } from '@messenger-box/platform-client';
+import { IFileInfo, PostTypeEnum, AiAgentMessageRole, ICreateChannelInput } from 'common';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Store, userSelector } from '@adminide-stack/user-auth0-client';
+import { IUserState } from '@adminide-stack/core';
+import { objectId } from '@messenger-box/core';
+import { useApolloClient } from '@apollo/client';
+import {
+    useSendMessagesMutation,
+    MessagesDocument,
+    useMessagesQuery,
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+    useCreateChannelWorkflowJobMutation,
+    useOnChatMessageAddedSubscription,
+} from 'common/graphql';
+import { config } from '../../config';
+import { orderBy, uniqBy } from 'lodash-es';
+import { useParams, useNavigate } from '@remix-run/react';
+import { RoomType } from 'common';
+import { SubscriptionHandler } from '../InboxMessage/SubscriptionHandler';
+import { usePersistentModelConfig } from '../../hooks/usePersistentModelConfig';
+
+/** Resolver may expose role/fragment on propsConfiguration or legacy props (Mongo shape). */
+const getPostRoleUpper = (m: any): string =>
+    String(
+        m?.propsConfiguration?.contents?.role ?? m?.propsConfiguration?.content?.role ?? m?.props?.role ?? '',
+    ).toUpperCase();
+
+const getPostFragment = (m: any): Record<string, any> | undefined | null =>
+    m?.propsConfiguration?.contents?.fragment ?? m?.propsConfiguration?.content?.fragment ?? m?.props?.fragment;
+
+const isAssistantPost = (m: any): boolean => {
+    if (getPostRoleUpper(m) === 'ASSISTANT') return true;
+    const typ = String(m?.type ?? '').toUpperCase();
+    return typ === 'AIASSISTANT' || typ === 'ASSISTANT';
+};
+
+const isAssistantResponseComplete = (fragment: Record<string, any> | undefined | null): boolean => {
+    if (!fragment) return false;
+    if (fragment.isCreatingSandbox === false) return true;
+    if (fragment.isCreatingSandbox === true) return false;
+    const url = fragment.sandboxUrl;
+    if (typeof url === 'string' && url.trim().length > 0) return true;
+    if (fragment.files && typeof fragment.files === 'object' && Object.keys(fragment.files).length > 0) return true;
+    if (typeof fragment.summary === 'string' && fragment.summary.trim().length > 0) return true;
+    if (fragment.isError === true || fragment.type === 'ERROR') return true;
+    if (String(fragment.type ?? '').toUpperCase() === 'RESULT') return true;
+    return false;
+};
+
+// const { MESSAGES_PER_PAGE } = config;
+
+interface AIAgentProps {
+    channelId?: string;
+    onSendMessage?: (message: string, files?: File[]) => Promise<void>;
+    placeholder?: string;
+    className?: string;
+    currentUser?: any;
+    channelName?: string;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    showDateSeparators?: boolean;
+    messages?: any[];
+    setMessages?: (messages: any[]) => void;
+    selectedPost?: any;
+    setSelectedPost?: (selectedPost: any) => void;
+    setIsLoading?: (isLoading: boolean) => void;
+    isLoading?: boolean;
+    sendMessageInput?: ICreateChannelInput;
+    isShowOnlyInbox?: boolean;
+    showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+    leftItemsOverrides?: any;
+    rightItemsOverrides?: any;
+    inputToolBarProps?: any;
+    projectId?: string;
+    [key: string]: any; // Allow other props to be passed through to Inbox
+}
+
+export const AIAgent: React.FC<AIAgentProps> = ({
+    channelId,
+    projectId,
+    onSendMessage,
+    placeholder = 'Ask me anything...',
+    className = '',
+    currentUser,
+    isDesktopView = false,
+    isSmallScreen = false,
+    showDateSeparators = false,
+    setMessages,
+    setSelectedPost,
+    messages,
+    selectedPost,
+    setIsLoading,
+    isLoading,
+    sendMessageInput,
+    isShowOnlyInbox = false,
+    showModeSelector = false,
+    showStopButton = false,
+    onStop,
+    templates,
+    selectedTemplate,
+    suggestedTemplate,
+    onSelectTemplate,
+    templateSelectedLabel,
+    templateModalItems,
+    showTemplateModal,
+    onOpenTemplateModal,
+    onCloseTemplateModal,
+    onSelectTemplateById,
+    onClearTemplate,
+    onAcceptSuggestedTemplate,
+    isAnalyzingQuery,
+    onQueryChange,
+    leftItemsOverrides,
+    rightItemsOverrides,
+    inputToolBarProps,
+}) => {
+    const [state, send] = useMachine(aiAgentMachine);
+    const apolloClient = useApolloClient();
+    const { startUpload } = useUploadFiles();
+    const [sendMsg] = useSendMessagesMutation();
+    const [createChannelWorkflowJob] = useCreateChannelWorkflowJobMutation();
+    const auth: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
+    const { id: pathChannelId } = useParams();
+    const navigate = useNavigate();
+    const { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    const [postId, setPostId] = useState<string | null>(null);
+    /** Cleared when the first real assistant message replaces or supersedes the optimistic placeholder */
+    const optimisticAssistantMessageIdRef = useRef<string | null>(null);
+    const scrollPendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const streamScrollRafRef = useRef<number | null>(null);
+    const prevLastMessageIdRef = useRef<string | null>(null);
+    // const [isLoading, setIsLoading] = useState(false);
+    const [errorData, setError] = useState<string | null>(null);
+    // Get channelId from props or path params
+    const actualChannelId = channelId || pathChannelId;
+
+    // const { data: chatMessageAddedData } = useOnChatMessageAddedSubscription({
+    //     variables: { channelId: actualChannelId?.toString() || '' },
+    //     skip: !actualChannelId,
+    // });
+
+    // Subscribe to sandbox errors if projectId is provided
+
+    // Direct message query from InboxWithAiLoader.tsx
+    const messagesQuery = useMessagesQuery({
+        variables: {
+            channelId: actualChannelId?.toString(),
+            parentId: null,
+            limit: 50,
+        },
+        skip: !actualChannelId,
+        fetchPolicy: 'cache-and-network',
+        errorPolicy: 'all',
+        notifyOnNetworkStatusChange: true,
+        returnPartialData: true,
+        pollInterval: 0,
+        context: {
+            cacheKey: 'messages-list',
+        },
+    });
+
+    // console.log('messagesQuery...', JSON.stringify(messagesQuery?.data?.messages?.data));
+
+    const { messages: aiMessages, error, isTyping } = state.context;
+    const { t } = useTranslation('translations');
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedElement, setSelectedElement] = useState<any>(null);
+    const [activeTab, setActiveTab] = useState<'chat' | 'history'>('chat');
+    const bottomRef = useRef<HTMLDivElement | null>(null);
+    const [sandboxErrors, setSandboxErrors] = useState<any[]>([]);
+    const [currentFiles, setCurrentFiles] = useState<Record<string, string>>({});
+    const [canvasLayers, setCanvasLayers] = useState<any[]>([]);
+    // New state variables for message display control
+    const [isSuccessThinking, setIsSuccessThinking] = useState(false);
+    const successThinkingTimeoutRef = useRef<any>(null);
+
+    // When showing only inbox, force Chat tab and hide tab switcher UI
+    useEffect(() => {
+        if (isShowOnlyInbox && activeTab !== 'chat') {
+            setActiveTab('chat');
+        }
+    }, [isShowOnlyInbox, activeTab]);
+
+    // Get regular messages from direct query
+    const {
+        data: messagesData,
+        loading: messageLoading,
+        refetch: refetchMessages,
+        fetchMore: fetchMoreMessages,
+        subscribeToMore,
+    } = messagesQuery;
+
+    useEffect(() => {
+        if (actualChannelId) {
+            refetchMessages({
+                channelId: actualChannelId?.toString(),
+                parentId: null,
+                limit: 50,
+            });
+        }
+    }, [actualChannelId, refetchMessages]);
+
+    // useEffect(() => {
+    //     if (chatMessageAddedData?.chatMessageAdded) {
+    //         console.log(
+    //             'chatMessageAddedData?.chatMessageAdded',
+    //             JSON.stringify(chatMessageAddedData?.chatMessageAdded, null, 2),
+    //         );
+
+    //         // Stop the success thinking loader once a new message arrives
+    //         if (isSuccessThinking) {
+    //             setIsSuccessThinking(false);
+    //             if (successThinkingTimeoutRef.current) {
+    //                 clearTimeout(successThinkingTimeoutRef.current);
+    //                 successThinkingTimeoutRef.current = null;
+    //             }
+    //         }
+    //         if (isShowOnlyInbox) {
+    //             setIsLoading(false);
+    //         }
+    //     }
+    //     console.log('isShowOnlyInbox', isShowOnlyInbox, ' isLoading', isLoading);
+    // }, [chatMessageAddedData?.chatMessageAdded, isShowOnlyInbox, setIsLoading]);
+
+    useEffect(() => {
+        if (messagesData?.messages?.data?.length >= 1) {
+            setPostId(messagesData.messages.data[0]?.id);
+        }
+        // console.log('messagesData?.messages?.data',JSON.stringify(messagesData?.messages?.data,null,2))
+    }, [messagesData?.messages?.data]);
+
+    useEffect(() => {
+        if (sendMessageInput?.postData?.content && sendMessageInput?.postData?.content.trim() !== '') {
+            console.log('sendMessageInput...', JSON.stringify(sendMessageInput?.postData?.content, null, 2));
+            handleSend(sendMessageInput?.postData?.content || '', []);
+        }
+    }, [sendMessageInput?.postData?.content]);
+
+    // Handle sandbox error subscription updates
+
+    // Scroll to bottom — cancels any pending scroll so streaming updates do not queue many smooth scrolls
+    const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth', delay: number = 0) => {
+        if (scrollPendingRef.current) {
+            clearTimeout(scrollPendingRef.current);
+            scrollPendingRef.current = null;
+        }
+        scrollPendingRef.current = setTimeout(() => {
+            scrollPendingRef.current = null;
+            if (bottomRef.current) {
+                bottomRef.current.scrollIntoView({
+                    behavior,
+                    block: 'end',
+                    inline: 'nearest',
+                });
+            }
+        }, delay);
+    }, []);
+
+    const regularMessages = useMemo(() => {
+        if (!messagesData?.messages?.data) return [];
+        const mainMessages = messagesData.messages.data || [];
+        const replyMessages = messagesData.messages.data[0]?.replies?.data || [];
+        const allMessages = [...mainMessages, ...replyMessages];
+        const getMsgId = (m: any) => String(m?.id ?? m?._id ?? '');
+        const getCreatedAt = (m: any) => {
+            const v = m?.createdAt;
+            if (!v) return 0;
+            const t = typeof v === 'number' ? v : new Date(v).getTime();
+            return Number.isNaN(t) ? 0 : t;
+        };
+        const uniq = uniqBy(allMessages, (m: any) => getMsgId(m));
+        const ids = new Set(uniq.map((m: any) => getMsgId(m)));
+        const roots = uniq.filter((m: any) => !m?.parentId || !ids.has(String(m.parentId)));
+        const replies = uniq.filter((m: any) => m?.parentId && ids.has(String(m.parentId)));
+        const rootsSorted = orderBy(roots, [getCreatedAt], ['asc']);
+        const result: any[] = [];
+        for (const root of rootsSorted) {
+            result.push(root);
+            const children = orderBy(
+                replies.filter((r: any) => String(r.parentId) === getMsgId(root)),
+                [getCreatedAt],
+                ['asc'],
+            );
+            result.push(...children);
+        }
+        const orphanReplies = replies.filter((r: any) => !result.some((x: any) => getMsgId(x) === getMsgId(r)));
+        return [...result, ...orderBy(orphanReplies, [getCreatedAt], ['asc'])];
+    }, [messagesData?.messages?.data]);
+
+    console.log('regularMessages...........', JSON.stringify(regularMessages, null, 2));
+
+    // True while the latest assistant post is still building a sandbox (or fragment not yet complete)
+    const isCreatingSandbox = useMemo(() => {
+        if (isShowOnlyInbox) return false;
+        if (!regularMessages || regularMessages.length === 0) return false;
+
+        const mostRecentAssistant = regularMessages.slice().reverse().find(isAssistantPost);
+        if (!mostRecentAssistant) return false;
+
+        const fragment = getPostFragment(mostRecentAssistant);
+
+        if (fragment?.isCreatingSandbox === true) return true;
+        if (isAssistantResponseComplete(fragment)) return false;
+
+        // Assistant row exists but no completion signals yet — still in progress
+        if (fragment && Object.keys(fragment).length > 0) return true;
+        return false;
+    }, [regularMessages, isShowOnlyInbox]);
+
+    // handleSend sets these on submit; clear them when the latest assistant message is clearly done
+    useEffect(() => {
+        if (isShowOnlyInbox) return;
+        if (!regularMessages?.length) return;
+        const mostRecentAssistant = regularMessages.slice().reverse().find(isAssistantPost);
+        if (!mostRecentAssistant) return;
+        const fragment = getPostFragment(mostRecentAssistant);
+        if (!isAssistantResponseComplete(fragment)) return;
+        setIsSuccessThinking(false);
+        setIsLoading?.(false);
+    }, [regularMessages, isShowOnlyInbox, setIsLoading]);
+
+    // Send regular messages to AI agent machine for context
+    useEffect(() => {
+        if (regularMessages && regularMessages.length > 0) {
+            send({ type: 'UPDATE_REGULAR_MESSAGES', messages: regularMessages });
+            setMessages(regularMessages);
+            const currentMessage = regularMessages?.[regularMessages.length - 1];
+            setSelectedPost(regularMessages[regularMessages.length - 1]);
+            setCurrentFiles(currentMessage?.propsConfiguration?.contents?.fragment?.files ?? {});
+            let canvasLayers = currentMessage?.propsConfiguration?.contents?.fragment?.canvasLayers ?? [];
+            const summary = currentMessage?.propsConfiguration?.contents?.fragment?.summary ?? null;
+            // If not in direct field, try to extract from summary
+            if (!canvasLayers && summary) {
+                const canvasLayersMatch = summary?.match(/<canvas_layers>([\s\S]*?)<\/canvas_layers>/);
+                if (canvasLayersMatch) {
+                    try {
+                        canvasLayers = JSON.parse(canvasLayersMatch[1]);
+                    } catch (error) {
+                        console.error('Failed to parse canvas layers from summary:', error);
+                    }
+                }
+            }
+            // Update canvas layers if available
+            if (canvasLayers && Array.isArray(canvasLayers)) {
+                setCanvasLayers(canvasLayers);
+            }
+
+            console.log('currenmessage', currentMessage);
+            if (currentMessage?.propsConfiguration?.contents?.role === 'ASSISTANT') {
+                //setIsLoading(false);
+            }
+
+            if (isShowOnlyInbox) {
+                setIsLoading(false);
+            }
+
+            // Scroll behavior (Perplexity-style): smooth when a new last message appears; coalesce updates on the same id
+            const last = regularMessages[regularMessages.length - 1];
+            const lastId = last?.id != null ? String(last.id) : null;
+            const isNewLastRow = lastId !== prevLastMessageIdRef.current;
+            prevLastMessageIdRef.current = lastId;
+
+            if (isNewLastRow) {
+                if (streamScrollRafRef.current != null) {
+                    cancelAnimationFrame(streamScrollRafRef.current);
+                    streamScrollRafRef.current = null;
+                }
+                scrollToBottom('smooth', 0);
+            } else if (streamScrollRafRef.current == null) {
+                streamScrollRafRef.current = requestAnimationFrame(() => {
+                    streamScrollRafRef.current = null;
+                    scrollToBottom('auto', 0);
+                });
+            }
+        }
+    }, [regularMessages, send, isShowOnlyInbox, setIsLoading, scrollToBottom]);
+
+    const onOpen = (element?: any) => {
+        setSelectedElement(element);
+        setIsOpen(true);
+    };
+
+    const onClose = () => {
+        setIsOpen(false);
+        setSelectedElement(null);
+    };
+
+    const handleSend = useCallback(
+        async (message: string, files: any[] = []) => {
+            // Allow sending if there's either a message or files
+            if ((!message || !message.trim()) && (!files || files.length === 0)) return;
+
+            const validated = getValidatedConfig();
+            if (!validated && !hasApiKey) {
+                // Warn but continue — the user's message should still be persisted
+                // even if the AI cannot respond without an API key.
+                console.warn(
+                    '⚠️ No AI API key configured. Message will be saved but AI cannot respond. ' +
+                        'Open Settings (gear icon) to add your API key.',
+                );
+            }
+
+            const {
+                extensionId: _omitExtensionId,
+                formId: _omitFormId,
+                functionId: _omitFunctionId,
+                stepName: _omitStepName,
+                metadata: _omitMetadata,
+                ...modelConfigWithoutExtensionId
+            } = (modelConfig as any) || ({} as any);
+            let createChannelInputData = sendMessageInput
+                ? {
+                      ...sendMessageInput,
+                      channelId: sendMessageInput?.channelId || actualChannelId,
+                      title: sendMessageInput?.title || 'AI Assistant',
+                      description: sendMessageInput?.description || 'AI Assistant',
+                      displayName: sendMessageInput?.displayName || 'AI Assistant',
+                      topic: sendMessageInput?.topic || 'AI Assistant',
+                      // projectId: projectId,
+                      type: sendMessageInput?.type || RoomType.Aiassistant,
+                      postData: {
+                          ...sendMessageInput?.postData,
+                          postId: sendMessageInput?.postData?.postId || postId || undefined,
+                          type: sendMessageInput?.postData?.type || PostTypeEnum.Aiassistant,
+                          content: sendMessageInput?.postData?.content || message,
+                          props: {
+                              ...sendMessageInput?.postData?.props,
+                              template:
+                                  sendMessageInput?.postData?.props?.template || modelConfig?.template || 'vite-react',
+                              //projectId: projectId,
+                              role: sendMessageInput?.postData?.props?.role || AiAgentMessageRole.User,
+                              fragment: sendMessageInput?.postData?.props?.fragment || {},
+                          },
+                      },
+                      additionalProperties: sendMessageInput?.additionalProperties || {
+                          modelConfig: modelConfigWithoutExtensionId,
+                      },
+                  }
+                : null;
+            const createChannelInput: ICreateChannelInput = createChannelInputData || {
+                channelId: actualChannelId,
+                title: 'AI Assistant',
+                description: 'AI Assistant',
+                displayName: 'AI Assistant',
+                topic: 'AI Assistant',
+                // projectId: projectId,
+                type: RoomType.Aiassistant,
+                postData: {
+                    postId: postId || undefined,
+                    type: PostTypeEnum.Aiassistant,
+                    content: message,
+                    props: {
+                        template: modelConfig?.template || 'vite-react',
+                        //projectId: projectId,
+                        role: AiAgentMessageRole.User,
+                        fragment: {},
+                    },
+                },
+                additionalProperties: {
+                    modelConfig: modelConfigWithoutExtensionId,
+                },
+            };
+
+            // Start the AI thinking loader immediately on send
+            if (successThinkingTimeoutRef.current) {
+                clearTimeout(successThinkingTimeoutRef.current);
+                successThinkingTimeoutRef.current = null;
+            }
+            setIsSuccessThinking(true);
+            setIsLoading(true);
+
+            // Optimistic update: Add assistant message with isCreatingSandbox: true
+            if (!isShowOnlyInbox && actualChannelId) {
+                try {
+                    const previousOptimisticId = optimisticAssistantMessageIdRef.current;
+                    const optimisticAssistantMessageId = objectId();
+                    optimisticAssistantMessageIdRef.current = optimisticAssistantMessageId;
+                    const optimisticAssistantMessage = {
+                        __typename: 'Post',
+                        id: optimisticAssistantMessageId,
+                        content: '',
+                        message: '',
+                        createdAt: new Date().toISOString(),
+                        updatedAt: new Date().toISOString(),
+                        author: {
+                            __typename: 'User',
+                            id: 'ai-assistant',
+                            username: 'ai-assistant',
+                            givenName: 'AI',
+                            familyName: 'Assistant',
+                            fullName: 'AI Assistant',
+                            email: 'ai@assistant.com',
+                            picture: null,
+                            alias: [],
+                            tokens: [],
+                        },
+                        propsConfiguration: {
+                            __typename: 'PostPropsConfiguration',
+                            contents: {
+                                __typename: 'PostContents',
+                                role: 'ASSISTANT',
+                                fragment: {
+                                    isCreatingSandbox: true,
+                                },
+                            },
+                        },
+                        props: {},
+                        files: [],
+                        replies: null,
+                        channel: null,
+                        isPinned: false,
+                        isDelivered: false,
+                        isRead: false,
+                        parentId: null,
+                        fromServer: null,
+                        type: PostTypeEnum.Aiassistant,
+                    };
+
+                    // Update cache optimistically
+                    const messagesQuery = {
+                        query: MessagesDocument,
+                        variables: {
+                            channelId: actualChannelId.toString(),
+                            parentId: null,
+                            limit: 50,
+                        },
+                    };
+
+                    try {
+                        const existingData = apolloClient.readQuery(messagesQuery) as any;
+                        if (existingData?.messages) {
+                            const oldRows = existingData.messages.data || [];
+                            let nextRows = previousOptimisticId
+                                ? oldRows.filter((m: any) => String(m?.id) !== String(previousOptimisticId))
+                                : [...oldRows];
+                            if (!nextRows.some((m: any) => String(m?.id) === String(optimisticAssistantMessageId))) {
+                                nextRows = [...nextRows, optimisticAssistantMessage];
+                            }
+                            const prevTotal = existingData.messages.totalCount ?? oldRows.length;
+                            const newTotal = prevTotal + (nextRows.length - oldRows.length);
+
+                            apolloClient.writeQuery({
+                                ...messagesQuery,
+                                data: {
+                                    messages: {
+                                        ...existingData.messages,
+                                        data: nextRows,
+                                        totalCount: Math.max(0, newTotal),
+                                    },
+                                },
+                            });
+                        }
+                    } catch (error) {
+                        // Cache might not exist yet, that's okay
+                        console.debug('Optimistic update failed (cache might not exist):', error);
+                    }
+                } catch (error) {
+                    console.error('Failed to create optimistic update:', error);
+                }
+            }
+
+            // Safety auto-stop in case no event arrives
+            // successThinkingTimeoutRef.current = setTimeout(() => {
+            //     setIsSuccessThinking(false);
+            //     successThinkingTimeoutRef.current = null;
+            // }, 15000);
+            // If no channelId, mirror AiLandingInput: create channel+project, seed first post, then navigate
+            try {
+                // const postId = objectId();
+                // Do not include extensionId inside modelConfig when sending additionalProperties
+
+                await createChannelWorkflowJob({
+                    variables: {
+                        createChannelInput: createChannelInput,
+                        extensionInput: {
+                            // prefer saved extensionId from modelConfig; otherwise env default
+                            extensionId: modelConfig?.extensionId,
+                            stepName: modelConfig?.stepName || 'extractCodeFromExtension',
+                            formId: modelConfig?.formId || 'form-builder-proxy',
+                            functionId: modelConfig?.functionId || 'create-channel-function',
+                            metadata: modelConfig?.metadata || {},
+                            source: 'final-submission',
+                        },
+                    },
+                    onCompleted: (data: any) => {
+                        // if (!data?.createChannelWorkflowJob) {
+                        //     setIsSuccessThinking(false);
+                        //     setIsLoading(false);
+                        //     return;
+                        // }
+                        // setIsSuccessThinking(false);
+                        // setIsLoading(false);
+                    },
+                    onError: (error: any) => {
+                        console.error('Error creating channel:', error);
+                        setIsSuccessThinking(false);
+                        setIsLoading(false);
+                    },
+                });
+            } catch (err) {
+                console.error('Failed to create new AI project/channel from AIAgent:', err);
+                setIsSuccessThinking(false);
+                setIsLoading(false);
+            }
+        },
+        [
+            actualChannelId,
+            postId,
+            auth,
+            startUpload,
+            sendMsg,
+            scrollToBottom,
+            getValidatedConfig,
+            hasApiKey,
+            modelConfig,
+            navigate,
+            createChannelWorkflowJob,
+            sendMessageInput,
+            apolloClient,
+            isShowOnlyInbox,
+        ],
+    );
+
+    const fixError = useCallback(
+        (errorMessage: string) => {
+            // Use sendMessage to fix the error, which will use createProject flow
+            return handleSend(errorMessage);
+        },
+        [handleSend],
+    );
+
+    const handleStop = useCallback(() => {
+        // Stop the current operation
+
+        console.log('Stop button clicked - stopping current operation');
+
+        // Call the onStop prop if provided
+        onStop?.();
+    }, [setIsLoading, onStop]);
+
+    const handleRetry = useCallback(() => {
+        send({ type: 'RETRY' });
+    }, [send]);
+
+    const handleClearError = useCallback(() => {
+        send({ type: 'CLEAR_ERROR' });
+    }, [send]);
+
+    // Use only default/regular messages and ignore AI messages — preserve type (THINKING, TOOLUSE, CODEBLOCK, etc.) for ModernMessageGroup slots
+    const allMessages = useMemo(() => {
+        if (!regularMessages) return [] as any[];
+
+        const mapped = (regularMessages || []).map((m, idx) => ({
+            id: m.id || `regular-${idx}`,
+            message: (m as any).message || (m as any).content || '',
+            createdAt: new Date((m as any).createdAt || Date.now()),
+            type: (m as any).type,
+            propsConfiguration: (m as any).propsConfiguration,
+            props: (m as any).props,
+            files: (m as any).files,
+            sender: 'user',
+            author: (m as any).author,
+            isUserMessage: true,
+        }));
+
+        // Check if we have a completed AIASSISTANT (final response) — if so, hide THINKING
+        const hasCompletedResponse = mapped.some((m: any) => {
+            const t = (m as any).type;
+            const frag = (m as any)?.props?.fragment ?? (m as any)?.propsConfiguration?.contents?.fragment;
+            return (t === 'AIASSISTANT' || t === 'ASSISTANT') && frag && (frag.sandboxUrl || frag.files);
+        });
+
+        return mapped.filter((m: any) => {
+            if ((m as any).type !== 'THINKING') return true;
+            // Hide THINKING when: dismissed in payload, or when we have a completed response
+            const att = (m as any)?.props?.attachment ?? (m as any)?.propsConfiguration?.contents?.attachment;
+            if (att == null) return false;
+            if (att.dismissed === true) return false;
+            if (att.isThinking === false && !String(att.thought || '').trim()) return false;
+            if (hasCompletedResponse) return false; // Final response exists — hide lingering THINKING
+            return true;
+        });
+    }, [regularMessages, currentUser]);
+
+    // Derive sandbox-style errors from message fragments so we can show the Fix Error UI
+    // Returns unique errors globally (deduplicated by error message/content)
+    // Map errors to their respective messages (messageId -> errors[])
+    const errorsByMessageId = useMemo(() => {
+        if (!regularMessages || regularMessages.length === 0) return new Map<string, any[]>();
+
+        const errorsMap = new Map<string, any[]>();
+
+        // Collect errors from all messages and map them to message IDs
+        (regularMessages || []).forEach((m: any) => {
+            const fragment = m?.propsConfiguration?.contents?.fragment;
+            if (!fragment) return;
+
+            const isErrorFragment = fragment?.isError === true || fragment?.type === 'ERROR';
+            if (!isErrorFragment) return;
+
+            const errorId = fragment.id || m.id || objectId();
+            const messageId = m.id || 'unknown';
+
+            const errorMessage =
+                fragment.errorMessage ||
+                fragment.summary ||
+                (m as any).message ||
+                (m as any).content ||
+                'An error occurred in the AI sandbox.';
+
+            const error = {
+                id: errorId,
+                messageId: messageId,
+                errorType: fragment.errorType || 'RUNTIME_ERROR',
+                timestamp: fragment.timestamp || m.createdAt || new Date().toISOString(),
+                sandboxId: fragment.sandboxId || fragment.projectId || actualChannelId || 'unknown-sandbox',
+                message: errorMessage,
+                stack: fragment.stack || '',
+                url: fragment.sandboxUrl || fragment.url,
+                fixable: fragment.fixable !== false,
+            };
+
+            // Add error to the message's error list
+            if (!errorsMap.has(messageId)) {
+                errorsMap.set(messageId, []);
+            }
+            errorsMap.get(messageId)!.push(error);
+        });
+
+        return errorsMap;
+    }, [regularMessages, actualChannelId]);
+
+    // Build list with date separators similar to MessagesBuilderUi
+    const messageListWithDates = useMemo(() => {
+        let currentDate = '';
+        const res: any[] = [];
+
+        if (showDateSeparators) {
+            allMessages?.forEach((msg: any) => {
+                const date = new Date(msg.createdAt);
+                let msgDate: string;
+                if (isToday(date)) msgDate = t('tailwind_ui_inbox.today');
+                else if (isYesterday(date)) msgDate = t('tailwind_ui_inbox.yesterday');
+                else msgDate = format(date, 'eee, do MMMM');
+
+                if (msgDate !== currentDate) {
+                    res.push({ type: 'date', content: msgDate });
+                    currentDate = msgDate;
+                }
+                res.push(msg);
+            });
+
+            if (allMessages && allMessages.length > 0) {
+                const todayLabel = t('tailwind_ui_inbox.today');
+                if (currentDate !== todayLabel) {
+                    res.push({ type: 'date', content: todayLabel });
+                }
+            }
+        } else {
+            // No date separaters, keep messages as-is
+            allMessages?.forEach((msg: any) => res.push(msg));
+        }
+
+        return res;
+    }, [allMessages, t, showDateSeparators]);
+
+    // Group messages by date sections for Slack-like rendering
+    const messagesByDate = useMemo(() => {
+        const sections: { date: string | null; messages: any[] }[] = [];
+        let currentSection: { date: string | null; messages: any[] } = { date: null, messages: [] };
+
+        messageListWithDates.forEach((item: any) => {
+            if (item?.type === 'date') {
+                if (currentSection.messages.length > 0) {
+                    sections.push(currentSection);
+                }
+                currentSection = { date: item.content, messages: [] };
+            } else {
+                currentSection.messages.push(item);
+            }
+        });
+
+        if (currentSection.messages.length > 0) {
+            sections.push(currentSection);
+        }
+
+        return sections;
+    }, [messageListWithDates]);
+
+    // Show all messages without limiting
+    const limitedMessagesByDate = useMemo(() => {
+        if (!messagesByDate || messagesByDate.length === 0) return [];
+        return messagesByDate;
+    }, [messagesByDate]);
+
+    // Ensure we show complete conversation pairs (user message + AI response)
+    const completeConversationMessages = useMemo(() => {
+        if (!limitedMessagesByDate || limitedMessagesByDate.length === 0) return [];
+
+        const completeSections: { date: string | null; messages: any[] }[] = [];
+
+        limitedMessagesByDate.forEach((section) => {
+            const completeMessages: any[] = [];
+            const sectionMessages = [...section.messages];
+
+            console.log('🔄 Processing section for complete conversations:', {
+                sectionDate: section.date,
+                totalMessages: sectionMessages.length,
+                messages: sectionMessages.map((m) => ({
+                    sender: m.sender,
+                    isUserMessage: m.isUserMessage,
+                    message: m.message?.substring(0, 30) + '...',
+                })),
+            });
+
+            // Group messages into conversation pairs
+            for (let i = 0; i < sectionMessages.length; i++) {
+                const currentMsg = sectionMessages[i];
+
+                // If this is a user message, look for its AI response
+                if (currentMsg.sender === 'user' || currentMsg.isUserMessage) {
+                    completeMessages.push(currentMsg);
+
+                    // Look for the corresponding AI response (next message should be AI)
+                    if (i + 1 < sectionMessages.length) {
+                        const nextMsg = sectionMessages[i + 1];
+                        if (nextMsg.sender === 'ai' || !nextMsg.isUserMessage) {
+                            completeMessages.push(nextMsg);
+                            i++; // Skip the next message since we've already added it
+                        }
+                    }
+                } else if (currentMsg.sender === 'ai' || !currentMsg.isUserMessage) {
+                    // If this is an AI message without a preceding user message, still show it
+                    completeMessages.push(currentMsg);
+                }
+            }
+
+            console.log('🔄 Complete messages for section:', {
+                sectionDate: section.date,
+                completeMessages: completeMessages.map((m) => ({
+                    sender: m.sender,
+                    isUserMessage: m.isUserMessage,
+                    message: m.message?.substring(0, 30) + '...',
+                })),
+            });
+
+            if (completeMessages.length > 0) {
+                completeSections.push({ ...section, messages: completeMessages });
+            }
+        });
+
+        return completeSections;
+    }, [limitedMessagesByDate]);
+
+    // Auto scroll to bottom when messages, typing status, or AI responses change
+    useEffect(() => {
+        //  scrollToBottom('smooth', 100);
+    }, [completeConversationMessages?.length, isTyping, aiMessages.length, scrollToBottom]);
+
+    // Cleanup any pending timeout / scroll on unmount
+    useEffect(() => {
+        return () => {
+            if (successThinkingTimeoutRef.current) {
+                clearTimeout(successThinkingTimeoutRef.current);
+            }
+            if (scrollPendingRef.current) {
+                clearTimeout(scrollPendingRef.current);
+                scrollPendingRef.current = null;
+            }
+            if (streamScrollRafRef.current != null) {
+                cancelAnimationFrame(streamScrollRafRef.current);
+                streamScrollRafRef.current = null;
+            }
+        };
+    }, []);
+
+    const extractCleanContent = useCallback((summary: string): string => {
+        // console.log('summary...........', summary);
+        if (!summary) return 'Project generated successfully!';
+
+        const summeryData = summary
+            .replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '')
+            .replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+        if (summeryData && summeryData.trim() !== '' && summeryData.trim()?.length > 0) {
+            return summeryData || 'Project generated successfully!';
+        }
+        // Extract content from <task_summary> tags
+        const taskSummaryMatch = summary.match(/<task_summary>([\s\S]*?)<\/task_summary>/);
+        if (taskSummaryMatch) {
+            // const removedCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+            return taskSummaryMatch?.[1]?.trim() ?? 'Project generated successfully!';
+        }
+
+        // If no task_summary tags, remove canvas_layers and return the rest
+        const withoutCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').trim();
+        return withoutCanvasLayers || 'Project generated successfully!';
+    }, []);
+
+    return (
+        <div className={`flex flex-col h-full ${className}`}>
+            {/* Header with Tabs (hidden when isShowOnlyInbox is true) */}
+            {!isShowOnlyInbox && (
+                <div className="border-b border-gray-200 bg-white">
+                    <div className="flex items-center justify-between px-4 py-3">
+                        {/* Tabs */}
+                        <div className="flex space-x-6">
+                            <button
+                                onClick={() => setActiveTab('chat')}
+                                className={`relative ${
+                                    activeTab === 'chat'
+                                        ? 'text-blue-600 font-medium'
+                                        : 'text-gray-500 hover:text-gray-700'
+                                } text-sm transition-colors`}
+                            >
+                                <span>Chat</span>
+                                {activeTab === 'chat' && (
+                                    <div className="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></div>
+                                )}
+                            </button>
+                            <button
+                                onClick={() => setActiveTab('history')}
+                                className={`relative ${
+                                    activeTab === 'history'
+                                        ? 'text-blue-600 font-medium'
+                                        : 'text-gray-500 hover:text-gray-700'
+                                } text-sm transition-colors`}
+                            >
+                                <span>History</span>
+                                {activeTab === 'history' && (
+                                    <div className="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"></div>
+                                )}
+                            </button>
+                        </div>
+
+                        {/* New Chat Button */}
+                        {/* <button
+                            onClick={() => {
+                                // Clear AI messages by sending update event to the machine
+                                send({ type: 'UPDATE', value: { messages: [] } });
+                            }}
+                            className="px-4 py-2 text-sm text-gray-700  border border-gray-300 rounded-lg hover:bg-gray-200 transition-colors"
+                            style={{ borderRadius: '10px' }}
+                        >
+                            New Chat
+                        </button> */}
+                    </div>
+                </div>
+            )}
+
+            {/* Tab Content */}
+            {activeTab === 'history' ? (
+                /* History Tab Content */
+                <div className="flex-1 overflow-y-auto bg-white">
+                    {/* Search Bar */}
+                    <div className="px-4 py-3 border-b border-gray-200">
+                        <div className="relative">
+                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg
+                                    className="h-5 w-5 text-gray-400"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                                    />
+                                </svg>
+                            </div>
+                            <input
+                                type="text"
+                                placeholder="Search messages..."
+                                className="block w-full pl-10 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                            />
+                            <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
+                                <button className="text-gray-400 hover:text-gray-600">
+                                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Message History List */}
+                    <div className="px-4 py-2">
+                        {regularMessages && regularMessages.length > 0 ? (
+                            regularMessages
+                                .filter((msg: any) => (msg as any)?.propsConfiguration?.contents?.role === 'USER')
+                                .map((msg: any, index: number) => {
+                                    const messageTime = new Date(msg.createdAt);
+
+                                    return (
+                                        <div key={msg.id || index} className="mb-4">
+                                            {/* Restore to this point button */}
+                                            <div className="flex items-center justify-end mb-2">
+                                                {/* <button className="text-blue-600 text-sm underline hover:text-blue-800 flex items-center">
+                                                    <svg
+                                                        className="w-4 h-4 mr-1"
+                                                        fill="none"
+                                                        viewBox="0 0 24 24"
+                                                        stroke="currentColor"
+                                                    >
+                                                        <path
+                                                            strokeLinecap="round"
+                                                            strokeLinejoin="round"
+                                                            strokeWidth={2}
+                                                            d="M15 19l-7-7 7-7"
+                                                        />
+                                                    </svg>
+                                                    Restore to this point
+                                                </button> */}
+                                            </div>
+
+                                            {/* Message using same container as Chat tab */}
+                                            <ModernMessageGroupComponent
+                                                messages={[
+                                                    {
+                                                        id: msg.id,
+                                                        message:
+                                                            (msg as any)?.propsConfiguration?.contents?.role ===
+                                                            'ASSISTANT'
+                                                                ? msg.propsConfiguration?.contents?.fragment?.summary
+                                                                    ? extractCleanContent(
+                                                                          msg.propsConfiguration?.contents?.fragment
+                                                                              ?.summary,
+                                                                      )
+                                                                    : msg.message
+                                                                : msg.message,
+                                                        author: msg.author || {
+                                                            id: 'user',
+                                                            givenName: 'User',
+                                                            familyName: '',
+                                                            fullName: 'User',
+                                                            username: 'user',
+                                                            email: '',
+                                                            picture: null,
+                                                            alias: [],
+                                                            tokens: [],
+                                                        },
+                                                        createdAt: msg.createdAt,
+                                                        type: (msg as any)?.type || PostTypeEnum.Aiassistant,
+                                                        isDelivered: false,
+                                                        isRead: false,
+                                                        parentId: null,
+                                                        fromServer: null,
+                                                        updatedAt: msg.createdAt,
+                                                        propsConfiguration: {
+                                                            ...(msg as any)?.propsConfiguration,
+                                                            contents: {
+                                                                ...(msg as any)?.propsConfiguration?.contents,
+                                                                attachment:
+                                                                    (msg as any)?.props?.attachment ??
+                                                                    (msg as any)?.propsConfiguration?.contents
+                                                                        ?.attachment,
+                                                            },
+                                                        },
+                                                        props: (msg as any)?.props,
+                                                        files: msg.files,
+                                                        replies: null,
+                                                        channel: null,
+                                                        isPinned: false,
+                                                    },
+                                                ]}
+                                                currentUser={currentUser as any}
+                                                onOpen={onOpen}
+                                                onMessageClick={(msg) => setSelectedPost(msg)}
+                                                isDesktopView={isDesktopView}
+                                                isSmallScreen={isSmallScreen}
+                                                showAuthorName={true}
+                                                showAvatar={true}
+                                            />
+                                        </div>
+                                    );
+                                })
+                        ) : (
+                            // Fallback entries when no messages
+                            <>
+                                {/* History Entry 1 */}
+                                <div className="mb-4">
+                                    <div className="flex items-center justify-end mb-2">
+                                        <button className="text-blue-600 text-sm underline hover:text-blue-800 flex items-center">
+                                            <svg
+                                                className="w-4 h-4 mr-1"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                stroke="currentColor"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M15 19l-7-7 7-7"
+                                                />
+                                            </svg>
+                                            Restore to this point
+                                        </button>
+                                    </div>
+                                    <div className="bg-gray-100 rounded-lg p-3">
+                                        <p className="text-sm text-gray-900">Sample message for demonstration</p>
+                                    </div>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            ) : (
+                /* Chat Tab Content */
+                <div className="flex-1 overflow-y-auto bg-white">
+                    {/* Messages Display - Styled like MessagesBuilderUi */}
+                    <div
+                        className={`w-full pb-4 pt-2 ${
+                            isDesktopView ? 'space-y-3 max-w-full mx-auto' : isSmallScreen ? 'space-y-2' : 'space-y-2'
+                        }`}
+                    >
+                        {/* Load Past Messages Button */}
+                        {/* Load Past Messages disabled to show all messages */}
+
+                        {/* Show placeholder when no messages */}
+                        {(!completeConversationMessages || completeConversationMessages.length === 0) && (
+                            <div className="px-4 py-8 text-center">
+                                <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>
+                            </div>
+                        )}
+
+                        {completeConversationMessages?.map((section, sectionIndex) => (
+                            <div key={`section-${sectionIndex}`} className="w-full px-4">
+                                {showDateSeparators && section.date && (
+                                    <div className="flex items-center justify-center my-3">
+                                        <div className="flex-grow border-t border-gray-200"></div>
+                                        <div className="mx-4 px-3 py-1 bg-white border border-gray-200 rounded-full text-xs font-medium text-gray-600">
+                                            {section.date}
+                                        </div>
+                                        <div className="flex-grow border-t border-gray-200"></div>
+                                    </div>
+                                )}
+
+                                <div className={`${isDesktopView ? 'mb-2' : 'mb-1'}`}>
+                                    {section.messages.map((msg: any, msgIndex: number) => {
+                                        // Get errors for this specific message
+                                        const messageErrors = errorsByMessageId.get(msg.id) || [];
+
+                                        return (
+                                            <div key={msg.id || msgIndex} className="mb-3">
+                                                {/* AI Message Indicator */}
+                                                {msg.isAIMessage && (
+                                                    <div className="flex items-center mb-2">
+                                                        <div className="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
+                                                        <span className="text-xs text-blue-600 font-medium">
+                                                            AI Assistant
+                                                        </span>
+                                                    </div>
+                                                )}
+
+                                                {msg.isLoading ? (
+                                                    // Show loader for loading messages
+                                                    <div className="flex items-center space-x-2 bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg">
+                                                        <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"></div>
+                                                        <span className="text-sm text-gray-600">
+                                                            {msg.isProcessing ? 'Thinking...' : 'Thinking...'}
+                                                        </span>
+                                                    </div>
+                                                ) : (
+                                                    // Show normal message for non-loading messages
+                                                    <ModernMessageGroupComponent
+                                                        messages={[
+                                                            {
+                                                                id: msg.id,
+                                                                message:
+                                                                    (msg as any)?.propsConfiguration?.contents?.role ===
+                                                                    'ASSISTANT'
+                                                                        ? msg.propsConfiguration?.contents?.fragment
+                                                                              ?.summary
+                                                                            ? extractCleanContent(
+                                                                                  msg.propsConfiguration?.contents
+                                                                                      ?.fragment?.summary,
+                                                                              )
+                                                                            : msg.message
+                                                                        : msg.message,
+                                                                author:
+                                                                    msg.sender === 'user'
+                                                                        ? msg.author
+                                                                        : {
+                                                                              id: 'ai-assistant',
+                                                                              givenName: 'AI',
+                                                                              familyName: 'Assistant',
+                                                                              fullName: 'AI Assistant',
+                                                                              username: 'ai-assistant',
+                                                                              email: 'ai@assistant.com',
+                                                                              picture: null,
+                                                                              alias: [],
+                                                                              tokens: [],
+                                                                          },
+                                                                createdAt: msg.createdAt,
+                                                                type: (msg as any)?.type || PostTypeEnum.Aiassistant,
+                                                                isDelivered: false,
+                                                                isRead: false,
+                                                                parentId: null,
+                                                                fromServer: null,
+                                                                updatedAt: msg.createdAt,
+                                                                propsConfiguration: {
+                                                                    ...(msg as any)?.propsConfiguration,
+                                                                    contents: {
+                                                                        ...(msg as any)?.propsConfiguration?.contents,
+                                                                        attachment:
+                                                                            (msg as any)?.props?.attachment ??
+                                                                            (msg as any)?.propsConfiguration?.contents
+                                                                                ?.attachment,
+                                                                    },
+                                                                },
+                                                                props: (msg as any)?.props,
+                                                                files: msg.files,
+                                                                replies: null,
+                                                                channel: null,
+                                                                isPinned: false,
+                                                            },
+                                                        ]}
+                                                        currentUser={currentUser as any}
+                                                        onOpen={onOpen}
+                                                        onMessageClick={(msg) => setSelectedPost(msg)}
+                                                        isDesktopView={isDesktopView}
+                                                        isSmallScreen={isSmallScreen}
+                                                        showTimestamp={false}
+                                                        sandboxErrors={messageErrors}
+                                                        currentFiles={currentFiles}
+                                                        onFixError={fixError}
+                                                    />
+                                                )}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+
+                        {/* Typing indicator */}
+                        {(isTyping || isSuccessThinking || isLoading || isCreatingSandbox) && (
+                            <div className="px-4">
+                                <div className="flex justify-start">
+                                    <div className="bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg">
+                                        <div className="flex items-center space-x-2">
+                                            <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"></div>
+                                            <span className="text-sm text-gray-600">Thinking...</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        <div ref={bottomRef} />
+                    </div>
+
+                    {/* Subscription Handler for real-time message updates */}
+                    <SubscriptionHandler
+                        subscribeToMore={subscribeToMore}
+                        document={CHAT_MESSAGE_ADDED}
+                        variables={{ channelId: actualChannelId?.toString() }}
+                        enabled={!!actualChannelId && !!subscribeToMore}
+                        updateQuery={(prev: any, { subscriptionData }: any) => {
+                            if (!subscriptionData.data) return prev;
+                            const newMessage = subscriptionData.data.chatMessageAdded;
+                            console.log('newMessage...........', newMessage);
+                            if (!newMessage?.id) return prev;
+
+                            const existing = prev?.messages?.data || [];
+                            const attachment =
+                                newMessage?.props?.attachment ?? newMessage?.propsConfiguration?.contents?.attachment;
+                            // Treat as dismiss: explicit dismissed flag, or THINKING with empty/inactive attachment, or THINKING with attachment: null
+                            const isDismissed =
+                                attachment?.dismissed === true ||
+                                (newMessage?.type === 'THINKING' &&
+                                    (attachment == null ||
+                                        (attachment?.isThinking === false &&
+                                            !String(attachment?.thought || '').trim())));
+
+                            let newData: any[];
+                            let newTotalCount: number;
+
+                            if (isDismissed) {
+                                // Remove THINKING when dismissed
+                                newData = existing.filter((m: any) => m.id !== newMessage.id);
+                                newTotalCount = Math.max(
+                                    0,
+                                    (prev?.messages?.totalCount || 0) - (existing.length - newData.length),
+                                );
+                            } else {
+                                const idx = existing.findIndex((m: any) => m.id === newMessage.id);
+                                if (idx >= 0) {
+                                    // Replace existing message (same id)
+                                    newData = [...existing.slice(0, idx), newMessage, ...existing.slice(idx + 1)];
+                                    newTotalCount = prev?.messages?.totalCount || 0;
+                                } else {
+                                    newData = [...existing, newMessage];
+                                    newTotalCount = (prev?.messages?.totalCount || 0) + 1;
+                                }
+                            }
+                            // Preserve server order (posts are persisted in sequence). Dedupe by id only.
+                            if (!isDismissed) {
+                                const optId = optimisticAssistantMessageIdRef.current;
+                                if (optId && newMessage?.id) {
+                                    if (String(newMessage.id) === String(optId)) {
+                                        optimisticAssistantMessageIdRef.current = null;
+                                    } else {
+                                        const typ = String(newMessage.type || '').toUpperCase();
+                                        const role = newMessage?.propsConfiguration?.contents?.role;
+                                        const realAssistantChunk =
+                                            [
+                                                'THINKING',
+                                                'TOOLUSE',
+                                                'CODEBLOCK',
+                                                'SERVICE',
+                                                'AIASSISTANT',
+                                                'ASSISTANT',
+                                            ].includes(typ) || role === 'ASSISTANT';
+                                        if (realAssistantChunk) {
+                                            newData = newData.filter((m: any) => String(m?.id) !== String(optId));
+                                            optimisticAssistantMessageIdRef.current = null;
+                                        }
+                                    }
+                                }
+                                newData = uniqBy(newData, 'id');
+                            }
+
+                            return {
+                                ...prev,
+                                messages: {
+                                    ...prev?.messages,
+                                    data: newData,
+                                    totalCount: newTotalCount,
+                                },
+                            };
+                        }}
+                        onError={(error) => {
+                            console.error('Subscription error:', error);
+                        }}
+                    />
+                </div>
+            )}
+
+            {/* Error Display */}
+            {error && (
+                <div className="mx-4 mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                    <div className="flex items-center justify-between">
+                        <div className="text-red-800 text-sm">{error}</div>
+                        <div className="flex space-x-2">
+                            <button
+                                onClick={handleRetry}
+                                className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
+                            >
+                                Retry
+                            </button>
+                            <button
+                                onClick={handleClearError}
+                                className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                            >
+                                Dismiss
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Input Area - Only show for Chat tab */}
+            {activeTab === 'chat' &&
+                (() => {
+                    // Compute final showStopButton value: use prop if provided, otherwise compute from conditions
+                    // const finalShowStopButton =
+                    //     showStopButton !== undefined
+                    //         ? showStopButton
+                    //         : !isShowOnlyInbox && (isCreatingSandbox || isLoading || isSuccessThinking);
+
+                    const isShowStopButton = showStopButton && (isCreatingSandbox || isSuccessThinking) ? true : false;
+
+                    return (
+                        <div className="border-t border-gray-200 bg-white">
+                            {/* Removed temporary test button */}
+                            <InputComponent
+                                channelId={actualChannelId}
+                                handleSend={handleSend}
+                                placeholder={placeholder}
+                                modelConfig={modelConfig}
+                                onModelConfigChange={updateModelConfig}
+                                textareaStyles={
+                                    isShowOnlyInbox ? { height: '80px', minHeight: '80px', maxHeight: '80px' } : {}
+                                }
+                                showModeSelector={showModeSelector}
+                                showStopButton={isShowStopButton}
+                                onStop={isShowStopButton ? handleStop : undefined}
+                                templates={templates}
+                                selectedTemplate={selectedTemplate}
+                                suggestedTemplate={suggestedTemplate}
+                                onSelectTemplate={onSelectTemplate}
+                                templateSelectedLabel={templateSelectedLabel}
+                                templateModalItems={templateModalItems}
+                                showTemplateModal={showTemplateModal}
+                                onOpenTemplateModal={onOpenTemplateModal}
+                                onCloseTemplateModal={onCloseTemplateModal}
+                                onSelectTemplateById={onSelectTemplateById}
+                                onClearTemplate={onClearTemplate}
+                                onAcceptSuggestedTemplate={onAcceptSuggestedTemplate}
+                                isAnalyzingQuery={isAnalyzingQuery}
+                                onQueryChange={onQueryChange}
+                                leftItemsOverrides={leftItemsOverrides}
+                                rightItemsOverrides={rightItemsOverrides}
+                                inputToolBarProps={inputToolBarProps}
+                            />
+                        </div>
+                    );
+                })()}
+
+            {/* Optional Modal for user content like MessagesBuilderUi */}
+            {isOpen ? (
+                <div>
+                    <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={onClose} />
+                    <div className="fixed z-50 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <div
+                            className="bg-white w-[1036px] h-[700px] rounded-lg shadow-xl"
+                            style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }}
+                        >
+                            <div className="flex justify-between border-b border-gray-300 pb-4 pt-4">
+                                <button
+                                    onClick={onClose}
+                                    className="w-8 ml-3 text-black hover:text-black focus:outline-none"
+                                >
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M6 18L18 6M6 6l12 12"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                            <div className="p-4">
+                                {/* Keep minimal until full UserModalContent is needed */}
+                                <div className="text-sm text-gray-700">{selectedElement?.author?.username}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+};