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

package/src/components/InboxMessage/MessageInput.tsx

@@ -0,0 +1,209 @@
+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 MessageInput = ({ 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(40, Math.min(120, 40 + (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;
+
+    return (
+        <div className="border-t border-gray-200 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 bg-white border rounded-lg transition-all duration-200 ease-in-out ${
+                        isFocused
+                            ? 'ring-2 ring-blue-500 ring-opacity-50 border-blue-300 shadow-sm'
+                            : 'border-gray-300 hover:border-gray-400'
+                    }`}
+                >
+                    {/* Input container with flex layout like Slack */}
+                    <div className="flex items-end gap-2 p-2">
+                        {/* Upload button - positioned like Slack */}
+                        <div className="flex-shrink-0 self-end pb-1">
+                            <UploadImageButton onChange={onUploadImageChange} />
+                        </div>
+
+                        {/* Textarea container */}
+                        <div className="flex-grow min-w-0">
+                            <textarea
+                                ref={textareaRef}
+                                className="w-full text-base px-3 py-2 bg-transparent border-none resize-none overflow-hidden placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"
+                                style={{
+                                    height: `${inputHeight}px`,
+                                    minHeight: '40px',
+                                    maxHeight: '120px',
+                                }}
+                                placeholder={placeholder || t('tailwind_ui_inbox.reminder_leave_a_review')}
+                                value={sending ? '' : message}
+                                onKeyDown={handleKeyDown}
+                                onChange={(e) => setMessage(e.target.value)}
+                                onFocus={() => setIsFocused(true)}
+                                onBlur={() => setIsFocused(false)}
+                                disabled={sending}
+                                rows={1}
+                            />
+                        </div>
+
+                        {/* Send button - positioned like Slack */}
+                        <div className="flex-shrink-0 self-end pb-1">
+                            <button
+                                className={`w-8 h-8 rounded-md flex items-center justify-center transition-all duration-200 ease-in-out ${
+                                    canSend && !sending
+                                        ? 'bg-green-600 hover:bg-green-700 text-white shadow-sm hover:shadow-md'
+                                        : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+                                }`}
+                                onClick={handleSend}
+                                disabled={!canSend || sending}
+                                type="button"
+                            >
+                                {sending ? (
+                                    <svg className="w-4 h-4 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-4 h-4" 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>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Helper text */}
+                <div className="flex items-center justify-between mt-2 px-1">
+                    <span className="text-xs text-gray-400">Press Enter to send, Shift+Enter for new line</span>
+                    {message.length > 0 && (
+                        <span className="text-xs text-gray-400 transition-opacity duration-200 ease-in-out">
+                            {message.length} characters
+                        </span>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,137 @@
+import { format, isToday, isYesterday } from 'date-fns';
+import React, { useMemo, useRef, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MessageSliceRenderer } from './message-widgets';
+import { SlackLikeMessageGroup } from './message-widgets/SlackLikeMessageGroup';
+
+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 Messages = ({
+    currentUser,
+    channelMessages,
+    refetchMessages,
+    innerRef,
+    channelId,
+    subscribeToNewMessages,
+    subscribeToNewServiceMessages,
+    onMessageClick,
+    isDesktopView = false,
+    isSmallScreen = false,
+}: MessagesProps) => {
+    const { t } = useTranslation('translations');
+
+    // Disable user modal behavior: no-op handler
+    const onOpen = () => {};
+
+    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 = [];
+        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);
+        });
+        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 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>
+        </>
+    );
+};