reactbridge-sdk 0.1.15 → 0.1.17

package/dist/index.js

@@ -62,12 +62,50 @@ class ReactBridgeAPI {
                         timeoutId = setTimeout(() => controller.abort(), timeoutMs);
                     }
                 }
+                // Check if this is a multimodal request (has image or document)
+                const hasFile = request.image || request.document;
+                let headers = Object.assign({ 'X-API-Key': this.config.apiKey }, this.config.headers);
+                let body;
+                if (hasFile) {
+                    // Use FormData for file uploads
+                    const formData = new FormData();
+                    // Add text fields
+                    formData.append('userId', request.userId);
+                    formData.append('query', request.query);
+                    if (request.userName)
+                        formData.append('userName', request.userName);
+                    if (request.userPreferences)
+                        formData.append('userPreferences', request.userPreferences);
+                    if (request.userRecentActivity)
+                        formData.append('userRecentActivity', request.userRecentActivity);
+                    if (request.interfaceState)
+                        formData.append('interfaceState', JSON.stringify(request.interfaceState));
+                    if (request.sessionId)
+                        formData.append('sessionId', request.sessionId);
+                    if (request.modalityHint)
+                        formData.append('modalityHint', request.modalityHint);
+                    // Add files
+                    if (request.image)
+                        formData.append('image', request.image);
+                    if (request.document)
+                        formData.append('document', request.document);
+                    body = formData;
+                    // Don't set Content-Type for FormData - let browser set it with boundary
+                    delete headers['Content-Type'];
+                }
+                else {
+                    // Use JSON for text-only requests
+                    headers['Content-Type'] = 'application/json';
+                    body = JSON.stringify(request);
+                }
+                console.log('Sending request to ReactBridge API:', { url, headers, body, timeoutMs });
                 const response = yield fetch(url, {
                     method: 'POST',
-                    headers: Object.assign({ 'Content-Type': 'application/json', 'X-API-Key': this.config.apiKey }, this.config.headers),
-                    body: JSON.stringify(request),
+                    headers,
+                    body,
                     signal,
                 });
+                console.log('Received response from ReactBridge API:', response);
                 // Clear any manual timeout timer if set
                 if (timeoutId) {
                     clearTimeout(timeoutId);
@@ -93,6 +131,28 @@ class ReactBridgeAPI {
             return this.sendMessage(request);
         });
     }
+    // Helper methods for different request types
+    sendTextRequest(userId, query, context) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = Object.assign({ userId,
+                query }, context);
+            return this.sendMessage(request);
+        });
+    }
+    sendImageRequest(userId_1, imageFile_1) {
+        return __awaiter(this, arguments, void 0, function* (userId, imageFile, query = '', context) {
+            const request = Object.assign({ userId,
+                query, image: imageFile, modalityHint: 'image' }, context);
+            return this.sendMessage(request);
+        });
+    }
+    sendDocumentRequest(userId_1, documentFile_1) {
+        return __awaiter(this, arguments, void 0, function* (userId, documentFile, query = '', context) {
+            const request = Object.assign({ userId,
+                query, document: documentFile, modalityHint: 'document' }, context);
+            return this.sendMessage(request);
+        });
+    }
 }
 
 const lightTheme = {
@@ -283,16 +343,27 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
             previousContextRef.current = currentContext;
         }
     }, [currentContext]);
