@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.3 → 0.1.5

package/dist/ui/MessageInput.js

@@ -0,0 +1,321 @@
+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/ui/MessageList.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/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"}