@messenger-box/tailwind-ui-inbox 10.0.3-alpha.70 → 10.0.3-alpha.72

package/src/components/InboxMessage/MessageInputComponent.tsx

@@ -0,0 +1,245 @@
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { config } from '../../config';
+import { UploadImageButton } from './UploadImageButton';
+import { FilesList } from '../inbox';
+
+type MessageInputProps = {
+    channelId?: string;
+    handleSend: (message: string, files: File[]) => Promise<void>;
+    placeholder?: string;
+};
+
+export const MessageInputComponent = ({ handleSend: handleSendProp, placeholder }: MessageInputProps) => {
+    const [message, setMessage] = useState('');
+    const [sending, setSending] = useState(false);
+    const [files, setFiles] = useState<File[]>([]);
+    const [showToast, setShowToast] = useState(false);
+    const [toastMessage, setToastMessage] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const { t } = useTranslation('translations');
+
+    // Auto-focus the textarea when component mounts
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, []);
+
+    const showToastMessage = useCallback((message: string) => {
+        setToastMessage(message);
+        setShowToast(true);
+        setTimeout(() => setShowToast(false), 3000);
+    }, []);
+
+    const handleSend = useCallback(() => {
+        if (!message.trim() && files.length === 0) return;
+
+        setSending(true);
+        handleSendProp(message, files)
+            .then(() => {
+                setMessage('');
+                setFiles([]);
+                // Auto-focus the textarea after sending a message
+                setTimeout(() => {
+                    if (textareaRef.current) {
+                        textareaRef.current.focus();
+                    }
+                }, 100);
+            })
+            .finally(() => setSending(false));
+    }, [files, handleSendProp, message]);
+
+    const handleKeyDown = useCallback(
+        (e) => {
+            const keyCode = e.which || e.keyCode;
+            if (keyCode == 13 && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        },
+        [handleSend],
+    );
+
+    const inputHeight = useMemo(() => {
+        const lines = message.split('\n').length;
+        return Math.max(48, Math.min(120, 48 + (lines - 1) * 20));
+    }, [message]);
+
+    const onUploadImageChange = useCallback(
+        ({ target }) => {
+            let fileList = [];
+            let index = 0;
+            if (files.length + target.files.length > config.FILES_PER_MESSAGE) {
+                showToastMessage(
+                    t('tailwind_ui_inbox.you_can_not_upload_more_than_files', {
+                        files_per_message: config.FILES_PER_MESSAGE,
+                    }),
+                );
+                return;
+            }
+            while (target.files[index]) {
+                fileList.push(target.files[index]);
+                index += 1;
+            }
+            setFiles((oldFiles) => [...oldFiles, ...fileList]);
+        },
+        [setFiles, files, showToastMessage, t],
+    );
+
+    const canSend = message.trim() || files.length > 0;
+    const hasContent = message.trim().length > 0;
+
+    return (
+        <div className="bg-white">
+            {/* 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">
+                    <div className="flex items-center">
+                        <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                                fillRule="evenodd"
+                                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                                clipRule="evenodd"
+                            />
+                        </svg>
+                        {toastMessage}
+                    </div>
+                </div>
+            )}
+
+            {/* Files list */}
+            {files?.length > 0 && !sending && (
+                <div className="px-4 py-3 border-b border-gray-100 animate-fade-in">
+                    <FilesList files={files} />
+                </div>
+            )}
+
+            <div className="p-4">
+                <div
+                    className={`relative border-2 transition-all duration-200 ease-in-out ${
+                        hasContent || isFocused
+                            ? 'rounded-2xl border-gray-300 bg-white'
+                            : 'rounded-2xl border-gray-300 bg-white'
+                    } ${isFocused ? 'border-blue-500' : ''}`}
+                >
+                    {/* Image/Upload icon */}
+                    <div className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10">
+                        {hasContent || isFocused ? (
+                            <UploadImageButton onChange={onUploadImageChange} />
+                        ) : (
+                            <svg
+                                className="w-5 h-5 text-gray-400"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                                />
+                            </svg>
+                        )}
+                    </div>
+
+                    {/* Textarea */}
+                    <textarea
+                        ref={textareaRef}
+                        className={`w-full text-base bg-transparent border-none resize-none overflow-hidden text-gray-900  focus:outline-none focus:ring-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent ${
+                            hasContent || isFocused
+                                ? 'pl-14 pr-20 py-3 placeholder-gray-500'
+                                : 'pl-12 pr-12 py-3 placeholder-gray-600'
+                        }`}
+                        style={{
+                            height: hasContent || isFocused ? `${inputHeight}px` : '48px',
+                            minHeight: '48px',
+                            maxHeight: '120px',
+                        }}
+                        placeholder={placeholder || 'Message'}
+                        value={sending ? '' : message}
+                        onKeyDown={handleKeyDown}
+                        onChange={(e) => setMessage(e.target.value)}
+                        onFocus={() => setIsFocused(true)}
+                        onBlur={() => setIsFocused(false)}
+                        disabled={sending}
+                        rows={1}
+                    />
+
+                    {/* Right side content */}
+                    <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2">
+                        {hasContent && <span className="text-sm text-gray-500">{message.length}/10000</span>}
+
+                        {hasContent || isFocused ? (
+                            /* Send button when typing */
+                            <button
+                                className={`w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200 ease-in-out ${
+                                    canSend && !sending
+                                        ? 'bg-gray-900 hover:bg-gray-800 text-white shadow-md hover:shadow-lg'
+                                        : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+                                }`}
+                                onClick={handleSend}
+                                disabled={!canSend || sending}
+                                type="button"
+                            >
+                                {sending ? (
+                                    <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                                        <circle
+                                            className="opacity-25"
+                                            cx="12"
+                                            cy="12"
+                                            r="10"
+                                            stroke="currentColor"
+                                            strokeWidth="4"
+                                        ></circle>
+                                        <path
+                                            className="opacity-75"
+                                            fill="currentColor"
+                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                        ></path>
+                                    </svg>
+                                ) : (
+                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                                        />
+                                    </svg>
+                                )}
+                            </button>
+                        ) : (
+                            /* Warning/Info icon when empty */
+                            <svg
+                                className="w-5 h-5 text-gray-400"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                                />
+                            </svg>
+                        )}
+                    </div>
+                </div>
+
+                {/* Helper text - only show when focused or has content */}
+                <div className="mt-2 px-1">
+                    <span className="text-xs text-gray-400">Press Enter to send, Shift+Enter for new line</span>
+                </div>
+                {/* {(isFocused || hasContent) && (
+                    <div className="mt-2 px-1">
+                        <span className="text-xs text-gray-400">Press Enter to send, Shift+Enter for new line</span>
+                    </div>
+                )} */}
+            </div>
+        </div>
+    );
+};