-    const sendChatQuery = React.useCallback((query) => __awaiter(this, void 0, void 0, function* () {
-        if (!query.trim())
+    const sendChatQuery = React.useCallback((queryOrOptions) => __awaiter(this, void 0, void 0, function* () {
+        const isMultimodal = typeof queryOrOptions === 'object';
+        const query = isMultimodal ? (queryOrOptions.query || '') : queryOrOptions;
+        const image = isMultimodal ? queryOrOptions.image : undefined;
+        const document = isMultimodal ? queryOrOptions.document : undefined;
+        if (!query.trim() && !image && !document)
             return;
         setIsLoading(true);
         setError(null);
-        // Add user message
+        // Add user message with file info if present
+        let messageContent = query;
+        if (image) {
+            messageContent = messageContent ? `${messageContent} [Image: ${image.name}]` : `[Image: ${image.name}]`;
+        }
+        else if (document) {
+            messageContent = messageContent ? `${messageContent} [Document: ${document.name}]` : `[Document: ${document.name}]`;
+        }
         const userMessage = {
             id: `user-${Date.now()}`,
             role: 'user',
-            content: query,
+            content: messageContent,
             timestamp: new Date(),
         };
         setMessages(prev => [...prev, userMessage]);
@@ -307,6 +378,10 @@ function useReactBridge({ onIntentDetected, currentContext, onError, onSpeechSta
                 userRecentActivity: currentContext.userRecentActivity,
                 interfaceState: currentContext.interfaceState,
                 sessionId: sessionId || undefined,
+                // Add multimodal fields
+                image,
+                document,
+                modalityHint: image ? 'image' : document ? 'document' : undefined,
             };
             lastRequestRef.current = request;
             const response = yield api.sendMessage(request);
@@ -448,6 +523,68 @@ const MESSAGE_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org
 // Microphone Icon SVG
 const MIC_ICON_SVG$1 = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
     React.createElement("path", { d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" })));
+// Plus Icon SVG
+const PLUS_ICON_SVG$1 = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })));
+// Photo Icon SVG
+const PHOTO_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" })));
+// File Icon SVG
+const FILE_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" })));
+// Typing Indicator Component
+const TypingIndicator = ({ theme }) => (React.createElement("div", { style: {
+        display: "flex",
+        justifyContent: "flex-start",
+        marginBottom: theme.spacing.md,
+        paddingLeft: theme.spacing.md,
+    } },
+    React.createElement("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            padding: theme.spacing.sm,
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.borderRadius,
+            boxShadow: theme.boxShadow,
+            maxWidth: "70%",
+        } },
+        React.createElement("div", { style: {
+                width: "8px",
+                height: "8px",
+                borderRadius: "50%",
+                backgroundColor: theme.colors.primary,
+                animation: "typing-dot 1.4s infinite ease-in-out",
+                animationDelay: "0s",
+            } }),
+        React.createElement("div", { style: {
+                width: "8px",
+                height: "8px",
+                borderRadius: "50%",
+                backgroundColor: theme.colors.primary,
+                animation: "typing-dot 1.4s infinite ease-in-out",
+                animationDelay: "0.2s",
+            } }),
+        React.createElement("div", { style: {
+                width: "8px",
+                height: "8px",
+                borderRadius: "50%",
+                backgroundColor: theme.colors.primary,
+                animation: "typing-dot 1.4s infinite ease-in-out",
+                animationDelay: "0.4s",
+            } }),
+        React.createElement("style", null, `
+          @keyframes typing-dot {
+            0%, 60%, 100% {
+              transform: translateY(0);
+              opacity: 0.4;
+            }
+            30% {
+              transform: translateY(-10px);
+              opacity: 1;
+            }
+          }
+        `))));
 // Default styling constants for the widget wrapper
 const defaultToggleButtonClass = "fixed bottom-6 right-6 z-40 w-14 h-14 rounded-full shadow-lg text-white bg-blue-600 hover:bg-blue-700 transition-all flex justify-center items-center cursor-pointer text-2xl";
 function ReactBridgeChatbox({ onIntentDetected, currentContext, placeholder = "Type your message...", height = "500px", width = "100%", theme: themeOverride, renderMessage, onError, 
@@ -461,7 +598,7 @@ toggleIcon = MESSAGE_ICON_SVG, // <<< NOW USES THE PURE SVG CONSTANT
 toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat assistant", }) {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = Object.assign(Object.assign({}, contextTheme), themeOverride);
-    const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput } = useReactBridge({
+    const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput, } = useReactBridge({
         onIntentDetected,
         currentContext,
         onError,
@@ -473,7 +610,12 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
     const [inputValue, setInputValue] = React.useState("");
     // New: Manage widget open/closed state
     const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    // Upload functionality state
+    const [isUploadMenuOpen, setIsUploadMenuOpen] = React.useState(false);
+    const [selectedFile, setSelectedFile] = React.useState(null);
+    const [filePreview, setFilePreview] = React.useState(null);
     const messagesEndRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     // Fallback styles for header
     const finalHeaderBgColor = headerBgColor || theme.colors.primary;
     const finalTitleTextColor = titleTextColor || "#ffffff"; // Default to white for contrast
@@ -482,14 +624,92 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
         var _a;
         (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
     }, [messages]);
+    // Close upload menu and widget when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsUploadMenuOpen(false);
+                if (isOpen) {
+                    setIsOpen(false);
+                }
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isUploadMenuOpen, isOpen]);
     const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
         e.preventDefault();
-        if (!inputValue.trim() || isLoading)
+        if ((!inputValue.trim() && !selectedFile) || isLoading)
             return;
+        const query = inputValue.trim();
         setInputValue("");
-        // TODO: Integrate multimodal logic here when file is attached
-        yield sendChatQuery(inputValue);
+        // Handle multimodal request
+        if (selectedFile && filePreview) {
+            if (filePreview.type === "image") {
+                yield sendChatQuery({ image: selectedFile, query });
+            }
+            else if (filePreview.type === "document") {
+                yield sendChatQuery({ document: selectedFile, query });
+            }
+        }
+        else {
+            yield sendChatQuery(query);
+        }
+        // Clear file selection after sending
+        setSelectedFile(null);
+        setFilePreview(null);
     });
+    // File validation and handling
+    const validateAndSetFile = (file, type) => {
+        const imageTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+        const documentTypes = [
+            "application/pdf",
+            "application/msword",
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            "text/plain",
+        ];
+        const allowedTypes = type === "image" ? imageTypes : documentTypes;
+        if (!allowedTypes.includes(file.type)) {
+            if (onError) {
+                onError(new Error(`Invalid file type. Please select a valid ${type} file.`));
+            }
+            return false;
+        }
+        setSelectedFile(file);
+        if (type === "image") {
+            const url = URL.createObjectURL(file);
+            setFilePreview({ type: "image", url, name: file.name });
+        }
+        else {
+            setFilePreview({ type: "document", name: file.name });
+        }
+        setIsUploadMenuOpen(false);
+        return true;
+    };
+    const handleFileSelect = (type) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept =
+            type === "image"
+                ? "image/png,image/jpeg,image/jpg,image/webp"
+                : "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain";
+        input.onchange = (e) => {
+            var _a;
+            const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file) {
+                validateAndSetFile(file, type);
+            }
+        };
+        input.click();
+    };
+    const removeFile = () => {
+        if (filePreview === null || filePreview === void 0 ? void 0 : filePreview.url) {
+            URL.revokeObjectURL(filePreview.url);
+        }
+        setSelectedFile(null);
+        setFilePreview(null);
+    };
     const defaultRenderMessage = (message) => {
         const isUser = message.role === "user";
         const isSystem = message.role === "system";
@@ -516,7 +736,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
     // --- RENDER LOGIC FOR 'BASIC' MODE (Original Behavior) ---
     if (renderMode === "basic") {
         // Renders the chat component only, using the height/width props directly
-        return (React.createElement("div", { style: {
+        return (React.createElement("div", { ref: containerRef, style: {
                 width,
                 height,
                 display: "flex",
@@ -532,14 +752,21 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                     overflowY: "auto",
                     padding: theme.spacing.md,
                 } },
-                messages.map((message) => renderMessage ? renderMessage(message) : defaultRenderMessage(message)),
+                messages.map((message) => renderMessage
+                    ? renderMessage(message)
+                    : defaultRenderMessage(message)),
+                isLoading && React.createElement(TypingIndicator, { theme: theme }),
                 React.createElement("div", { ref: messagesEndRef })),
             React.createElement("form", { onSubmit: handleSubmit, style: {
                     padding: theme.spacing.md,
                     borderTop: `1px solid ${theme.colors.border}`,
                     backgroundColor: theme.colors.surface,
                 } },
-                React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm, alignItems: "center" } },
+                React.createElement("div", { style: {
+                        display: "flex",
+                        gap: theme.spacing.sm,
+                        alignItems: "center",
+                    } },
                     React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
                             flex: 1,
                             padding: theme.spacing.sm,
@@ -550,9 +777,65 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                             color: theme.colors.text,
                             outline: "none",
                         } }),
+                    React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
+                            padding: theme.spacing.sm,
+                            backgroundColor: theme.colors.secondary,
+                            color: "#ffffff",
+                            border: "none",
+                            borderRadius: theme.borderRadius,
+                            cursor: isLoading ? "not-allowed" : "pointer",
+                            opacity: isLoading ? 0.5 : 1,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "40px",
+                            height: "40px",
+                        } }, PLUS_ICON_SVG$1),
+                    isUploadMenuOpen && (React.createElement("div", { style: {
+                            position: "absolute",
+                            bottom: "60px",
+                            right: "10px",
+                            backgroundColor: theme.colors.background,
+                            border: `1px solid ${theme.colors.border}`,
+                            borderRadius: theme.borderRadius,
+                            boxShadow: theme.boxShadow,
+                            zIndex: 1000,
+                            minWidth: "150px",
+                        } },
+                        React.createElement("button", { onClick: () => handleFileSelect("image"), style: {
+                                width: "100%",
+                                padding: theme.spacing.md,
+                                border: "none",
+                                backgroundColor: "transparent",
+                                color: theme.colors.text,
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: theme.spacing.sm,
+                                borderRadius: `${theme.borderRadius} ${theme.borderRadius} 0 0`,
+                            } },
+                            PHOTO_ICON_SVG,
+                            "Upload Image"),
+                        React.createElement("button", { onClick: () => handleFileSelect("document"), style: {
+                                width: "100%",
+                                padding: theme.spacing.md,
+                                border: "none",
+                                backgroundColor: "transparent",
+                                color: theme.colors.text,
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: theme.spacing.sm,
+                                borderRadius: `0 0 ${theme.borderRadius} ${theme.borderRadius}`,
+                                borderTop: `1px solid ${theme.colors.border}`,
+                            } },
+                            FILE_ICON_SVG,
+                            "Upload Document"))),
                     React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
                             padding: theme.spacing.sm,
-                            backgroundColor: isListening ? theme.colors.error : theme.colors.secondary,
+                            backgroundColor: isListening
+                                ? theme.colors.error
+                                : theme.colors.secondary,
                             color: "#ffffff",
                             border: "none",
                             borderRadius: theme.borderRadius,
@@ -564,16 +847,55 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                             width: "40px",
                             height: "40px",
                         } }, MIC_ICON_SVG$1),
