@messenger-box/tailwind-ui-inbox 10.0.3-alpha.69 → 10.0.3-alpha.71

package/src/components/InboxMessage/LeftSidebar.tsx

@@ -20,6 +20,8 @@ type LeftSidebarProps = {
     supportServices?: any;
     role?: any;
     messagesQuery?: any;
+    windowHeight?: number;
+    windowWidth?: number;
 };
 
 export const LeftSidebar = React.memo((props: LeftSidebarProps) => {
@@ -33,6 +35,8 @@ export const LeftSidebar = React.memo((props: LeftSidebarProps) => {
         supportServices,
         role,
         messagesQuery,
+        windowHeight = 768,
+        windowWidth = 1024,
     } = props;
     const [keyword, setKeyword] = useState('');
     const { t } = useTranslation('translations');
@@ -59,12 +63,18 @@ export const LeftSidebar = React.memo((props: LeftSidebarProps) => {
         );
     }
     return (
-        <div className="w-full h-full flex flex-col bg-white">
-            <div className="p-3 sm:p-4 border-b border-gray-200">
+        <div className="w-full flex flex-col bg-white" style={{ height: `${windowHeight}px`, maxHeight: '100vh' }}>
+            <div className="flex-shrink-0 p-3 sm:p-4 border-b border-gray-200">
                 <SearchInput keyword={keyword} setKeyword={setKeyword} />
             </div>
-            <div className="flex-1 overflow-hidden">
-                <div className="h-full overflow-y-auto p-2 sm:p-4 space-y-1">
+            <div className="flex-1 min-h-0 overflow-hidden">
+                <div
+                    className="overflow-y-auto p-2 sm:p-4 space-y-1"
+                    style={{
+                        height: `${windowHeight - 80}px`, // Subtract header height
+                        minHeight: 0,
+                    }}
+                >
                     <>
                         {supportServices ? supportServices : <></>}
 

package/src/components/InboxMessage/Messages.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UserModalContent } from './UserModalContent';
 import { MessageSliceRenderer } from './message-widgets';
+import { SlackLikeMessageGroup } from './message-widgets/SlackLikeMessageGroup';
 
 interface MessagesProps {
     channelId: number;
@@ -14,6 +15,8 @@ interface MessagesProps {
     subscribeToNewMessages?: () => any;
     subscribeToNewServiceMessages?: () => any;
     onMessageClick: (msg) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
 }
 
 export const Messages = ({
@@ -25,6 +28,8 @@ export const Messages = ({
     subscribeToNewMessages,
     subscribeToNewServiceMessages,
     onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
 }: MessagesProps) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedElement, setSelectedElement] = useState(null);
@@ -60,7 +65,7 @@ export const Messages = ({
         }
     }, [channelMessages]);
 
-    const messageList = useMemo(() => {
+    const messageListWithDates = useMemo(() => {
         let currentDate = '';
         let res = [];
         channelMessages?.map((msg) => {
@@ -71,7 +76,7 @@ export const Messages = ({
             else msgDate = format(new Date(msg.createdAt), 'eee, do MMMM');
 
             if (msgDate !== currentDate) {
-                res.push(msgDate);
+                res.push({ type: 'date', content: msgDate });
                 currentDate = msgDate;
             }
             res.push(msg);
@@ -79,21 +84,63 @@ export const Messages = ({
         return res;
     }, [channelMessages]);
 
+    // Group messages by date sections for Slack-like rendering
+    const messagesByDate = useMemo(() => {
+        const sections = [];
+        let currentSection = { date: null, messages: [] };
+
+        messageListWithDates.forEach((item) => {
+            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]);
+
     return (
         <>
-            <div className="w-full" ref={innerRef}>
-                {messageList?.map((message, index) => {
-                    return (
-                        <MessageSliceRenderer
-                            key={index}
-                            message={message}
-                            index={index}
-                            onOpen={onOpen}
-                            currentUser={currentUser}
-                            onMessageClick={onMessageClick}
-                        />
-                    );
-                })}
+            <div
+                className={`w-full pb-8 pt-4 ${
+                    isDesktopView ? 'space-y-8 max-w-full mx-auto' : isSmallScreen ? 'space-y-4' : 'space-y-6'
+                }`}
+                ref={innerRef}
+            >
+                {messagesByDate?.map((section, sectionIndex) => (
+                    <div key={`section-${sectionIndex}`} className="w-full">
+                        {/* Date separator */}
+                        {section.date && (
+                            <div className="flex items-center justify-center my-6">
+                                <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>
+                        )}
+
+                        {/* Messages grouped by user and time */}
+                        <div className={`${isDesktopView ? 'mb-6' : 'mb-4'}`}>
+                            <SlackLikeMessageGroup
+                                messages={section.messages}
+                                currentUser={currentUser}
+                                onOpen={onOpen}
+                                onMessageClick={onMessageClick}
+                                isDesktopView={isDesktopView}
+                                isSmallScreen={isSmallScreen}
+                            />
+                        </div>
+                    </div>
+                ))}
             </div>
             <ChatModal element={selectedElement} isOpen={isOpen} onClose={onClose} />
         </>

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

@@ -0,0 +1,240 @@
+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;
+};
+
+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');
+    };
+
+    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 - show for all messages */}
+                <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 - show for all messages */}
+                    <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}
+                                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;
+}
+
+const MessageBubble: React.FC<MessageBubbleProps> = ({
+    message,
+    isOwnMessage,
+    isFirstInGroup,
+    isLastInGroup,
+    showTimestamp,
+    onMessageClick,
+    totalInGroup,
+    authorName,
+    formatTime,
+}) => {
+    const handleClick = () => {
+        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 relative">
+            <div
+                className="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-1 sm:px-2 py-1 rounded"
+                onClick={handleClick}
+            >
+                {/* Show timestamp on hover */}
+                <span className="text-xs text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity absolute right-1 sm:right-2 top-1">
+                    {formatTime(message.createdAt)}
+                </span>
+
+                {message.message && (
+                    <div className="whitespace-pre-wrap break-words leading-relaxed pr-12 sm:pr-16">
+                        {message.message}
+                    </div>
+                )}
+
+                {message.files?.totalCount > 0 && (
+                    <div className="mt-2 pr-12 sm:pr-16">
+                        <FilesList uploaded files={message.files.data} />
+                    </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>
+        </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

@@ -1 +1,2 @@
 export { MessageSliceRenderer } from './MessageSliceRenderer';
+export { SlackLikeMessageGroup } from './SlackLikeMessageGroup';