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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/tailwind-ui-inbox",
-    "version": "10.0.3-alpha.65",
+    "version": "10.0.3-alpha.69",
     "description": "Inbox UI components built with TailwindCSS",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -21,8 +21,8 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@messenger-box/core": "10.0.3-alpha.62",
-        "@messenger-box/platform-client": "10.0.3-alpha.62",
+        "@messenger-box/core": "10.0.3-alpha.69",
+        "@messenger-box/platform-client": "10.0.3-alpha.69",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
         "emoji-mart": "^3.0.1",
@@ -53,5 +53,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "5a23895406c9e1cf5e6d3a91d4604309de9baa42"
+    "gitHead": "011fbbc8fbbc97043d73323c02c1ac22b2a01bfb"
 }

package/src/components/InboxMessage/ConversationItem.tsx

@@ -1,6 +1,7 @@
 import { useMessagesQuery, OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED } from 'common/graphql';
 import { format, isToday, isYesterday } from 'date-fns';
-import React, { useMemo, useEffect, useState } from 'react';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import { SubscriptionHandler } from './SubscriptionHandler';
 
 const createdAtText = (value) => {
     if (!value) return '';
@@ -20,177 +21,186 @@ const Skeleton = ({ className = '' }) => {
     );
 };
 
-export const ConversationItem = ({
-    showBorder,
-    currentUser,
-    filter,
-    channel,
-    handleSelectChannel,
-    users,
-    selectedChannelId,
-}) => {
-    // const {
-    //     data: messagesQuery,
-    //     loading: messageLoading,
-    // } = useMessagesQuery({
-    //     variables: {
-    //         channelId: channel.id?.toString(),
-    //         limit: 1,
-    //     },
-    //     fetchPolicy: 'cache-and-network',
-    // });
-    const [messages, setMessages] = useState([]);
-    const {
-        data: messagesQuery,
-        loading: messageLoading,
-        refetch: refetchMessages,
-        subscribeToMore,
-    } = useMessagesQuery({
-        variables: {
-            channelId: channel?.id?.toString(),
-            parentId: null,
-            limit: 10,
-            // sort: {
-            //     key: 'updatedAt',
-            //     value: SortEnum.Desc,
-            // },
-        },
-        fetchPolicy: 'cache-and-network',
-        refetchWritePolicy: 'merge',
-    });
+interface ConversationItemProps {
+    showBorder: boolean;
+    currentUser: any;
+    filter: string;
+    channel: any;
+    handleSelectChannel: (channelId: string) => void;
+    users: any[];
+    selectedChannelId: string;
+    messagesQuery: any;
+}
 
-    // const {
-    //     data: newMessage,
-    //     loading: newMsgLoading,
-    //     error: newMsgError,
-    // }: any = useOnChatMessageAddedSubscription({
-    //     variables: {
-    //         channelId: channel?.id?.toString(),
-    //     },
-    // });
-
-    React.useEffect(() => {
-        refetchMessages({
-            channelId: channel?.id?.toString(),
-            parentId: null,
-            limit: 10,
-            // sort: {
-            //     key: 'updatedAt',
-            //     value: SortEnum.Desc,
-            // },
+export const ConversationItem = React.memo(
+    ({
+        showBorder,
+        currentUser,
+        filter,
+        channel,
+        handleSelectChannel,
+        users,
+        selectedChannelId,
+        messagesQuery: messagesQueryProp,
+    }: ConversationItemProps) => {
+        // const {
+        //     data: messagesQuery,
+        //     loading: messageLoading,
+        // } = useMessagesQuery({
+        //     variables: {
+        //         channelId: channel.id?.toString(),
+        //         limit: 1,
+        // },
+        //     fetchPolicy: 'cache-and-network',
+        // });
+        const [messages, setMessages] = useState([]);
+        const {
+            data: messagesQuery,
+            loading: messageLoading,
+            refetch: refetchMessages,
+            subscribeToMore,
+        } = useMessagesQuery({
+            variables: {
+                channelId: channel?.id?.toString(),
+                parentId: null,
+                limit: 10,
+                // sort: {
+                //     key: 'updatedAt',
+                //     value: SortEnum.Desc,
+                // },
+            },
+            fetchPolicy: 'cache-and-network',
+            refetchWritePolicy: 'merge',
         });
-    }, []);
 
-    React.useEffect(() => {
-        if (messagesQuery) {
-            if (messagesQuery?.messages?.data?.length) {
-                setMessages((pre: any) => [...pre, ...messagesQuery?.messages?.data]);
+        // const {
+        //     data: newMessage,
+        //     loading: newMsgLoading,
+        //     error: newMsgError,
+        // }: any = useOnChatMessageAddedSubscription({
+        //     variables: {
+        //         channelId: channel?.id?.toString(),
+        //     },
+        // });
+
+        React.useEffect(() => {
+            if (channel?.id) {
+                refetchMessages({
+                    channelId: channel?.id?.toString(),
+                    parentId: null,
+                    limit: 10,
+                    // sort: {
+                    //     key: 'updatedAt',
+                    //     value: SortEnum.Desc,
+                    // },
+                });
             }
+        }, [channel?.id, refetchMessages]);
 
-            // refetchMessages({
-            //     channelId: channel?.id?.toString(),
-            //     parentId: null,
-            //     limit: 10,
-            //     sort: {
-            //         key: 'updatedAt',
-            //         value: SortEnum.Desc,
-            //     },
-            // });
-        }
-    }, [messagesQuery]);
+        React.useEffect(() => {
+            if (messagesQuery?.messages?.data?.length) {
+                setMessages(messagesQuery.messages.data);
+            }
+        }, [messagesQuery?.messages?.data]);
 
-    const chatUser = useMemo(
-        () =>
-            users?.find(({ id }) => {
-                const isNotCurrentUser = id !== currentUser?.id;
-                if (isNotCurrentUser) {
-                    return channel?.members?.find(({ user }) => user.id === id);
-                }
-                return isNotCurrentUser;
-            }),
-        [users, currentUser, channel],
-    );
+        const chatUser = useMemo(
+            () =>
+                users?.find(({ id }) => {
+                    const isNotCurrentUser = id !== currentUser?.id;
+                    if (isNotCurrentUser) {
+                        return channel?.members?.find(({ user }) => user.id === id);
+                    }
+                    if (channel?.members?.length === 1 && channel?.members?.[0]?.user?.id === currentUser?.id) {
+                        return currentUser;
+                    }
+                    return isNotCurrentUser;
+                }),
+            [users, currentUser, channel],
+        );
 
-    // Last Message
-    // const lastMessage = useMemo(() => {
-    //     if (!messagesQuery?.messages?.data?.length) {
-    //         return null;
-    //     }
-    //     const { data } = messagesQuery.messages;
-    //     return data[data.length - 1];
-    // }, [messagesQuery]);
-    const lastMessage = useMemo(() => {
-        if (!messages?.length) {
-            return null;
-        }
-        const data = messages;
-        const filteredData: any = data?.filter((p: any) => p?.message !== '');
+        // Last Message
+        // const lastMessage = useMemo(() => {
+        //     if (!messagesQuery?.messages?.data?.length) {
+        //         return null;
+        //     }
+        //     const { data } = messagesQuery.messages;
+        //     return data[data.length - 1];
+        // }, [messagesQuery]);
+        const lastMessage = useMemo(() => {
+            if (!messages?.length) {
+                return null;
+            }
+            const data = messages;
+            const filteredData: any = data?.filter((p: any) => p?.message !== '');
 
-        //return filteredData[0];
-        let filteredLastMessage =
-            filteredData && filteredData?.length
-                ? filteredData?.reduce((a, b) => {
-                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
-                  }, []) ?? null
-                : null;
-        return filteredLastMessage;
-        // //return data[data.length - 1];
-    }, [messages]);
+            //return filteredData[0];
+            let filteredLastMessage =
+                filteredData && filteredData?.length
+                    ? filteredData?.reduce((a, b) => {
+                          return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                      }, []) ?? null
+                    : null;
+            return filteredLastMessage;
+            // //return data[data.length - 1];
+        }, [messages]);
 
-    const channelType = useMemo(() => {
-        return channel?.type;
-    }, [channel]);
+        const channelType = useMemo(() => {
+            return channel?.type;
+        }, [channel]);
 
-    if (
-        !chatUser?.username.toLowerCase().includes(filter.toLowerCase()) &&
-        !lastMessage?.message.toLowerCase().includes(filter.toLowerCase())
-    ) {
-        return null;
-    }
+        if (
+            filter &&
+            !chatUser?.username?.toLowerCase().includes(filter.toLowerCase()) &&
+            !lastMessage?.message?.toLowerCase().includes(filter.toLowerCase())
+        ) {
+            return null;
+        }
 
-    return (
-        <div
-            key={`conv_channel_${channel.id}`}
-            className={`cursor-pointer flex items-center p-3 border-b ${
-                showBorder ? 'border-gray-300' : 'border-transparent'
-            } ${
-                channel.id == selectedChannelId
-                    ? 'bg-gray-300 dark:bg-gray-500'
-                    : 'hover:bg-gray-50 dark:hover:bg-gray-700'
-            }`}
-            onClick={() => channel.id !== selectedChannelId && handleSelectChannel(channel.id)}
-        >
-            <img
-                className="w-10 h-10 rounded-full bg-gray-400 object-cover flex-shrink-0"
-                src={chatUser?.picture || '/default-avatar.svg'}
-                alt={chatUser?.givenName || 'User avatar'}
-                onError={(e) => {
-                    // Prevent infinite loop by checking if we're already showing the fallback
-                    if (e.currentTarget.src.includes('default-avatar.svg')) {
-                        // If SVG also fails, use a data URL fallback
-                        e.currentTarget.src =
-                            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iI0U1RTdFQiIvPgogIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjYiIGZpbGw9IiM5Q0EzQUYiLz4KICA8cGF0aCBkPSJNOCAzMmMwLTYuNjI3IDUuMzczLTEyIDEyLTEyczEyIDUuMzczIDEyIDEyIiBmaWxsPSIjOUNBM0FGIi8+Cjwvc3ZnPgo=';
-                    } else {
-                        e.currentTarget.src = '/default-avatar.svg';
-                    }
-                }}
-            />
-            <div className="ml-2 flex-grow min-w-10 max-w-96">
-                {messageLoading && <Skeleton className="w-full h-16" />}
-                {!messageLoading && (
-                    <LastMessageComponent
-                        lastMessage={lastMessage}
-                        channelType={channelType}
-                        chatUser={chatUser}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: CHAT_MESSAGE_ADDED,
-                                variables: {
-                                    channelId: channel.id?.toString(),
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
+        return (
+            <div
+                key={`conv_channel_${channel.id}`}
+                className={`cursor-pointer flex items-center p-3 border-b ${
+                    showBorder ? 'border-gray-300' : 'border-transparent'
+                } ${
+                    channel.id == selectedChannelId
+                        ? 'bg-gray-300 dark:bg-gray-500'
+                        : 'hover:bg-gray-50 dark:hover:bg-gray-700'
+                }`}
+                onClick={() => channel.id !== selectedChannelId && handleSelectChannel(channel.id)}
+            >
+                <img
+                    className="w-10 h-10 rounded-full bg-gray-400 object-cover flex-shrink-0"
+                    src={chatUser?.picture || '/default-avatar.svg'}
+                    alt={chatUser?.givenName || 'User avatar'}
+                    onError={(e) => {
+                        // Prevent infinite loop by checking if we're already showing the fallback
+                        if (e.currentTarget.src.includes('default-avatar.svg')) {
+                            // If SVG also fails, use a data URL fallback
+                            e.currentTarget.src =
+                                'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iI0U1RTdFQiIvPgogIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjYiIGZpbGw9IiM5Q0EzQUYiLz4KICA8cGF0aCBkPSJNOCAzMmMwLTYuNjI3IDUuMzczLTEyIDEyLTEyczEyIDUuMzczIDEyIDEyIiBmaWxsPSIjOUNBM0FGIi8+Cjwvc3ZnPgo=';
+                        } else {
+                            e.currentTarget.src = '/default-avatar.svg';
+                        }
+                    }}
+                />
+                <div className="ml-2 flex-grow min-w-10 max-w-96">
+                    {messageLoading && <Skeleton className="w-full h-16" />}
+                    {!messageLoading && (
+                        <>
+                            <LastMessageComponent
+                                lastMessage={lastMessage}
+                                channelType={channelType}
+                                chatUser={chatUser}
+                            />
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={CHAT_MESSAGE_ADDED}
+                                variables={{ channelId: channel?.id?.toString() }}
+                                enabled={!!channel?.id && !!subscribeToMore}
+                                updateQuery={(prev, { subscriptionData }: any) => {
                                     if (!subscriptionData.data) return prev;
                                     const newMessage: any = subscriptionData?.data?.chatMessageAdded;
+                                    console.log('ConversationItem: New message received via subscription:', newMessage);
                                     const previousData = prev?.messages?.data
                                         ? [...prev.messages.data, newMessage]
                                         : [];
@@ -204,34 +214,26 @@ export const ConversationItem = ({
                                         },
                                     };
                                     return merged;
-                                },
-                            })
-                        }
-                    />
-                    // <Box display="flex" flexDirection={'column'} width="100%">
-                    //     <Box w="100%" d="flex" justifyContent={'space-between'} alignItems="center">
-                    //         <Text fontSize="10px" isTruncated color="green.500">
-                    //             {channelType}
-                    //         </Text>
-                    //         <Text fontSize="12px" color="gray.500">
-                    //             {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
-                    //         </Text>
-                    //     </Box>
-                    //     <Text fontSize="14px" color="gray.600" fontWeight={'bold'} mt="5px">
-                    //         {chatUser?.givenName + ' ' + chatUser?.familyName}
-                    //     </Text>
-                    //     <Text fontSize="14px" isTruncated w="80%" mt="5px" color="gray.600">
-                    //         {lastMessage?.message}
-                    //     </Text>
-                    // </Box>
-                )}
+                                }}
+                                onError={(error) => {
+                                    console.error('ConversationItem: Subscription error:', error);
+                                }}
+                            />
+                        </>
+                    )}
+                </div>
             </div>
-        </div>
-    );
-};
+        );
+    },
+);
 
