@messenger-box/tailwind-ui-inbox 10.0.3-alpha.184 → 10.0.3-alpha.185

package/src/components/AIAgent/AIAgent.tsx

@@ -48,6 +48,8 @@ interface AIAgentProps {
     sendMessageInput?: ICreateChannelInput;
     isShowOnlyInbox?: boolean;
     showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
     [key: string]: any; // Allow other props to be passed through to Inbox
 }
 
@@ -69,9 +71,11 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     sendMessageInput,
     isShowOnlyInbox = false,
     showModeSelector = false,
+    showStopButton = false,
+    onStop,
 }) => {
     const [state, send] = useMachine(aiAgentMachine);
-    // const apolloClient = useApolloClient();
+    const apolloClient = useApolloClient();
     const { startUpload } = useUploadFiles();
     const [sendMsg] = useSendMessagesMutation();
     const [createChannelWorkflowJob] = useCreateChannelWorkflowJobMutation();
@@ -116,7 +120,7 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         },
     });
 
-    console.log('messagesQuery...', JSON.stringify(messagesQuery?.data?.messages?.data));
+    // console.log('messagesQuery...', JSON.stringify(messagesQuery?.data?.messages?.data));
 
     const { messages: aiMessages, error, isTyping } = state.context;
     const { t } = useTranslation('translations');
@@ -217,6 +221,48 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         return orderBy(uniqBy(allMessages, 'id'), ['createdAt'], ['asc']);
     }, [messagesData?.messages?.data]);
 
