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

package/src/components/InboxMessage/UserModalContent.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AiOutlineSecurityScan } from '@react-icons/all-files/ai/AiOutlineSecurityScan.js';
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck.js';
+import { BsFillStarFill } from '@react-icons/all-files/bs/BsFillStarFill.js';
+
+export const UserModalContent = ({ username, imageUrl }: any) => {
+    const { t } = useTranslation('translations');
+
+    return (
+        <div>
+            <div>
+                <img
+                    src={imageUrl !== '' ? imageUrl : ''}
+                    alt="User avatar"
+                    className="w-50 h-50 rounded-full bg-gray-400 object-cover"
+                    style={{ width: '200px', height: '200px' }}
+                />
+                <a href="#" className="text-blue-600 hover:text-blue-800 underline">
+                    {t('tailwind_ui_inbox.update_photo')}
+                </a>
+                <AiOutlineSecurityScan className="w-6 h-6 text-black" />
+                <div>
+                    <span className="text-black font-medium">{t('tailwind_ui_inbox.identity_verification')}</span>
+                    <p className="text-black">{t('tailwind_ui_inbox.show_others_you_are_really_you')}</p>
+                    <button className="get-badge-btn text-black bg-transparent border border-gray-300 px-4 py-2 rounded hover:bg-gray-50 transition-colors">
+                        {t('tailwind_ui_inbox.get_the_badge')}
+                    </button>
+                </div>
+                <div>
+                    <span className="text-black font-medium">
+                        {t('tailwind_ui_inbox.username_confirmed', { username: username })}
+                    </span>
+                    <div className="flex items-center gap-2">
+                        <FiCheck className="text-black" />
+                        <p className="text-black">{t('tailwind_ui_inbox.email_address')}</p>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div className="flex flex-col gap-2">
+                    <span className="text-black font-medium">
+                        {t('tailwind_ui_inbox.hi_im_username', { username: username })}
+                    </span>
+                    <p className="text-gray-600">{t('tailwind_ui_inbox.joined_in_date', { date: '2021' })}</p>
+                    <a href="#" className="text-blue-600 hover:text-blue-800 underline">
+                        {t('tailwind_ui_inbox.edit_profile')}
+                    </a>
+                    <div className="flex items-center gap-1">
+                        <BsFillStarFill className="text-black text-base" />
+                        <span className="text-black">{t('tailwind_ui_inbox.reviews')}</span>
+                    </div>
+                </div>
+                <a href="" className="text-blue-600 hover:text-blue-800 underline">
+                    {t('tailwind_ui_inbox.reviews_by_you')}
+                </a>
+            </div>
+        </div>
+    );
+};

package/src/components/InboxMessage/index.ts

