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

package/src/components/InboxMessage/LeftSidebar.tsx

@@ -0,0 +1,140 @@
+import { GoSettings } from '@react-icons/all-files/go/GoSettings.js';
+import { GoSearch } from '@react-icons/all-files/go/GoSearch.js';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { orderBy, uniqBy } from 'lodash-es';
+import { ConversationItem } from './ConversationItem';
+import { ServiceConversationItem } from './ServiceConversationItem';
+import { RoomType } from 'common';
+
+type LeftSidebarProps = {
+    userChannels: any;
+    userChannelsLoading: boolean;
+    currentUser: any;
+    users?: any[];
+    handleSelectChannel: (channel: any, postId?: any) => void;
+    clearMessages?: () => void;
+    selectedChannelId?: any;
+    channelToTop: number;
+    getChannelsRefetch: any;
+    supportServices?: any;
+    role?: any;
+    messagesQuery?: any;
+    windowHeight?: number;
+    windowWidth?: number;
+};
+
+export const LeftSidebar = React.memo((props: LeftSidebarProps) => {
+    const {
+        currentUser,
+        handleSelectChannel,
+        users,
+        userChannels,
+        userChannelsLoading,
+        selectedChannelId,
+        supportServices,
+        role,
+        messagesQuery,
+        windowHeight = 768,
+        windowWidth = 1024,
+    } = props;
+    const [keyword, setKeyword] = useState('');
+    const { t } = useTranslation('translations');
+
+    // Memoize the sorted channels to prevent unnecessary re-renders
+    const sortedChannels = useMemo(() => {
+        if (!userChannels?.length) return [];
+        return orderBy(
+            uniqBy([...userChannels], ({ id }) => id),
+            ['updatedAt'],
+            ['desc'],
+        );
+    }, [userChannels]);
+
+    if (userChannelsLoading) {
+        return (
+            <div className="space-y-4">
+                {Array(10)
+                    .fill(1)
+                    .map((x, y) => (
+                        <div key={y} className="h-10 bg-gray-200 rounded animate-pulse" />
+                    ))}
+            </div>
+        );
+    }
+    return (
+        <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 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 : <></>}
+
+                        {sortedChannels.length > 0 ? (
+                            sortedChannels.map((channel, index) =>
+                                channel?.type === RoomType.Service ? (
+                                    <ServiceConversationItem
+                                        key={`service_channel_${channel.id}`}
+                                        filter={keyword}
+                                        channel={channel}
+                                        currentUser={currentUser}
+                                        handleSelectChannel={handleSelectChannel}
+                                        users={users}
+                                        selectedChannelId={selectedChannelId}
+                                        showBorder={index != sortedChannels.length - 1}
+                                        role={role || null}
+                                    />
+                                ) : (
+                                    <ConversationItem
+                                        key={`conv_channel_${channel.id}`}
+                                        filter={keyword}
+                                        channel={channel}
+                                        currentUser={currentUser}
+                                        handleSelectChannel={handleSelectChannel}
+                                        users={users}
+                                        selectedChannelId={selectedChannelId}
+                                        showBorder={index != sortedChannels.length - 1}
+                                        messagesQuery={messagesQuery}
+                                    />
+                                ),
+                            )
+                        ) : (
+                            <div className="text-center py-8 text-gray-500">
+                                <div className="text-3xl mb-2">💬</div>
+                                <p>No conversations yet</p>
+                            </div>
+                        )}
+                    </>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+const SearchInput = ({ keyword, setKeyword }: any) => {
+    const { t } = useTranslation('translations');
+    return (
+        <div className="w-full">
+            <div className="relative">
+                <input
+                    type="text"
+                    placeholder={t('tailwind_ui_inbox.search_inbox') || 'Search Inbox'}
+                    className="w-full pl-10 sm:pl-12 pr-4 py-2 sm:py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400 focus:bg-white transition-all duration-200 text-sm"
+                    value={keyword}
+                    onChange={(e) => setKeyword(e.target.value)}
+                />
+                <div className="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2">
+                    <GoSearch className="w-4 h-4 text-gray-400" />
+                </div>
+            </div>
+        </div>
+    );
+};

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>
+    );
+};