@messenger-box/tailwind-ui-inbox 10.0.3-alpha.121 → 10.0.3-alpha.123

package/src/components/InboxMessage/InputComponent.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { config } from '../../config';
-import { UploadImageButton } from './UploadImageButton';
 import { FilesList } from '../inbox';
-import { ModelConfigPanel, modelOptions, templateOptions, getAllModels } from '../ModelConfigPanel';
+import { ModelToolbar } from '../ModelConfigPanel';
 import { ModelConfig } from '../../hooks/usePersistentModelConfig';
 
 type MessageInputProps = {
@@ -12,6 +11,9 @@ type MessageInputProps = {
     placeholder?: string;
     modelConfig?: ModelConfig;
     onModelConfigChange?: (config: ModelConfig) => void;
+    textareaClassName?: string;
+    textareaStyles?: React.CSSProperties;
+    toolBarParentClassName?: string;
 };
 
 export const InputComponent = ({
@@ -19,6 +21,9 @@ export const InputComponent = ({
     placeholder,
     modelConfig,
     onModelConfigChange,
+    textareaClassName,
+    toolBarParentClassName,
+    textareaStyles,
 }: MessageInputProps) => {
     const [message, setMessage] = useState('');
     const [sending, setSending] = useState(false);
@@ -26,12 +31,7 @@ export const InputComponent = ({
     const [showToast, setShowToast] = useState(false);
     const [toastMessage, setToastMessage] = useState('');
     const [isFocused, setIsFocused] = useState(false);
-    const [showModelDropdown, setShowModelDropdown] = useState(false);
-    const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
-    const [showSettingsModal, setShowSettingsModal] = useState(false);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const modelDropdownRef = useRef<HTMLDivElement>(null);
-    const templateDropdownRef = useRef<HTMLDivElement>(null);
     const { t } = useTranslation('translations');
 
     // Auto-focus the textarea when component mounts
@@ -48,19 +48,7 @@ export const InputComponent = ({
         }
     }, [modelConfig, onModelConfigChange]);
 
-    // Handle click outside for dropdowns
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
-                setShowModelDropdown(false);
-            }
-            if (templateDropdownRef.current && !templateDropdownRef.current.contains(event.target as Node)) {
-                setShowTemplateDropdown(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
+    // no dropdowns managed here; toolbar handles its own
 
     const showToastMessage = useCallback((message: string) => {
         setToastMessage(message);
@@ -126,38 +114,11 @@ export const InputComponent = ({
     const canSend = message.trim() || files.length > 0;
     const hasContent = message.trim().length > 0;
 
-    // Get models and templates from ModelConfigPanel
-    const allModelOptions = useMemo(() => {
-        return getAllModels();
-    }, []);
-
-    const templateOptionsList = useMemo(() => {
-        return templateOptions.map((t) => ({ value: t.value, label: t.label, icon: t.icon }));
-    }, []);
-
-    const handleModelSelect = useCallback(
-        (modelValue: string) => {
-            if (onModelConfigChange && modelConfig) {
-                onModelConfigChange({ ...modelConfig, model: modelValue });
-            }
-            setShowModelDropdown(false);
-        },
-        [modelConfig, onModelConfigChange],
-    );
-
-    const handleTemplateSelect = useCallback(
-        (templateValue: string) => {
-            if (onModelConfigChange && modelConfig) {
-                onModelConfigChange({ ...modelConfig, template: templateValue as any });
-            }
-            setShowTemplateDropdown(false);
-        },
-        [modelConfig, onModelConfigChange],
-    );
+    // toolbar now owns model/template selections
 
     return (
         // <div className="bg-gray-50 border-t border-gray-200">
-        <div className="bg-gray-50 border border-gray-200">
+        <div className="bg-white  ">
             {/* Toast notification */}
             {showToast && (
                 <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">
@@ -187,13 +148,14 @@ export const InputComponent = ({
                 <div className="relative mb-3">
                     <textarea
                         ref={textareaRef}
-                        className={`w-full text-base bg-white border-2 rounded-2xl pl-4 pr-4 py-3 resize-none focus:outline-none placeholder-gray-500 transition-all duration-200 ${
-                            isFocused ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'
-                        }`}
+                        className={`w-full text-base bg-white border border-gray-300 rounded-2xl pl-4 pr-4 py-3 resize-none focus:border-gray-300 focus:outline-none placeholder-gray-500 transition-all duration-200 ${
+                            isFocused ? 'border-gray-400 ring-2 ring-gray-300 focus:ring-gray-300' : 'border-gray-300'
+                        } ${textareaClassName}`}
                         style={{
                             height: `${inputHeight}px`,
                             minHeight: '120px',
                             maxHeight: '200px',
+                            ...textareaStyles,
                         }}
                         placeholder={placeholder || 'Message'}
                         value={sending ? '' : message}
@@ -205,281 +167,17 @@ export const InputComponent = ({
                         rows={1}
                     />
                 </div>
-
-                {/* Simplified Toolbar - Only Template, Model, Upload, Send, and Settings */}
-                <div className="flex items-center gap-2">
-                    <UploadImageButton onChange={onUploadImageChange}>
-                        <div className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
-                            <svg
-                                className="w-4 h-4 text-gray-600"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-                            </svg>
-                        </div>
-                    </UploadImageButton>
-                    {/* 1. Template Selection Dropdown */}
-                    <div className="relative" ref={templateDropdownRef}>
-                        <button
-                            onClick={() => setShowTemplateDropdown(!showTemplateDropdown)}
-                            className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors min-w-[120px]"
-                        >
-                            {(() => {
-                                if (modelConfig && modelConfig.template) {
-                                    const currentTemplate = templateOptionsList.find(
-                                        (option) => option.value === modelConfig.template,
-                                    );
-                                    return currentTemplate ? (
-                                        <>
-                                            <span className="text-lg">{currentTemplate.icon}</span>
-                                            <span className="text-gray-700">{currentTemplate.label}</span>
-                                        </>
-                                    ) : (
-                                        <>
-                                            <span className="text-lg">📝</span>
-                                            <span className="text-gray-500">Template</span>
-                                        </>
-                                    );
-                                }
-                                return (
-                                    <>
-                                        <span className="text-lg">📝</span>
-                                        <span className="text-gray-500">Template</span>
-                                    </>
-                                );
-                            })()}
-                            <svg
-                                className="w-4 h-4 text-gray-500 ml-auto"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                            </svg>
-                        </button>
-
-                        {showTemplateDropdown && (
-                            <div className="absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-50">
-                                <div className="py-1">
-                                    {templateOptionsList.map((option) => (
-                                        <button
-                                            key={option.value}
-                                            onClick={() => handleTemplateSelect(option.value)}
-                                            className={`w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors flex items-center gap-2 ${
-                                                modelConfig?.template === option.value ? 'bg-blue-50' : ''
-                                            }`}
-                                        >
-                                            <span className="text-lg">{option.icon}</span>
-                                            <span className="font-medium text-gray-900">{option.label}</span>
-                                        </button>
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-                    </div>
-
-                    {/* 2. Model Selection Dropdown */}
-                    <div className="relative" ref={modelDropdownRef}>
-                        <button
-                            onClick={() => setShowModelDropdown(!showModelDropdown)}
-                            className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors min-w-[140px]"
-                        >
-                            {(() => {
-                                if (modelConfig && modelConfig.model) {
-                                    const currentModel = allModelOptions.find(
-                                        (option) => option.value === modelConfig.model,
-                                    );
-                                    return currentModel ? (
-                                        <span className="text-gray-700">{currentModel.label}</span>
-                                    ) : (
-                                        <span className="text-gray-500">Model</span>
-                                    );
-                                }
-                                return <span className="text-gray-500">Model</span>;
-                            })()}
-                            <svg
-                                className="w-4 h-4 text-gray-500 ml-auto"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                            </svg>
-                        </button>
-
-                        {showModelDropdown && (
-                            <div className="absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-60 overflow-y-auto">
-                                <div className="py-1">
-                                    {allModelOptions.map((option) => (
-                                        <button
-                                            key={option.value}
-                                            onClick={() => handleModelSelect(option.value)}
-                                            className={`w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors ${
-                                                modelConfig?.model === option.value ? 'bg-blue-50' : ''
-                                            }`}
-                                        >
-                                            <div className="font-medium text-gray-900">{option.label}</div>
-                                        </button>
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-                    </div>
-
-                    <div className="flex-1"></div>
-
-                    {/* 3. Upload Button */}
-
-                    {/* 4. Project Settings Button */}
-                    <button
-                        onClick={() => setShowSettingsModal(true)}
-                        className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors"
-                    >
-                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                            />
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                            />
-                        </svg>
-                    </button>
-
-                    {/* 5. Send Button */}
-                    <button
-                        className={`flex items-center justify-center w-8 h-8 rounded-lg border transition-colors ${
-                            canSend && !sending
-                                ? 'border-blue-500 bg-blue-500 hover:bg-blue-600 text-white'
-                                : 'border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed'
-                        }`}
-                        onClick={handleSend}
-                        disabled={!canSend || sending}
-                        type="button"
-                    >
-                        {sending ? (
-                            <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                                <circle
-                                    className="opacity-25"
-                                    cx="12"
-                                    cy="12"
-                                    r="10"
-                                    stroke="currentColor"
-                                    strokeWidth="4"
-                                ></circle>
-                                <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"
-                                ></path>
-                            </svg>
-                        ) : (
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                                />
-                            </svg>
-                        )}
-                    </button>
+                <div className={`${toolBarParentClassName}`}>
+                    <ModelToolbar
+                        modelConfig={modelConfig}
+                        onModelConfigChange={onModelConfigChange}
+                        sending={sending}
+                        canSend={!!canSend}
+                        onSend={handleSend}
+                        onUploadImageChange={onUploadImageChange}
+                    />
                 </div>
             </div>
-
-            {/* Simplified Settings Modal - Only API Key and Model */}
-            {showSettingsModal && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-                    <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
-                        <div className="p-6 mb-4">
-                            <div className="flex items-center justify-between mb-4">
-                                <h3 className="text-lg font-semibold text-gray-900">Project Settings</h3>
-                                <button
-                                    onClick={() => setShowSettingsModal(false)}
-                                    className="text-gray-400 hover:text-gray-600 transition-colors"
-                                >
-                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M6 18L18 6M6 6l12 12"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-
-                            {modelConfig && onModelConfigChange && (
-                                <div className="space-y-4">
-                                    {/* API Key Input */}
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700 mb-2">API Key</label>
-                                        <input
-                                            type="password"
-                                            value={modelConfig.apiKey}
-                                            onChange={(e) =>
-                                                onModelConfigChange({ ...modelConfig, apiKey: e.target.value })
-                                            }
-                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                            placeholder="Enter your API key"
-                                        />
-                                    </div>
-
-                                    {/* Extension ID Input */}
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                                            Extension ID
-                                        </label>
-                                        <input
-                                            type="text"
-                                            value={modelConfig.extensionId || ''}
-                                            onChange={(e) =>
-                                                onModelConfigChange({ ...modelConfig, extensionId: e.target.value })
-                                            }
-                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                            placeholder="Enter your extension ID"
-                                        />
-                                    </div>
-
-                                    {/* Model Selection */}
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700 mb-2">Model</label>
-                                        <select
-                                            value={modelConfig.model}
-                                            onChange={(e) =>
-                                                onModelConfigChange({ ...modelConfig, model: e.target.value })
-                                            }
-                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                        >
-                                            {allModelOptions.map((option) => (
-                                                <option key={option.value} value={option.value}>
-                                                    {option.label}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    </div>
-                                </div>
-                            )}
-
-                            {/* <div className="mt-6 flex justify-end">
-                                <button
-                                    onClick={() => setShowSettingsModal(false)}
-                                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-                                >
-                                    Save Settings
-                                </button>
-                            </div> */}
-                        </div>
-                    </div>
-                </div>
-            )}
         </div>
     );
 };

package/src/components/InboxMessage/UploadImageButton.tsx

@@ -28,14 +28,14 @@ export const UploadImageButton = (props: IUploadImageButtonProps) => {
                 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">
+            {/* <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')}
-                {/* Tooltip arrow */}
+               
                 <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>
+            </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-2 focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200 ease-in-out"
+                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')}
             >

package/src/components/InboxMessage/message-widgets/ModernMessageGroup.tsx

@@ -402,6 +402,7 @@ const useInjectStyles = () => {
 interface ModernMessageGroupProps {
     showAuthorName?: boolean;
     showAvatar?: boolean;
+    showTimestamp?: boolean;
     messages: IPost[];
     currentUser: IAuthUser;
     onOpen: (element?: any) => void;
@@ -417,6 +418,7 @@ interface ModernMessageGroupProps {
 interface MessageGroupProps {
     showAuthorName?: boolean;
     showAvatar?: boolean;
+    showTimestamp?: boolean;
     author: any;
     messages: IPost[];
     currentUser: IAuthUser;
@@ -919,6 +921,7 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
     currentUser,
     showAuthorName = false,
     showAvatar = false,
+    showTimestamp = false,
     onOpen,
     onMessageClick,
     isDesktopView = false,
@@ -977,6 +980,7 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
                         formatTime={formatTime}
                         showAuthorName={showAuthorName}
                         showAvatar={showAvatar}
+                        showTimestamp={showTimestamp}
                     />
                 ))}
             </div>
@@ -1034,6 +1038,7 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
                                 isLastInGroup={index === messages.length - 1}
                                 onMessageClick={onMessageClick}
                                 formatTime={formatTime}
+                                showTimestamp={showTimestamp}
                             />
                         ))}
                     </div>
@@ -1046,6 +1051,7 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
 interface ModernMessageBubbleProps {
     showAuthorName?: boolean;
     showAvatar?: boolean;
+    showTimestamp?: boolean;
     message: IPost;
     isOwnMessage: boolean;
     isSystemMessage: boolean;
@@ -1058,6 +1064,7 @@ interface ModernMessageBubbleProps {
 const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
     showAuthorName = false,
     showAvatar = false,
+    showTimestamp = false,
     message,
     isOwnMessage,
     isSystemMessage,
@@ -1142,6 +1149,11 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                                     <FilesList uploaded files={message.files.data} />
                                 </div>
                             )}
+                            {showTimestamp ? (
+                                <div className="text-[10px] text-gray-500 mt-1 text-right">
+                                    {formatTime(message.createdAt)}
+                                </div>
+                            ) : null}
                         </div>
                     </div>
 
@@ -1262,6 +1274,9 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                     </div>
                 )} */}
             </div>
+            {showTimestamp ? (
+                <div className="text-[10px] text-gray-500 mt-1 text-right">{formatTime(message.createdAt)}</div>
+            ) : null}
         </div>
     );
 };
@@ -1271,6 +1286,7 @@ export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
     currentUser,
     showAuthorName = false,
     showAvatar = false,
+    showTimestamp = false,
     onOpen,
     onMessageClick,
     isDesktopView = false,
@@ -1304,6 +1320,7 @@ export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
                         isSmallScreen={isSmallScreen}
                         showAuthorName={showAuthorName}
                         showAvatar={showAvatar}
+                        showTimestamp={showTimestamp}
                     />
                 );
             })}