@bytexbyte/nxtlinq-ai-agent-sdk 1.6.31 → 1.6.33

package/dist/components/ui/ChatBotUI.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import * as React from 'react';
 import { css } from '@emotion/react';
+import * as React from 'react';
+import { useDraggable } from '../../core/lib/useDraggable';
+import useLocalStorage from '../../core/lib/useLocalStorage';
+import { useResizable } from '../../core/lib/useResizable';
+import * as walletTextUtils from '../../core/utils/walletTextUtils';
 import { useChatBot } from '../context/ChatBotContext';
-import { PermissionForm } from './PermissionForm';
-import { MessageList } from './MessageList';
 import { MessageInput } from './MessageInput';
-import { PresetMessages } from './PresetMessages';
+import { MessageList } from './MessageList';
 import { ModelSelector } from './ModelSelector';
-import * as walletTextUtils from '../../core/utils/walletTextUtils';
-import { useResizable } from '../../core/lib/useResizable';
-import { useDraggable } from '../../core/lib/useDraggable';
-import useLocalStorage from '../../core/lib/useLocalStorage';
-import { sdkContainer, floatingButton, chatWindow, chatHeader, headerTitle, headerButton, closeButton, modalOverlay, idvBanner, idvBannerTitle, idvBannerText, idvVerifyButton, idvDismissButton, loadingSpinner, successToast, errorToast, warningToast, infoToast, toastCloseButton } from './styles/isolatedStyles';
-import { resizeHandle } from './styles/isolatedStyles';
+import { PermissionForm } from './PermissionForm';
+import { PresetMessages } from './PresetMessages';
+import { chatHeader, chatWindow, closeButton, errorToast, floatingButton, headerButton, headerTitle, idvBanner, idvBannerText, idvBannerTitle, idvDismissButton, idvVerifyButton, infoToast, loadingSpinner, modalOverlay, resizeHandle, sdkContainer, successToast, toastCloseButton, warningToast } from './styles/isolatedStyles';
 // Toast Notification Component
 const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
     const getToastStyles = () => {
@@ -71,10 +70,62 @@ export const ChatBotUI = () => {
     const [showIDVSuggestion, setShowIDVSuggestion] = React.useState(true);
     const [dismissUntil, setDismissUntil] = React.useState(null);
     const [timeRemaining, setTimeRemaining] = React.useState('');
+    const countdownIntervalRef = React.useRef(null);
     // Check if there's a berifyme token in URL (indicating recent berifyme verification)
     const urlParams = new URLSearchParams(window.location.search);
     const hasBerifymeToken = urlParams.get('token') && urlParams.get('method') === 'berifyme';
     const isWalletVerifiedWithBerifyme = walletInfo?.id && walletInfo?.method === 'berifyme';
+    // Helper function to update IDV suggestion state based on storage value
+    const updateIDVSuggestionState = React.useCallback((dismissedValue) => {
+        // Clear any existing countdown interval
+        if (countdownIntervalRef.current) {
+            clearInterval(countdownIntervalRef.current);
+            countdownIntervalRef.current = null;
+        }
+        if (dismissedValue) {
+            const dismissTime = parseInt(dismissedValue);
+            const now = Date.now();
+            const timeLeft = dismissTime - now;
+            if (timeLeft > 0) {
+                setShowIDVSuggestion(false);
+                setDismissUntil(dismissTime);
+                // Calculate initial time remaining immediately
+                const hours = Math.floor(timeLeft / (1000 * 60 * 60));
+                const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+                setTimeRemaining(`${hours}h ${minutes}m`);
+                // Set up countdown interval to update time remaining every minute
+                countdownIntervalRef.current = setInterval(() => {
+                    const remaining = dismissTime - Date.now();
+                    if (remaining > 0) {
+                        const hours = Math.floor(remaining / (1000 * 60 * 60));
+                        const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
+                        setTimeRemaining(`${hours}h ${minutes}m`);
+                    }
+                    else {
+                        setShowIDVSuggestion(true);
+                        setDismissUntil(null);
+                        setTimeRemaining('');
+                        localStorage.removeItem('idv-suggestion-dismissed');
+                        if (countdownIntervalRef.current) {
+                            clearInterval(countdownIntervalRef.current);
+                            countdownIntervalRef.current = null;
+                        }
+                    }
+                }, 60000);
+            }
+            else {
+                localStorage.removeItem('idv-suggestion-dismissed');
+                setShowIDVSuggestion(true);
+                setDismissUntil(null);
+                setTimeRemaining('');
+            }
+        }
+        else {
+            setShowIDVSuggestion(true);
+            setDismissUntil(null);
+            setTimeRemaining('');
+        }
+    }, []);
     // Check if IDV suggestion should be shown
     React.useEffect(() => {
         const shouldShowBanner = hitAddress &&
@@ -91,42 +142,7 @@ export const ChatBotUI = () => {
                     !isNeedSignInWithWallet;
                 if (shouldShowBannerAfterDelay) {
                     const dismissed = localStorage.getItem('idv-suggestion-dismissed');
-                    if (dismissed) {
-                        const dismissTime = parseInt(dismissed);
-                        const now = Date.now();
-                        const timeLeft = dismissTime - now;
-                        if (timeLeft > 0) {
-                            setShowIDVSuggestion(false);
-                            setDismissUntil(dismissTime);
-                            const countdownTimer = setInterval(() => {
-                                const remaining = dismissTime - Date.now();
-                                if (remaining > 0) {
-                                    const hours = Math.floor(remaining / (1000 * 60 * 60));
-                                    const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
-                                    setTimeRemaining(`${hours}h ${minutes}m`);
-                                }
-                                else {
-                                    setShowIDVSuggestion(true);
-                                    setDismissUntil(null);
-                                    setTimeRemaining('');
-                                    localStorage.removeItem('idv-suggestion-dismissed');
-                                    clearInterval(countdownTimer);
-                                }
-                            }, 60000);
-                            return () => clearInterval(countdownTimer);
-                        }
-                        else {
-                            localStorage.removeItem('idv-suggestion-dismissed');
-                            setShowIDVSuggestion(true);
-                            setDismissUntil(null);
-                            setTimeRemaining('');
-                        }
-                    }
-                    else {
-                        setShowIDVSuggestion(true);
-                        setDismissUntil(null);
-                        setTimeRemaining('');
-                    }
+                    updateIDVSuggestionState(dismissed);
                 }
                 else {
                     setShowIDVSuggestion(false);
@@ -134,7 +150,14 @@ export const ChatBotUI = () => {
                     setTimeRemaining('');
                 }
             }, 1000);
-            return () => clearTimeout(timer);
+            return () => {
+                clearTimeout(timer);
+                // Clear countdown interval on cleanup
+                if (countdownIntervalRef.current) {
+                    clearInterval(countdownIntervalRef.current);
+                    countdownIntervalRef.current = null;
+                }
+            };
         }
         else {
             // Don't show when:
@@ -144,13 +167,39 @@ export const ChatBotUI = () => {
             setDismissUntil(null);
             setTimeRemaining('');
         }
-    }, [hitAddress, walletInfo, isNeedSignInWithWallet, props.requireWalletIDVVerification]);
+    }, [hitAddress, walletInfo, isNeedSignInWithWallet, props.requireWalletIDVVerification, updateIDVSuggestionState]);
     const handleDismissIDV = () => {
         const dismissSeconds = props.idvBannerDismissSeconds || 86400;
         const dismissTime = Date.now() + (dismissSeconds * 1000);
         localStorage.setItem('idv-suggestion-dismissed', dismissTime.toString());
         setShowIDVSuggestion(false);
         setDismissUntil(dismissTime);
+        // Calculate and set initial time remaining
+        const initialHours = Math.floor(dismissSeconds / 3600);
+        const initialMinutes = Math.floor((dismissSeconds % 3600) / 60);
+        setTimeRemaining(`${initialHours}h ${initialMinutes}m`);
+        // Set up countdown interval
+        if (countdownIntervalRef.current) {
+            clearInterval(countdownIntervalRef.current);
+        }
+        countdownIntervalRef.current = setInterval(() => {
+            const remaining = dismissTime - Date.now();
+            if (remaining > 0) {
+                const remainingHours = Math.floor(remaining / (1000 * 60 * 60));
+                const remainingMinutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
+                setTimeRemaining(`${remainingHours}h ${remainingMinutes}m`);
+            }
+            else {
+                setShowIDVSuggestion(true);
+                setDismissUntil(null);
+                setTimeRemaining('');
+                localStorage.removeItem('idv-suggestion-dismissed');
+                if (countdownIntervalRef.current) {
+                    clearInterval(countdownIntervalRef.current);
+                    countdownIntervalRef.current = null;
+                }
+            }
+        }, 60000);
         const hours = Math.floor(dismissSeconds / 3600);
         const minutes = Math.floor((dismissSeconds % 3600) / 60);
         const timeText = hours > 0

package/dist/components/ui/MessageInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageInput.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EA2LhC,CAAC"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageInput.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EA6ehC,CAAC"}