@@ -0,0 +1,18 @@
+export * from './CommonMessage';
+export * from './ConversationItem';
+export * from './ServiceConversationItem';
+export * from './LeftSidebar';
+export * from './MessageInput';
+export * from './Messages';
+export * from './Popover';
+export * from './UploadImageButton';
+export * from './UserModalContent';
+export * from './message-widgets';
+export * from './RightSidebar';
+export * from './ServiceInboxItem';
+export * from './MessageInputComponent';
+export * from './InputComponent';
+export * from './MessagesBuilderUi';
+export * from './RightSidebarAi';
+export * from './TypingIndicator';
+export * from './StreamingMessageBubble';

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { formatDistance } from 'date-fns';
+import { BsFlag } from '@react-icons/all-files/bs/BsFlag.js';
+import { IPost, IAuthUser } from 'common';
+// import { IAuthUser } from '@pubngo-stack/core';
+import { FilesList } from '../../inbox';
+
+interface ICommonMessageProps {
+    message: IPost;
+    index: number;
+    onOpen: () => void;
+    currentUser: IAuthUser;
+}
+
+export const CommonMessage = (props: ICommonMessageProps) => {
+    const { message, index, onOpen, currentUser } = props;
+
+    // Determine if this is an AI/system message for special styling
+    const isSystemMessage =
+        message?.author?.username?.toLowerCase().includes('ai') ||
+        message?.author?.username?.toLowerCase().includes('assistant') ||
+        message?.author?.username?.toLowerCase().includes('system');
+
+    return (
+        <div className="w-full flex justify-start mb-7" key={`msgList_${index}`}>
+            <div className="flex-grow flex">
+                {/* User avatar - Only show for non-system messages */}
+                {!isSystemMessage && (
+                    <img
+                        className="w-8 h-8 bg-gray-400 rounded-full mr-4 cursor-pointer"
+                        src={message?.author?.picture}
+                        alt={message?.author?.username || 'User avatar'}
+                        onClick={onOpen}
+                    />
+                )}
+                <div className="flex-grow">
+                    {/* Author header - Only show for non-system messages */}
+                    {!isSystemMessage && (
+                        <div className="flex flex-grow mt-1.5">
+                            <p className="text-sm text-gray-600 font-bold">
+                                {message?.author?.familyName && message?.author?.givenName
+                                    ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                    : message?.author?.username}
+                            </p>
+                            <p className="text-sm text-gray-500 ml-2.5">
+                                {formatDistance(new Date(message?.createdAt), new Date(), {
+                                    includeSeconds: true,
+                                    addSuffix: true,
+                                })}
+                            </p>
+                        </div>
+                    )}
+                    {/* <p className="text-sm mt-1.5 whitespace-pre-line">{message?.message}</p> */}
+                    <div
+                        className="text-sm mt-1.5 whitespace-pre-wrap prose prose-sm max-w-none"
+                        dangerouslySetInnerHTML={{ __html: message?.message || '' }}
+                    />
+                    {message.files?.totalCount ? <FilesList uploaded files={message.files?.data} /> : null}
+                </div>
+            </div>
+            {/* Flag button - Only show for non-system messages */}
+            {!isSystemMessage && currentUser?.id !== message?.author?.id && (
+                <div className="ml-2">
+                    <BsFlag className="text-gray-600 w-6 h-6" />
+                </div>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,239 @@
+import React, { useState } from 'react';
+
+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: any;
+    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;

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

@@ -0,0 +1,127 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from '@remix-run/react';
+import { startCase } from 'lodash-es';
+import { AiFillStar } from '@react-icons/all-files/ai/AiFillStar';
+import { IPost } from 'common';
+
+export interface IPropertyCardProps {
+    message: IPost;
+    index: number;
+}
+
+// Custom hook to handle color mode (replace useColorModeValue)
+const useTextColor = () => {
+    // You can implement your color mode logic here
+    // For now, using a default that works with Tailwind's dark mode
+    return 'text-gray-800 dark:text-white';
+};
+
+// Loading skeleton component
+const LoadingSkeleton = ({ index }: { index: number }) => (
+    <div className="max-w-sm p-6 bg-gray-200 rounded-lg animate-pulse" key={`${index}`}>
+        <div className="h-48 bg-gray-300 rounded mb-4"></div>
+        <div className="space-y-3">
+            <div className="h-4 bg-gray-300 rounded w-3/4"></div>
+            <div className="h-4 bg-gray-300 rounded w-1/2"></div>
+            <div className="h-4 bg-gray-300 rounded w-5/6"></div>
+            <div className="h-4 bg-gray-300 rounded w-2/3"></div>
+        </div>
+    </div>
+);
+
+export const MessageCard = (props: IPropertyCardProps) => {
+    const { message, index } = props;
+    const textColor = useTextColor();
+    const navigate = useNavigate();
+    const { t } = useTranslation('translations');
+    const id = useMemo(() => message?.propsConfiguration?.contents?.property, [message]);
+    const { data, loading, error } = {
+        data: {
+            property: {
+                title: '',
+                thumbnailUrl: '',
+                totalStar: 4,
+                totalReview: 100,
+                type: {
+                    category: 'Indoor',
+                },
+                serviceConfiguration: {
+                    contents: {
+                        property: {
+                            pricing: {
+                                price: 10,
+                                priceType: 'HOUR',
+                            },
+                            boarding: {
+                                maxPeople: 100,
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        loading: false,
+        error: null,
+    };
+    const property = useMemo(() => data?.property, [data]);
+    const { pricing, boarding } = useMemo(() => property?.serviceConfiguration?.contents?.property, [property]);
+
+    if (loading || !property) {
+        return <LoadingSkeleton index={index} />;
+    }
+
+    if (error || !property) {
+        return null;
+    }
+
+    return (
+        <div
+            className="hover:cursor-pointer m-5 max-w-xs border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200"
+            key={`${index}`}
+        >
+            <img
+                onClick={() => navigate(`/property/${id}`)}
+                className="w-full h-48 object-cover cursor-pointer hover:opacity-90 transition-opacity duration-200"
+                src={property.thumbnailUrl}
+                alt={property.title}
+            />
+            <div className="mt-4 m-2">
+                <div className="flex items-baseline">
+                    <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-teal-100 text-teal-800 dark:bg-teal-800 dark:text-teal-100">
+                        {startCase(property.type.category)}
+                    </span>
+                    {boarding && (
+                        <div className="text-gray-500 font-semibold tracking-wide text-xs uppercase ml-2">
+                            {`${boarding.maxPeople} ${t('tailwind_ui_inbox.max_people')}`}
+                        </div>
+                    )}
+                </div>
+                <div className="mt-3 leading-tight">
+                    <h4 className={`${textColor} text-sm font-semibold truncate`}>{property.title}</h4>
+                </div>
+                {pricing && (
+                    <div className="mt-2">
+                        <span className="font-semibold">{pricing.price}</span>
+                        <span className="text-gray-600 text-sm">&nbsp;/ {startCase(pricing.priceType)}</span>
+                    </div>
+                )}
+                <div className="flex mt-2 items-center">
+                    <div className="flex">
+                        {Array(5)
+                            .fill('')
+                            .map((_, i) => (
+                                <AiFillStar
+                                    key={i}
+                                    className={`w-4 h-4 ${i < property.totalStar ? 'text-teal-500' : 'text-gray-300'}`}
+                                />
+                            ))}
+                    </div>
+                    <span className="ml-2 text-gray-600 text-sm">
+                        {t('tailwind_ui_inbox.totalReview_reviews', { totalReview: property.totalReview })}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,40 @@
+import { IAuthUser, IPost, PostTypeEnum } from 'common';
+import { Slot } from '@common-stack/components-pro';
+import { CommonMessage } from './CommonMessage';
+import * as React from 'react';
+import { PlainMessage } from './PlainMessage';
+
+interface IMessageSliceRendererProps {
+    message: IPost;
+    index: number;
+    onOpen: () => void;
+    currentUser: IAuthUser;
+    onMessageClick: (msg) => void;
+}
+
+export const MessageSliceRenderer = (props: IMessageSliceRendererProps) => {
+    const { message, index, onOpen, currentUser, onMessageClick } = props;
+
+    if (typeof message === 'string') {
+        return <PlainMessage message={message} index={index} />;
+    }
+    const { type } = message;
+    if (!type || type === PostTypeEnum.Simple) {
+        return <CommonMessage message={message} index={index} onOpen={onOpen} currentUser={currentUser} />;
+    }
+    return (
+        <Slot
+            name={(type as string)?.toLowerCase()}
+            fillProps={{
+                index,
+                active: true,
+                message,
+                currentUser,
+                onOpen,
+                onMessageClick,
+            }}
+        >
+            {(item) => <div>{item as any}</div>}
+        </Slot>
+    );
+};