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

package/src/components/InboxMessage/ServiceInboxItem.tsx

@@ -0,0 +1,223 @@
+import React, { useMemo } from 'react';
+import { useLocation } from '@remix-run/react';
+import {
+    useThreadMessagesQuery,
+    useOnThreadChatMessageAddedSubscription,
+    useOnThreadCreatedUpdatedSubscription,
+    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
+    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+} from 'common/graphql';
+import { format, isToday, isYesterday } from 'date-fns';
+
+const createdAtText = (value) => {
+    if (!value) return '';
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
+};
+
+const ServiceInboxItemComponent = ({
+    showBorder,
+    currentUser,
+    filter,
+    channel,
+    handleSelectChannel,
+    users,
+    selectedChannelId,
+    role,
+}) => {
+    const [parentId, setParentId] = React.useState<any>(null);
+    const [messages, setMessages] = React.useState([]);
+    const [servicePostParentId, setServicePostParentId] = React.useState(null);
+    const { pathname } = useLocation();
+    const {
+        data: threadMessages,
+        loading: threadMessageLoading,
+        fetchMore: fetchMoreMessages,
+        refetch: refetchThreadMessages,
+        subscribeToMore,
+    } = useThreadMessagesQuery({
+        variables: {
+            channelId: channel?.id?.toString(),
+            role,
+            limit: 10,
+        },
+        fetchPolicy: 'cache-and-network',
+    });
+
+    React.useEffect(() => {
+        if (channel) refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 10 });
+    }, [channel, pathname]);
+
+    React.useEffect(() => {
+        if (threadMessages?.threadMessages?.data?.length) {
+            const { data }: any = threadMessages.threadMessages;
+            const replies =
+                data
+                    ?.map((t: any) => t?.replies)
+                    ?.flat(1)
+                    ?.filter((p: any) => p?.message !== '') ?? [];
+            const post =
+                data?.find((t: any) => {
+                    return t?.post?.message !== '';
+                }) ??
+                data?.find((t: any) => {
+                    return t?.post;
+                }) ??
+                null;
+
+            if (replies?.length) {
+                setMessages((pre: any) => [...pre, ...replies]);
+            } else if (post) {
+                setMessages((pre: any) => [...pre, ...[post]]);
+            }
+        }
+    }, [threadMessages]);
+
+    const lastMessage = useMemo(() => {
+        if (!messages?.length) {
+            return null;
+        }
+
+        let filteredLastMessage =
+            messages && messages?.length
+                ? messages?.reduce((a, b) => {
+                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                  }, []) ?? null
+                : null;
+        return filteredLastMessage;
+    }, [messages]);
+
+    React.useEffect(() => {
+        if (lastMessage) {
+            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+            setServicePostParentId(sParentId);
+        }
+    }, [lastMessage]);
+
+    const creatorAndMembersId = React.useMemo(() => {
+        if (!channel?.members) return null;
+        const membersIds: any =
+            channel?.members?.filter((m: any) => m?.user?.id !== currentUser?.id)?.map((mu: any) => mu?.user?.id) ?? [];
+        const creatorId: any = channel?.creator?.id;
+        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
+        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
+    }, [channel]);
+
+    const postParentId = React.useMemo(() => {
+        if (!creatorAndMembersId?.length) return null;
+
+        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
+            ? 1
+            : lastMessage?.parentId
+            ? lastMessage?.parentId
+            : lastMessage?.id ?? 0;
+    }, [creatorAndMembersId, lastMessage]);
+
+    React.useEffect(() => {
+        if (postParentId) {
+            setParentId(postParentId);
+        }
+    }, [postParentId]);
+
+    const channelType = useMemo(() => {
+        return channel?.type;
+    }, [channel]);
+
+    return (
+        <div
+            key={`services_channel_${channel.id}`}
+            className={`
+                cursor-pointer flex items-center p-3
+                border-b border-solid
+                ${showBorder ? 'border-gray-300' : 'border-transparent'}
+                ${channel.id == selectedChannelId ? 'bg-gray-300 dark:bg-gray-500' : ''}
+                hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors
+            `}
+            onClick={() => handleSelectChannel(channel.id, postParentId)}
+        >
+            <img
+                className="w-10 h-10 rounded-full bg-gray-400"
+                src={channel?.creator?.picture || '/default-avatar.svg'}
+                alt="Avatar"
+                onError={(e) => {
+                    if (e.currentTarget.src.includes('default-avatar.svg')) {
+                        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">
+                {threadMessageLoading && (
+                    <div className="animate-pulse">
+                        <div className="h-4 bg-gray-300 rounded mb-2"></div>
+                        <div className="h-3 bg-gray-300 rounded w-3/4 mb-2"></div>
+                        <div className="h-3 bg-gray-300 rounded w-1/2"></div>
+                    </div>
+                )}
+                {!threadMessageLoading && (
+                    <ServiceLastMessageComponent
+                        channel={channel}
+                        channelType={channelType}
+                        lastMessage={lastMessage}
+                        subscribeToNewMessages={() =>
+                            subscribeToMore({
+                                document: THREAD_CHAT_ADDED,
+                                variables: {
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId && postParentId == 1 ? null : servicePostParentId,
+                                },
+                                updateQuery: (prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData.data) return prev;
+
+                                    const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
+                                    const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+                                    const data = prev?.threadMessages?.data?.map((t: any) =>
+                                        t.id === newPostThreadData?.id
+                                            ? {
+                                                  ...t,
+                                                  replies: [...t?.replies, newMessage],
+                                                  replyCount: newPostThreadData?.replyCount,
+                                                  lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                  updatedAt: newPostThreadData?.updatedAt,
+                                              }
+                                            : t,
+                                    );
+
+                                    return Object.assign({}, prev, {
+                                        threadMessages: {
+                                            ...prev?.threadMessages,
+                                            data: data,
+                                        },
+                                    });
+                                },
+                            })
+                        }
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const ServiceInboxItem = React.memo(ServiceInboxItemComponent);
+
+const ServiceLastMessageComponent = ({ subscribeToNewMessages, channel, channelType, lastMessage }) => {
+    React.useEffect(() => subscribeToNewMessages(), []);
+    return (
+        <div className="flex flex-col w-full">
+            <div className="w-full flex justify-between items-center">
+                <span className="text-xs text-green-500 truncate">{channelType}</span>
+                <span className="text-xs text-gray-500">
+                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
+                </span>
+            </div>
+            <h3 className="text-sm text-gray-600 dark:text-gray-300 font-bold mt-1">{channel?.title}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 truncate w-4/5 mt-1">{lastMessage?.message}</p>
+        </div>
+    );
+};

package/src/components/InboxMessage/StreamingMessageBubble.tsx

@@ -0,0 +1,270 @@
+import React, { useMemo } from 'react';
+import { ActiveStream } from '../../hooks/useStreamAssembler';
+
+/**
+ * Renders a message bubble for an active (in-progress) stream.
+ * Shows:
+ * - The author name
+ * - The accumulated text so far (with basic markdown rendering)
+ * - A blinking cursor at the end
+ * - A "thinking" state with animated dots when status is 'thinking'
+ * - Chunk counter for transparency
+ */
+export const StreamingMessageBubble: React.FC<{
+    stream: ActiveStream;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}> = ({ stream, isDesktopView = false, isSmallScreen = false }) => {
+    const authorName =
+        stream.author?.givenName && stream.author?.familyName
+            ? `${stream.author.givenName} ${stream.author.familyName}`
+            : stream.author?.username || 'AI Assistant';
+
+    const isThinking = stream.status === 'thinking' && !stream.text.trim();
+    const elapsed = useMemo(() => {
+        const secs = Math.floor((Date.now() - stream.startedAt) / 1000);
+        return secs;
+    }, [stream.chunks]); // recalc on each chunk
+
+    return (
+        <div
+            className={`group rounded transition-colors ${
+                isDesktopView ? 'mb-8 -mx-6 px-6 py-4' : isSmallScreen ? 'mb-4 -mx-2 px-2 py-2' : 'mb-6 -mx-4 px-4 py-3'
+            }`}
+        >
+            <div
+                className={`flex items-start ${
+                    isDesktopView ? 'space-x-4' : isSmallScreen ? 'space-x-2' : 'space-x-3'
+                }`}
+            >
+                {/* Pulsing indicator instead of avatar */}
+                <div className="flex-shrink-0 mt-0.5">
+                    <div
+                        className={`rounded-lg bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-xs font-bold ${
+                            isDesktopView ? 'w-12 h-12' : isSmallScreen ? 'w-8 h-8' : 'w-10 h-10'
+                        }`}
+                    >
+                        <span className="animate-pulse">✨</span>
+                    </div>
+                </div>
+
+                <div className="flex-1 min-w-0 overflow-hidden">
+                    {/* Author + streaming badge */}
+                    <div className="flex items-center space-x-2 mb-1">
+                        <span className="text-sm font-semibold text-gray-900 truncate">{authorName}</span>
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-blue-100 text-blue-700">
+                            <span className="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1 animate-pulse" />
+                            typing
+                        </span>
+                    </div>
+
+                    {/* Content area */}
+                    <div className="py-1 px-1 sm:px-2">
+                        {isThinking ? (
+                            <div className="flex items-center space-x-2 text-gray-500">
+                                <div className="flex space-x-1">
+                                    <span
+                                        className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                                        style={{ animationDelay: '0s' }}
+                                    />
+                                    <span
+                                        className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                                        style={{ animationDelay: '0.15s' }}
+                                    />
+                                    <span
+                                        className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                                        style={{ animationDelay: '0.3s' }}
+                                    />
+                                </div>
+                                <span className="text-xs text-gray-400 italic">Thinking…</span>
+                            </div>
+                        ) : (
+                            <div className="text-sm text-gray-900 break-words leading-relaxed">
+                                <StreamingContent text={stream.text} />
+                                {/* Blinking cursor */}
+                                {stream.status !== 'end' && (
+                                    <span
+                                        className="inline-block w-0.5 h-4 bg-blue-500 ml-0.5 align-text-bottom"
+                                        style={{ animation: 'cursorBlink 1s step-end infinite' }}
+                                    />
+                                )}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Progress footer */}
+                    {stream.chunks > 1 && (
+                        <div className="flex items-center space-x-3 mt-1 px-1 sm:px-2">
+                            <div className="flex-1 h-0.5 bg-gray-100 rounded-full overflow-hidden">
+                                <div
+                                    className="h-full bg-blue-400 rounded-full transition-all duration-300 animate-pulse"
+                                    style={{ width: stream.status === 'end' ? '100%' : '60%' }}
+                                />
+                            </div>
+                            <span className="text-[10px] text-gray-400 tabular-nums">{stream.chunks} chunks</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <style>{`
+                @keyframes cursorBlink {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0; }
+                }
+            `}</style>
+        </div>
+    );
+};
+
+/**
+ * Renders streaming text with basic markdown support.
+ * Handles fenced code blocks, bold, inline code, headings, and lists.
+ */
+const StreamingContent: React.FC<{ text: string }> = ({ text }) => {
+    if (!text) return null;
+
+    // Simple markdown-to-JSX for streaming (must handle partial fences)
+    const lines = text.split('\n');
+    const elements: React.ReactNode[] = [];
+    let inCodeBlock = false;
+    let codeLanguage = '';
+    let codeLines: string[] = [];
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+
+        // Detect code fence open/close
+        if (line.trimStart().startsWith('```')) {
+            if (!inCodeBlock) {
+                inCodeBlock = true;
+                codeLanguage = line.trimStart().slice(3).trim();
+                codeLines = [];
+                continue;
+            } else {
+                // Close fence
+                elements.push(
+                    <div key={`code-${i}`} className="my-2 border border-gray-200 rounded overflow-hidden">
+                        {codeLanguage && (
+                            <div className="px-3 py-1 text-[10px] font-semibold uppercase tracking-wide bg-gray-100 text-gray-600">
+                                {codeLanguage}
+                            </div>
+                        )}
+                        <div className="bg-gray-900 p-3 overflow-x-auto">
+                            <pre className="text-xs text-gray-100 font-mono leading-relaxed">
+                                <code>{codeLines.join('\n')}</code>
+                            </pre>
+                        </div>
+                    </div>,
+                );
+                inCodeBlock = false;
+                codeLanguage = '';
+                codeLines = [];
+                continue;
+            }
+        }
+
+        if (inCodeBlock) {
+            codeLines.push(line);
+            continue;
+        }
+
+        // Headings
+        if (line.startsWith('### ')) {
+            elements.push(
+                <h3 key={i} className="text-sm font-medium text-gray-700 mt-2">
+                    {line.slice(4)}
+                </h3>,
+            );
+        } else if (line.startsWith('## ')) {
+            elements.push(
+                <h2 key={i} className="text-base font-semibold text-gray-800 mt-2">
+                    {line.slice(3)}
+                </h2>,
+            );
+        } else if (line.startsWith('# ')) {
+            elements.push(
+                <h1 key={i} className="text-lg font-semibold text-gray-900 mt-2">
+                    {line.slice(2)}
+                </h1>,
+            );
+        } else if (line.startsWith('- ') || line.startsWith('• ')) {
+            elements.push(
+                <div key={i} className="flex items-start space-x-2 ml-2">
+                    <span className="text-gray-400 mt-1.5 text-xs">•</span>
+                    <span>
+                        <InlineFormatted text={line.replace(/^[-•]\s*/, '')} />
+                    </span>
+                </div>,
+            );
+        } else if (line.trim() === '') {
+            elements.push(<div key={i} className="h-2" />);
+        } else {
+            elements.push(
+                <div key={i} className="whitespace-pre-wrap">
+                    <InlineFormatted text={line} />
+                </div>,
+            );
+        }
+    }
+
+    // If we're still in a code block (fence not closed yet — partial stream),
+    // render what we have so far as code
+    if (inCodeBlock && codeLines.length > 0) {
+        elements.push(
+            <div key="code-open" className="my-2 border border-gray-200 rounded overflow-hidden">
+                {codeLanguage && (
+                    <div className="px-3 py-1 text-[10px] font-semibold uppercase tracking-wide bg-gray-100 text-gray-600">
+                        {codeLanguage}
+                    </div>
+                )}
+                <div className="bg-gray-900 p-3 overflow-x-auto">
+                    <pre className="text-xs text-gray-100 font-mono leading-relaxed">
+                        <code>{codeLines.join('\n')}</code>
+                    </pre>
+                </div>
+            </div>,
+        );
+    }
+
+    return <>{elements}</>;
+};
+
+/**
+ * Inline formatting: **bold**, `inline code`.
+ */
+const InlineFormatted: React.FC<{ text: string }> = ({ text }) => {
+    // Split by bold and inline code patterns
+    const parts: React.ReactNode[] = [];
+    const regex = /(\*\*(.+?)\*\*|`([^`]+)`)/g;
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = regex.exec(text)) !== null) {
+        // Text before match
+        if (match.index > lastIndex) {
+            parts.push(<span key={`t-${lastIndex}`}>{text.slice(lastIndex, match.index)}</span>);
+        }
+        if (match[2]) {
+            // Bold
+            parts.push(<strong key={`b-${match.index}`}>{match[2]}</strong>);
+        } else if (match[3]) {
+            // Inline code
+            parts.push(
+                <code key={`c-${match.index}`} className="bg-gray-100 px-1 rounded text-xs">
+                    {match[3]}
+                </code>,
+            );
+        }
+        lastIndex = match.index + match[0].length;
+    }
+
+    // Remaining text
+    if (lastIndex < text.length) {
+        parts.push(<span key={`t-${lastIndex}`}>{text.slice(lastIndex)}</span>);
+    }
+
+    return <>{parts.length > 0 ? parts : text}</>;
+};
+
+export default StreamingMessageBubble;

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

package/src/components/InboxMessage/TypingIndicator.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+/**
+ * Animated typing indicator — three bouncing dots, similar to iMessage / Slack.
+ */
+export const TypingIndicator: React.FC<{
+    authorName?: string;
+    /** Extra CSS classes on container */
+    className?: string;
+}> = ({ authorName, className = '' }) => {
+    return (
+        <div className={`flex items-center space-x-2 py-2 px-3 ${className}`}>
+            {authorName && <span className="text-xs text-gray-500 font-medium mr-1">{authorName}</span>}
+            <div className="flex items-center space-x-1">
+                <span
+                    className="typing-dot w-2 h-2 bg-gray-400 rounded-full inline-block"
+                    style={{ animation: 'typingBounce 1.4s infinite ease-in-out', animationDelay: '0s' }}
+                />
+                <span
+                    className="typing-dot w-2 h-2 bg-gray-400 rounded-full inline-block"
+                    style={{ animation: 'typingBounce 1.4s infinite ease-in-out', animationDelay: '0.2s' }}
+                />
+                <span
+                    className="typing-dot w-2 h-2 bg-gray-400 rounded-full inline-block"
+                    style={{ animation: 'typingBounce 1.4s infinite ease-in-out', animationDelay: '0.4s' }}
+                />
+            </div>
+            <style>{`
+                @keyframes typingBounce {
+                    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+                    30% { transform: translateY(-4px); opacity: 1; }
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default TypingIndicator;

package/src/components/InboxMessage/UploadImageButton.tsx

@@ -0,0 +1,46 @@
+import React, { ChangeEventHandler, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BiImage } from '@react-icons/all-files/bi/BiImage.js';
+
+export interface IUploadImageButtonProps {
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    children?: React.ReactNode;
+}
+
+export const UploadImageButton = (props: IUploadImageButtonProps) => {
+    const fileInput = useRef<HTMLInputElement>();
+    const { t } = useTranslation('translations');
+
+    const selectFile = useCallback(() => {
+        if (fileInput?.current) {
+            fileInput?.current?.click();
+        }
+    }, [fileInput]);
+
+    return (
+        <div className="relative group">
+            <input
+                multiple={true}
+                accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
+                type="file"
+                style={{ display: 'none' }}
+                ref={fileInput}
+                onChange={props.onChange}
+            />
+            {/* Tooltip */}
+            {/* <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-20">
+                {t('tailwind_ui_inbox.upload_image')}
+               
+                <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-900"></div>
+            </div> */}
+            <button
+                type="button"
+                className="flex items-center justify-center w-8 h-8 bg-transparent hover:bg-gray-100 rounded-md focus:outline-none  focus:ring-opacity-50 transition-all duration-200 ease-in-out"
+                onClick={selectFile}
+                aria-label={t('tailwind_ui_inbox.upload_image')}
+            >
+                {props.children || <BiImage className="w-5 h-5 text-gray-500 hover:text-gray-700" />}
+            </button>
+        </div>
+    );
+};