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

package/src/components/inbox/ThreadItem.tsx

@@ -0,0 +1,295 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { format, isToday, isYesterday } from 'date-fns';
+import { startCase } from 'lodash-es';
+import { useLocation } from '@remix-run/react';
+
+const createdAtText = (value: string) => {
+    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');
+};
+
+export interface IThreadItemProps {
+    currentUser?: any;
+    users?: any;
+    thread?: any;
+    onOpen: (channelId: any, postId: any) => void;
+    role?: any;
+    setData?: any;
+    //subscribeToNewMessages: any;
+}
+
+/**
+ * TODO:
+ * - Get Reservation info: reservation date, status
+ * - Add ability to get property information: name, logo
+ */
+const ThreadItemComponent: React.FC<IThreadItemProps> = function DialogsListItem({
+    currentUser,
+    // users,
+    thread,
+    onOpen,
+    role,
+    setData,
+    //subscribeToNewMessages,
+}) {
+    const location = useLocation();
+    const { t } = useTranslation('translations');
+
+    // React.useEffect(() => subscribeToNewMessages(), []);
+
+    const threadPostReply = React.useMemo(() => {
+        if (!thread?.replies) return null;
+        return thread?.replies;
+    }, [thread]);
+
+    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
+    //     variables: {
+    //         channelId: thread?.channel?.id?.toString(),
+    //         postParentId: thread?.post?.id?.toString(),
+    //     },
+    // });
+
+    // React.useEffect(() => {
+    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) setData(threadCreatedUpdated?.threadCreatedUpdated?.data);
+    // }, [threadCreatedUpdated?.threadCreatedUpdated]);
+
+    // const threadPostReply = React.useMemo(() => {
+    //     if (!thread?.replies) return null;
+    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data?.replies?.length) {
+    //         return threadCreatedUpdated?.threadCreatedUpdated?.data?.replies;
+    //     } else return thread?.replies;
+    // }, [thread, threadCreatedUpdated, location?.pathname]);
+
+    // const lastMessage = useMemo(() => {
+    //     if (!thread) {
+    //         return null;
+    //     }
+    //     const replies = thread?.replies?.filter((p: any) => p?.message !== '') ?? [];
+    //     if (replies?.length) {
+    //         return replies[0];
+    //         // return replies[replies.length - 1];
+    //     } else {
+    //         const post = thread?.post ?? null;
+    //         return post ? post?.post : null;
+    //     }
+    // }, [thread]);
+
+    // const participants: any = React.useMemo(() => {
+    //     if (!thread?.participants?.length) return null;
+    //     return thread?.participants?.filter((u: any) => u?.user?.id !== currentUser?.id) ?? [];
+    // }, [thread]);
+
+    // const allParticipantsNames: any = React.useMemo(() => {
+    //     if (!participants?.length) return null;
+    //     return (
+    //         participants
+    //             ?.map((p: any) => {
+    //                 return p?.user?.username ?? '';
+    //             })
+    //             ?.join(', ') ?? ''
+    //     );
+    // }, [participants]);
+
+    // if (!threadPostReply || threadPostReply?.length == 0) {
+    //     return <></>;
+    // }
+
+    return (
+        <div className="flex-1 py-2 my-2 flex flex-col space-y-4 items-stretch">
+            <div className="border-b border-gray-200 pb-4">
+                <div className="flex space-x-6">
+                    <div className="w-full">
+                        {/* <div className="flex items-center space-x-2">
+                            <div>
+                                <div className="w-5 h-5 bg-green-500 rounded-full" />
+                            </div>
+                            <div>
+                                <p className="text-lg text-gray-900 font-semibold">
+                                    {allParticipantsNames || ''}
+                                </p>
+                            </div>
+                        </div> */}
+
+                        <div className="flex flex-col items-start pt-5 pb-5 pl-5 pr-2 space-y-5 shadow-sm p-6 rounded-md bg-white">
+                            {!threadPostReply ||
+                                ((threadPostReply?.length == 0 || threadPostReply?.length == 1) && (
+                                    <div className="flex w-full items-start space-x-4">
+                                        <div>
+                                            <img
+                                                className="w-9 h-9 object-cover rounded"
+                                                src={thread?.post?.author?.picture}
+                                                alt={startCase(thread?.post?.author?.username?.charAt(0))}
+                                            />
+                                        </div>
+                                        <div className="leading-3">
+                                            <div className="flex-1 flex flex-col space-y-3 items-start">
+                                                <div className="flex items-center space-x-2">
+                                                    <p className="text-lg text-gray-900 font-semibold">
+                                                        {thread?.post?.author?.givenName ?? ''}{' '}
+                                                        {thread?.post?.author?.familyName ?? ''}
+                                                    </p>
+                                                    <p className="text-sm text-gray-500 font-semibold">
+                                                        {thread?.post ? createdAtText(thread?.post?.createdAt) : ''}
+                                                    </p>
+                                                </div>
+                                                <div className="flex flex-col space-y-2">
+                                                    <p className="text-sm text-gray-500 font-semibold">
+                                                        {thread?.post?.message
+                                                            ? thread?.post?.message.length < 70
+                                                                ? `${thread?.post?.message}`
+                                                                : `${thread?.post?.message.substring(0, 68)}....`
+                                                            : ''}
+                                                    </p>
+
+                                                    {thread?.post?.files?.data?.length > 0 &&
+                                                        thread?.post?.files?.data?.map((f: any, index: number) => (
+                                                            <div key={index}>
+                                                                <img
+                                                                    className="w-12 h-12 object-cover rounded"
+                                                                    src={f?.url}
+                                                                    alt={'Image'}
+                                                                />
+                                                            </div>
+                                                        ))}
+                                                </div>
+                                                {threadPostReply?.length == 0 && (
+                                                    <button
+                                                        onClick={() =>
+                                                            onOpen(
+                                                                thread?.channel?.id?.toString(),
+                                                                thread?.post?.id?.toString(),
+                                                            )
+                                                        }
+                                                        className="py-2 px-4 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 rounded text-sm font-medium w-36 transition-colors"
+                                                    >
+                                                        {t('tailwind_ui_inbox.reply')}
+                                                    </button>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+
+                            {threadPostReply?.length > 0 && (
+                                <>
+                                    {threadPostReply
+                                        ?.slice(0, 2)
+                                        ?.reverse()
+                                        ?.map((reply: any, index: any) => (
+                                            <div
+                                                key={'thread-post-reply-item-' + index}
+                                                className="flex w-full items-start space-x-4"
+                                            >
+                                                <div>
+                                                    <img
+                                                        className="w-9 h-9 object-cover rounded"
+                                                        src={reply?.author?.picture}
+                                                        alt={startCase(reply?.author?.username?.charAt(0))}
+                                                    />
+                                                </div>
+
+                                                <div className="leading-3">
+                                                    <div className="flex-1 flex flex-col space-y-3 items-start">
+                                                        <div className="flex items-center space-x-2">
+                                                            <p className="text-lg text-gray-900 font-semibold">
+                                                                {reply?.author?.givenName ?? ''}{' '}
+                                                                {reply?.author?.familyName ?? ''}
+                                                            </p>
+                                                            <p className="text-sm text-gray-500 font-semibold">
+                                                                {reply?.createdAt
+                                                                    ? createdAtText(reply?.createdAt)
+                                                                    : ''}
+                                                            </p>
+                                                        </div>
+                                                        <div className="flex flex-col space-y-2">
+                                                            <p className="text-sm text-gray-500 font-semibold">
+                                                                {reply?.message
+                                                                    ? reply?.message.length < 70
+                                                                        ? `${reply?.message}`
+                                                                        : `${reply?.message.substring(0, 68)}....`
+                                                                    : ''}
+                                                            </p>
+
+                                                            {reply?.files?.data?.length > 0 &&
+                                                                reply?.files?.data?.map((f: any, fileIndex: number) => (
+                                                                    <div key={fileIndex}>
+                                                                        <img
+                                                                            className="w-12 h-12 object-cover rounded"
+                                                                            src={f?.url}
+                                                                            alt={'Image'}
+                                                                        />
+                                                                    </div>
+                                                                ))}
+                                                        </div>
+                                                        {(threadPostReply?.length == 1 || index !== 0) && (
+                                                            <button
+                                                                onClick={() =>
+                                                                    onOpen(
+                                                                        thread?.channel?.id?.toString(),
+                                                                        thread?.post?.id?.toString(),
+                                                                    )
+                                                                }
+                                                                className="py-2 px-4 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 rounded text-sm font-medium w-36 transition-colors"
+                                                            >
+                                                                {t('tailwind_ui_inbox.reply')}
+                                                            </button>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ))}
+                                    {/* <div className="flex w-full items-start space-x-4">
+                                        <div>
+                                            <img
+                                                className="w-9 h-9 object-cover rounded"
+                                                src={lastMessage?.author?.picture}
+                                                alt={startCase(lastMessage?.author?.username?.charAt(0))}
+                                            />
+                                        </div>
+
+                                        <div className="leading-3">
+                                            <div className="flex-1 flex flex-col space-y-3 items-start">
+                                                <div className="flex items-center space-x-2">
+                                                    <p className="text-lg text-gray-900 font-semibold">
+                                                        {lastMessage?.author?.username ?? ''}
+                                                    </p>
+                                                    <p className="text-sm text-gray-500 font-semibold">
+                                                        {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
+                                                    </p>
+                                                </div>
+                                                <p className="text-sm text-gray-500 font-semibold">
+                                                    {lastMessage?.message
+                                                        ? lastMessage?.message.length < 70
+                                                            ? `${lastMessage?.message}`
+                                                            : `${lastMessage?.message.substring(0, 68)}....`
+                                                        : ''}
+                                                </p>
+                                                <button
+                                                    onClick={() =>
+                                                        onOpen(
+                                                            thread?.channel?.id?.toString(),
+                                                            thread?.post?.id?.toString(),
+                                                        )
+                                                    }
+                                                    className="py-2 px-4 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 rounded text-sm font-medium w-36 transition-colors"
+                                                >
+                                                    {t('tailwind_ui_inbox.reply')}
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div> */}
+                                </>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const ThreadItem = React.memo(ThreadItemComponent);

package/src/components/inbox/index.ts

@@ -0,0 +1,3 @@
+export * from './FilesList';
+export * from './MessageItem';
+export * from './ThreadItem';

package/src/components/index.ts

@@ -0,0 +1,22 @@
+export { MessageItem, FilesList, ThreadItem } from './inbox';
+export {
+    LeftSidebar,
+    RightSidebar,
+    MessageInput,
+    MessageInputComponent,
+    InputComponent,
+    Messages,
+    CommonMessage,
+    MessageSliceRenderer,
+    Popover,
+    ConversationItem,
+    UploadImageButton,
+    UserModalContent,
+    ServiceInboxItem,
+    MessagesBuilderUi,
+    RightSidebarAi,
+} from './InboxMessage';
+export { ChatMessageFiller, ChatMessageFill2, RightSidebarFillDefault } from './slot-fill';
+export { AIAgent } from './AIAgent';
+export { ModelConfigPanel } from './ModelConfigPanel';
+export { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';

package/src/components/live-code-editor/hybrid-live-editor.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { cn } from '../../utils/utils';
+import { Button } from '../ui/button';
+import { LiveCodeEditor } from './live-code-editor';
+
+interface HybridLiveEditorProps {
+    projectId: string;
+    fragmentId?: string;
+    files?: Record<string, string>;
+    className?: string;
+    sandboxUrl?: string;
+    onCopyToClipboard?: (text: string) => void;
+    onFileUpdate?: (filePath: string, content: string) => Promise<void>;
+    readOnly?: boolean;
+    autoSave?: boolean;
+    debounceMs?: number;
+    showFileExplorer?: boolean;
+}
+
+export interface HybridLiveEditorRef {
+    openVSCode: () => void;
+}
+
+export const HybridLiveEditor = forwardRef<HybridLiveEditorRef, HybridLiveEditorProps>(
+    (
+        {
+            projectId,
+            fragmentId,
+            files = {},
+            className,
+            sandboxUrl,
+            onCopyToClipboard,
+            onFileUpdate,
+            readOnly = false,
+            autoSave = true,
+            debounceMs = 500,
+            showFileExplorer = true,
+        },
+        ref,
+    ) => {
+        const handleOpenVSCodeInTab = useCallback(async () => {
+            if (sandboxUrl) {
+                try {
+                    // Start VS Code sync first
+                    if (projectId && fragmentId) {
+                        console.log('HybridLiveEditor - Starting VSCode sync for:', { projectId, fragmentId });
+                        // Note: You'll need to implement the VSCode sync mutation based on your GraphQL setup
+                        // await startVSCodeSyncMutation({
+                        //   variables: { projectId, fragmentId }
+                        // });
+                        console.log('HybridLiveEditor - VSCode sync started successfully');
+                    }
+
+                    const url = new URL(sandboxUrl);
+                    let codeServerUrl: string;
+
+                    // Handle different URL formats
+                    if (url.hostname.includes('yarntra.ai')) {
+                        // Format: https://3000-{sandboxId}.yarntra.ai -> https://8080-{sandboxId}.yarntra.ai
+                        codeServerUrl = `${url.protocol}//${url.hostname.replace('3000-', '8080-')}${url.pathname}`;
+                    } else if (url.hostname.includes('e2b.dev')) {
+                        // Format: https://{sandboxId}.e2b.dev -> https://{sandboxId}-8080.e2b.dev
+                        codeServerUrl = `${url.protocol}//${url.hostname}-8080${url.pathname}`;
+                    } else {
+                        // Fallback: try port-based approach
+                        const port = url.port || '3000';
+                        codeServerUrl = sandboxUrl.replace(`:${port}`, ':8080');
+                    }
+
+                    window.open(codeServerUrl, '_blank');
+                } catch (err) {
+                    console.error('Error opening VSCode in new tab:', err);
+                }
+            }
+        }, [sandboxUrl, projectId, fragmentId]);
+
+        // Expose the openVSCode function via ref
+        useImperativeHandle(
+            ref,
+            () => ({
+                openVSCode: handleOpenVSCodeInTab,
+            }),
+            [handleOpenVSCodeInTab],
+        );
+
+        // Return Monaco Editor without header/footer, exposing VSCode function
+        return (
+            <div className={cn('flex flex-col h-full w-full', className)}>
+                {/* Monaco Editor - Full height */}
+                <div className="flex-1 overflow-hidden">
+                    <LiveCodeEditor
+                        files={files}
+                        onCopyToClipboard={onCopyToClipboard}
+                        onFileUpdate={onFileUpdate}
+                        readOnly={readOnly}
+                        autoSave={autoSave}
+                        debounceMs={debounceMs}
+                        showFileExplorer={showFileExplorer}
+                        className="h-full"
+                    />
+                </div>
+            </div>
+        );
+    },
+);

package/src/components/live-code-editor/index.ts

@@ -0,0 +1,3 @@
+export { LiveCodeEditor } from './live-code-editor';
+export { HybridLiveEditor } from './hybrid-live-editor';
+export type { HybridLiveEditorRef } from './hybrid-live-editor';