@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.4.0 → 2.0.0

package/dist/legacy/chatbot/ui/MessageInput.js

@@ -1,321 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import MicIcon from '@mui/icons-material/Mic';
-import MicOffIcon from '@mui/icons-material/MicOff';
-import SendIcon from '@mui/icons-material/Send';
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
-import VolumeOffIcon from '@mui/icons-material/VolumeOff';
-import AttachFileIcon from '@mui/icons-material/AttachFile';
-import CloseIcon from '@mui/icons-material/Close';
-import { IconButton, InputBase, Tooltip } from '@mui/material';
-import * as React from 'react';
-import { useChatBot } from '../context/ChatBotContext';
-import { walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import { actionButton } from './styles/isolatedStyles';
-export const MessageInput = () => {
-    const { inputValue, setInputValue, isLoading, isAITLoading, handleSubmit, uploadAttachment, showError, isMicEnabled, isAwaitingMicGesture, startRecording, stopRecording, textInputRef, autoSendEnabled, setAutoSendEnabled, textToSpeechEnabled, setTextToSpeechEnabled, serviceId, getCurrentModel, props: { placeholder = 'Type a message...' } } = useChatBot();
-    const [pendingAttachments, setPendingAttachments] = React.useState([]);
-    const [isUploading, setIsUploading] = React.useState(false);
-    const fileInputRef = React.useRef(null);
-    // Check if current model is llama (upload not supported)
-    const currentModel = getCurrentModel();
-    const isLlamaModel = currentModel.value === 'llama' || currentModel.value.includes('llama');
-    // Clear pending attachments when switching to llama model
-    React.useEffect(() => {
-        if (isLlamaModel && pendingAttachments.length > 0) {
-            setPendingAttachments([]);
-            // Also clear the file input
-            if (fileInputRef.current) {
-                fileInputRef.current.value = '';
-            }
-        }
-    }, [isLlamaModel, pendingAttachments.length]);
-    const isDisabled = isLoading || isAITLoading || isUploading;
-    const inputPlaceholder = isAITLoading ? walletTextUtils.getWalletText('Loading wallet configuration...', serviceId) : placeholder;
-    const hasContent = React.useCallback(() => (textInputRef.current?.value ?? inputValue).trim().length > 0 || pendingAttachments.length > 0, [inputValue, pendingAttachments.length]);
-    const doSubmit = React.useCallback(async (e) => {
-        if (!hasContent() || isDisabled)
-            return;
-        let attachmentsToSend = [];
-        if (pendingAttachments.length > 0) {
-            setIsUploading(true);
-            const uploadErrors = [];
-            try {
-                for (const { attachment, file } of pendingAttachments) {
-                    try {
-                        const res = await uploadAttachment(file);
-                        if ('error' in res) {
-                            uploadErrors.push(`${attachment.name}: ${res.error || 'Upload failed'}`);
-                            continue; // Continue with other files instead of returning
-                        }
-                        attachmentsToSend.push({
-                            type: attachment.type,
-                            url: res.url,
-                            name: attachment.name,
-                            mimeType: attachment.mimeType,
-                            size: attachment.size,
-                        });
-                    }
-                    catch (err) {
-                        const errorMessage = err instanceof Error ? err.message : 'Upload failed';
-                        uploadErrors.push(`${attachment.name}: ${errorMessage}`);
-                        console.error(`Failed to upload ${attachment.name}:`, err);
-                    }
-                }
-                // Show errors if any files failed, but continue if some succeeded
-                if (uploadErrors.length > 0) {
-                    if (attachmentsToSend.length === 0) {
-                        // All files failed
-                        showError(`All file uploads failed:\n${uploadErrors.join('\n')}`);
-                        return;
-                    }
-                    else {
-                        // Some files succeeded, some failed
-                        showError(`Some files failed to upload:\n${uploadErrors.join('\n')}\n\n${attachmentsToSend.length} file(s) uploaded successfully; continuing to send.`);
-                    }
-                }
-            }
-            finally {
-                setIsUploading(false);
-            }
-        }
-        setPendingAttachments([]);
-        await handleSubmit(e, attachmentsToSend);
-    }, [
-        hasContent,
-        pendingAttachments,
-        isDisabled,
-        uploadAttachment,
-        showError,
-        handleSubmit,
-    ]);
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            const syntheticEvent = {
-                preventDefault: () => e.preventDefault(),
-                stopPropagation: () => e.stopPropagation(),
-                nativeEvent: e.nativeEvent,
-                currentTarget: e.currentTarget,
-                target: e.target,
-                bubbles: e.bubbles,
-                cancelable: e.cancelable,
-                defaultPrevented: e.defaultPrevented,
-                eventPhase: e.eventPhase,
-                isTrusted: e.isTrusted,
-                timeStamp: e.timeStamp,
-                type: 'submit',
-            };
-            void doSubmit(syntheticEvent);
-        }
-    };
-    const fileToDataURL = (file) => {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = reject;
-            reader.readAsDataURL(file);
-        });
-    };
-    const getFileType = (mimeType) => {
-        if (mimeType.startsWith('image/'))
-            return 'image';
-        return 'file';
-    };
-    const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20MB - matches backend limit
-    const handleFileSelect = async (e) => {
-        const files = e.target.files;
-        if (!files || files.length === 0)
-            return;
-        const newPending = [];
-        const errors = [];
-        for (let i = 0; i < files.length; i++) {
-            const file = files[i];
-            // Check file size before processing
-            if (file.size > MAX_FILE_SIZE) {
-                errors.push(`${file.name}: File exceeds size limit (max 20MB)`);
-                continue;
-            }
-            // Check if file size is exactly at limit (should be < not <=)
-            if (file.size >= MAX_FILE_SIZE) {
-                errors.push(`${file.name}: File exceeds size limit (max 20MB)`);
-                continue;
-            }
-            try {
-                const dataUrl = await fileToDataURL(file);
-                const type = getFileType(file.type);
-                newPending.push({
-                    attachment: {
-                        type,
-                        url: dataUrl,
-                        name: file.name,
-                        mimeType: file.type,
-                        size: file.size,
-                    },
-                    file,
-                });
-            }
-            catch (err) {
-                const errorMessage = err instanceof Error ? err.message : 'Failed to read file';
-                errors.push(`${file.name}: ${errorMessage}`);
-                console.error(`Error reading file ${file.name}:`, err);
-            }
-        }
-        // Show errors if any, but still add successfully processed files
-        if (errors.length > 0) {
-            showError(`Some files could not be added:\n${errors.join('\n')}`);
-        }
-        // Add successfully processed files
-        if (newPending.length > 0) {
-            setPendingAttachments(prev => [...prev, ...newPending]);
-        }
-        if (fileInputRef.current)
-            fileInputRef.current.value = '';
-    };
-    const removeAttachment = (index) => {
-        setPendingAttachments(prev => prev.filter((_, i) => i !== index));
-    };
-    const handleSubmitWithAttachments = (e) => {
-        void doSubmit(e);
-    };
-    return (_jsxs(_Fragment, { children: [isAwaitingMicGesture && (_jsx("div", { role: "status", "aria-live": "polite", css: css `
-            margin: 12px 15px 0 !important;
-            padding: 10px 14px !important;
-            border-radius: 8px !important;
-            border: 1px solid #ffeeba !important;
-            background-color: #fff3cd !important;
-            color: #856404 !important;
-            font-size: 13px !important;
-            line-height: 1.4 !important;
-            z-index: 1000 !important;
-            position: relative !important;
-            display: block !important;
-            visibility: visible !important;
-            opacity: 1 !important;
-          `, children: "\u26A0\uFE0F The microphone needs a user interaction to re-enable. Please click on the page or press any key." })), pendingAttachments.length > 0 && (_jsx("div", { css: css `
-            padding: 10px 15px 0 !important;
-            display: flex !important;
-            flex-wrap: wrap !important;
-            gap: 8px !important;
-            border-top: 1px solid #eee !important;
-          `, children: pendingAttachments.map(({ attachment }, index) => (_jsxs("div", { css: css `
-                position: relative !important;
-                display: inline-block !important;
-                border: 1px solid #ddd !important;
-                border-radius: 8px !important;
-                overflow: hidden !important;
-                background: #f5f5f5 !important;
-              `, children: [attachment.type === 'image' && (_jsx("img", { src: attachment.url, alt: attachment.name, css: css `
-                    max-width: 100px !important;
-                    max-height: 100px !important;
-                    object-fit: cover !important;
-                    display: block !important;
-                  ` })), attachment.type === 'file' && (_jsxs("div", { css: css `
-                    padding: 20px 10px !important;
-                    text-align: center !important;
-                    min-width: 100px !important;
-                    min-height: 100px !important;
-                    display: flex !important;
-                    align-items: center !important;
-                    justify-content: center !important;
-                    flex-direction: column !important;
-                  `, children: [_jsx(AttachFileIcon, { css: css `font-size: 32px !important; color: #666 !important;` }), _jsx("span", { css: css `
-                      font-size: 11px !important;
-                      color: #666 !important;
-                      margin-top: 4px !important;
-                      word-break: break-word !important;
-                      max-width: 80px !important;
-                    `, children: attachment.name })] })), _jsx("button", { onClick: () => removeAttachment(index), css: css `
-                  position: absolute !important;
-                  top: 4px !important;
-                  right: 4px !important;
-                  background: rgba(0, 0, 0, 0.6) !important;
-                  border: none !important;
-                  border-radius: 50% !important;
-                  width: 20px !important;
-                  height: 20px !important;
-                  display: flex !important;
-                  align-items: center !important;
-                  justify-content: center !important;
-                  cursor: pointer !important;
-                  padding: 0 !important;
-                  color: white !important;
-                  font-size: 12px !important;
-                  
-                  &:hover {
-                    background: rgba(0, 0, 0, 0.8) !important;
-                  }
-                `, children: _jsx(CloseIcon, { fontSize: "small" }) })] }, index))) })), _jsxs("div", { css: css `
-          padding: 15px !important;
-          display: flex !important;
-          align-items: center !important;
-          gap: 10px !important;
-          border-top: 1px solid #eee !important;
-        `, children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: "image/*,.pdf,.doc,.docx,.txt,.csv,.xlsx,.xls", onChange: handleFileSelect, css: css `
-            display: none !important;
-          ` }), _jsx(Tooltip, { title: isLlamaModel
-                            ? 'Llama model does not support file upload. Please switch to another model to use this feature.'
-                            : 'Upload file', children: _jsx("span", { children: _jsx(IconButton, { onClick: () => !isLlamaModel && fileInputRef.current?.click(), disabled: isDisabled || isLlamaModel, css: css `
-                padding: 8px !important;
-                color: ${isDisabled || isLlamaModel ? '#ccc' : '#666'} !important;
-                cursor: ${isLlamaModel ? 'not-allowed' : 'pointer'} !important;
-              `, children: _jsx(AttachFileIcon, {}) }) }) }), _jsx(InputBase, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: inputPlaceholder, fullWidth: true, inputProps: {
-                            ref: textInputRef
-                        }, endAdornment: _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: textToSpeechEnabled ? 'Text-to-speech enabled' : 'Text-to-speech disabled', children: _jsx(IconButton, { size: "small", onClick: (e) => {
-                                            e.stopPropagation();
-                                            setTextToSpeechEnabled(!textToSpeechEnabled);
-                                        }, css: css `
-                    padding: 4px !important;
-                    margin-right: 4px !important;
-                    color: ${textToSpeechEnabled ? '#1976d2' : '#9e9e9e'} !important;
-                  `, children: textToSpeechEnabled ? _jsx(VolumeUpIcon, { fontSize: "small" }) : _jsx(VolumeOffIcon, { fontSize: "small" }) }) }), isMicEnabled && (_jsx(Tooltip, { title: autoSendEnabled ? 'Auto send enabled' : 'Auto send disabled', children: _jsx(IconButton, { size: "small", onClick: (e) => {
-                                            e.stopPropagation();
-                                            setAutoSendEnabled(!autoSendEnabled);
-                                        }, css: css `
-                      padding: 4px !important;
-                      margin-right: 4px !important;
-                      color: ${autoSendEnabled ? '#1976d2' : '#9e9e9e'} !important;
-                    `, children: _jsx(SendIcon, { fontSize: "small" }) }) })), _jsx(IconButton, { onClick: () => (isMicEnabled ? stopRecording() : startRecording()), children: isMicEnabled ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {}) })] }), css: css `
-            flex: 1 !important;
-            padding: 10px !important;
-            border: 1px solid #ddd !important;
-            border-radius: 20px !important;
-            outline: none !important;
-            font-size: 14px !important;
-            background-color: #fff !important;
-            height: 40px !important;
-            box-sizing: border-box !important;
-
-            @media (max-width: 768px) {
-              font-size: 16px !important;
-              & input {
-                font-size: 16px !important;
-              }
-            }
-          ` }), _jsxs("button", { onClick: handleSubmitWithAttachments, disabled: isDisabled || !hasContent(), css: css `
-            ${actionButton}
-            padding: 10px 20px !important;
-            border-radius: 20px !important;
-            position: relative !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            height: 40px !important;
-            box-sizing: border-box !important;
-
-            &:disabled {
-              background-color: #e9ecef !important;
-              color: #6c757d !important;
-              cursor: not-allowed !important;
-            }
-
-            &:hover:not(:disabled) {
-              background-color: #0056b3 !important;
-            }
-          `, children: ["Send", (isLoading || isAITLoading || isUploading) && (_jsx("span", { css: css `
-                margin-left: 8px !important;
-                display: flex !important;
-                align-items: center !important;
-              `, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 50 50", children: _jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: "#fff", strokeWidth: "4", strokeDasharray: "31.4 31.4", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }) }) }))] })] })] }));
-};

package/dist/legacy/chatbot/ui/MessageList.d.ts

@@ -1,4 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import * as React from 'react';
-export declare const MessageList: React.FC;
-//# sourceMappingURL=MessageList.d.ts.map

package/dist/legacy/chatbot/ui/MessageList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuT/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAmc/B,CAAC"}