reactbridge-sdk 0.2.16 → 0.2.17

package/dist/index.js

@@ -881,6 +881,42 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isUploadMenuOpen, isOpen, renderMode]);
+    // Add scrollbar styling for textareas
+    React.useEffect(() => {
+        const styleId = "react-bridge-textarea-styles";
+        // Check if styles are already injected
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement("style");
+            style.id = styleId;
+            style.textContent = `
+        .react-bridge-textarea {
+          scrollbar-width: thin;
+          scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+        }
+        
+        .react-bridge-textarea::-webkit-scrollbar {
+          width: 6px;
+        }
+        
+        .react-bridge-textarea::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        
+        .react-bridge-textarea::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.3);
+          border-radius: 3px;
+        }
+        
+        .react-bridge-textarea::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.5);
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        return () => {
+            // Optional: cleanup if needed
+        };
+    }, []);
     const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
         e.preventDefault();
         if ((!inputValue.trim() && !selectedFile) || isLoading)
@@ -1006,7 +1042,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                         gap: theme.spacing.sm,
                         alignItems: "flex-end",
                     } },
-                    React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
+                    React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, className: "react-bridge-textarea", style: {
                             flex: 1,
                             padding: theme.spacing.sm,
                             fontSize: theme.fontSizes.md,
@@ -1020,6 +1056,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                             minHeight: "40px",
                             maxHeight: "120px",
                             height: `${textareaHeight}px`,
+                            scrollbarWidth: "thin",
                         } }),
                     React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
                             padding: theme.spacing.sm,
@@ -1212,7 +1249,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                     gap: theme.spacing.sm,
                     alignItems: "flex-end",
                 } },
-                React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
+                React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, className: "react-bridge-textarea", style: {
                         flex: 1,
                         padding: theme.spacing.sm,
                         fontSize: theme.fontSizes.md,
@@ -1226,6 +1263,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
                         minHeight: "40px",
                         maxHeight: "120px",
                         height: `${textareaHeight}px`,
+                        scrollbarWidth: "thin",
                     } }),
                 React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
                         padding: theme.spacing.sm,
@@ -1359,6 +1397,34 @@ const MIC_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/200
 // 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" })));
+// Expandable Message Component for Search Results
+const SearchResultItem = ({ content, theme, isExpanded, onToggleExpand, }) => {
+    const characterLimit = 300;
+    const isLongMessage = content.length > characterLimit;
+    const displayText = isExpanded ? content : content.substring(0, characterLimit);
+    return (React.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px",
+        } },
+        React.createElement("div", { style: {
+                whiteSpace: "pre-wrap",
+                wordWrap: "break-word",
+                overflowWrap: "break-word",
+                color: theme.colors.text,
+            } }, displayText),
+        isLongMessage && (React.createElement("button", { onClick: onToggleExpand, style: {
+                background: "none",
+                border: "none",
+                color: theme.colors.primary,
+                cursor: "pointer",
+                textDecoration: "underline",
+                padding: "0",
+                textAlign: "left",
+                fontSize: theme.fontSizes.sm,
+                fontWeight: "bold",
+            } }, isExpanded ? "Show less" : "Show more..."))));
+};
 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);
@@ -1376,6 +1442,7 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
     const [isUploadMenuOpen, setIsUploadMenuOpen] = React.useState(false);
     const [selectedFile, setSelectedFile] = React.useState(null);
     const [filePreview, setFilePreview] = React.useState(null);
+    const [expandedMessages, setExpandedMessages] = React.useState(new Set());
     const containerRef = React.useRef(null);
     const fileInputRef = React.useRef(null);
     // Close dropdown and upload menu when clicking outside
@@ -1458,6 +1525,19 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
             fileInputRef.current.value = "";
         }
     };
+    // Toggle message expansion
+    const toggleMessageExpansion = React.useCallback((messageId) => {
+        setExpandedMessages((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(messageId)) {
+                newSet.delete(messageId);
+            }
+            else {
+                newSet.add(messageId);
+            }
+            return newSet;
+        });
+    }, []);
     const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
         e.preventDefault();
         if ((!inputValue.trim() && !selectedFile) || isLoading)
@@ -1484,7 +1564,8 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
     // Get only assistant messages (not system messages)
     const displayMessages = messages
         .filter((msg) => msg.role === "assistant")
-        .slice(-maxResults);
+        .slice(-maxResults)
+        .reverse();
     return (React.createElement("div", { ref: containerRef, style: {
             position: "relative",
             width,
@@ -1656,12 +1737,12 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
                 borderBottom: `1px solid ${theme.colors.border}`,
                 fontSize: theme.fontSizes.sm,
                 color: theme.colors.text,
-                cursor: "pointer",
             }, onMouseEnter: (e) => {
                 e.currentTarget.style.backgroundColor = theme.colors.surface;
             }, onMouseLeave: (e) => {
                 e.currentTarget.style.backgroundColor = theme.colors.background;
-            } }, message.content)))))));
+            } },
+            React.createElement(SearchResultItem, { content: message.content, theme: theme, isExpanded: expandedMessages.has(message.id), onToggleExpand: () => toggleMessageExpansion(message.id) }))))))));
 }
 
 const darkTheme = {