-                    React.createElement("button", { type: "submit", disabled: isLoading || !inputValue.trim(), style: {
+                    React.createElement("button", { type: "submit", disabled: isLoading || (!inputValue.trim() && !selectedFile), style: {
                             padding: `${theme.spacing.sm} ${theme.spacing.md}`,
                             fontSize: theme.fontSizes.md,
                             backgroundColor: theme.colors.primary,
                             color: "#ffffff",
                             border: "none",
                             borderRadius: theme.borderRadius,
-                            cursor: isLoading || !inputValue.trim() ? "not-allowed" : "pointer",
-                            opacity: isLoading || !inputValue.trim() ? 0.5 : 1,
-                        } }, isLoading ? "Sending..." : "Send")))));
+                            cursor: isLoading || (!inputValue.trim() && !selectedFile)
+                                ? "not-allowed"
+                                : "pointer",
+                            opacity: isLoading || (!inputValue.trim() && !selectedFile) ? 0.5 : 1,
+                        } }, isLoading ? "Sending..." : "Send")),
+                filePreview && (React.createElement("div", { style: {
+                        marginTop: theme.spacing.sm,
+                        padding: theme.spacing.sm,
+                        backgroundColor: theme.colors.surface,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.borderRadius,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: theme.spacing.sm,
+                    } },
+                    filePreview.type === "image" && filePreview.url ? (React.createElement("img", { src: filePreview.url, alt: "Preview", style: {
+                            width: "40px",
+                            height: "40px",
+                            objectFit: "cover",
+                            borderRadius: theme.borderRadius,
+                        } })) : (React.createElement("div", { style: {
+                            width: "40px",
+                            height: "40px",
+                            backgroundColor: theme.colors.secondary,
+                            borderRadius: theme.borderRadius,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        } }, FILE_ICON_SVG)),
+                    React.createElement("div", { style: {
+                            flex: 1,
+                            fontSize: theme.fontSizes.sm,
+                            color: theme.colors.text,
+                        } }, filePreview.name),
+                    React.createElement("button", { type: "button", onClick: removeFile, style: {
+                            padding: "4px",
+                            backgroundColor: "transparent",
+                            border: "none",
+                            color: theme.colors.error,
+                            cursor: "pointer",
+                            fontSize: "18px",
+                        }, title: "Remove file" }, "\u00D7"))))));
     }
     // --- RENDER LOGIC FOR 'STANDARD' MODE (Widget Behavior) ---
     // Determine fixed positioning class for the widget