-const LastMessageComponent = ({ subscribeToNewMessages, lastMessage, channelType, chatUser }) => {
-    useEffect(() => subscribeToNewMessages(), []);
+interface LastMessageComponentProps {
+    lastMessage: any;
+    channelType: string;
+    chatUser: any;
+}
+
+const LastMessageComponent = React.memo(({ lastMessage, channelType, chatUser }: LastMessageComponentProps) => {
     return (
         <div className="flex flex-col w-full">
             <div className="w-full flex justify-between items-center">
@@ -250,4 +252,4 @@ const LastMessageComponent = ({ subscribeToNewMessages, lastMessage, channelType
             </p>
         </div>
     );
-};
+});

package/src/components/InboxMessage/LeftSidebar.tsx

@@ -1,6 +1,6 @@
 import { GoSettings } from '@react-icons/all-files/go/GoSettings.js';
 import { GoSearch } from '@react-icons/all-files/go/GoSearch.js';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { orderBy, uniqBy } from 'lodash-es';
 import { ConversationItem } from './ConversationItem';
@@ -19,9 +19,10 @@ type LeftSidebarProps = {
     getChannelsRefetch: any;
     supportServices?: any;
     role?: any;
+    messagesQuery?: any;
 };
 
-export const LeftSidebar = (props: LeftSidebarProps) => {
+export const LeftSidebar = React.memo((props: LeftSidebarProps) => {
     const {
         currentUser,
         handleSelectChannel,
@@ -31,10 +32,21 @@ export const LeftSidebar = (props: LeftSidebarProps) => {
         selectedChannelId,
         supportServices,
         role,
+        messagesQuery,
     } = 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">
@@ -56,12 +68,8 @@ export const LeftSidebar = (props: LeftSidebarProps) => {
                     <>
                         {supportServices ? supportServices : <></>}
 
-                        {userChannels?.length > 0 ? (
-                            orderBy(
-                                uniqBy([...userChannels], ({ id }) => id),
-                                ['updatedAt'],
-                                ['desc'],
-                            )?.map((channel, index) =>
+                        {sortedChannels.length > 0 ? (
+                            sortedChannels.map((channel, index) =>
                                 channel?.type === RoomType.Service ? (
                                     <ServiceConversationItem
                                         key={`service_channel_${channel.id}`}
@@ -71,7 +79,7 @@ export const LeftSidebar = (props: LeftSidebarProps) => {
                                         handleSelectChannel={handleSelectChannel}
                                         users={users}
                                         selectedChannelId={selectedChannelId}
-                                        showBorder={index != userChannels.length - 1}
+                                        showBorder={index != sortedChannels.length - 1}
                                         role={role || null}
                                     />
                                 ) : (
@@ -83,7 +91,8 @@ export const LeftSidebar = (props: LeftSidebarProps) => {
                                         handleSelectChannel={handleSelectChannel}
                                         users={users}
                                         selectedChannelId={selectedChannelId}
-                                        showBorder={index != userChannels.length - 1}
+                                        showBorder={index != sortedChannels.length - 1}
+                                        messagesQuery={messagesQuery}
                                     />
                                 ),
                             )
@@ -98,7 +107,7 @@ export const LeftSidebar = (props: LeftSidebarProps) => {
             </div>
         </div>
     );
-};
+});
 
 const SearchInput = ({ keyword, setKeyword }: any) => {
     const { t } = useTranslation('translations');

package/src/components/InboxMessage/MessageInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { config } from '../../config';
 import { UploadImageButton } from './UploadImageButton';
@@ -17,8 +17,16 @@ export const MessageInput = ({ handleSend: handleSendProp, placeholder }: Messag
     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);
@@ -33,6 +41,12 @@ export const MessageInput = ({ handleSend: handleSendProp, placeholder }: Messag
             .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]);
@@ -114,6 +128,7 @@ export const MessageInput = ({ handleSend: handleSendProp, placeholder }: Messag
 
                     {/* Textarea */}
                     <textarea
+                        ref={textareaRef}
                         className="w-full text-base pl-14 pr-20 py-3 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`,

package/src/components/InboxMessage/SubscriptionHandler.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Shared SubscriptionHandler for Apollo subscribeToMore
+ *
+ * @param subscribeToMore - Apollo subscribeToMore function
+ * @param document - GraphQL subscription document
+ * @param variables - Variables for the subscription
+ * @param updateQuery - Apollo updateQuery function
+ * @param onError - Optional error handler
+ * @param enabled - If false, disables the subscription
+ */
+export function SubscriptionHandler({
+    subscribeToMore,
+    document,
+    variables,
+    updateQuery,
+    onError,
+    enabled = true,
+}: {
+    subscribeToMore: Function;
+    document: any;
+    variables: Record<string, any>;
+    updateQuery: (prev: any, { subscriptionData }: any) => any;
+    onError?: (error: any) => void;
+    enabled?: boolean;
+}) {
+    useEffect(() => {
+        if (!enabled) return;
+
+        console.log('SubscriptionHandler: Setting up subscription with variables:', variables);
+
+        const unsubscribe = subscribeToMore({
+            document,
+            variables,
+            updateQuery,
+            onError,
+        });
+
+        console.log('SubscriptionHandler: Subscription setup successful, unsubscribe function:', unsubscribe);
+
+        return () => {
+            console.log('SubscriptionHandler: Cleaning up subscription');
+            if (unsubscribe && typeof unsubscribe === 'function') {
+                try {
+                    unsubscribe();
+                } catch (error) {
+                    console.error('Error unsubscribing:', error);
+                }
+            }
+        };
+    }, [subscribeToMore, document, variables, updateQuery, onError, enabled]);
+
+    return null;
+}