@messenger-box/tailwind-ui-inbox 10.0.3-alpha.72 → 10.0.3-alpha.74

package/src/machines/index.ts

@@ -0,0 +1,2 @@
+export * from './aiAgentMachine';
+export * from './types';

package/src/module.tsx

@@ -3,8 +3,9 @@ import { schema, typePolicies, dataIdFromObject } from '@messenger-box/platform-
 import { MESSAGE_SLOT_FILL_NAME } from '@messenger-box/core';
 import { filteredRoutes } from './compute';
 import { ChatMessageFill, ChatMessageFill2 } from './components/slot-fill/chat-message-filler';
+import { RightSidebarFill } from './components/slot-fill/right-sidebar-filler';
 
-export { ChatMessageFill };
+export { ChatMessageFill, RightSidebarFill };
 export default new Feature({
     routeConfig: filteredRoutes,
     dataIdFromObject,
@@ -19,5 +20,13 @@ export default new Feature({
         //     name: `${MESSAGE_SLOT_FILL_NAME}2`,
         //     render: ChatMessageFill2,
         // },
+        {
+            name: 'inbox-with-ai-right-sidebar-1',
+            render: RightSidebarFill,
+        },
+        // {
+        //     name: 'inbox-with-ai-right-sidebar-2',
+        //     render: RightSidebarFill2,
+        // },
     ],
 });

package/src/templates/InboxWithAi.tsx

@@ -10,13 +10,17 @@ import React, {
     useState,
 } from 'react';
 import { Outlet, useNavigate, useParams, useLocation } from '@remix-run/react';
+import { RightSidebarAi } from '../components/InboxMessage/RightSidebarAi';
+import { useRecreateSandboxMutation, useRegenerateAiCodeMutation } from 'common/graphql';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
+import { useFileSync } from '../hooks/use-file-sync';
 
 // Context for sharing tab state between header and sidebar
 const TabContext = createContext<{
     activeTab: string;
     setActiveTab: (tab: string) => void;
 }>({
-    activeTab: 'design',
+    activeTab: 'preview',
     setActiveTab: () => {},
 });
 
@@ -86,7 +90,7 @@ const EmptyState = React.memo(() => (
 ));
 
 const InboxWithAi = (props: InboxProps) => {
-    const [activeTab, setActiveTab] = React.useState('design');
+    const [activeTab, setActiveTab] = React.useState('preview');
 
     return (
         <TabContext.Provider value={{ activeTab, setActiveTab }}>
@@ -101,14 +105,85 @@ const InboxWithAiInternal = (props: InboxProps) => {
     const location = useLocation();
     const urlParams = location?.search ? new URLSearchParams(location.search) : null;
     const { activeTab, setActiveTab } = useContext(TabContext);
-
+    const [messages, setMessages] = useState<any[]>([]);
+    const [selectedPost, setSelectedPost] = useState<any>(null);
+    const [recreateSandbox] = useRecreateSandboxMutation();
+    const [regenerateAiCode] = useRegenerateAiCodeMutation();
+    const { modelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    const [isLoading, setIsLoading] = useState(true);
+    const [errorData, setError] = useState<string | null>(null);
     // Extract channelId from query parameters (priority) or path parameters (fallback)
     const channelId = urlParams?.get('id') || pathChannelId;
 
+    const regenerateAiCodeForFragment = useCallback(
+        async (messageId: string) => {
+            try {
+                setIsLoading(true);
+                setError(null);
+
+                const response = await regenerateAiCode({
+                    variables: {
+                        messageId: messageId,
+                        modelConfig: modelConfig,
+                    },
+                });
+
+                if (response.data?.regenerateAiCode?.success) {
+                    console.log('Sandbox recreation initiated successfully');
+                    // The subscription will handle updating the UI with the new sandbox URL
+                } else {
+                    const errorMsg = response.data?.regenerateAiCode?.message || 'Failed to regenerate AI code';
+                    throw new Error(errorMsg);
+                }
+            } catch (err) {
+                console.error('Error recreating sandbox:', err);
+                setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+                setIsLoading(false);
+            }
+        },
+        [regenerateAiCode, modelConfig],
+    );
+
+    const recreateSandboxForFragment = useCallback(
+        async (messageId: string) => {
+            if (!channelId) {
+                console.error('No project ID available for sandbox recreation');
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                setError(null);
+
+                const response = await recreateSandbox({
+                    variables: {
+                        projectId: channelId,
+                        messageId,
+                    },
+                });
+
+                if (response.data?.recreateSandbox?.success) {
+                    console.log('Sandbox recreation initiated successfully');
+                    // The subscription will handle updating the UI with the new sandbox URL
+                } else {
+                    const errorMsg = response.data?.recreateSandbox?.message || 'Failed to recreate sandbox';
+                    throw new Error(errorMsg);
+                }
+            } catch (err) {
+                console.error('Error recreating sandbox:', err);
+                setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+                setIsLoading(false);
+            }
+        },
+        [recreateSandbox, channelId],
+    );
+
     // Handle refresh sandbox
     const handleRefreshSandbox = useCallback(() => {
-        console.log('Refreshing sandbox...');
-    }, []);
+        if (selectedPost) {
+            recreateSandboxForFragment(selectedPost.id);
+        }
+    }, [activeTab, selectedPost, regenerateAiCodeForFragment]);
 
     // Hooks - improved responsive breakpoints with better granularity
     const { width: windowWidth, height: windowHeight } = useWindowDimensions();
@@ -145,33 +220,9 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 {!isSmallScreen && (
                                     <div className="flex bg-gray-100 p-2" style={{ borderRadius: '10px' }}>
                                         <button
-                                            onClick={() => setActiveTab('design')}
-                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
-                                                activeTab === 'design'
-                                                    ? 'bg-blue-500 text-white shadow-sm'
-                                                    : 'text-gray-600 hover:text-gray-900'
-                                            }`}
-                                            style={{ borderRadius: '10px' }}
-                                        >
-                                            <svg
-                                                className="w-4 h-4"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                viewBox="0 0 24 24"
-                                            >
-                                                <path
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth={2}
-                                                    d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
-                                                />
-                                            </svg>
-                                            <span>Design</span>
-                                        </button>
-                                        <button
-                                            onClick={() => setActiveTab('interact')}
+                                            onClick={() => setActiveTab('preview')}
                                             className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
-                                                activeTab === 'interact'
+                                                activeTab === 'preview'
                                                     ? 'bg-blue-500 text-white shadow-sm'
                                                     : 'text-gray-600 hover:text-gray-900'
                                             }`}
@@ -196,7 +247,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                                     d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                                 />
                                             </svg>
-                                            <span>Interact</span>
+                                            <span>Preview</span>
                                         </button>
                                         <button
                                             onClick={() => setActiveTab('code')}
@@ -229,7 +280,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
                             {/* Refresh icon on the right - hidden on mobile */}
                             {isDesktopView && (
                                 <button
-                                    onClick={handleRefreshSandbox}
+                                    onClick={() => handleRefreshSandbox()}
                                     className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
                                     title="Refresh Sandbox"
                                 >
@@ -263,7 +314,20 @@ const InboxWithAiInternal = (props: InboxProps) => {
                     `}
                         style={{ paddingTop: '15px' }}
                     >
-                        {channelId ? <ContentComponent channelId={channelId} /> : <EmptyState />}
+                        {channelId ? (
+                            <ContentComponent
+                                channelId={channelId}
+                                {...props}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
+                        ) : (
+                            <EmptyState />
+                        )}
                     </div>
 
                     {/* Right Sidebar - 65% width on desktop only */}
@@ -276,6 +340,13 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 detailSidebarOptions={detailSidebarOptions}
                                 windowWidth={windowWidth}
                                 windowHeight={windowHeight}
+                                activeTab={activeTab}
+                                channelId={channelId}
+                                messages={messages}
+                                selectedPost={selectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                                {...props}
                             />
                         </div>
                     )}
@@ -286,7 +357,7 @@ const InboxWithAiInternal = (props: InboxProps) => {
 };
 
 const ContentComponent = React.memo((props: any) => {
-    const { channelId } = props;
+    const { channelId, messages, setMessages, selectedPost, setSelectedPost, setIsLoading, isLoading } = props;
 
     return (
         <div className="flex overflow-hidden h-full">
@@ -296,7 +367,16 @@ const ContentComponent = React.memo((props: any) => {
                 <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
                     {channelId && (
                         <>
-                            <MessagesComponent {...props} />
+                            <MessagesComponent
+                                {...props}
+                                channelId={channelId}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
                         </>
                     )}
                 </div>
@@ -311,42 +391,10 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
         <div className="h-full flex flex-col overflow-hidden bg-white">
             {/* Content Area */}
             <div className="flex-1 overflow-hidden">
-                {activeTab === 'design' ? (
+                {activeTab === 'preview' ? (
                     <div className="h-full flex items-center justify-center bg-gray-50">
                         <div className="text-center">
-                            {/* Next.js Logo */}
-                            <div className="mb-8">
-                                <svg className="w-32 h-16 mx-auto text-black" viewBox="0 0 394 80" fill="currentColor">
-                                    <path d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.4zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.7h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z" />
-                                    <path d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.2 3.4 1 1.4 1.5 3 1.5 5h-5.8z" />
-                                </svg>
-                            </div>
-
-                            <div className="space-y-4 text-gray-600">
-                                <h3 className="text-lg font-semibold text-gray-900">Design View</h3>
-                                <p className="font-mono text-sm bg-gray-100 px-3 py-1 rounded">
-                                    Design components and UI
-                                </p>
-                                <p>Customize and preview your design changes.</p>
-                            </div>
-
-                            <div className="mt-8 space-y-4">
-                                <button className="bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition-colors flex items-center space-x-2 mx-auto">
-                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                                        <path d="M12 2L2 7v10c0 5.55 3.84 9.739 9 11 5.16-1.261 9-5.45 9-11V7l-10-5z" />
-                                    </svg>
-                                    <span>Design now</span>
-                                </button>
-                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
-                                    View design docs
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                ) : activeTab === 'interact' ? (
-                    <div className="h-full flex items-center justify-center bg-blue-50">
-                        <div className="text-center">
-                            {/* Interact Icon */}
+                            {/* Preview Icon */}
                             <div className="mb-8">
                                 <svg
                                     className="w-32 h-32 mx-auto text-blue-500"
@@ -370,11 +418,11 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
                             </div>
 
                             <div className="space-y-4 text-gray-600">
-                                <h3 className="text-lg font-semibold text-gray-900">Interactive Mode</h3>
+                                <h3 className="text-lg font-semibold text-gray-900">Preview Mode</h3>
                                 <p className="font-mono text-sm bg-blue-100 px-3 py-1 rounded">
-                                    Live interaction and testing
+                                    Live preview and testing
                                 </p>
-                                <p>Test and interact with your components in real-time.</p>
+                                <p>Preview and test your components in real-time.</p>
                             </div>
 
                             <div className="mt-8 space-y-4">
@@ -382,10 +430,10 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
                                     <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                         <path d="M8 5v14l11-7z" />
                                     </svg>
-                                    <span>Start Interacting</span>
+                                    <span>Start Preview</span>
                                 </button>
                                 <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
-                                    Learn about interactions
+                                    Learn about preview mode
                                 </p>
                             </div>
                         </div>
@@ -472,23 +520,36 @@ const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
     );
 });
 
-const RightSidebarContent = React.memo(({ detailSidebarOptions, windowWidth, windowHeight }: any) => {
-    return (
-        <div
-            className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
-            style={{
-                // width: `${windowWidth * 0.35}px`, // 35% of window width
-                height: `${windowHeight}px`,
-                maxHeight: '100vh',
-            }}
-        >
-            <RightSidebarWrapper detailSidebarOptions={detailSidebarOptions} />
-        </div>
-    );
-});
+const RightSidebarContent = React.memo(
+    ({ detailSidebarOptions, windowWidth, windowHeight, channelId, setIsLoading, isLoading, ...props }: any) => {
+        const { activeTab } = useContext(TabContext);
+
+        return (
+            <div
+                className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
+                style={{
+                    // width: `${windowWidth * 0.35}px`, // 35% of window width
+                    height: `${windowHeight}px`,
+                    maxHeight: '100vh',
+                }}
+            >
+                <RightSidebarAi
+                    detailSidebarOptions={detailSidebarOptions}
+                    windowWidth={windowWidth}
+                    windowHeight={windowHeight}
+                    activeTab={activeTab}
+                    channelId={channelId}
+                    setIsLoading={setIsLoading}
+                    isLoading={isLoading}
+                    {...props}
+                />
+            </div>
+        );
+    },
+);
 
 const MessagesComponent = React.memo((props: any) => {
-    return <Outlet context="app" />;
+    return <Outlet context={{ ...props, app: 'app' }} />;
 });
 
 // Display names for debugging

package/src/templates/index.ts

@@ -0,0 +1 @@
+export { default as InboxWithAi } from './InboxWithAi';

package/src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...inputs: (string | undefined | null | false)[]): string {
+    return inputs.filter(Boolean).join(' ').trim();
+}

package/lib/components/InboxMessage/MessageInputComponent.js

@@ -1,173 +0,0 @@
-import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {useTranslation}from'react-i18next';import {config}from'../../config/env-config.js';import {UploadImageButton}from'./UploadImageButton.js';import {FilesList}from'../inbox/FilesList.js';import'../inbox/MessageItem.js';import'../inbox/ThreadItem.js';const MessageInputComponent = ({
-  handleSend: handleSendProp,
-  placeholder
-}) => {
-  const [message, setMessage] = useState('');
-  const [sending, setSending] = useState(false);
-  const [files, setFiles] = useState([]);
-  const [showToast, setShowToast] = useState(false);
-  const [toastMessage, setToastMessage] = useState('');
-  const [isFocused, setIsFocused] = useState(false);
-  const textareaRef = useRef(null);
-  const {
-    t
-  } = useTranslation('translations');
-  // Auto-focus the textarea when component mounts
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, []);
-  const showToastMessage = useCallback(message => {
-    setToastMessage(message);
-    setShowToast(true);
-    setTimeout(() => setShowToast(false), 3000);
-  }, []);
-  const handleSend = useCallback(() => {
-    if (!message.trim() && files.length === 0) return;
-    setSending(true);
-    handleSendProp(message, files).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]);
-  const handleKeyDown = useCallback(e => {
-    const keyCode = e.which || e.keyCode;
-    if (keyCode == 13 && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }, [handleSend]);
-  const inputHeight = useMemo(() => {
-    const lines = message.split('\n').length;
-    return Math.max(48, Math.min(120, 48 + (lines - 1) * 20));
-  }, [message]);
-  const onUploadImageChange = useCallback(({
-    target
-  }) => {
-    let fileList = [];
-    let index = 0;
-    if (files.length + target.files.length > config.FILES_PER_MESSAGE) {
-      showToastMessage(t('tailwind_ui_inbox.you_can_not_upload_more_than_files', {
-        files_per_message: config.FILES_PER_MESSAGE
-      }));
-      return;
-    }
-    while (target.files[index]) {
-      fileList.push(target.files[index]);
-      index += 1;
-    }
-    setFiles(oldFiles => [...oldFiles, ...fileList]);
-  }, [setFiles, files, showToastMessage, t]);
-  const canSend = message.trim() || files.length > 0;
-  const hasContent = message.trim().length > 0;
-  return React__default.createElement("div", {
-    className: "bg-white"
-  }, showToast && React__default.createElement("div", {
-    className: "fixed top-4 right-4 z-50 bg-orange-50 border border-orange-200 text-orange-800 px-4 py-3 rounded-lg shadow-lg animate-bounce"
-  }, React__default.createElement("div", {
-    className: "flex items-center"
-  }, React__default.createElement("svg", {
-    className: "w-5 h-5 mr-2",
-    fill: "currentColor",
-    viewBox: "0 0 20 20"
-  }, React__default.createElement("path", {
-    fillRule: "evenodd",
-    d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-    clipRule: "evenodd"
-  })), toastMessage)), files?.length > 0 && !sending && React__default.createElement("div", {
-    className: "px-4 py-3 border-b border-gray-100 animate-fade-in"
-  }, React__default.createElement(FilesList, {
-    files: files
-  })), React__default.createElement("div", {
-    className: "p-4"
-  }, React__default.createElement("div", {
-    className: `relative border-2 transition-all duration-200 ease-in-out ${hasContent || isFocused ? 'rounded-2xl border-gray-300 bg-white' : 'rounded-2xl border-gray-300 bg-white'} ${isFocused ? 'border-blue-500' : ''}`
-  }, React__default.createElement("div", {
-    className: "absolute left-4 top-1/2 transform -translate-y-1/2 z-10"
-  }, hasContent || isFocused ? React__default.createElement(UploadImageButton, {
-    onChange: onUploadImageChange
-  }) : React__default.createElement("svg", {
-    className: "w-5 h-5 text-gray-400",
-    fill: "none",
-    stroke: "currentColor",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-  }))), React__default.createElement("textarea", {
-    ref: textareaRef,
-    className: `w-full text-base bg-transparent border-none resize-none overflow-hidden text-gray-900  focus:outline-none focus:ring-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent ${hasContent || isFocused ? 'pl-14 pr-20 py-3 placeholder-gray-500' : 'pl-12 pr-12 py-3 placeholder-gray-600'}`,
-    style: {
-      height: hasContent || isFocused ? `${inputHeight}px` : '48px',
-      minHeight: '48px',
-      maxHeight: '120px'
-    },
-    placeholder: placeholder || 'Message',
-    value: sending ? '' : message,
-    onKeyDown: handleKeyDown,
-    onChange: e => setMessage(e.target.value),
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    disabled: sending,
-    rows: 1
-  }), React__default.createElement("div", {
-    className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2"
-  }, hasContent && React__default.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, message.length, "/10000"), hasContent || isFocused ? (/* Send button when typing */
-  React__default.createElement("button", {
-    className: `w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200 ease-in-out ${canSend && !sending ? 'bg-gray-900 hover:bg-gray-800 text-white shadow-md hover:shadow-lg' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`,
-    onClick: handleSend,
-    disabled: !canSend || sending,
-    type: "button"
-  }, sending ? React__default.createElement("svg", {
-    className: "w-5 h-5 animate-spin",
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("circle", {
-    className: "opacity-25",
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    strokeWidth: "4"
-  }), React__default.createElement("path", {
-    className: "opacity-75",
-    fill: "currentColor",
-    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-  })) : React__default.createElement("svg", {
-    className: "w-5 h-5",
-    fill: "none",
-    stroke: "currentColor",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-  })))) : (/* Warning/Info icon when empty */
-  React__default.createElement("svg", {
-    className: "w-5 h-5 text-gray-400",
-    fill: "none",
-    stroke: "currentColor",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-  }))))), React__default.createElement("div", {
-    className: "mt-2 px-1"
-  }, React__default.createElement("span", {
-    className: "text-xs text-gray-400"
-  }, "Press Enter to send, Shift+Enter for new line"))));
-};export{MessageInputComponent};//# sourceMappingURL=MessageInputComponent.js.map

package/lib/components/InboxMessage/MessageInputComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageInputComponent.js","sources":["../../../src/components/InboxMessage/MessageInputComponent.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}