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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface IPlainMessageProps {
+    message: string; // may contain HTML
+    index: number;
+}
+
+export const PlainMessage = ({ message, index }: IPlainMessageProps) => {
+    return (
+        <div className="w-full flex justify-center mb-7" key={`msgList_${index}`}>
+            {/* <p className="text-sm font-bold">{message}</p> */}
+            <div
+                className="text-sm font-bold whitespace-pre-wrap prose prose-sm max-w-none"
+                dangerouslySetInnerHTML={{ __html: message }}
+            />
+        </div>
+    );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IPost } from 'common';
+
+interface IPropertyMessageWidgetProps {
+    message: IPost;
+    index: number;
+}
+
+export const PropertyMessageWidget = (props: IPropertyMessageWidgetProps) => {
+    const { message, index } = props;
+    return (
+        <div key={`${index}`} className="flex items-start p-4 bg-blue-50 border border-blue-200 rounded-md">
+            <div className="flex-shrink-0 mr-3">
+                <svg className="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                        fillRule="evenodd"
+                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            </div>
+            <div>
+                <div>
+                    <p className="text-sm mt-1.5 mb-1.5 whitespace-pre-line text-gray-700">{message?.message}</p>
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,492 @@
+import React from 'react';
+import { format, formatDistanceToNow, differenceInMinutes } from 'date-fns';
+import { IAuthUser, IPost } from 'common';
+import { FilesList } from '../../inbox';
+
+interface SlackLikeMessageGroupProps {
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    onMessageClick: (msg: IPost) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+
+interface MessageGroupProps {
+    author: any;
+    messages: IPost[];
+    currentUser: IAuthUser;
+    onOpen: (element?: any) => void;
+    onMessageClick: (msg: IPost) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+
+// Utility function to group messages by user and time
+export const groupMessagesByUserAndTime = (messages: IPost[], timeThresholdMinutes = 5): IPost[][] => {
+    if (!messages || messages.length === 0) return [];
+
+    const groups: IPost[][] = [];
+    let currentGroup: IPost[] = [];
+    let lastMessage: IPost | null = null;
+
+    for (const message of messages) {
+        if (typeof message === 'string') continue; // Skip date separators
+
+        const shouldStartNewGroup =
+            !lastMessage ||
+            lastMessage.author?.id !== message.author?.id ||
+            differenceInMinutes(new Date(message.createdAt), new Date(lastMessage.createdAt)) > timeThresholdMinutes;
+
+        if (shouldStartNewGroup) {
+            if (currentGroup.length > 0) {
+                groups.push(currentGroup);
+            }
+            currentGroup = [message];
+        } else {
+            currentGroup.push(message);
+        }
+
+        lastMessage = message;
+    }
+
+    if (currentGroup.length > 0) {
+        groups.push(currentGroup);
+    }
+
+    return groups;
+};
+
+// Detect if a string likely contains HTML
+const isProbablyHTML = (value: string): boolean => {
+    if (!value) return false;
+    return /<\/?[a-z][\s\S]*>/i.test(value.trim());
+};
+
+// Minimal sanitizer without extra deps
+const sanitizeHtml = (html: string): string => {
+    try {
+        if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') {
+            return html
+                .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+                .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '')
+                .replace(/on\w+\s*=\s*"[^"]*"/gi, '')
+                .replace(/on\w+\s*=\s*'[^']*'/gi, '')
+                .replace(/on\w+\s*=\s*[^\s>]+/gi, '')
+                .replace(/javascript:/gi, '');
+        }
+
+        const parser = new window.DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        const dangerousTags = ['script', 'style', 'iframe', 'object', 'embed', 'link', 'meta'];
+        dangerousTags.forEach((tag) => {
+            doc.querySelectorAll(tag).forEach((el) => el.remove());
+        });
+
+        const walker = doc.createTreeWalker(doc.body, (NodeFilter as any).SHOW_ELEMENT);
+        let node = walker.nextNode() as Element | null;
+        while (node) {
+            Array.from(node.attributes).forEach((attr) => {
+                const name = attr.name.toLowerCase();
+                const value = (attr.value || '').toLowerCase();
+                if (name.startsWith('on') || value.startsWith('javascript:')) {
+                    node?.removeAttribute(attr.name);
+                }
+                if ((name === 'src' || name === 'href') && !/^https?:|^\/.*/.test(attr.value)) {
+                    node?.removeAttribute(attr.name);
+                }
+            });
+            node = walker.nextNode() as Element | null;
+        }
+
+        return doc.body.innerHTML;
+    } catch (e) {
+        return html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '');
+    }
+};
+
+// Render markdown-like content with fenced code blocks
+const FormattedMessageContent: React.FC<{ content: string }> = ({ content }) => {
+    if (!content) return null;
+    // Normalize escaped fences (\``` -> ```)
+    // Unescape any backslash-escaped backticks so Markdown fences work
+    const normalized = content.replace(/\\`/g, '`');
+    const blocks = normalized.split('\n\n').filter((b) => b.trim());
+    return (
+        <div className="space-y-3">
+            {blocks.map((block, index) => {
+                const trimmed = block.trim();
+
+                // Fenced code anywhere in block
+                if (trimmed.includes('```')) {
+                    const parts: React.ReactNode[] = [];
+                    const pushText = (t: string, key: string) => {
+                        const txt = (t || '').trim();
+                        if (!txt) return;
+                        if (txt.startsWith('# ')) {
+                            parts.push(
+                                <h1 key={key} className="text-xl font-semibold text-gray-900">
+                                    {txt.substring(2)}
+                                </h1>,
+                            );
+                            return;
+                        }
+                        if (txt.startsWith('## ')) {
+                            parts.push(
+                                <h2 key={key} className="text-base font-semibold text-gray-800">
+                                    {txt.substring(3)}
+                                </h2>,
+                            );
+                            return;
+                        }
+                        if (txt.startsWith('### ')) {
+                            parts.push(
+                                <h3 key={key} className="text-sm font-medium text-gray-700">
+                                    {txt.substring(4)}
+                                </h3>,
+                            );
+                            return;
+                        }
+                        if (txt.startsWith('- ') || txt.startsWith('• ')) {
+                            const items = txt.split('\n').filter((l) => l.trim());
+                            parts.push(
+                                <ul key={key} className="list-disc pl-5 space-y-1">
+                                    {items.map((it, i) => (
+                                        <li key={`${key}-li-${i}`} className="text-gray-700">
+                                            {it.replace(/^[\u2212\-•]\s*/, '')}
+                                        </li>
+                                    ))}
+                                </ul>,
+                            );
+                            return;
+                        }
+                        if (txt.includes('**') || txt.includes('`')) {
+                            const formatted = txt
+                                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                                .replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 rounded">$1</code>');
+                            parts.push(
+                                <div
+                                    key={key}
+                                    className="text-gray-700"
+                                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(formatted) }}
+                                />,
+                            );
+                            return;
+                        }
+                        parts.push(
+                            <p key={key} className="text-gray-700 whitespace-pre-wrap">
+                                {txt}
+                            </p>,
+                        );
+                    };
+
+                    const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
+                    let lastIndex = 0;
+                    let m: RegExpExecArray | null;
+                    while ((m = codeRegex.exec(trimmed)) !== null) {
+                        const [full, lang, code] = m;
+                        const before = trimmed.slice(lastIndex, m.index);
+                        pushText(before, `${index}-before-${lastIndex}`);
+                        const language = (lang || '').trim() || 'code';
+                        parts.push(
+                            <div
+                                key={`${index}-code-${m.index}`}
+                                className="border border-gray-200 rounded overflow-hidden"
+                            >
+                                <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide bg-gray-100 text-gray-600">
+                                    {language}
+                                </div>
+                                <div className="bg-gray-900 p-3 overflow-x-auto">
+                                    <pre className="text-xs text-gray-100 font-mono leading-relaxed not-prose">
+                                        <code>{code}</code>
+                                    </pre>
+                                </div>
+                            </div>,
+                        );
+                        lastIndex = m.index + full.length;
+                    }
+                    const after = trimmed.slice(lastIndex);
+                    pushText(after, `${index}-after`);
+                    return (
+                        <div key={index} className="space-y-2">
+                            {parts}
+                        </div>
+                    );
+                }
+
+                if (isProbablyHTML(trimmed)) {
+                    return (
+                        <div
+                            key={index}
+                            className="prose prose-sm max-w-none"
+                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(trimmed) }}
+                        />
+                    );
+                }
+
+                if (trimmed.startsWith('### '))
+                    return (
+                        <h3 key={index} className="text-sm font-medium text-gray-700">
+                            {trimmed.substring(4)}
+                        </h3>
+                    );
+                if (trimmed.startsWith('## '))
+                    return (
+                        <h2 key={index} className="text-base font-semibold text-gray-800">
+                            {trimmed.substring(3)}
+                        </h2>
+                    );
+                if (trimmed.startsWith('# '))
+                    return (
+                        <h1 key={index} className="text-xl font-semibold text-gray-900">
+                            {trimmed.substring(2)}
+                        </h1>
+                    );
+
+                if (trimmed.startsWith('- ') || trimmed.startsWith('• ')) {
+                    const items = trimmed.split('\n').filter((l) => l.trim());
+                    return (
+                        <ul key={index} className="list-disc pl-5 space-y-1">
+                            {items.map((it, i) => (
+                                <li key={`${index}-li-${i}`} className="text-gray-700">
+                                    {it.replace(/^[\u2212\-•]\s*/, '')}
+                                </li>
+                            ))}
+                        </ul>
+                    );
+                }
+
+                if (trimmed.includes('**') || trimmed.includes('`')) {
+                    const formatted = trimmed
+                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                        .replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 rounded">$1</code>');
+                    return (
+                        <div
+                            key={index}
+                            className="text-gray-700"
+                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(formatted) }}
+                        />
+                    );
+                }
+
+                return (
+                    <p key={index} className="text-gray-700 whitespace-pre-wrap">
+                        {trimmed}
+                    </p>
+                );
+            })}
+        </div>
+    );
+};
+
+const MessageGroup: React.FC<MessageGroupProps> = ({
+    author,
+    messages,
+    currentUser,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+}) => {
+    const isOwnMessage = author?.id === currentUser?.id;
+    const authorName =
+        author?.givenName && author?.familyName
+            ? `${author.givenName} ${author.familyName}`
+            : author?.username || 'Unknown User';
+
+    const firstMessage = messages[0];
+    const formatTime = (timestamp: string) => {
+        const date = new Date(timestamp);
+        return format(date, 'h:mm a');
+    };
+
+    // Determine if this is an AI/system message for special styling
+    const isSystemMessage =
+        author?.username?.toLowerCase().includes('ai') ||
+        author?.username?.toLowerCase().includes('assistant') ||
+        author?.username?.toLowerCase().includes('system');
+
+    return (
+        <div
+            className={`group hover:bg-white hover:bg-opacity-60 rounded transition-colors ${
+                isDesktopView ? 'mb-8 -mx-6 px-6 py-4' : isSmallScreen ? 'mb-4 -mx-2 px-2 py-2' : 'mb-6 -mx-4 px-4 py-3'
+            }`}
+        >
+            <div
+                className={`flex items-start ${
+                    isDesktopView ? 'space-x-4' : isSmallScreen ? 'space-x-2' : 'space-x-3'
+                }`}
+            >
+                {/* Avatar - Only show for non-system messages */}
+                {!isSystemMessage && (
+                    <div className="flex-shrink-0 mt-0.5">
+                        <img
+                            className={`rounded-lg cursor-pointer hover:opacity-80 transition-opacity ${
+                                isDesktopView ? 'w-12 h-12' : isSmallScreen ? 'w-8 h-8' : 'w-10 h-10'
+                            }`}
+                            src={author?.picture || '/default-avatar.svg'}
+                            alt={authorName}
+                            onClick={() => onOpen(firstMessage)}
+                            onError={(e) => {
+                                e.currentTarget.src = '/default-avatar.svg';
+                            }}
+                        />
+                    </div>
+                )}
+
+                <div className="flex-1 min-w-0 overflow-hidden">
+                    {/* Author name and timestamp - Only show for non-system messages */}
+                    {!isSystemMessage && (
+                        <div className="flex items-center space-x-2 mb-1">
+                            <span className="text-sm font-semibold text-gray-900 truncate">{authorName}</span>
+                            <span className="text-xs text-gray-500 flex-shrink-0">
+                                {formatTime(firstMessage.createdAt)}
+                            </span>
+                            {isOwnMessage && <span className="text-xs text-gray-400 italic flex-shrink-0">(you)</span>}
+                        </div>
+                    )}
+
+                    {/* Messages in the group - single line for each message */}
+                    <div className="space-y-0.5">
+                        {messages.map((message, index) => (
+                            <MessageBubble
+                                key={message.id}
+                                message={message}
+                                isOwnMessage={isOwnMessage}
+                                isSystemMessage={isSystemMessage}
+                                isFirstInGroup={index === 0}
+                                isLastInGroup={index === messages.length - 1}
+                                showTimestamp={isOwnMessage && index === 0}
+                                onMessageClick={onMessageClick}
+                                totalInGroup={messages.length}
+                                authorName={authorName}
+                                formatTime={formatTime}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface MessageBubbleProps {
+    message: IPost;
+    isOwnMessage: boolean;
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    showTimestamp: boolean;
+    onMessageClick: (msg: IPost) => void;
+    totalInGroup: number;
+    authorName: string;
+    formatTime: (timestamp: string) => string;
+    isSystemMessage: boolean;
+}
+
+const MessageBubble: React.FC<MessageBubbleProps> = ({
+    message,
+    isOwnMessage,
+    isSystemMessage,
+    isFirstInGroup,
+    isLastInGroup,
+    showTimestamp,
+    onMessageClick,
+    totalInGroup,
+    authorName,
+    formatTime,
+}) => {
+    const handleClick = () => {
+        if (!isSystemMessage) {
+            onMessageClick?.(message);
+        }
+    };
+
+    // All messages use the same format (Slack style - left aligned)
+    return (
+        <div
+            className={`py-1 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group ${
+                isSystemMessage ? '' : 'cursor-pointer'
+            }`}
+        >
+            <div className="flex items-start justify-between gap-2">
+                <div
+                    className={`text-sm hover:bg-gray-100 px-1 sm:px-2 py-1 rounded flex-1 ${
+                        isSystemMessage ? 'text-gray-800' : 'text-gray-900 cursor-pointer'
+                    }`}
+                    onClick={handleClick}
+                >
+                    {message.message && (
+                        <div className="break-words leading-relaxed">
+                            {message.message.includes('```') ? (
+                                <FormattedMessageContent content={message.message} />
+                            ) : isProbablyHTML(message.message) ? (
+                                <div
+                                    className="prose prose-sm max-w-none"
+                                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.message) }}
+                                />
+                            ) : (
+                                <FormattedMessageContent content={message.message} />
+                            )}
+                        </div>
+                    )}
+
+                    {message.files?.totalCount > 0 && (
+                        <div className="mt-2">
+                            <FilesList uploaded files={message.files.data} />
+                        </div>
+                    )}
+                </div>
+
+                {/* Show timestamp to the right of message */}
+                <span className="text-xs text-gray-500 flex-shrink-0 mt-1">{formatTime(message.createdAt)}</span>
+            </div>
+
+            {/* Show delivery status for own messages */}
+            {/* {isOwnMessage && message.isDelivered !== undefined && (
+                <div className="text-xs text-gray-400 mt-1 clear-both">
+                    {message.isDelivered 
+                        ? message.isRead 
+                            ? '✓✓ Read' 
+                            : '✓✓ Delivered'
+                        : '✓ Sent'}
+                </div>
+            )} */}
+        </div>
+    );
+};
+
+export const SlackLikeMessageGroup: React.FC<SlackLikeMessageGroupProps> = ({
+    messages,
+    currentUser,
+    onOpen,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+}) => {
+    // Filter out non-message items (like date strings)
+    const actualMessages = messages.filter((msg) => typeof msg !== 'string') as IPost[];
+
+    // Group messages by user and time
+    const messageGroups = groupMessagesByUserAndTime(actualMessages);
+
+    return (
+        <div className={`min-h-fit ${isDesktopView ? 'space-y-8' : isSmallScreen ? 'space-y-4' : 'space-y-6'}`}>
+            {messageGroups.map((group, groupIndex) => {
+                const author = group[0]?.author;
+                return (
+                    <MessageGroup
+                        key={`group-${groupIndex}-${group[0]?.id}`}
+                        author={author}
+                        messages={group}
+                        currentUser={currentUser}
+                        onOpen={onOpen}
+                        onMessageClick={onMessageClick}
+                        isDesktopView={isDesktopView}
+                        isSmallScreen={isSmallScreen}
+                    />
+                );
+            })}
+        </div>
+    );
+};

package/src/components/InboxMessage/message-widgets/index.ts

@@ -0,0 +1,3 @@
+export { MessageSliceRenderer } from './MessageSliceRenderer';
+export { SlackLikeMessageGroup } from './SlackLikeMessageGroup';
+export { ModernMessageGroupComponent } from './ModernMessageGroup';