@plteam/chat-ui/dist/views/form/attachments/FileAttachmentBlock.js

CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript

import * as React from 'react';
import { useChatSlots } from '../../core/ChatSlotsContext';
import { useChatContext } from '../../core/ChatGlobalContext';
import { useThreadContext } from '../../thread/ThreadContext';
import { ChatViewConstants } from '../../ChatViewConstants';
import { Stack } from '@mui/material';
const FileAttachmentBlock = ({ attachmentConfig, isTyping }) => {
    const { slots } = useChatSlots();
    const { enableFileAttachments } = useChatContext();
    const { thread } = useThreadContext();
    const { attachments, handleFileUpload, acceptableFormatToString, inputAccept } = attachmentConfig;
    const cameraRef = React.useRef(null);
    const fileRef = React.useRef(null);
    const onOpenFileDialog = (config) => {
        if (fileRef.current) {
            if (config?.acceptableFileFormat) {
                fileRef.current.setAttribute('accept', acceptableFormatToString(config?.acceptableFileFormat));
            }
            if (config?.multiple === false) {
                fileRef.current?.removeAttribute('multiple');
            }
            fileRef.current?.click();
            if (config?.acceptableFileFormat) {
                fileRef.current.setAttribute('accept', inputAccept);
            }
            if (config?.multiple === false) {
                fileRef.current.setAttribute('multiple', 'true');
            }
        }
    };
    const onOpenDeviceCamera = () => {
        cameraRef.current?.click();
    };
    const onFileUpload = (event) => {
        handleFileUpload(event.target.files);
        if (fileRef.current?.value)
            fileRef.current.value = '';
        if (cameraRef.current?.value)
            cameraRef.current.value = '';
    };
    const disabled = attachments.length >= ChatViewConstants.MAX_ATTACHMENTS_IN_MESSAGE || isTyping || !thread;
    if (!enableFileAttachments)
        return null;
    return (React.createElement(Stack, { alignItems: "center", justifyContent: "center", width: 48, height: 40, position: "relative" },
        React.createElement(slots.attachmentFormButton, { disabled: disabled, onOpenDeviceCamera: onOpenDeviceCamera, onOpenFileDialog: onOpenFileDialog }),
        React.createElement("input", { ref: cameraRef, capture: "environment", type: "file", accept: "image/*,video/*", disabled: isTyping, style: { display: 'none' }, onChange: onFileUpload }),
        React.createElement("input", { ref: fileRef, multiple: true, type: "file", accept: inputAccept, disabled: isTyping, style: { display: 'none' }, onChange: onFileUpload })));
};
export default FileAttachmentBlock;