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

package/src/components/InboxMessage/InputComponent.tsx

@@ -0,0 +1,462 @@
+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 { ModelConfig } from '../../hooks/usePersistentModelConfig';
+
+type MessageInputProps = {
+    channelId?: string;
+    handleSend?: (message: string, files: File[]) => Promise<void>;
+    placeholder?: string;
+    modelConfig?: ModelConfig;
+    onModelConfigChange?: (config: ModelConfig) => void;
+};
+
+export const InputComponent = ({
+    handleSend: handleSendProp,
+    placeholder,
+    modelConfig,
+    onModelConfigChange,
+}: MessageInputProps) => {
+    const [message, setMessage] = useState('');
+    const [sending, setSending] = useState(false);
+    const [files, setFiles] = useState<File[]>([]);
+    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
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, []);
+
+    // 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);
+    }, []);
+
+    const showToastMessage = useCallback((message: string) => {
+        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(120, Math.min(200, 120 + (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;
+
+    // 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],
+    );
+
+    return (
+        // <div className="bg-gray-50 border-t border-gray-200">
+        <div className="bg-gray-50 border border-gray-200">
+            {/* 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">
+                    <div className="flex items-center">
+                        <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                            <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"
+                            />
+                        </svg>
+                        {toastMessage}
+                    </div>
+                </div>
+            )}
+
+            {/* Files list */}
+            {files?.length > 0 && !sending && (
+                <div className="px-4 py-3 border-b border-gray-200">
+                    <FilesList files={files} />
+                </div>
+            )}
+
+            {/* Input container with textarea first, toolbar at bottom */}
+            <div className="px-4 py-3">
+                {/* Input field */}
+                <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'
+                        }`}
+                        style={{
+                            height: `${inputHeight}px`,
+                            minHeight: '120px',
+                            maxHeight: '200px',
+                        }}
+                        placeholder={placeholder || 'Message'}
+                        value={sending ? '' : message}
+                        onKeyDown={handleKeyDown}
+                        onChange={(e) => setMessage(e.target.value)}
+                        onFocus={() => setIsFocused(true)}
+                        onBlur={() => setIsFocused(false)}
+                        disabled={sending}
+                        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>
+            </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>
+
+                                    {/* 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/LeftSidebar.tsx

@@ -0,0 +1,140 @@
+import { GoSettings } from '@react-icons/all-files/go/GoSettings.js';
+import { GoSearch } from '@react-icons/all-files/go/GoSearch.js';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { orderBy, uniqBy } from 'lodash-es';
+import { ConversationItem } from './ConversationItem';
+import { ServiceConversationItem } from './ServiceConversationItem';
+import { RoomType } from 'common';
+
+type LeftSidebarProps = {
+    userChannels: any;
+    userChannelsLoading: boolean;
+    currentUser: any;
+    users?: any[];
+    handleSelectChannel: (channel: any, postId?: any) => void;
+    clearMessages?: () => void;
+    selectedChannelId?: any;
+    channelToTop: number;
+    getChannelsRefetch: any;
+    supportServices?: any;
+    role?: any;
+    messagesQuery?: any;
+    windowHeight?: number;
+    windowWidth?: number;
+};
+
+export const LeftSidebar = React.memo((props: LeftSidebarProps) => {
+    const {
+        currentUser,
+        handleSelectChannel,
+        users,
+        userChannels,
+        userChannelsLoading,
+        selectedChannelId,
+        supportServices,
+        role,
+        messagesQuery,
+        windowHeight = 768,
+        windowWidth = 1024,
+    } = props;
+    const [keyword, setKeyword] = useState('');
+    const { t } = useTranslation('translations');
+
+    // Memoize the sorted channels to prevent unnecessary re-renders
+    const sortedChannels = useMemo(() => {
+        if (!userChannels?.length) return [];
+        return orderBy(
+            uniqBy([...userChannels], ({ id }) => id),
+            ['updatedAt'],
+            ['desc'],
+        );
+    }, [userChannels]);
+
+    if (userChannelsLoading) {
+        return (
+            <div className="space-y-4">
+                {Array(10)
+                    .fill(1)
+                    .map((x, y) => (
+                        <div key={y} className="h-10 bg-gray-200 rounded animate-pulse" />
+                    ))}
+            </div>
+        );
+    }
+    return (
+        <div className="w-full flex flex-col bg-white" style={{ height: `${windowHeight}px`, maxHeight: '100vh' }}>
+            <div className="flex-shrink-0 p-3 sm:p-4 border-b border-gray-200">
+                <SearchInput keyword={keyword} setKeyword={setKeyword} />
+            </div>
+            <div className="flex-1 min-h-0 overflow-hidden">
+                <div
+                    className="overflow-y-auto p-2 sm:p-4 space-y-1"
+                    style={{
+                        height: `${windowHeight - 80}px`, // Subtract header height
+                        minHeight: 0,
+                    }}
+                >
+                    <>
+                        {supportServices ? supportServices : <></>}
+
+                        {sortedChannels.length > 0 ? (
+                            sortedChannels.map((channel, index) =>
+                                channel?.type === RoomType.Service ? (
+                                    <ServiceConversationItem
+                                        key={`service_channel_${channel.id}`}
+                                        filter={keyword}
+                                        channel={channel}
+                                        currentUser={currentUser}
+                                        handleSelectChannel={handleSelectChannel}
+                                        users={users}
+                                        selectedChannelId={selectedChannelId}
+                                        showBorder={index != sortedChannels.length - 1}
+                                        role={role || null}
+                                    />
+                                ) : (
+                                    <ConversationItem
+                                        key={`conv_channel_${channel.id}`}
+                                        filter={keyword}
+                                        channel={channel}
+                                        currentUser={currentUser}
+                                        handleSelectChannel={handleSelectChannel}
+                                        users={users}
+                                        selectedChannelId={selectedChannelId}
+                                        showBorder={index != sortedChannels.length - 1}
+                                        messagesQuery={messagesQuery}
+                                    />
+                                ),
+                            )
+                        ) : (
+                            <div className="text-center py-8 text-gray-500">
+                                <div className="text-3xl mb-2">💬</div>
+                                <p>No conversations yet</p>
+                            </div>
+                        )}
+                    </>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+const SearchInput = ({ keyword, setKeyword }: any) => {
+    const { t } = useTranslation('translations');
+    return (
+        <div className="w-full">
+            <div className="relative">
+                <input
+                    type="text"
+                    placeholder={t('tailwind_ui_inbox.search_inbox') || 'Search Inbox'}
+                    className="w-full pl-10 sm:pl-12 pr-4 py-2 sm:py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400 focus:bg-white transition-all duration-200 text-sm"
+                    value={keyword}
+                    onChange={(e) => setKeyword(e.target.value)}
+                />
+                <div className="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2">
+                    <GoSearch className="w-4 h-4 text-gray-400" />
+                </div>
+            </div>
+        </div>
+    );
+};