@@ -589,11 +911,14 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
         return (React.createElement("button", { className: toggleButtonClass, onClick: () => setIsOpen(true), title: toggleButtonTitle, style: Object.assign(Object.assign(Object.assign({ 
                 // Apply widget-specific fixed positioning
                 position: "fixed", zIndex: 40 }, togglePositionClass), { backgroundColor: finalHeaderBgColor }), (toggleButtonClass === defaultToggleButtonClass && {
-                width: '56px', height: '56px', borderRadius: '50%', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+                width: "56px",
+                height: "56px",
+                borderRadius: "50%",
+                boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
             })) }, toggleIcon));
     }
     // Render the full widget when open
-    return (React.createElement("div", { style: Object.assign({ width: width, height: height, display: "flex", flexDirection: "column", boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)", borderRadius: theme.borderRadius, overflow: "hidden", fontFamily: "system-ui, -apple-system, sans-serif", position: "fixed", zIndex: 50 }, widgetPositionClass) },
+    return (React.createElement("div", { ref: containerRef, style: Object.assign({ width: width, height: height, display: "flex", flexDirection: "column", boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)", borderRadius: theme.borderRadius, overflow: "hidden", fontFamily: "system-ui, -apple-system, sans-serif", position: "fixed", zIndex: 50 }, widgetPositionClass) },
         React.createElement("div", { style: {
                 padding: "10px 15px",
                 backgroundColor: finalHeaderBgColor,
@@ -608,7 +933,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                     fontWeight: "bold",
                     fontSize: theme.fontSizes.md,
                 } },
-                titleIcon && (React.createElement("span", { style: { marginRight: theme.spacing.sm, display: "flex", alignItems: "center" } }, titleIcon)),
+                titleIcon && (React.createElement("span", { style: {
+                        marginRight: theme.spacing.sm,
+                        display: "flex",
+                        alignItems: "center",
+                    } }, titleIcon)),
                 titleText),
             React.createElement("button", { onClick: () => setIsOpen(false), style: {
                     background: "none",
@@ -626,13 +955,18 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                 backgroundColor: theme.colors.background,
             } },
             messages.map((message) => renderMessage ? renderMessage(message) : defaultRenderMessage(message)),
+            isLoading && React.createElement(TypingIndicator, { theme: theme }),
             React.createElement("div", { ref: messagesEndRef })),
         React.createElement("form", { onSubmit: handleSubmit, style: {
                 padding: theme.spacing.md,
                 borderTop: `1px solid ${theme.colors.border}`,
                 backgroundColor: theme.colors.surface,
             } },
-            React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm, alignItems: "center" } },
+            React.createElement("div", { style: {
+                    display: "flex",
+                    gap: theme.spacing.sm,
+                    alignItems: "center",
+                } },
                 React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
                         flex: 1,
                         padding: theme.spacing.sm,
@@ -643,9 +977,67 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                         color: theme.colors.text,
                         outline: "none",
                     } }),
+                React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
+                        padding: theme.spacing.sm,
+                        color: theme.colors.border,
+                        border: "none",
+                        borderRadius: theme.borderRadius,
+                        cursor: isLoading ? "not-allowed" : "pointer",
+                        opacity: isLoading ? 0.5 : 1,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "40px",
+                        height: "40px",
+                    } }, PLUS_ICON_SVG$1),
+                isUploadMenuOpen && (React.createElement("div", { style: {
+                        position: "absolute",
+                        bottom: "60px",
+                        right: "10px",
+                        backgroundColor: theme.colors.background,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.borderRadius,
+                        boxShadow: theme.boxShadow,
+                        zIndex: 1000,
+                        minWidth: "150px",
+                    } },
+                    React.createElement("button", { onClick: (e) => {
+                            e.preventDefault();
+                            handleFileSelect("image");
+                        }, style: {
+                            width: "100%",
+                            padding: theme.spacing.md,
+                            border: "none",
+                            backgroundColor: "transparent",
+                            color: theme.colors.text,
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: theme.spacing.sm,
+                            borderRadius: `${theme.borderRadius} ${theme.borderRadius} 0 0`,
+                        } },
+                        PHOTO_ICON_SVG,
+                        "Upload Image"),
+                    React.createElement("button", { onClick: (e) => {
+                            e.preventDefault();
+                            handleFileSelect("document");
+                        }, style: {
+                            width: "100%",
+                            padding: theme.spacing.md,
+                            border: "none",
+                            backgroundColor: "transparent",
+                            color: theme.colors.text,
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: theme.spacing.sm,
+                            borderRadius: `0 0 ${theme.borderRadius} ${theme.borderRadius}`,
+                            borderTop: `1px solid ${theme.colors.border}`,
+                        } },
+                        FILE_ICON_SVG,
+                        "Upload Document"))),
                 React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
                         padding: theme.spacing.sm,
-                        // backgroundColor: isListening ? theme.colors.error : theme.colors.primary,
                         color: isListening ? theme.colors.primary : theme.colors.border,
                         border: "none",
                         borderRadius: theme.borderRadius,
@@ -657,21 +1049,63 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                         width: "40px",
                         height: "40px",
                     } }, MIC_ICON_SVG$1),
