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

package/src/components/AIAgent/InputComponent.tsx

@@ -0,0 +1,608 @@
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InputToolBar, getDefaultLeftItems, getDefaultRightItems } from '@admin-layout/tailwind-ui';
+import type { InputToolBarProps } from '@admin-layout/tailwind-ui';
+import { config } from '../../config';
+import { ProjectSettingsModal } from '../ModelConfigPanel';
+import type { ModelConfig } from '../../hooks/usePersistentModelConfig';
+import type { TemplateConfig, TemplateModalItem } from '../../types/templates';
+
+type AttachedFile = {
+    id: string;
+    name: string;
+    size?: number;
+    file: File;
+    dataUrl?: string;
+};
+
+function AttachmentPreview({ attachment, onRemove }: { attachment: AttachedFile; onRemove: (id: string) => void }) {
+    const isImage = !!attachment.dataUrl && attachment.dataUrl.startsWith('data:image/');
+
+    return (
+        <div className="relative group inline-flex items-center gap-2 rounded-xl border border-border/50 bg-secondary/60 px-3 py-2 text-sm">
+            {isImage && attachment.dataUrl ? (
+                <div className="h-8 w-8 flex-shrink-0 overflow-hidden rounded-lg bg-muted">
+                    <img src={attachment.dataUrl} alt={attachment.name} className="h-full w-full object-cover" />
+                </div>
+            ) : (
+                <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-muted">
+                    <svg
+                        className="h-3.5 w-3.5 text-muted-foreground"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                    </svg>
+                </div>
+            )}
+            <div className="flex min-w-0 max-w-[140px] flex-col">
+                <span className="truncate text-xs font-medium text-foreground">{attachment.name}</span>
+                {attachment.size != null && (
+                    <span className="text-[10px] text-muted-foreground">
+                        {attachment.size < 1024 * 1024
+                            ? `${(attachment.size / 1024).toFixed(1)} KB`
+                            : `${(attachment.size / (1024 * 1024)).toFixed(1)} MB`}
+                    </span>
+                )}
+            </div>
+            <button
+                type="button"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onRemove(attachment.id);
+                }}
+                className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-md opacity-0 transition-opacity hover:bg-destructive/90 group-hover:opacity-100"
+                aria-label={`Remove ${attachment.name}`}
+            >
+                <svg className="h-2.5 w-2.5" 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>
+    );
+}
+
+/** Override config for a single left toolbar item (enabled, label, active, onClick, etc.) */
+export type LeftItemOverride = {
+    enabled?: boolean;
+    label?: string;
+    active?: boolean;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    customButton?: React.ReactNode;
+};
+/** Override config for a single right toolbar item */
+export type RightItemOverride = {
+    enabled?: boolean;
+    label?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    customButton?: React.ReactNode;
+};
+/** Left item ids: search, zap, lightbulb, template */
+export type LeftToolbarItemId = 'search' | 'zap' | 'lightbulb' | 'template';
+/** Right item ids: projectSettings, tag, chip, camera, image, attach, mic */
+export type RightToolbarItemId = 'projectSettings' | 'tag' | 'chip' | 'camera' | 'image' | 'attach' | 'mic';
+/** Per-item overrides for left toolbar. Pass { search: { enabled: false } } to hide search. */
+export type LeftItemsOverrides = Partial<Record<LeftToolbarItemId, LeftItemOverride>>;
+/** Per-item overrides for right toolbar. Pass { camera: { enabled: false } } to hide camera. */
+export type RightItemsOverrides = Partial<Record<RightToolbarItemId, RightItemOverride>>;
+
+/**
+ * Props that can be passed from outside to customize InputToolBar.
+ * Excludes inputConfig and children (controlled by InputComponent).
+ * When a prop is set, it overrides the internal value (e.g. leftItems, rightItems, callbacks).
+ */
+export type InputToolBarPropsOverrides = Partial<Omit<InputToolBarProps, 'inputConfig' | 'children'>> & {
+    /** Optional class for the template selection modal content box (e.g. max-w-md, max-w-xl). Merged into templateModalConfig when not passing full templateModalConfig. */
+    templateModalClassName?: string;
+};
+
+export type MessageInputProps = {
+    channelId?: string;
+    handleSend?: (message: string, files: File[]) => Promise<void>;
+    placeholder?: string;
+    modelConfig?: ModelConfig;
+    onModelConfigChange?: (config: ModelConfig) => void;
+    textareaClassName?: string;
+    textareaStyles?: React.CSSProperties;
+    toolBarParentClassName?: string;
+    isShowMeta?: boolean;
+    showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+    inputToolBarParentClass?: string;
+    /** Templates for build mode (from extension/marketplace query). Shown when lightbulb/build is active. */
+    templates?: TemplateConfig[];
+    selectedTemplate?: TemplateConfig | null;
+    suggestedTemplate?: TemplateConfig | null;
+    onSelectTemplate?: (template: TemplateConfig | null) => void;
+    /** Optional override for displayed template label (when parent controls it, e.g. AIPage). */
+    templateSelectedLabel?: string | null;
+    /** Optional override for template modal items (when parent provides them). */
+    templateModalItems?: TemplateModalItem[];
+    /** Controlled template modal: when set with onOpen/onClose, parent controls open state. */
+    showTemplateModal?: boolean;
+    onOpenTemplateModal?: () => void;
+    onCloseTemplateModal?: () => void;
+    /** When provided, used instead of internal handler for selecting template by id. */
+    onSelectTemplateById?: (id: string) => void;
+    /** When provided, used for clearing template (else onSelectTemplate?.(null)). */
+    onClearTemplate?: () => void;
+    /** When provided, called when user accepts suggested template. */
+    onAcceptSuggestedTemplate?: () => void;
+    /** When true, show analyzing state (e.g. for query-based template suggestion). */
+    isAnalyzingQuery?: boolean;
+    /** When provided, called when message/query text changes (for template suggestion matching). */
+    onQueryChange?: (query: string) => void;
+    /** Overrides for left toolbar items (search, zap, lightbulb). e.g. { zap: { enabled: false } } */
+    leftItemsOverrides?: LeftItemsOverrides;
+    /** Overrides for right toolbar items (tag, chip, camera, image, attach, mic). e.g. { camera: { enabled: false } } */
+    rightItemsOverrides?: RightItemsOverrides;
+    /** Customize InputToolBar from outside: className, classNames, leftItems, rightItems, templateButton, callbacks (onContainerClick, etc.), modals, topContent, templateModalClassName. When set, overrides the internal value for that prop. */
+    inputToolBarProps?: InputToolBarPropsOverrides;
+};
+
+export const InputComponent = ({
+    handleSend: handleSendProp,
+    placeholder,
+    modelConfig,
+    onModelConfigChange,
+    textareaClassName,
+    toolBarParentClassName,
+    textareaStyles,
+    isShowMeta = false,
+    showModeSelector = false,
+    showStopButton = false,
+    onStop,
+    inputToolBarParentClass,
+    templates = [],
+    leftItemsOverrides,
+    rightItemsOverrides,
+    inputToolBarProps,
+    selectedTemplate = null,
+    suggestedTemplate = null,
+    onSelectTemplate,
+    templateSelectedLabel: templateSelectedLabelProp,
+    templateModalItems: templateModalItemsProp,
+    showTemplateModal: showTemplateModalProp,
+    onOpenTemplateModal,
+    onCloseTemplateModal,
+    onSelectTemplateById: onSelectTemplateByIdProp,
+    onClearTemplate,
+    onAcceptSuggestedTemplate,
+    isAnalyzingQuery,
+    onQueryChange,
+}: MessageInputProps) => {
+    const [message, setMessage] = useState('');
+    const [sending, setSending] = useState(false);
+    const [attachments, setAttachments] = useState<AttachedFile[]>([]);
+    const [showToast, setShowToast] = useState(false);
+    const [toastMessage, setToastMessage] = useState('');
+    const [showTemplateModal, setShowTemplateModal] = useState(false);
+    const [showProjectSettingsModal, setShowProjectSettingsModal] = useState(false);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const formRef = useRef<HTMLFormElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const { t } = useTranslation('translations');
+
+    const isControlledTemplateModal =
+        showTemplateModalProp !== undefined && onOpenTemplateModal != null && onCloseTemplateModal != null;
+    const setShowTemplateModalEffective = useCallback(
+        (open: boolean) => {
+            if (isControlledTemplateModal) {
+                if (open) onOpenTemplateModal?.();
+                else onCloseTemplateModal?.();
+            } else {
+                setShowTemplateModal(open);
+            }
+        },
+        [isControlledTemplateModal, onOpenTemplateModal, onCloseTemplateModal],
+    );
+
+    // Auto-focus the textarea when component mounts
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, []);
+
+    // Ensure default template is set to 'vite-react' if missing
+    useEffect(() => {
+        if (modelConfig && !modelConfig.template && onModelConfigChange) {
+            onModelConfigChange({ ...modelConfig, template: 'vite-react' as ModelConfig['template'] });
+        }
+    }, [modelConfig, onModelConfigChange]);
+
+    // Clear template selection when switching away from build mode
+    const currentModeForEffect = modelConfig?.mode ?? 'plan';
+    useEffect(() => {
+        if (currentModeForEffect !== 'build') {
+            onSelectTemplate?.(null);
+            setShowTemplateModalEffective(false);
+        }
+    }, [currentModeForEffect, onSelectTemplate, setShowTemplateModalEffective]);
+
+    const showToastMessage = useCallback((msg: string) => {
+        setToastMessage(msg);
+        setShowToast(true);
+        setTimeout(() => setShowToast(false), 3000);
+    }, []);
+
+    const handleSend = useCallback(() => {
+        if (!message.trim() && attachments.length === 0) return;
+        if (!handleSendProp) return;
+
+        setSending(true);
+        handleSendProp(
+            message,
+            attachments.map((a) => a.file),
+        )
+            .then(() => {
+                setMessage('');
+                setAttachments([]);
+                setTimeout(() => {
+                    textareaRef.current?.focus();
+                }, 100);
+            })
+            .finally(() => setSending(false));
+    }, [attachments, handleSendProp, message]);
+
+    const handleSubmit = useCallback(
+        (e: React.FormEvent) => {
+            e.preventDefault();
+            handleSend();
+        },
+        [handleSend],
+    );
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        },
+        [handleSend],
+    );
+
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            const value = e.target.value;
+            setMessage(value);
+            onQueryChange?.(value);
+        },
+        [onQueryChange],
+    );
+
+    const fileToAttached = useCallback(async (file: File): Promise<AttachedFile> => {
+        const id = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+        let dataUrl: string | undefined;
+        if (file.type.startsWith('image/')) {
+            dataUrl = await new Promise<string>((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result as string);
+                reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
+                reader.readAsDataURL(file);
+            });
+        }
+        return {
+            id,
+            name: file.name,
+            size: file.size,
+            file,
+            dataUrl,
+        };
+    }, []);
+
+    const handleFilesSelected = useCallback(
+        async (newFiles: File[]) => {
+            if (attachments.length + newFiles.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;
+            }
+            const newAttachments = await Promise.all(newFiles.map(fileToAttached));
+            setAttachments((prev) => [...prev, ...newAttachments]);
+        },
+        [attachments.length, fileToAttached, showToastMessage, t],
+    );
+
+    const handleRemoveAttachment = useCallback((id: string) => {
+        setAttachments((prev) => prev.filter((a) => a.id !== id));
+    }, []);
+
+    const handleClearAttachments = useCallback(() => {
+        setAttachments([]);
+    }, []);
+
+    const handlePaste = useCallback(
+        (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+            const items = e.clipboardData?.items;
+            if (!items) return;
+            const pastedFiles: File[] = [];
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].kind === 'file') {
+                    const file = items[i].getAsFile();
+                    if (file) pastedFiles.push(file);
+                }
+            }
+            if (pastedFiles.length > 0) {
+                e.preventDefault();
+                handleFilesSelected(pastedFiles);
+            }
+        },
+        [handleFilesSelected],
+    );
+
+    const canSend = Boolean(message.trim() || attachments.length > 0);
+
+    const currentMode = modelConfig?.mode ?? 'plan';
+
+    const handleModeSwitch = useCallback(
+        (mode: 'plan' | 'build') => {
+            if (modelConfig && onModelConfigChange) {
+                onModelConfigChange({ ...modelConfig, mode });
+            }
+        },
+        [modelConfig, onModelConfigChange],
+    );
+
+    const leftItems = useMemo(() => {
+        const base: Record<string, Record<string, unknown>> = {
+            search: {
+                active: currentMode === 'plan',
+                onClick: () => handleModeSwitch('plan'),
+            },
+            zap: { enabled: false },
+            lightbulb: {
+                active: currentMode === 'build',
+                onClick: () => handleModeSwitch('build'),
+            },
+        };
+        if (leftItemsOverrides) {
+            for (const [k, v] of Object.entries(leftItemsOverrides)) {
+                if (v) base[k] = { ...base[k], ...v };
+            }
+        }
+        return getDefaultLeftItems(base as LeftItemsOverrides);
+    }, [currentMode, handleModeSwitch, leftItemsOverrides]);
+
+    const rightItems = useMemo(() => {
+        const base: Record<string, Record<string, unknown>> = {
+            tag: { enabled: false },
+            chip: { enabled: false },
+            camera: { enabled: false },
+            image: { enabled: false },
+            attach: { onClick: () => fileInputRef.current?.click() },
+        };
+        if (rightItemsOverrides) {
+            for (const [k, v] of Object.entries(rightItemsOverrides)) {
+                if (v) base[k] = { ...base[k], ...v };
+            }
+        }
+        const projectSettingsOverride = base.projectSettings as { enabled?: boolean } | undefined;
+        const projectSettingsEnabled = projectSettingsOverride?.enabled === true;
+        if (projectSettingsEnabled && projectSettingsOverride) {
+            base.projectSettings = {
+                ...projectSettingsOverride,
+                enabled: true,
+                onClick: () => setShowProjectSettingsModal(true),
+            };
+        }
+        return getDefaultRightItems(base as RightItemsOverrides);
+    }, [rightItemsOverrides]);
+
+    const templateModalItemsDerived = useMemo(
+        (): TemplateModalItem[] =>
+            templates.map((t) => ({
+                id: t.formExtensionId ?? t.formId,
+                label: t.displayName ?? t.templateName ?? '',
+                description: t.description,
+                category: t.category,
+            })),
+        [templates],
+    );
+    const templateModalItems = templateModalItemsProp ?? templateModalItemsDerived;
+
+    const handleSelectTemplateByIdInternal = useCallback(
+        (id: string) => {
+            const t = templates.find((x) => (x.formExtensionId ?? x.formId) === id);
+            if (t) onSelectTemplate?.(t);
+        },
+        [templates, onSelectTemplate],
+    );
+    const handleSelectTemplateById = onSelectTemplateByIdProp ?? handleSelectTemplateByIdInternal;
+
+    const displayTemplate = selectedTemplate ?? suggestedTemplate;
+    const templateSelectedLabelDerived = displayTemplate?.displayName ?? displayTemplate?.templateName ?? null;
+    const templateSelectedLabel = templateSelectedLabelProp ?? templateSelectedLabelDerived;
+
+    const showTemplateModalEffective = isControlledTemplateModal ? showTemplateModalProp : showTemplateModal;
+    const handleClearTemplate = useCallback(() => {
+        if (onClearTemplate) onClearTemplate();
+        else onSelectTemplate?.(null);
+    }, [onClearTemplate, onSelectTemplate]);
+    const isBuildMode = currentMode === 'build';
+
+    const handleContainerClick = useCallback((e: React.MouseEvent) => {
+        if (!(e.target as HTMLElement).closest('button')) {
+            textareaRef.current?.focus();
+        }
+    }, []);
+
+    // const templateButtonHidden = (leftItemsOverrides?.template as { enabled?: boolean })?.enabled === false;
+    const templateButtonEnabled = (leftItemsOverrides?.template as { enabled?: boolean })?.enabled || false;
+    const projectSettingsModalRender = useCallback(
+        (props: { onClose: () => void }) => {
+            if (!modelConfig || !onModelConfigChange) return null;
+            return (
+                <ProjectSettingsModal
+                    modelConfig={modelConfig}
+                    onModelConfigChange={onModelConfigChange}
+                    onClose={props.onClose}
+                    isShowMeta={isShowMeta}
+                />
+            );
+        },
+        [modelConfig, onModelConfigChange, isShowMeta],
+    );
+
+    const showProjectSettingsModalContent =
+        (rightItemsOverrides?.projectSettings as { enabled?: boolean })?.enabled === true;
+
+    return (
+        <div className={`bg-white ${toolBarParentClassName ?? ''}`}>
+            {showToast && (
+                <div className="fixed top-4 right-4 z-50 rounded-lg border border-orange-200 bg-orange-50 px-4 py-3 text-orange-800 shadow-lg animate-bounce">
+                    <div className="flex items-center">
+                        <svg className="mr-2 h-5 w-5" 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>
+            )}
+
+            <form ref={formRef} onSubmit={handleSubmit} aria-label="Message input form">
+                <InputToolBar
+                    className={`w-full cursor-text overflow-visible rounded-[24px] border border-border/70 bg-card shadow-md ${
+                        inputToolBarParentClass ?? ''
+                    } ${inputToolBarProps?.className ?? ''}`.trim()}
+                    inputConfig={{
+                        value: sending ? '' : message,
+                        onChange: handleChange,
+                        onKeyDown: handleKeyDown,
+                        onPaste: handlePaste,
+                        placeholder: placeholder || 'Message',
+                        disabled: sending,
+                        id: 'message-input',
+                        name: 'message',
+                        inputRef: textareaRef,
+                    }}
+                    topContent={
+                        inputToolBarProps?.topContent !== undefined ? (
+                            inputToolBarProps.topContent
+                        ) : attachments.length > 0 && !sending ? (
+                            <div className="flex flex-col gap-2 px-4 py-3">
+                                {attachments.length > 1 && (
+                                    <div className="flex items-center justify-between">
+                                        <button
+                                            type="button"
+                                            onClick={handleClearAttachments}
+                                            className="px-2 py-1 text-xs text-muted-foreground transition-colors hover:text-destructive"
+                                        >
+                                            Clear all
+                                        </button>
+                                    </div>
+                                )}
+                                <div className="flex flex-wrap gap-2">
+                                    {attachments.map((attachment) => (
+                                        <AttachmentPreview
+                                            key={attachment.id}
+                                            attachment={attachment}
+                                            onRemove={handleRemoveAttachment}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        ) : undefined
+                    }
+                    leftItems={inputToolBarProps?.leftItems ?? leftItems}
+                    leftCustomRender={inputToolBarProps?.leftCustomRender}
+                    templateButton={
+                        inputToolBarProps?.templateButton !== undefined
+                            ? inputToolBarProps.templateButton
+                            : isBuildMode && templateButtonEnabled === true
+                            ? {
+                                  label: '+ Template',
+                                  count: templates.length > 0 ? templates.length : undefined,
+                                  selectedLabel: templateSelectedLabel ?? undefined,
+                                  onClick: () => setShowTemplateModalEffective(true),
+                                  onClearTemplate: handleClearTemplate,
+                                  disabled: sending,
+                              }
+                            : null
+                    }
+                    classNames={
+                        isBuildMode
+                            ? {
+                                  templatePill:
+                                      'rounded-full px-2 py-1 text-xs font-medium border border-border bg-muted/50 text-foreground hover:border-primary hover:bg-primary/5 transition-colors',
+                                  templatePillSelected:
+                                      'rounded-full px-2 py-1 text-xs font-medium border border-primary/20 bg-primary/10 text-primary',
+                                  ...inputToolBarProps?.classNames,
+                              }
+                            : inputToolBarProps?.classNames
+                    }
+                    templateModalConfig={
+                        inputToolBarProps?.templateModalConfig !== undefined
+                            ? inputToolBarProps.templateModalConfig
+                            : isBuildMode && templateButtonEnabled === true
+                            ? {
+                                  isOpen: showTemplateModalEffective,
+                                  onClose: () => setShowTemplateModalEffective(false),
+                                  templates: templateModalItems,
+                                  selectedId: selectedTemplate?.formExtensionId ?? selectedTemplate?.formId ?? null,
+                                  onSelect: handleSelectTemplateById,
+                                  suggestedId:
+                                      suggestedTemplate?.formExtensionId ?? suggestedTemplate?.formId ?? undefined,
+                                  title: 'Choose Template',
+                                  modalClassName: inputToolBarProps?.templateModalClassName,
+                              }
+                            : undefined
+                    }
+                    templateModalRender={inputToolBarProps?.templateModalRender}
+                    rightItems={inputToolBarProps?.rightItems ?? rightItems}
+                    rightCustomRender={inputToolBarProps?.rightCustomRender}
+                    projectSettingsModalOpen={inputToolBarProps?.projectSettingsModalOpen ?? showProjectSettingsModal}
+                    onProjectSettingsModalClose={
+                        inputToolBarProps?.onProjectSettingsModalClose ?? (() => setShowProjectSettingsModal(false))
+                    }
+                    projectSettingsModalRender={
+                        inputToolBarProps?.projectSettingsModalRender ??
+                        (showProjectSettingsModalContent ? projectSettingsModalRender : undefined)
+                    }
+                    micSendButton={
+                        inputToolBarProps?.micSendButton ?? {
+                            hasContent: canSend,
+                            onSend: () => formRef.current?.requestSubmit(),
+                            onMic: () => {
+                                /* Voice input - placeholder */
+                            },
+                            disabled: sending,
+                            isLoading: showStopButton,
+                            onStop: showStopButton ? onStop : undefined,
+                        }
+                    }
+                    onContainerClick={inputToolBarProps?.onContainerClick ?? handleContainerClick}
+                />
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    className="hidden"
+                    aria-hidden
+                    onChange={(e) => {
+                        const selectedFiles = Array.from(e.target.files ?? []);
+                        if (selectedFiles.length > 0) handleFilesSelected(selectedFiles);
+                        e.target.value = '';
+                    }}
+                />
+            </form>
+        </div>
+    );
+};