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

package/src/enums/messenger-slot-fill-name-enum.ts

@@ -0,0 +1,10 @@
+export enum MessengerSlotFillNameEnum {
+    INBOX_RIGHT_SIDEBAR = 'inbox-right-sidebar',
+    INBOX_WITH_AI_RIGHT_SIDEBAR = 'inbox-with-ai-right-sidebar',
+    CHAT_SETTINGS = 'chat-settings',
+    TOOLUSE_NAME = 'tooluse',
+    THINKING_NAME = 'thinking',
+    CODEBLOCK_NAME = 'codeblock',
+    AIASSISTANT_NAME = 'aiassistant',
+    SERVICE_NAME = 'service',
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './usePersistentModelConfig';
+export * from './useTemplates';
+export * from './useStreamAssembler';

package/src/hooks/usePersistentModelConfig.ts

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export type ProviderId = 'openai' | 'anthropic' | 'gemini' | 'groq';
+
+export type ModelConfigMetadata = {
+    formExtensionE2BAPIKey?: string;
+    formExtensionE2BClaudeTemplateId?: string;
+    formExtensionE2BDomain?: string;
+    formExtensionE2BTemplateId?: string;
+    formExtensionE2BViteReactTemplateId?: string;
+    formExtensionE2BVueTemplateId?: string;
+    formExtensionGithubOrg?: string;
+    formExtensionGithubReactBase?: string;
+    formExtensionGithubToken?: string;
+};
+
+export interface ModelConfig {
+    provider: ProviderId;
+    model: string;
+    apiKey: string;
+    template: 'vite-react' | 'nextjs' | 'vue';
+    extensionId: string;
+    formId: string;
+    functionId?: string;
+    stepName?: string;
+    metadata?: ModelConfigMetadata;
+    domain?: string;
+    mode: 'plan' | 'build';
+}
+
+const STORAGE_KEY = 'mbx:model-config';
+
+const DEFAULT_METADATA: ModelConfigMetadata = {
+    formExtensionE2BAPIKey: '',
+    formExtensionE2BClaudeTemplateId: '',
+    formExtensionE2BDomain: '',
+    formExtensionE2BTemplateId: '',
+    formExtensionE2BViteReactTemplateId: '',
+    formExtensionE2BVueTemplateId: '',
+    formExtensionGithubOrg: '',
+    formExtensionGithubReactBase: '',
+    formExtensionGithubToken: '',
+};
+
+const DEFAULTS: ModelConfig = {
+    provider: 'anthropic',
+    // model: 'claude-3-5-sonnet-20241022',
+    model: 'claude-sonnet-4-5-20250929',
+    apiKey: '',
+    template: 'vite-react',
+    extensionId: '',
+    formId: '',
+    functionId: '',
+    stepName: '',
+    domain: 'yarntra.ai',
+    mode: 'plan',
+    metadata: DEFAULT_METADATA,
+};
+
+// Simple module-level store so all hook instances stay in sync
+let globalModelConfig: ModelConfig | null = null;
+let subscribers: Array<(config: ModelConfig) => void> = [];
+
+function notifySubscribers(config: ModelConfig) {
+    subscribers.forEach((cb) => {
+        try {
+            cb(config);
+        } catch {
+            // ignore subscriber errors
+        }
+    });
+}
+
+function loadFromStorage(): ModelConfig | null {
+    try {
+        const raw = typeof window !== 'undefined' ? window.localStorage.getItem(STORAGE_KEY) : null;
+        if (!raw) return null;
+        const parsed = JSON.parse(raw);
+        // Merge with defaults to ensure all fields are present
+        return {
+            ...DEFAULTS,
+            ...parsed,
+            metadata: {
+                ...DEFAULT_METADATA,
+                ...(parsed?.metadata || {}),
+            },
+        } as ModelConfig;
+    } catch {
+        return null;
+    }
+}
+
+function saveToStorage(config: ModelConfig) {
+    try {
+        if (typeof window !== 'undefined') {
+            window.localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+        }
+    } catch {
+        // ignore
+    }
+}
+
+export function usePersistentModelConfig() {
+    const [modelConfig, setModelConfig] = useState<ModelConfig>(() => {
+        if (globalModelConfig) return globalModelConfig;
+
+        const loaded = loadFromStorage();
+        // Merge with defaults to ensure all fields are present even if loaded config is partial
+        const initial = loaded
+            ? {
+                  ...DEFAULTS,
+                  ...loaded,
+                  metadata: {
+                      ...DEFAULT_METADATA,
+                      ...(loaded.metadata || {}),
+                  },
+              }
+            : DEFAULTS;
+
+        globalModelConfig = initial;
+        return initial;
+    });
+
+    // Keep this hook instance in sync with global store
+    useEffect(() => {
+        const subscriber = (config: ModelConfig) => {
+            setModelConfig(config);
+        };
+
+        subscribers.push(subscriber);
+
+        return () => {
+            subscribers = subscribers.filter((s) => s !== subscriber);
+        };
+    }, []);
+
+    const updateModelConfig = useCallback((newConfig: Partial<ModelConfig> | ModelConfig) => {
+        setModelConfig((prev) => {
+            const base = globalModelConfig || prev || DEFAULTS;
+            const next = { ...DEFAULTS, ...base, ...newConfig } as ModelConfig;
+            next.metadata = {
+                ...DEFAULT_METADATA,
+                ...(base.metadata || {}),
+                ...(newConfig?.metadata || {}),
+            };
+
+            globalModelConfig = next;
+            saveToStorage(next);
+            // Defer notification to avoid "Cannot update component X while rendering component Y"
+            queueMicrotask(() => notifySubscribers(next));
+
+            return next;
+        });
+    }, []);
+
+    const hasApiKey = useMemo(() => Boolean(modelConfig.apiKey && modelConfig.apiKey.trim().length > 0), [modelConfig]);
+
+    const getValidatedConfig = useCallback(() => {
+        if (!hasApiKey) return null;
+        return modelConfig;
+    }, [hasApiKey, modelConfig]);
+
+    return { modelConfig, updateModelConfig, getValidatedConfig, hasApiKey };
+}
+
+export default usePersistentModelConfig;

package/src/hooks/useStreamAssembler.ts

@@ -0,0 +1,7 @@
+/**
+ * Re-export from the centralized @messenger-box/platform-client package.
+ * This file is kept for backward compatibility so existing imports
+ * from tailwind-ui-inbox consumers continue to work.
+ */
+export { useStreamAssembler, parseStreamMessage } from '@messenger-box/platform-client';
+export type { ActiveStream, CompletedStream } from '@messenger-box/platform-client';

package/src/hooks/useTemplates.ts

@@ -0,0 +1,75 @@
+import { useSettingsLoader } from '@adminide-stack/platform-client';
+import { ContributionSchemaId } from 'common';
+import { useMemo, useRef } from 'react';
+import type { TemplateConfig } from '../types/templates';
+
+export interface UseTemplatesReturn {
+    /** Marketplace templates for selector (same as aicode-stack useTemplates). */
+    marketplaceTemplates: TemplateConfig[];
+    /** Alias for marketplaceTemplates for backward compatibility. */
+    templates: TemplateConfig[];
+    loading: boolean;
+}
+
+/**
+ * Hook for fetching templates from marketplace/extension (from extension config).
+ * Aligned with aicode-stack use-templates: returns marketplaceTemplates and same TemplateConfig shape (E2B/GitHub fields).
+ */
+export function useTemplates(): UseTemplatesReturn {
+    const { data: marketplaceData, loading: marketplaceLoading } = useSettingsLoader({
+        configKey: 'marketplace.templates.codeAssistant' as any,
+        schemaId: ContributionSchemaId.UiLayout,
+        resourceUri: undefined,
+        includeMarketplace: true,
+    });
+
+    const templatesRef = useRef<TemplateConfig[]>([]);
+
+    const marketplaceTemplates = useMemo(() => {
+        if (!marketplaceData || typeof marketplaceData !== 'object') {
+            return templatesRef.current.length === 0 ? [] : templatesRef.current;
+        }
+
+        const result: TemplateConfig[] = [];
+        Object.entries(marketplaceData).forEach(([_, templateInfo]: [string, any]) => {
+            if (templateInfo?.enable === false || templateInfo?.enable === 'false') return;
+            if (!templateInfo?.templateName || !templateInfo?.formId || !templateInfo?.formExtensionId) return;
+
+            result.push({
+                formExtensionId: (templateInfo.formExtensionId as string) || '',
+                formFunctionId: (templateInfo.formFunctionId as string) || '',
+                formId: (templateInfo.formId as string) || '',
+                tags: (templateInfo.tags as Record<string, string>) || {},
+                enable: String(templateInfo.enable),
+                templateName: (templateInfo.templateName as string) || '',
+                displayName: (templateInfo.displayName as string) || (templateInfo.templateName as string) || '',
+                description: (templateInfo.description as string) || '',
+                category: (templateInfo.category as string) || (templateInfo.projectType as string) || 'Other',
+                icon: (templateInfo.icon as string) || 'Layout',
+                projectType: (templateInfo.projectType as string) || '',
+                keywords: (templateInfo.keywords as Record<string, string>) || {},
+                formExtensionE2BAPIKey: templateInfo.formExtensionE2BAPIKey as string,
+                formExtensionE2BClaudeTemplateId: templateInfo.formExtensionE2BClaudeTemplateId as string,
+                formExtensionE2BDomain: templateInfo.formExtensionE2BDomain as string,
+                formExtensionE2BTemplateId: templateInfo.formExtensionE2BTemplateId as string,
+                formExtensionE2BViteReactTemplateId: templateInfo.formExtensionE2BViteReactTemplateId as string,
+                formExtensionE2BVueTemplateId: templateInfo.formExtensionE2BVueTemplateId as string,
+                formExtensionGithubOrg: templateInfo.formExtensionGithubOrg as string,
+                formExtensionGithubReactBase: templateInfo.formExtensionGithubReactBase as string,
+                formExtensionGithubToken: templateInfo.formExtensionGithubToken as string,
+                formExtensionModelConfigAPIKey: templateInfo.formExtensionModelConfigAPIKey as string,
+            });
+        });
+
+        const newStr = JSON.stringify(result);
+        const oldStr = JSON.stringify(templatesRef.current);
+        if (newStr !== oldStr) templatesRef.current = result;
+        return templatesRef.current;
+    }, [marketplaceData]);
+
+    return {
+        marketplaceTemplates,
+        templates: marketplaceTemplates,
+        loading: marketplaceLoading ?? false,
+    };
+}

package/src/index.ts

@@ -0,0 +1,49 @@
+export { default } from './module';
+export { ChatMessageFill } from './module';
+export {
+    Inbox,
+    Threads,
+    ThreadMessages,
+    ServiceInbox,
+    InboxWithLoader,
+    InboxWithAiLoader,
+    InboxAiMessagesLoader,
+    InboxContainer,
+    AiLandingInput,
+} from './container';
+export {
+    MessageSliceRenderer,
+    Messages,
+    Popover,
+    MessageInput,
+    CommonMessage,
+    UploadImageButton,
+    MessageItem,
+    LeftSidebar,
+    FilesList,
+    ConversationItem,
+    UserModalContent,
+    ServiceInboxItem,
+    AIAgent,
+    ModelConfigPanel,
+    RightSidebarAi,
+    InputComponent,
+    RightSidebarFillDefault,
+    MessagesContainerUI,
+    PlanModeView,
+} from './components';
+export type { MessagesContainerUIProps, PlanModeViewProps, PlanModeViewInputToolbarProps } from './components';
+export type { PlanMessage, CurrentUser } from './components/messages-container-ui/types';
+export { InboxWithAi } from './templates';
+export type { CardMessageAttachmentsInterface, AlertMessageAttachmentsInterface } from './interfaces';
+export * from './enums';
+export * from './machines';
+export * from './hooks';
+export type { TemplateConfig, TemplateModalItem } from './types/templates';
+export type {
+    LeftItemsOverrides,
+    RightItemsOverrides,
+    LeftToolbarItemId,
+    RightToolbarItemId,
+    InputToolBarPropsOverrides,
+} from './components/AIAgent/InputComponent';

package/src/interfaces/index.ts

@@ -0,0 +1 @@
+export { CardMessageAttachmentsInterface, AlertMessageAttachmentsInterface } from './message-widgets.interface';

package/src/interfaces/message-widgets.interface.ts

@@ -0,0 +1,21 @@
+export interface AlertMessageAttachmentsInterface {
+    title: string;
+    isTitleHtml: boolean;
+    icon: string;
+    callToAction: {
+        title: string;
+        link: string;
+    };
+}
+
+export interface CardMessageAttachmentsInterface {
+    image: string;
+    title?: string;
+    isTitleHtml?: string;
+    description: string;
+    isDescriptionHtml: boolean;
+    callToAction: {
+        title: string;
+        link: string;
+    };
+}

package/src/machines/aiAgentMachine.simple.ts

@@ -0,0 +1,89 @@
+import { createMachine, assign } from 'xstate';
+import { AIAgentContext, AIAgentEvent, Message } from './types';
+
+export const aiAgentMachine = createMachine(
+    {
+        id: 'aiAgentSimple',
+        types: {} as {
+            context: AIAgentContext;
+            events: AIAgentEvent;
+        },
+        initial: 'idle',
+        context: {
+            messages: [],
+            currentInput: '',
+            error: null,
+            isTyping: false,
+            regularMessages: [],
+        },
+        states: {
+            idle: {
+                on: {
+                    SEND_MESSAGE: {
+                        target: 'idle',
+                        guard: 'hasValidMessage',
+                        actions: 'addUserMessage',
+                    },
+                    INPUT_CHANGE: {
+                        actions: 'updateInput',
+                    },
+                    CLEAR_ERROR: {
+                        actions: 'clearError',
+                    },
+                    UPDATE_REGULAR_MESSAGES: {
+                        actions: 'updateRegularMessages',
+                    },
+                    // Tolerate legacy events as no-ops
+                    AUTO_RESPOND_TO_MESSAGE: {},
+                    RETRY: {},
+                    CONTINUE_PROCESSING: {},
+                    UPDATE: {
+                        actions: 'mergeUpdate',
+                    },
+                },
+            },
+        },
+    },
+    {
+        guards: {
+            hasValidMessage: ({ event }) => {
+                if (event.type === 'SEND_MESSAGE') {
+                    return Boolean(event.message && event.message.trim().length > 0);
+                }
+                return false;
+            },
+        },
+        actions: {
+            addUserMessage: assign(({ context, event }) => {
+                if (event.type !== 'SEND_MESSAGE') return context;
+                const newMessage: Message = {
+                    id: Date.now().toString(),
+                    content: event.message,
+                    sender: 'user',
+                    timestamp: new Date(),
+                };
+                return {
+                    ...context,
+                    messages: [...context.messages, newMessage],
+                    currentInput: '',
+                    error: null,
+                };
+            }),
+            updateInput: assign(({ context, event }) => {
+                if (event.type !== 'INPUT_CHANGE') return context;
+                return { ...context, currentInput: event.value };
+            }),
+            updateRegularMessages: assign(({ context, event }) => {
+                if (event.type !== 'UPDATE_REGULAR_MESSAGES') return context;
+                return { ...context, regularMessages: event.messages || [] };
+            }),
+            clearError: assign(({ context }) => ({ ...context, error: null })),
+            mergeUpdate: assign(({ context, event }) => {
+                // Supports events like { type: 'UPDATE', value: { messages: [] } }
+                if (event.type !== 'UPDATE') return context as any;
+                const value = (event as any).value || {};
+                return { ...context, ...value } as any;
+            }),
+        },
+    },
+);