-                React.createElement("button", { type: "submit", disabled: isLoading || !inputValue.trim(), style: {
+                React.createElement("button", { type: "submit", disabled: isLoading || (!inputValue.trim() && !selectedFile), style: {
                         padding: `${theme.spacing.sm} ${theme.spacing.md}`,
                         fontSize: theme.fontSizes.md,
                         backgroundColor: theme.colors.primary,
                         color: theme.colors.background,
                         border: "none",
                         borderRadius: theme.borderRadius,
-                        cursor: isLoading || !inputValue.trim() ? "not-allowed" : "pointer",
-                        opacity: isLoading || !inputValue.trim() ? 0.5 : 1,
-                    } }, isLoading ? "Sending..." : "Send")))));
+                        cursor: isLoading || (!inputValue.trim() && !selectedFile)
+                            ? "not-allowed"
+                            : "pointer",
+                        opacity: isLoading || (!inputValue.trim() && !selectedFile) ? 0.5 : 1,
+                    } }, isLoading ? "Sending..." : "Send")),
+            filePreview && (React.createElement("div", { style: {
+                    marginTop: theme.spacing.sm,
+                    padding: theme.spacing.sm,
+                    backgroundColor: theme.colors.surface,
+                    border: `1px solid ${theme.colors.border}`,
+                    borderRadius: theme.borderRadius,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: theme.spacing.sm,
+                } },
+                filePreview.type === "image" && filePreview.url ? (React.createElement("img", { src: filePreview.url, alt: "Preview", style: {
+                        width: "40px",
+                        height: "40px",
+                        objectFit: "cover",
+                        borderRadius: theme.borderRadius,
+                    } })) : (React.createElement("div", { style: {
+                        width: "40px",
+                        height: "40px",
+                        backgroundColor: theme.colors.secondary,
+                        borderRadius: theme.borderRadius,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    } }, FILE_ICON_SVG)),
+                React.createElement("div", { style: {
+                        flex: 1,
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.text,
+                    } }, filePreview.name),
+                React.createElement("button", { type: "button", onClick: removeFile, style: {
+                        padding: "4px",
+                        backgroundColor: "transparent",
+                        border: "none",
+                        color: theme.colors.error,
+                        cursor: "pointer",
+                        fontSize: "18px",
+                    }, title: "Remove file" }, "\u00D7"))))));
 }
 
 // Microphone Icon SVG
 const MIC_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
     React.createElement("path", { d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" })));
+// Plus Icon SVG
+const PLUS_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })));
 function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Search...', width = '100%', maxResults = 5, theme: themeOverride, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }) {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = Object.assign(Object.assign({}, contextTheme), themeOverride);