package/src/components/InboxMessage/Messages.tsx

@@ -1,7 +1,6 @@
 import { format, isToday, isYesterday } from 'date-fns';
 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';
 
@@ -15,6 +14,8 @@ interface MessagesProps {
     subscribeToNewMessages?: () => any;
     subscribeToNewServiceMessages?: () => any;
     onMessageClick: (msg) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
 }
 
 export const Messages = ({
@@ -26,20 +27,13 @@ export const Messages = ({
     subscribeToNewMessages,
     subscribeToNewServiceMessages,
     onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
 }: MessagesProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedElement, setSelectedElement] = useState(null);
     const { t } = useTranslation('translations');
 
-    const onOpen = (element?: any) => {
-        setSelectedElement(element);
-        setIsOpen(true);
-    };
-
-    const onClose = () => {
-        setIsOpen(false);
-        setSelectedElement(null);
-    };
+    // Disable user modal behavior: no-op handler
+    const onOpen = () => {};
 
     useEffect(() => {
         subscribeToNewMessages?.();
@@ -105,15 +99,17 @@ export const Messages = ({
 
     return (
         <>
-            <div className="w-full" ref={innerRef}>
+            <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={sectionIndex === messagesByDate.length - 1 ? '' : 'mb-4'}
-                    >
+                    <div key={`section-${sectionIndex}`} className="w-full">
                         {/* Date separator */}
                         {section.date && (
-                            <div className="flex items-center justify-center my-4">
+                            <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}
@@ -123,59 +119,19 @@ export const Messages = ({
                         )}
 
                         {/* Messages grouped by user and time */}
-                        <SlackLikeMessageGroup
-                            messages={section.messages}
-                            currentUser={currentUser}
-                            onOpen={onOpen}
-                            onMessageClick={onMessageClick}
-                        />
+                        <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} />
-        </>
-    );
-};
-
-const ChatModal = ({ element, isOpen, onClose }) => {
-    if (!isOpen) return null;
-
-    return (
-        <>
-            {/* Modal Overlay */}
-            <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={onClose} />
-
-            {/* Modal Content */}
-            <div className="fixed z-50 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <div
-                    className="bg-white w-[1036px] h-[700px] rounded-lg shadow-xl"
-                    style={{
-                        boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-                    }}
-                >
-                    {/* Modal Header */}
-                    <div className="flex justify-between border-b border-gray-300 pb-4 pt-4">
-                        <button onClick={onClose} className="w-8 ml-3 text-black hover:text-black focus:outline-none">
-                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M6 18L18 6M6 6l12 12"
-                                />
-                            </svg>
-                        </button>
-                    </div>
-
-                    {/* Modal Body */}
-                    <div className="p-4">
-                        <UserModalContent
-                            username={element?.author?.username}
-                            image={element?.imageUrl ? element.imageUrl : ''}
-                        />
-                    </div>
-                </div>
-            </div>
         </>
     );
 };

package/src/components/InboxMessage/MessagesBuilderUi.tsx

@@ -0,0 +1,205 @@
+import { format, isToday, isYesterday } from 'date-fns';
+import React, { useMemo, useRef, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UserModalContent } from './UserModalContent';
+import { MessageSliceRenderer } from './message-widgets';
+import { ModernMessageGroupComponent } from './message-widgets/ModernMessageGroup';
+
+interface MessagesProps {
+    channelId: number;
+    currentUser: any;
+    channelMessages: any[];
+    totalCount: number;
+    innerRef?: any;
+    refetchMessages?: () => void;
+    subscribeToNewMessages?: () => any;
+    subscribeToNewServiceMessages?: () => any;
+    onMessageClick: (msg) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+
+export const MessagesBuilderUi = ({
+    currentUser,
+    channelMessages,
+    refetchMessages,
+    innerRef,
+    channelId,
+    subscribeToNewMessages,
+    subscribeToNewServiceMessages,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+}: MessagesProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedElement, setSelectedElement] = useState(null);
+    const { t } = useTranslation('translations');
+
+    const onOpen = (element?: any) => {
+        setSelectedElement(element);
+        setIsOpen(true);
+    };
+
+    const onClose = () => {
+        setIsOpen(false);
+        setSelectedElement(null);
+    };
+
+    useEffect(() => {
+        subscribeToNewMessages?.();
+        subscribeToNewServiceMessages?.();
+    }, [channelId]);
+
+    const messageListRef = useRef(null);
+    const scrollToBottom = React.useCallback(() => {
+        if (innerRef.current)
+            innerRef.current?.querySelector(':scope > :last-child')?.scrollIntoView({
+                behavior: 'smooth',
+                inline: 'start',
+            });
+    }, [innerRef]);
+
+    React.useEffect(() => {
+        if (channelMessages?.length) {
+            // scrollToBottom();
+        }
+    }, [channelMessages]);
+
+    const messageListWithDates = useMemo(() => {
+        let currentDate = '';
+        let res = [];
+
+        // Add original messages
+        channelMessages?.map((msg) => {
+            const date = new Date(msg.createdAt);
+            let msgDate;
+            if (isToday(date)) msgDate = t('tailwind_ui_inbox.today');
+            else if (isYesterday(date)) msgDate = t('tailwind_ui_inbox.yesterday');
+            else msgDate = format(new Date(msg.createdAt), 'eee, do MMMM');
+
+            if (msgDate !== currentDate) {
+                res.push({ type: 'date', content: msgDate });
+                currentDate = msgDate;
+            }
+            res.push(msg);
+        });
+
+        // Add dummy messages at the end if we have existing messages
+        if (channelMessages && channelMessages.length > 0) {
+            // Add today's date if not already added
+            const todayLabel = t('tailwind_ui_inbox.today');
+            if (currentDate !== todayLabel) {
+                res.push({ type: 'date', content: todayLabel });
+            }
+
+            // dummyMessages.forEach(msg => res.push(msg));
+        }
+
+        return res;
+    }, [channelMessages, t]);
+
+    // 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 pb-4 pt-2 ${
+                    isDesktopView ? 'space-y-3 max-w-full mx-auto' : isSmallScreen ? 'space-y-2' : 'space-y-2'
+                }`}
+                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-3">
+                                <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-2' : 'mb-1'}`}>
+                            <ModernMessageGroupComponent
+                                messages={section.messages}
+                                currentUser={currentUser}
+                                onOpen={onOpen}
+                                onMessageClick={onMessageClick}
+                                isDesktopView={isDesktopView}
+                                isSmallScreen={isSmallScreen}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <ChatModal element={selectedElement} isOpen={isOpen} onClose={onClose} />
+        </>
+    );
+};
+
+const ChatModal = ({ element, isOpen, onClose }) => {
+    if (!isOpen) return null;
+
+    return (
+        <>
+            {/* Modal Overlay */}
+            <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={onClose} />
+
+            {/* Modal Content */}
+            <div className="fixed z-50 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                <div
+                    className="bg-white w-[1036px] h-[700px] rounded-lg shadow-xl"
+                    style={{
+                        boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+                    }}
+                >
+                    {/* Modal Header */}
+                    <div className="flex justify-between border-b border-gray-300 pb-4 pt-4">
+                        <button onClick={onClose} className="w-8 ml-3 text-black hover:text-black focus:outline-none">
+                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+
+                    {/* Modal Body */}
+                    <div className="p-4">
+                        <UserModalContent
+                            username={element?.author?.username}
+                            image={element?.imageUrl ? element.imageUrl : ''}
+                        />
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};

package/src/components/InboxMessage/UploadImageButton.tsx

@@ -4,6 +4,7 @@ import { BiImage } from '@react-icons/all-files/bi/BiImage.js';
 
 export interface IUploadImageButtonProps {
     onChange: ChangeEventHandler<HTMLInputElement>;
+    children?: React.ReactNode;
 }
 
 export const UploadImageButton = (props: IUploadImageButtonProps) => {
@@ -34,11 +35,11 @@ export const UploadImageButton = (props: IUploadImageButtonProps) => {
             </div>
             <button
                 type="button"
-                className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200 ease-in-out hover:scale-105 active:scale-95"
+                className="flex items-center justify-center w-8 h-8 bg-transparent hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200 ease-in-out"
                 onClick={selectFile}
                 aria-label={t('tailwind_ui_inbox.upload_image')}
             >
-                <BiImage className="w-5 h-5 text-gray-500 group-hover:text-gray-700 transition-colors duration-200" />
+                {props.children || <BiImage className="w-5 h-5 text-gray-500 hover:text-gray-700" />}
             </button>
         </div>
     );

package/src/components/InboxMessage/index.ts

@@ -10,3 +10,6 @@ export * from './UserModalContent';
 export * from './message-widgets';
 export * from './RightSidebar';
 export * from './ServiceInboxItem';
+export * from './MessageInputComponent';
+export * from './InputComponent';
+export * from './MessagesBuilderUi';