+    // Check if any ASSISTANT message has isCreatingSandbox: true in fragment
+    // Only hide loader when isCreatingSandbox is explicitly false, not when it's undefined/missing
+    const isCreatingSandbox = useMemo(() => {
+        if (isShowOnlyInbox) return false; // Only check when isShowOnlyInbox is false
+        if (!regularMessages || regularMessages.length === 0) return false;
+
+        // Find the most recent ASSISTANT message
+        const mostRecentAssistant = regularMessages
+            .slice()
+            .reverse()
+            .find((m: any) => m?.propsConfiguration?.contents?.role === 'ASSISTANT');
+
+        if (!mostRecentAssistant) return false;
+
+        const fragment = mostRecentAssistant?.propsConfiguration?.contents?.fragment;
+
+        // If isCreatingSandbox is explicitly true, show loader
+        if (fragment?.isCreatingSandbox === true) {
+            return true;
+        }
+
+        // If isCreatingSandbox is explicitly false, hide loader
+        if (fragment?.isCreatingSandbox === false) {
+            return false;
+        }
+
+        // If isCreatingSandbox is undefined/missing, check if message is complete
+        // If incomplete (no files, no summary, no error), we're still creating - show loader
+        if (fragment) {
+            const hasFiles = fragment.files && Object.keys(fragment.files).length > 0;
+            const hasSummary = fragment.summary && fragment.summary.trim().length > 0;
+            const hasError = fragment.isError === true || fragment.type === 'ERROR';
+
+            // If message is incomplete (no files, no summary, no error), we're still creating
+            if (!hasFiles && !hasSummary && !hasError) {
+                return true;
+            }
+        }
+
+        return false;
+    }, [regularMessages, isShowOnlyInbox]);
+
     // Send regular messages to AI agent machine for context
     useEffect(() => {
         if (regularMessages && regularMessages.length > 0) {
@@ -345,6 +391,92 @@ export const AIAgent: React.FC<AIAgentProps> = ({
             }
             setIsSuccessThinking(true);
             setIsLoading(true);
+
+            // Optimistic update: Add assistant message with isCreatingSandbox: true
+            if (!isShowOnlyInbox && actualChannelId) {
+                try {
+                    const optimisticAssistantMessageId = objectId();
+                    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: 1,
+                        },
+                    };
+
+                    try {
+                        const existingData = apolloClient.readQuery(messagesQuery) as any;
+                        if (existingData?.messages) {
+                            // Check if optimistic message already exists
+                            const existingOptimistic = existingData.messages.data?.find(
+                                (m: any) => m.id === optimisticAssistantMessageId,
+                            );
+
+                            if (!existingOptimistic) {
+                                apolloClient.writeQuery({
+                                    ...messagesQuery,
+                                    data: {
+                                        messages: {
+                                            ...existingData.messages,
+                                            data: [...(existingData.messages.data || []), optimisticAssistantMessage],
+                                            totalCount: (existingData.messages.totalCount || 0) + 1,
+                                        },
+                                    },
+                                });
+                            }
+                        }
+                    } 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);
@@ -402,6 +534,8 @@ export const AIAgent: React.FC<AIAgentProps> = ({
             navigate,
             createChannelWorkflowJob,
             sendMessageInput,
+            apolloClient,
+            isShowOnlyInbox,
         ],
     );
 
@@ -413,6 +547,15 @@ export const AIAgent: React.FC<AIAgentProps> = ({
         [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]);
@@ -441,11 +584,14 @@ export const AIAgent: React.FC<AIAgentProps> = ({
     }, [regularMessages, currentUser]);
 
     // Derive sandbox-style errors from message fragments so we can show the Fix Error UI
-    const derivedFragmentErrors = useMemo(() => {
-        if (!regularMessages || regularMessages.length === 0) return [];
+    // 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 errors: 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;
@@ -453,24 +599,36 @@ export const AIAgent: React.FC<AIAgentProps> = ({
             const isErrorFragment = fragment?.isError === true || fragment?.type === 'ERROR';
             if (!isErrorFragment) return;
 
-            errors.push({
-                id: fragment.id || m.id || objectId(),
+            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:
-                    fragment.errorMessage ||
-                    fragment.summary ||
-                    (m as any).message ||
-                    (m as any).content ||
-                    'An error occurred in the AI sandbox.',
+                message: errorMessage,
                 stack: fragment.stack || '',
                 url: fragment.sandboxUrl || fragment.url,
-                fixable: fragment.fixable !== false, // default to true unless explicitly false
-            });
+                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 errors;
+        return errorsMap;
     }, [regularMessages, actualChannelId]);
 
     // Build list with date separators similar to MessagesBuilderUi
@@ -876,93 +1034,98 @@ export const AIAgent: React.FC<AIAgentProps> = ({
                                 )}
 
                                 <div className={`${isDesktopView ? 'mb-2' : 'mb-1'}`}>
-                                    {section.messages.map((msg: any, msgIndex: number) => (
-                                        <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.message,
-                                                            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: 'Simple' as any,
-                                                            type: PostTypeEnum.Aiassistant,
-                                                            isDelivered: false,
-                                                            isRead: false,
-                                                            parentId: null,
-                                                            fromServer: null,
-                                                            updatedAt: msg.createdAt,
-                                                            propsConfiguration: msg.propsConfiguration,
-                                                            props: msg.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={[...sandboxErrors, ...derivedFragmentErrors]}
-                                                    currentFiles={currentFiles}
-                                                    onFixError={fixError}
-                                                />
-                                            )}
-                                        </div>
-                                    ))}
+                                    {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.message,
+                                                                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: 'Simple' as any,
+                                                                type: PostTypeEnum.Aiassistant,
+                                                                isDelivered: false,
+                                                                isRead: false,
+                                                                parentId: null,
+                                                                fromServer: null,
+                                                                updatedAt: msg.createdAt,
+                                                                propsConfiguration: msg.propsConfiguration,
+                                                                props: msg.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) && (
+                        {(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">
@@ -1034,20 +1197,36 @@ export const AIAgent: React.FC<AIAgentProps> = ({
             )}
 
             {/* Input Area - Only show for Chat tab */}
-            {activeTab === 'chat' && (
-                <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}
-                    />
-                </div>
-            )}
+            {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 && !isShowOnlyInbox ? isCreatingSandbox || isSuccessThinking : 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}
+                            />
+                        </div>
+                    );
+                })()}
 
             {/* Optional Modal for user content like MessagesBuilderUi */}
             {isOpen ? (

package/src/components/InboxMessage/InputComponent.tsx

@@ -17,6 +17,8 @@ type MessageInputProps = {
     showModelToolbarProjectSettings?: boolean;
     isShowMeta?: boolean;
     showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
 };
 
 export const InputComponent = ({
@@ -30,6 +32,8 @@ export const InputComponent = ({
     showModelToolbarProjectSettings = false,
     isShowMeta = false,
     showModeSelector = false,
+    showStopButton = false,
+    onStop,
 }: MessageInputProps) => {
     const [message, setMessage] = useState('');
     const [sending, setSending] = useState(false);
@@ -184,6 +188,8 @@ export const InputComponent = ({
                         showProjectSettings={showModelToolbarProjectSettings}
                         isShowMeta={isShowMeta}
                         showModeSelector={showModeSelector}
+                        showStopButton={showStopButton}
+                        onStop={onStop}
                     />
                 </div>
             </div>

package/src/components/InboxMessage/RightSidebarAi.tsx

@@ -29,6 +29,8 @@ export interface IRightSidebarAi extends React.HTMLAttributes<HTMLDivElement> {
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
     isCreatingSandbox?: boolean;
     setIsCreatingSandbox?: (isCreatingSandbox: boolean) => void;
+    showStopButton?: boolean;
+    onStop?: () => void;
     [key: string]: any;
 }