@@ -686,12 +1120,17 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
     });
     const [inputValue, setInputValue] = React.useState('');
     const [isOpen, setIsOpen] = React.useState(false);
+    const [isUploadMenuOpen, setIsUploadMenuOpen] = React.useState(false);
+    const [selectedFile, setSelectedFile] = React.useState(null);
+    const [filePreview, setFilePreview] = React.useState(null);
     const containerRef = React.useRef(null);
-    // Close dropdown when clicking outside
+    const fileInputRef = React.useRef(null);
+    // Close dropdown and upload menu when clicking outside
     React.useEffect(() => {
         const handleClickOutside = (event) => {
             if (containerRef.current && !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
+                setIsUploadMenuOpen(false);
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
@@ -703,12 +1142,78 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
             setIsOpen(true);
         }
     }, [messages]);
+    const handleFileSelect = (type) => {
+        if (fileInputRef.current) {
+            fileInputRef.current.accept = type === 'image'
+                ? 'image/png,image/jpeg,image/jpg,image/webp'
+                : 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain';
+            fileInputRef.current.click();
+        }
+        setIsUploadMenuOpen(false);
+    };
+    const handleFileChange = (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        // Validate file type
+        const imageTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
+        const documentTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain'];
+        const allowedTypes = file.type.startsWith('image/') ? imageTypes : documentTypes;
+        if (!allowedTypes.includes(file.type)) {
+            if (onError) {
+                onError(new Error(`Invalid file type. Please select a valid ${file.type.startsWith('image/') ? 'image' : 'document'} file.`));
+            }
+            return;
+        }
+        // Validate file size (10MB limit)
+        const maxSize = 10 * 1024 * 1024; // 10MB
+        if (file.size > maxSize) {
+            if (onError) {
+                onError(new Error('File size too large. Please select a file smaller than 10MB.'));
+            }
+            return;
+        }
+        setSelectedFile(file);
+        // Create preview for images
+        if (file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                var _a;
+                setFilePreview((_a = e.target) === null || _a === void 0 ? void 0 : _a.result);
+            };
+            reader.readAsDataURL(file);
+        }
+        else {
+            // For documents, show file name
+            setFilePreview(file.name);
+        }
+    };
+    const removeFile = () => {
+        setSelectedFile(null);
+        setFilePreview(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
     const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
         e.preventDefault();
-        if (!inputValue.trim() || isLoading)
+        if ((!inputValue.trim() && !selectedFile) || isLoading)
             return;
-        yield sendChatQuery(inputValue);
+        const query = inputValue.trim();
         setInputValue('');
+        // Handle multimodal request
+        if (selectedFile && filePreview) {
+            yield sendChatQuery({
+                query,
+                image: selectedFile.type.startsWith('image/') ? selectedFile : undefined,
+                document: selectedFile.type.startsWith('image/') ? undefined : selectedFile,
+            });
+            removeFile();
+        }
+        else {
+            yield sendChatQuery(query);
+        }
     });
     // Get only assistant messages (not system messages)
     const displayMessages = messages
