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

package/src/container/InboxAiMessagesLoader.tsx

@@ -0,0 +1,129 @@
+import React, { useMemo, useCallback } from 'react';
+import { useParams, useLocation, useOutletContext } from '@remix-run/react';
+import { AIAgent } from '../components/AIAgent';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Store, userSelector } from '@adminide-stack/user-auth0-client';
+import { IUserState } from '@adminide-stack/core';
+
+interface InboxWithAiLoaderOutletProps {
+    channelFilters?: Record<string, any>;
+    channelRole?: string;
+    supportServices?: boolean;
+    pathPrefix?: string;
+    orgName?: string;
+    showDateSeparators?: boolean;
+    isShowOnlyInbox?: boolean;
+    showModeSelector?: boolean;
+    isLoading?: boolean;
+    setIsLoading?: (loading: boolean) => void;
+    messages?: any[];
+    setMessages?: (messages: any[]) => void;
+    selectedPost?: any;
+    setSelectedPost?: (post: any) => void;
+    sendMessageInput?: (message: string, files: File[]) => Promise<void>;
+    showStopButton?: boolean;
+    onStop?: () => void;
+    templates?: any;
+    selectedTemplate?: any;
+    suggestedTemplate?: any;
+    onSelectTemplate?: (template: any) => void;
+    templateSelectedLabel?: string | null;
+    templateModalItems?: any[];
+    showTemplateModal?: boolean;
+    onOpenTemplateModal?: () => void;
+    onCloseTemplateModal?: () => void;
+    onSelectTemplateById?: (id: string) => void;
+    onClearTemplate?: () => void;
+    onAcceptSuggestedTemplate?: () => void;
+    isAnalyzingQuery?: boolean;
+    onQueryChange?: (query: string) => void;
+    leftItemsOverrides?: any;
+    rightItemsOverrides?: any;
+    inputToolBarProps?: any;
+    projectId?: string;
+    [key: string]: any; // Allow other props to be passed through to Inbox
+}
+
+const InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
+    const location = useLocation();
+    const {
+        messages,
+        setMessages,
+        selectedPost,
+        setSelectedPost,
+        setIsLoading,
+        isLoading,
+        sendMessageInput,
+        isShowOnlyInbox,
+        showModeSelector,
+        showStopButton = false,
+        onStop = () => {},
+        templates,
+        selectedTemplate,
+        suggestedTemplate,
+        onSelectTemplate,
+        templateSelectedLabel,
+        templateModalItems,
+        showTemplateModal,
+        onOpenTemplateModal,
+        onCloseTemplateModal,
+        onSelectTemplateById,
+        onClearTemplate,
+        onAcceptSuggestedTemplate,
+        isAnalyzingQuery,
+        onQueryChange,
+        leftItemsOverrides,
+        rightItemsOverrides,
+        inputToolBarProps,
+        projectId,
+    } = useOutletContext() as any;
+    const urlParams = location?.search ? new URLSearchParams(location.search) : null;
+    const { id: pathChannelId } = useParams();
+    const channelId = urlParams?.get('id') || pathChannelId;
+    const user: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
+
+    return (
+        <AIAgent
+            channelId={channelId}
+            placeholder="Ask me anything..."
+            className="h-full"
+            currentUser={user}
+            messages={messages}
+            setMessages={setMessages}
+            selectedPost={selectedPost}
+            setSelectedPost={setSelectedPost}
+            setIsLoading={setIsLoading}
+            isLoading={isLoading}
+            sendMessageInput={sendMessageInput}
+            isShowOnlyInbox={isShowOnlyInbox}
+            showModeSelector={showModeSelector}
+            showDateSeparators={props?.showDateSeparators || false}
+            showStopButton={showStopButton}
+            onStop={onStop}
+            templates={templates}
+            selectedTemplate={selectedTemplate}
+            suggestedTemplate={suggestedTemplate}
+            onSelectTemplate={onSelectTemplate}
+            templateSelectedLabel={templateSelectedLabel}
+            templateModalItems={templateModalItems}
+            showTemplateModal={showTemplateModal}
+            onOpenTemplateModal={onOpenTemplateModal}
+            onCloseTemplateModal={onCloseTemplateModal}
+            onSelectTemplateById={onSelectTemplateById}
+            onClearTemplate={onClearTemplate}
+            onAcceptSuggestedTemplate={onAcceptSuggestedTemplate}
+            isAnalyzingQuery={isAnalyzingQuery}
+            onQueryChange={onQueryChange}
+            leftItemsOverrides={props.leftItemsOverrides || leftItemsOverrides}
+            rightItemsOverrides={props.rightItemsOverrides || rightItemsOverrides}
+            inputToolBarProps={props.inputToolBarProps || inputToolBarProps}
+            projectId={props.projectId || projectId}
+            {...props}
+        />
+    );
+};
+
+// Display name for debugging
+InboxWithAiLoaderOutlet.displayName = 'InboxWithAiLoaderOutlet';
+
+export default React.memo(InboxWithAiLoaderOutlet);

package/src/container/InboxContainer.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo, useCallback } from 'react';
+import Inbox from '../templates/InboxWithAi';
+
+interface InboxContainerProps {
+    channelId: string;
+    projectId?: string;
+    channelFilters?: Record<string, any>;
+    channelRole?: string;
+    supportServices?: boolean;
+    orgName?: string;
+    handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isShowOnlyInbox?: boolean;
+    inboxTitle?: string;
+    showModeSelector?: boolean;
+    showContextTab?: boolean;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
+    showStopButton?: boolean;
+    onStop?: () => void;
+    templates?: any[];
+    selectedTemplate?: any;
+    suggestedTemplate?: any;
+    onSelectTemplate?: (template: any) => void;
+    templateSelectedLabel?: string | null;
+    templateModalItems?: any[];
+    showTemplateModal?: boolean;
+    onOpenTemplateModal?: () => void;
+    onCloseTemplateModal?: () => void;
+    onSelectTemplateById?: (id: string) => void;
+    onClearTemplate?: () => void;
+    onAcceptSuggestedTemplate?: () => void;
+    isAnalyzingQuery?: boolean;
+    onQueryChange?: (query: string) => void;
+    leftItemsOverrides?: any;
+    rightItemsOverrides?: any;
+    inputToolBarProps?: any;
+    [key: string]: any;
+}
+
+const InboxSkeleton = React.memo(({ showRightSidebar = false }: { showRightSidebar?: boolean }) => (
+    <div
+        className="h-full border-t border-gray-300 flex overflow-hidden animate-pulse"
+        style={{ height: '100vh !important' }}
+    >
+        <div className="flex-1 min-w-0 bg-white border-r border-gray-300"></div>
+        {showRightSidebar && <div className="w-80 border-l border-gray-200 bg-white flex-shrink-0"></div>}
+    </div>
+));
+
+const InboxContainer: React.FC<InboxContainerProps> = (props) => {
+    const { channelId } = props;
+
+    if (!channelId) {
+        return <InboxSkeleton showRightSidebar={true} />;
+    }
+
+    return <Inbox {...props} />;
+};
+
+InboxContainer.displayName = 'InboxContainer';
+
+export default React.memo(InboxContainer);