reactbridge-sdk 0.2.14 → 0.2.16

package/dist/index.js

@@ -733,6 +733,38 @@ const TypingIndicator = ({ theme }) => (React.createElement("div", { style: {
             }
           }
         `))));
+// Expandable Message Component with Show More functionality
+const ExpandableMessage = ({ content, isUser, theme, isExpanded, onToggleExpand, }) => {
+    const characterLimit = 300;
+    const isLongMessage = content.length > characterLimit;
+    const displayText = isExpanded ? content : content.substring(0, characterLimit);
+    return (React.createElement("div", { style: {
+            maxWidth: "70%",
+            padding: theme.spacing.md,
+            borderRadius: theme.borderRadius,
+            backgroundColor: isUser
+                ? theme.colors.primary
+                : theme.colors.surface,
+            color: isUser ? "#ffffff" : theme.colors.text,
+            fontSize: theme.fontSizes.md,
+            boxShadow: theme.boxShadow,
+            wordWrap: "break-word",
+            whiteSpace: "pre-wrap",
+            overflowWrap: "break-word",
+        } },
+        React.createElement("div", { style: { marginBottom: isLongMessage && !isExpanded ? "8px" : "0" } }, displayText),
+        isLongMessage && (React.createElement("button", { onClick: onToggleExpand, style: {
+                background: "none",
+                border: "none",
+                color: isUser ? "#ffffff" : theme.colors.primary,
+                cursor: "pointer",
+                textDecoration: "underline",
+                padding: "0",
+                marginTop: isExpanded ? "8px" : "0",
+                fontSize: theme.fontSizes.sm,
+                fontWeight: "bold",
+            } }, isExpanded ? "Show less" : "Show more..."))));
+};
 // 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, 
@@ -762,7 +794,12 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
     const [isUploadMenuOpen, setIsUploadMenuOpen] = React.useState(false);
     const [selectedFile, setSelectedFile] = React.useState(null);
     const [filePreview, setFilePreview] = React.useState(null);
+    // Track expanded messages by ID
+    const [expandedMessages, setExpandedMessages] = React.useState(new Set());
+    // Track textarea height
+    const [textareaHeight, setTextareaHeight] = React.useState(40);
     const messagesEndRef = React.useRef(null);
+    const textareaRef = React.useRef(null);
     const containerRef = React.useRef(null);
     // Fallback styles for header
     const finalHeaderBgColor = headerBgColor || theme.colors.primary;
@@ -772,26 +809,89 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
         var _a;
         (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
     }, [messages]);
+    // Auto-scroll to bottom when widget opens
+    React.useEffect(() => {
+        if (isOpen && renderMode === "standard") {
+            setTimeout(() => {
+                var _a;
+                (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+            }, 100);
+        }
+    }, [isOpen, renderMode]);
+    // Handle textarea height adjustment
+    const handleTextareaChange = React.useCallback((e) => {
+        const textarea = e.target;
+        setInputValue(textarea.value);
+        // Reset height to calculate scroll height
+        textarea.style.height = "auto";
+        const scrollHeight = textarea.scrollHeight;
+        const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
+        const maxHeight = lineHeight * 3; // 3 lines max
+        if (scrollHeight <= maxHeight) {
+            textarea.style.height = scrollHeight + "px";
+            setTextareaHeight(scrollHeight);
+        }
+        else {
+            textarea.style.height = maxHeight + "px";
+            textarea.style.overflowY = "auto";
+            setTextareaHeight(maxHeight);
+        }
+    }, []);
+    // Handle key down for Shift+Enter and Enter submission
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            if (e.shiftKey) {
+                // Shift+Enter: Allow new line (default behavior)
+                return;
+            }
+            else {
+                // Enter alone: Submit
+                e.preventDefault();
+                const form = e.currentTarget.closest("form");
+                if (form) {
+                    form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+                }
+            }
+        }
+    }, []);
+    // Toggle message expansion
+    const toggleMessageExpansion = (messageId) => {
+        setExpandedMessages((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(messageId)) {
+                newSet.delete(messageId);
+            }
+            else {
+                newSet.add(messageId);
+            }
+            return newSet;
+        });
+    };
     // 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) {
+                if (isOpen && renderMode === "standard") {
                     setIsOpen(false);
                 }
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [isUploadMenuOpen, isOpen]);
+    }, [isUploadMenuOpen, isOpen, renderMode]);
     const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
         e.preventDefault();
         if ((!inputValue.trim() && !selectedFile) || isLoading)
             return;
         const query = inputValue.trim();
         setInputValue("");
+        setTextareaHeight(40);
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            textareaRef.current.style.overflowY = "hidden";
+        }
         // Handle multimodal request
         if (selectedFile && filePreview) {
             if (filePreview.type === "image") {
@@ -864,22 +964,13 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
         // Don't render system messages in UI
         if (isSystem)
             return null;
+        const isExpanded = expandedMessages.has(message.id);
         return (React.createElement("div", { key: message.id, style: {
                 display: "flex",
                 justifyContent: isUser ? "flex-end" : "flex-start",
                 marginBottom: theme.spacing.md,
             } },
-            React.createElement("div", { style: {
-                    maxWidth: "70%",
-                    padding: theme.spacing.md,
-                    borderRadius: theme.borderRadius,
-                    backgroundColor: isUser
-                        ? theme.colors.primary
-                        : theme.colors.surface,
-                    color: isUser ? "#ffffff" : theme.colors.text,
-                    fontSize: theme.fontSizes.md,
-                    boxShadow: theme.boxShadow,
-                } }, message.content)));
+            React.createElement(ExpandableMessage, { content: message.content, isUser: isUser, theme: theme, isExpanded: isExpanded, onToggleExpand: () => toggleMessageExpansion(message.id) })));
     };
     // --- RENDER LOGIC FOR 'BASIC' MODE (Original Behavior) ---
     if (renderMode === "basic") {
@@ -913,9 +1004,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                 React.createElement("div", { style: {
                         display: "flex",
                         gap: theme.spacing.sm,
-                        alignItems: "center",
+                        alignItems: "flex-end",
                     } },
-                    React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
+                    React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
                             flex: 1,
                             padding: theme.spacing.sm,
                             fontSize: theme.fontSizes.md,
@@ -924,6 +1015,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                             backgroundColor: theme.colors.background,
                             color: theme.colors.text,
                             outline: "none",
+                            fontFamily: "inherit",
+                            resize: "none",
+                            minHeight: "40px",
+                            maxHeight: "120px",
+                            height: `${textareaHeight}px`,
                         } }),
                     React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
                             padding: theme.spacing.sm,
@@ -1114,9 +1210,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
             React.createElement("div", { style: {
                     display: "flex",
                     gap: theme.spacing.sm,
-                    alignItems: "center",
+                    alignItems: "flex-end",
                 } },
-                React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
+                React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
                         flex: 1,
                         padding: theme.spacing.sm,
                         fontSize: theme.fontSizes.md,
@@ -1125,6 +1221,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                         backgroundColor: theme.colors.background,
                         color: theme.colors.text,
                         outline: "none",
+                        fontFamily: "inherit",
+                        resize: "none",
+                        minHeight: "40px",
+                        maxHeight: "120px",
+                        height: `${textareaHeight}px`,
                     } }),
                 React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
                         padding: theme.spacing.sm,
@@ -2306,8 +2407,9 @@ const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirecti
 };
 
 // Analytics Icon SVG
-const ANALYTICS_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 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" })));
+const ANALYTICS_ICON_SVG = (React.createElement(React.Fragment, null,
+    React.createElement("svg", { width: "36", height: "36", viewBox: "0 0 40 40", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M10 10 L 35 20 L 10 30 L 15 20 Z", fill: "currentColor" }))));
 const AnalyticsWidget = ({ position = "bottom-right", theme: customTheme, onDirectiveAction, }) => {
     const { theme: contextTheme } = useReactBridgeContext();
     const theme = customTheme || contextTheme;