@@ -721,10 +1226,11 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
         } },
         React.createElement("form", { onSubmit: handleSubmit },
             React.createElement("div", { style: { position: 'relative' } },
-                React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => displayMessages.length > 0 && setIsOpen(true), placeholder: placeholder, disabled: isLoading, style: {
+                React.createElement("input", { ref: fileInputRef, type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+                React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => displayMessages.length > 0 && setIsOpen(true), placeholder: selectedFile ? `Search with ${selectedFile.name}...` : placeholder, disabled: isLoading, style: {
                         width: '100%',
                         padding: theme.spacing.md,
-                        paddingRight: '140px', // Increased to make room for both mic and search buttons
+                        paddingRight: '180px', // Increased to make room for plus, mic, and search buttons
                         fontSize: theme.fontSizes.md,
                         border: `1px solid ${theme.colors.border}`,
                         borderRadius: theme.borderRadius,
@@ -733,6 +1239,56 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         outline: 'none',
                         boxSizing: 'border-box',
                     } }),
+                React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Upload file", style: {
+                        position: 'absolute',
+                        right: '105px', // Position before the mic button
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        padding: theme.spacing.sm,
+                        marginRight: theme.spacing.xs,
+                        color: theme.colors.border,
+                        border: "none",
+                        borderRadius: theme.borderRadius,
+                        cursor: isLoading ? "not-allowed" : "pointer",
+                        opacity: isLoading ? 0.5 : 1,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "32px",
+                        height: "32px",
+                    } }, PLUS_ICON_SVG),
+                isUploadMenuOpen && (React.createElement("div", { style: {
+                        position: 'absolute',
+                        right: '105px',
+                        top: '100%',
+                        marginTop: theme.spacing.xs,
+                        backgroundColor: theme.colors.background,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.borderRadius,
+                        boxShadow: theme.boxShadow,
+                        zIndex: 1000,
+                        minWidth: '120px',
+                    } },
+                    React.createElement("button", { type: "button", onClick: () => handleFileSelect('image'), style: {
+                            width: '100%',
+                            padding: theme.spacing.sm,
+                            backgroundColor: 'transparent',
+                            border: 'none',
+                            color: theme.colors.text,
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            fontSize: theme.fontSizes.sm,
+                        } }, "\uD83D\uDCF7 Image"),
+                    React.createElement("button", { type: "button", onClick: () => handleFileSelect('document'), style: {
+                            width: '100%',
+                            padding: theme.spacing.sm,
+                            backgroundColor: 'transparent',
+                            border: 'none',
+                            color: theme.colors.text,
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            fontSize: theme.fontSizes.sm,
+                        } }, "\uD83D\uDCC4 Document"))),
                 React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
                         position: 'absolute',
                         right: '70px', // Position before the search button