package/dist/components/ui/MessageInput.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+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';
@@ -6,19 +6,178 @@ 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 * as walletTextUtils from '../../core/utils/walletTextUtils';
 import { actionButton } from './styles/isolatedStyles';
 export const MessageInput = () => {
-    const { inputValue, setInputValue, isLoading, isAITLoading, handleSubmit, isMicEnabled, isAwaitingMicGesture, startRecording, stopRecording, textInputRef, autoSendEnabled, setAutoSendEnabled, textToSpeechEnabled, setTextToSpeechEnabled, serviceId, props: { placeholder = 'Type a message...' } } = useChatBot();
-    const isDisabled = isLoading || isAITLoading;
+    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 || '上傳失敗'}`);
+                            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 : '上傳失敗';
+                        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(`所有檔案上傳失敗：\n${uploadErrors.join('\n')}`);
+                        return;
+                    }
+                    else {
+                        // Some files succeeded, some failed
+                        showError(`部分檔案上傳失敗：\n${uploadErrors.join('\n')}\n\n已成功上傳 ${attachmentsToSend.length} 個檔案，將繼續發送。`);
+                    }
+                }
+            }
+            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();
-            handleSubmit(e);
+            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}: 檔案大小超過限制（最大 20MB）`);
+                continue;
+            }
+            // Check if file size is exactly at limit (should be < not <=)
+            if (file.size >= MAX_FILE_SIZE) {
+                errors.push(`${file.name}: 檔案大小超過限制（最大 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 : '讀取檔案失敗';
+                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(`部分檔案無法上傳：\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;
@@ -34,13 +193,74 @@ export const MessageInput = () => {
             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." })), _jsxs("div", { css: css `
+          `, 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(InputBase, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: inputPlaceholder, fullWidth: true, inputProps: {
+        `, 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();
@@ -66,7 +286,7 @@ export const MessageInput = () => {
             background-color: #fff !important;
             height: 40px !important;
             box-sizing: border-box !important;
-          ` }), _jsxs("button", { onClick: (e) => handleSubmit(e), disabled: isDisabled || !inputValue.trim(), css: css `
+          ` }), _jsxs("button", { onClick: handleSubmitWithAttachments, disabled: isDisabled || !hasContent(), css: css `
             ${actionButton}
             padding: 10px 20px !important;
             border-radius: 20px !important;
@@ -86,7 +306,7 @@ export const MessageInput = () => {
             &:hover:not(:disabled) {
               background-color: #0056b3 !important;
             }
-          `, children: ["Send", (isLoading || isAITLoading) && (_jsx("span", { css: css `
+          `, children: ["Send", (isLoading || isAITLoading || isUploading) && (_jsx("span", { css: css `
                 margin-left: 8px !important;
                 display: flex !important;
                 align-items: center !important;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkC/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAsO/B,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmC/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA0T/B,CAAC"}

package/dist/components/ui/MessageList.js

@@ -5,6 +5,7 @@ import { css } from '@emotion/react';
 import { convertUrlsToLinks } from '../../core/utils/urlUtils';
 import * as walletTextUtils from '../../core/utils/walletTextUtils';
 import { useChatBot } from '../context/ChatBotContext';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
 import { messageListContainer, messageBubble, userMessage, messageContent, userMessageContent, retryMessageContent, chatbotButton, connectedButton, loadingIndicator, modelIndicator, modelBadge, modelDot, streamingCaret, streamingContainer, streamingHeader, streamingIcon, streamingToolName, streamingProgressPercent, streamingProgressContainer, streamingProgressBar, streamingPartialText, streamingStatus, streamingStepsContainer, streamingStepItem, streamingStepCheck } from './styles/isolatedStyles';
 export const MessageList = () => {
     const { messages, isLoading, isTtsProcessing, requiresGesture, retryTtsWithGesture, connectWallet, signInWallet, hitAddress, isAutoConnecting, isNeedSignInWithWallet, enableAIT, isAITLoading, isAITEnabling, sendMessage, permissions, availableModels, serviceId } = useChatBot();
@@ -66,7 +67,49 @@ export const MessageList = () => {
                             ? userMessageContent
                             : message.metadata?.isRetry
                                 ? retryMessageContent
-                                : messageContent, children: [message.metadata?.isRetry && (_jsx("span", { css: css `margin-right: 8px !important; font-size: 14px !important;`, children: "\uD83D\uDD04" })), message.isStreaming && message.partialContent && (_jsxs("div", { css: streamingPartialText, children: [message.role === 'assistant' ? convertUrlsToLinks(message.partialContent) : message.partialContent, _jsx("span", { css: streamingCaret, children: "\u258A" })] })), message.isStreaming && !message.partialContent && message.role === 'assistant' && (_jsxs("div", { css: streamingContainer, children: [_jsxs("div", { css: streamingHeader, children: [_jsx("span", { css: streamingIcon, children: "\uD83D\uDD27" }), _jsx("span", { css: streamingToolName, children: message.streamingToolName || 'Processing' }), message.streamingProgress !== undefined && (_jsxs("span", { css: streamingProgressPercent, children: [message.streamingProgress, "%"] }))] }), message.streamingProgress !== undefined && (_jsx("div", { css: streamingProgressContainer, children: _jsx("div", { css: [streamingProgressBar, css `width: ${message.streamingProgress}% !important;`] }) })), message.streamingStatus && (_jsx("div", { css: streamingStatus, children: message.streamingStatus })), message.streamingSteps && message.streamingSteps.length > 0 && (_jsx("div", { css: streamingStepsContainer, children: message.streamingSteps.map((step, idx) => (_jsxs("div", { css: streamingStepItem, children: [_jsx("span", { css: streamingStepCheck, children: "\u2713" }), _jsx("span", { children: step })] }, idx))) }))] })), !message.isStreaming && (message.role === 'assistant' ? convertUrlsToLinks(message.content) : message.content), message.button && (_jsx("div", { css: css `margin-top: 10px !important;`, children: _jsx("button", { onClick: () => {
+                                : messageContent, children: [message.metadata?.isRetry && (_jsx("span", { css: css `margin-right: 8px !important; font-size: 14px !important;`, children: "\uD83D\uDD04" })), message.attachments && message.attachments.length > 0 && (_jsx("div", { css: css `
+                  display: flex !important;
+                  flex-wrap: wrap !important;
+                  gap: 8px !important;
+                  margin-bottom: ${message.content ? '10px' : '0'} !important;
+                `, children: message.attachments.map((attachment, idx) => (_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;
+                      max-width: 200px !important;
+                    `, children: [attachment.type === 'image' && (_jsx("img", { src: attachment.url, alt: attachment.name, css: css `
+                          max-width: 200px !important;
+                          max-height: 200px !important;
+                          object-fit: cover !important;
+                          display: block !important;
+                          cursor: pointer !important;
+                        `, onClick: () => {
+                                                // Open image in new window on click
+                                                const newWindow = window.open();
+                                                if (newWindow) {
+                                                    newWindow.document.write(`<img src="${attachment.url}" style="max-width: 100%; height: auto;" />`);
+                                                }
+                                            } })), attachment.type === 'file' && (_jsxs("div", { css: css `
+                          padding: 20px 15px !important;
+                          text-align: center !important;
+                          min-width: 150px !important;
+                          display: flex !important;
+                          align-items: center !important;
+                          justify-content: center !important;
+                          flex-direction: column !important;
+                          gap: 8px !important;
+                        `, children: [_jsx(AttachFileIcon, { css: css `font-size: 32px !important; color: #666 !important;` }), _jsx("span", { css: css `
+                            font-size: 12px !important;
+                            color: #666 !important;
+                            word-break: break-word !important;
+                            max-width: 120px !important;
+                          `, children: attachment.name }), attachment.size && (_jsxs("span", { css: css `
+                              font-size: 10px !important;
+                              color: #999 !important;
+                            `, children: [(attachment.size / 1024).toFixed(1), " KB"] }))] }))] }, idx))) })), message.isStreaming && message.partialContent && (_jsxs("div", { css: streamingPartialText, children: [message.role === 'assistant' ? convertUrlsToLinks(message.partialContent) : message.partialContent, _jsx("span", { css: streamingCaret, children: "\u258A" })] })), message.isStreaming && !message.partialContent && message.role === 'assistant' && (_jsxs("div", { css: streamingContainer, children: [_jsxs("div", { css: streamingHeader, children: [_jsx("span", { css: streamingIcon, children: "\uD83D\uDD27" }), _jsx("span", { css: streamingToolName, children: message.streamingToolName || 'Processing' }), message.streamingProgress !== undefined && (_jsxs("span", { css: streamingProgressPercent, children: [message.streamingProgress, "%"] }))] }), message.streamingProgress !== undefined && (_jsx("div", { css: streamingProgressContainer, children: _jsx("div", { css: [streamingProgressBar, css `width: ${message.streamingProgress}% !important;`] }) })), message.streamingStatus && (_jsx("div", { css: streamingStatus, children: message.streamingStatus })), message.streamingSteps && message.streamingSteps.length > 0 && (_jsx("div", { css: streamingStepsContainer, children: message.streamingSteps.map((step, idx) => (_jsxs("div", { css: streamingStepItem, children: [_jsx("span", { css: streamingStepCheck, children: "\u2713" }), _jsx("span", { children: step })] }, idx))) }))] })), !message.isStreaming && (message.role === 'assistant' ? convertUrlsToLinks(message.content) : message.content), message.button && (_jsx("div", { css: css `margin-top: 10px !important;`, children: _jsx("button", { onClick: () => {
                                         if (message.button && message.button.trim()) {
                                             handleButtonClick(message.button, message);
                                         }

package/dist/core/lib/useLocalStorage.d.ts

@@ -1,3 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
+/**
+ * Custom hook for managing localStorage with React state and cross-tab synchronization
+ * Automatically syncs changes across browser tabs using StorageEvent
+ *
+ * @param key - The key to store the value under in localStorage
+ * @param defaultValue - The default value to use if no value is stored
+ * @returns [storedValue, setStoredValue, isInitialized]
+ */
 export default function useLocalStorage<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>, boolean];
 //# sourceMappingURL=useLocalStorage.d.ts.map

package/dist/core/lib/useLocalStorage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../../../src/core/lib/useLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEtE,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAoBlH"}
+{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../../../src/core/lib/useLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAE9E;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CA8ElH"}