@messenger-box/tailwind-ui-inbox 10.0.3-alpha.73 → 10.0.3-alpha.74

package/src/components/InboxMessage/InputComponent.tsx

@@ -92,7 +92,8 @@ export const InputComponent = ({ handleSend: handleSendProp, placeholder }: Mess
     const hasContent = message.trim().length > 0;
 
     return (
-        <div className="bg-gray-50 border-t border-gray-200">
+        // <div className="bg-gray-50 border-t border-gray-200">
+        <div className="bg-gray-50 border border-gray-200">
             {/* Toast notification */}
             {showToast && (
                 <div className="fixed top-4 right-4 z-50 bg-orange-50 border border-orange-200 text-orange-800 px-4 py-3 rounded-lg shadow-lg animate-bounce">

package/src/components/InboxMessage/RightSidebarAi.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Slot } from '@common-stack/components-pro';
+import { IPost } from 'common';
+import { MessengerSlotFillNameEnum } from '../../enums';
+
+export interface IRightSidebarAi extends React.HTMLAttributes<HTMLDivElement> {
+    channelId: string;
+    detailSidebarOptions: {
+        isMobileView: boolean;
+        isSmallTabletView: boolean;
+        isTabletView: boolean;
+        isDesktopView: boolean;
+        isLargeDesktopView: boolean;
+        isSmallScreen: boolean;
+        [key: string]: any;
+    };
+    windowWidth: number;
+    windowHeight: number;
+    activeTab?: string;
+    setIsLoading?: (isLoading: boolean) => void;
+    isLoading?: boolean;
+    messages?: any[];
+    selectedPost?: any;
+    [key: string]: any;
+}
+
+export const RightSidebarAi = (props: IRightSidebarAi) => {
+    return (
+        <Slot
+            name={MessengerSlotFillNameEnum.INBOX_WITH_AI_RIGHT_SIDEBAR}
+            fillProps={{
+                active: true,
+                ...props,
+            }}
+        />
+    );
+};

package/src/components/InboxMessage/index.ts

@@ -13,3 +13,4 @@ export * from './ServiceInboxItem';
 export * from './MessageInputComponent';
 export * from './InputComponent';
 export * from './MessagesBuilderUi';
+export * from './RightSidebarAi';

package/src/components/InboxMessage/message-widgets/ErrorFixCard.tsx

@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import { ISandboxError } from 'common';
+
+const IconAlertTriangle: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+);
+
+const IconRefreshCw: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <polyline points="23 4 23 10 17 10" />
+        <polyline points="1 20 1 14 7 14" />
+        <path d="M3.51 9a9 9 0 0114.13-3.36L23 10" />
+        <path d="M20.49 15a9 9 0 01-14.13 3.36L1 14" />
+    </svg>
+);
+
+const IconCode: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <polyline points="16 18 22 12 16 6" />
+        <polyline points="8 6 2 12 8 18" />
+    </svg>
+);
+
+const IconExternalLink: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+        <polyline points="15 3 21 3 21 9" />
+        <line x1="10" y1="14" x2="21" y2="3" />
+    </svg>
+);
+
+interface ErrorFixCardProps {
+    error: ISandboxError;
+    onFixError: (errorMessage: string) => Promise<void>;
+    currentFiles?: Record<string, string>;
+    isFixing?: boolean;
+}
+
+export const ErrorFixCard: React.FC<ErrorFixCardProps> = ({ error, onFixError, currentFiles, isFixing = false }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isFixingError, setIsFixingError] = useState(false);
+
+    const handleFixError = async () => {
+        setIsFixingError(true);
+        try {
+            const errorContext = `
+ERROR DETECTED IN SANDBOX:
+
+Error Type: ${error.errorType}
+Timestamp: ${error.timestamp}
+Sandbox ID: ${error.sandboxId}
+
+Error Message:
+${error.message}
+
+${error.stack ? `Stack Trace:\n${error.stack}` : ''}
+
+${
+    currentFiles && Object.keys(currentFiles).length > 0
+        ? `
+Current Files in Project:
+${Object.entries(currentFiles)
+    .map(
+        ([path, content]) => `
+--- ${path} ---
+${content}
+`,
+    )
+    .join('\n')}
+`
+        : ''
+}
+
+Please analyze this error and fix the code. Make sure to:
+1. Identify the root cause of the error
+2. Update the necessary files to resolve the issue
+3. Ensure the fix maintains the existing functionality
+4. Test that the solution compiles and runs correctly
+`.trim();
+
+            await onFixError(errorContext);
+        } catch (error) {
+            console.error('Failed to trigger error fix:', error);
+        } finally {
+            setIsFixingError(false);
+        }
+    };
+
+    const getErrorTypeColor = (errorType: string) => {
+        switch (errorType) {
+            case 'COMPILATION_ERROR':
+                return 'text-red-600 bg-red-50 border-red-200';
+            case 'RUNTIME_ERROR':
+                return 'text-orange-600 bg-orange-50 border-orange-200';
+            case 'DEPENDENCY_ERROR':
+                return 'text-yellow-600 bg-yellow-50 border-yellow-200';
+            case 'SERVER_START_ERROR':
+                return 'text-purple-600 bg-purple-50 border-purple-200';
+            case 'SANDBOX_DISCONNECTED':
+                return 'text-gray-600 bg-gray-50 border-gray-200';
+            case 'TEST_ERROR':
+                return 'text-blue-600 bg-blue-50 border-blue-200';
+            default:
+                return 'text-red-600 bg-red-50 border-red-200';
+        }
+    };
+
+    const formatErrorType = (errorType: string) => {
+        return errorType
+            .replace(/_/g, ' ')
+            .toLowerCase()
+            .replace(/\b\w/g, (l) => l.toUpperCase());
+    };
+
+    return (
+        <div className="flex w-full justify-start mb-2">
+            <div
+                className={`rounded-lg p-2 border w-fit max-w-[75%] min-w-0 break-all overflow-hidden ${getErrorTypeColor(
+                    error.errorType,
+                )}`}
+            >
+                <div className="flex items-start justify-between mb-1">
+                    <div className="flex items-center space-x-1">
+                        <IconAlertTriangle className="w-3 h-3 text-red-600 flex-shrink-0" />
+                        <span className="font-semibold text-xs">{formatErrorType(error.errorType)}</span>
+                        <span className="text-xs opacity-60">{new Date(error.timestamp).toLocaleTimeString()}</span>
+                        {error.url && (
+                            <a
+                                href={error.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-xs hover:underline flex items-center space-x-1"
+                            >
+                                <IconExternalLink className="w-3 h-3" />
+                                <span>View Sandbox</span>
+                            </a>
+                        )}
+                    </div>
+                </div>
+
+                <div className="text-sm mb-3">
+                    <div
+                        className="break-words whitespace-pre-wrap font-mono text-xs leading-relaxed overflow-hidden"
+                        style={{
+                            display: '-webkit-box',
+                            WebkitLineClamp: isExpanded ? 'none' : 3,
+                            WebkitBoxOrient: 'vertical',
+                            maxHeight: isExpanded ? 'none' : '3.6em',
+                        }}
+                    >
+                        {error.message}
+                    </div>
+                    {error.message.length > 150 && (
+                        <button
+                            onClick={() => setIsExpanded(!isExpanded)}
+                            className="text-xs hover:underline mt-1 font-sans"
+                        >
+                            {isExpanded ? 'Show less' : 'Show more'}
+                        </button>
+                    )}
+                </div>
+
+                {isExpanded && error.stack && (
+                    <div className="mt-3 p-3 bg-black bg-opacity-10 rounded text-xs font-mono">
+                        <div className="flex items-center space-x-2 mb-2">
+                            <IconCode className="w-3 h-3" />
+                            <span className="font-semibold">Stack Trace</span>
+                        </div>
+                        <pre className="whitespace-pre-wrap text-xs break-all">{error.stack}</pre>
+                    </div>
+                )}
+
+                {error.fixable && (
+                    <div className="mt-4 flex justify-start">
+                        <button
+                            onClick={handleFixError}
+                            disabled={isFixingError || isFixing}
+                            className={`
+                  flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium
+                  transition-colors duration-200
+                  ${
+                      isFixingError || isFixing
+                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                          : 'bg-red-600 text-white hover:bg-red-700 shadow-sm hover:shadow-md'
+                  }
+                `}
+                        >
+                            <IconRefreshCw className={`w-4 h-4 ${isFixingError || isFixing ? 'animate-spin' : ''}`} />
+                            <span>{isFixingError || isFixing ? 'Fixing...' : 'Fix Error'}</span>
+                        </button>
+                    </div>
+                )}
+
+                {!error.fixable && (
+                    <div className="mt-3 text-xs opacity-75">
+                        This error may require manual intervention or environment changes.
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default ErrorFixCard;