@@ -740,7 +1296,6 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         transform: 'translateY(-50%)',
                         padding: theme.spacing.sm,
                         marginRight: theme.spacing.xs,
-                        // backgroundColor: isListening ? theme.colors.error : theme.colors.primary,
                         color: isListening ? theme.colors.primary : theme.colors.border,
                         border: "none",
                         borderRadius: theme.borderRadius,
@@ -752,7 +1307,7 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         width: "32px",
                         height: "32px",
                     } }, MIC_ICON_SVG),
-                React.createElement("button", { type: "submit", disabled: isLoading || !inputValue.trim(), style: {
+                React.createElement("button", { type: "submit", disabled: isLoading || (!inputValue.trim() && !selectedFile), style: {
                         position: 'absolute',
                         right: theme.spacing.sm,
                         top: '50%',
@@ -763,9 +1318,54 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = 'Se
                         color: theme.colors.background,
                         border: 'none',
                         borderRadius: theme.borderRadius,
-                        cursor: isLoading || !inputValue.trim() ? 'not-allowed' : 'pointer',
-                        opacity: isLoading || !inputValue.trim() ? 0.5 : 1,
-                    } }, isLoading ? 'Searching...' : 'Search'))),
+                        cursor: isLoading || (!inputValue.trim() && !selectedFile) ? 'not-allowed' : 'pointer',
+                        opacity: isLoading || (!inputValue.trim() && !selectedFile) ? 0.5 : 1,
+                    } }, isLoading ? 'Searching...' : 'Search')),
+            selectedFile && filePreview && (React.createElement("div", { style: {
+                    marginTop: theme.spacing.sm,
+                    padding: theme.spacing.sm,
+                    backgroundColor: theme.colors.surface,
+                    border: `1px solid ${theme.colors.border}`,
+                    borderRadius: theme.borderRadius,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: theme.spacing.sm,
+                } },
+                selectedFile.type.startsWith('image/') ? (React.createElement("img", { src: filePreview, alt: "Preview", style: {
+                        width: '40px',
+                        height: '40px',
+                        objectFit: 'cover',
+                        borderRadius: theme.borderRadius,
+                    } })) : (React.createElement("div", { style: {
+                        width: '40px',
+                        height: '40px',
+                        backgroundColor: theme.colors.primary,
+                        borderRadius: theme.borderRadius,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: theme.colors.background,
+                        fontSize: theme.fontSizes.lg,
+                    } }, "\uD83D\uDCC4")),
+                React.createElement("div", { style: { flex: 1, fontSize: theme.fontSizes.sm, color: theme.colors.text } },
+                    React.createElement("div", { style: { fontWeight: 'bold' } }, selectedFile.name),
+                    React.createElement("div", { style: { color: theme.colors.textSecondary } },
+                        (selectedFile.size / 1024 / 1024).toFixed(2),
+                        " MB")),
+                React.createElement("button", { type: "button", onClick: removeFile, style: {
+                        padding: theme.spacing.xs,
+                        backgroundColor: 'transparent',
+                        border: 'none',
+                        color: theme.colors.textSecondary,
+                        cursor: 'pointer',
+                        borderRadius: theme.borderRadius,
+                        width: '24px',
+                        height: '24px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: '18px',
+                    }, title: "Remove file" }, "\u00D7")))),
         isOpen && displayMessages.length > 0 && (React.createElement("div", { style: {
                 position: 'absolute',
                 top: '100%',