reactbridge-sdk 0.2.16 → 0.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactBridgeChatbox.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeChatbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,cAAc,EACf,MAAM,UAAU,CAAC;AA2MlB,MAAM,WAAW,uBAAuB;IAEtC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAG7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,gBAAgB,EAChB,cAAc,EACd,WAAoC,EACpC,MAAgB,EAChB,KAAc,EACd,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,OAAO,EAGP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,EAGf,UAAoB,EAAE,yCAAyC;AAC/D,WAAmB,EACnB,WAA4B,EAC5B,SAA0B,EAC1B,SAAgB,EAChB,cAAc,EAAE,qEAAqE;AACrF,aAAa,EAAE,2CAA2C;AAE1D,UAA6B,EAAE,qCAAqC;AACpE,iBAA4C,EAC5C,iBAAyC,GAC1C,EAAE,uBAAuB,
|
|
1
|
+
{"version":3,"file":"ReactBridgeChatbox.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeChatbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,cAAc,EACf,MAAM,UAAU,CAAC;AA2MlB,MAAM,WAAW,uBAAuB;IAEtC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAG7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,gBAAgB,EAChB,cAAc,EACd,WAAoC,EACpC,MAAgB,EAChB,KAAc,EACd,KAAK,EAAE,aAAa,EACpB,aAAa,EACb,OAAO,EAGP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,EAGf,UAAoB,EAAE,yCAAyC;AAC/D,WAAmB,EACnB,WAA4B,EAC5B,SAA0B,EAC1B,SAAgB,EAChB,cAAc,EAAE,qEAAqE;AACrF,aAAa,EAAE,2CAA2C;AAE1D,UAA6B,EAAE,qCAAqC;AACpE,iBAA4C,EAC5C,iBAAyC,GAC1C,EAAE,uBAAuB,qBA06BzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactBridgeSearch.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ReactBridgeSearch.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EACV,gBAAgB,EAEhB,KAAK,EACL,cAAc,EACf,MAAM,UAAU,CAAC;AAoFlB,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,gBAAgB,EAChB,cAAc,EACd,WAAyB,EACzB,KAAc,EACd,UAAc,EACd,KAAK,EAAE,aAAa,EACpB,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,GAChB,EAAE,sBAAsB,qBAwdxB"}
|
package/dist/index.esm.js
CHANGED
|
@@ -879,6 +879,42 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
879
879
|
document.addEventListener("mousedown", handleClickOutside);
|
|
880
880
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
881
881
|
}, [isUploadMenuOpen, isOpen, renderMode]);
|
|
882
|
+
// Add scrollbar styling for textareas
|
|
883
|
+
useEffect(() => {
|
|
884
|
+
const styleId = "react-bridge-textarea-styles";
|
|
885
|
+
// Check if styles are already injected
|
|
886
|
+
if (!document.getElementById(styleId)) {
|
|
887
|
+
const style = document.createElement("style");
|
|
888
|
+
style.id = styleId;
|
|
889
|
+
style.textContent = `
|
|
890
|
+
.react-bridge-textarea {
|
|
891
|
+
scrollbar-width: thin;
|
|
892
|
+
scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.react-bridge-textarea::-webkit-scrollbar {
|
|
896
|
+
width: 6px;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.react-bridge-textarea::-webkit-scrollbar-track {
|
|
900
|
+
background: transparent;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
.react-bridge-textarea::-webkit-scrollbar-thumb {
|
|
904
|
+
background: rgba(0, 0, 0, 0.3);
|
|
905
|
+
border-radius: 3px;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
.react-bridge-textarea::-webkit-scrollbar-thumb:hover {
|
|
909
|
+
background: rgba(0, 0, 0, 0.5);
|
|
910
|
+
}
|
|
911
|
+
`;
|
|
912
|
+
document.head.appendChild(style);
|
|
913
|
+
}
|
|
914
|
+
return () => {
|
|
915
|
+
// Optional: cleanup if needed
|
|
916
|
+
};
|
|
917
|
+
}, []);
|
|
882
918
|
const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
883
919
|
e.preventDefault();
|
|
884
920
|
if ((!inputValue.trim() && !selectedFile) || isLoading)
|
|
@@ -1004,7 +1040,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1004
1040
|
gap: theme.spacing.sm,
|
|
1005
1041
|
alignItems: "flex-end",
|
|
1006
1042
|
} },
|
|
1007
|
-
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
|
|
1043
|
+
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, className: "react-bridge-textarea", style: {
|
|
1008
1044
|
flex: 1,
|
|
1009
1045
|
padding: theme.spacing.sm,
|
|
1010
1046
|
fontSize: theme.fontSizes.md,
|
|
@@ -1018,6 +1054,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1018
1054
|
minHeight: "40px",
|
|
1019
1055
|
maxHeight: "120px",
|
|
1020
1056
|
height: `${textareaHeight}px`,
|
|
1057
|
+
scrollbarWidth: "thin",
|
|
1021
1058
|
} }),
|
|
1022
1059
|
React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
|
|
1023
1060
|
padding: theme.spacing.sm,
|
|
@@ -1210,7 +1247,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1210
1247
|
gap: theme.spacing.sm,
|
|
1211
1248
|
alignItems: "flex-end",
|
|
1212
1249
|
} },
|
|
1213
|
-
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
|
|
1250
|
+
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, className: "react-bridge-textarea", style: {
|
|
1214
1251
|
flex: 1,
|
|
1215
1252
|
padding: theme.spacing.sm,
|
|
1216
1253
|
fontSize: theme.fontSizes.md,
|
|
@@ -1224,6 +1261,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1224
1261
|
minHeight: "40px",
|
|
1225
1262
|
maxHeight: "120px",
|
|
1226
1263
|
height: `${textareaHeight}px`,
|
|
1264
|
+
scrollbarWidth: "thin",
|
|
1227
1265
|
} }),
|
|
1228
1266
|
React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
|
|
1229
1267
|
padding: theme.spacing.sm,
|
|
@@ -1357,6 +1395,34 @@ const MIC_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/200
|
|
|
1357
1395
|
// Plus Icon SVG
|
|
1358
1396
|
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" },
|
|
1359
1397
|
React.createElement("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })));
|
|
1398
|
+
// Expandable Message Component for Search Results
|
|
1399
|
+
const SearchResultItem = ({ content, theme, isExpanded, onToggleExpand, }) => {
|
|
1400
|
+
const characterLimit = 300;
|
|
1401
|
+
const isLongMessage = content.length > characterLimit;
|
|
1402
|
+
const displayText = isExpanded ? content : content.substring(0, characterLimit);
|
|
1403
|
+
return (React.createElement("div", { style: {
|
|
1404
|
+
display: "flex",
|
|
1405
|
+
flexDirection: "column",
|
|
1406
|
+
gap: "8px",
|
|
1407
|
+
} },
|
|
1408
|
+
React.createElement("div", { style: {
|
|
1409
|
+
whiteSpace: "pre-wrap",
|
|
1410
|
+
wordWrap: "break-word",
|
|
1411
|
+
overflowWrap: "break-word",
|
|
1412
|
+
color: theme.colors.text,
|
|
1413
|
+
} }, displayText),
|
|
1414
|
+
isLongMessage && (React.createElement("button", { onClick: onToggleExpand, style: {
|
|
1415
|
+
background: "none",
|
|
1416
|
+
border: "none",
|
|
1417
|
+
color: theme.colors.primary,
|
|
1418
|
+
cursor: "pointer",
|
|
1419
|
+
textDecoration: "underline",
|
|
1420
|
+
padding: "0",
|
|
1421
|
+
textAlign: "left",
|
|
1422
|
+
fontSize: theme.fontSizes.sm,
|
|
1423
|
+
fontWeight: "bold",
|
|
1424
|
+
} }, isExpanded ? "Show less" : "Show more..."))));
|
|
1425
|
+
};
|
|
1360
1426
|
function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Search...", width = "100%", maxResults = 5, theme: themeOverride, onError, onSpeechStart, onSpeechEnd, onTranscript, onAgentResponse, }) {
|
|
1361
1427
|
const { theme: contextTheme } = useReactBridgeContext();
|
|
1362
1428
|
const theme = Object.assign(Object.assign({}, contextTheme), themeOverride);
|
|
@@ -1374,6 +1440,7 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
|
|
|
1374
1440
|
const [isUploadMenuOpen, setIsUploadMenuOpen] = useState(false);
|
|
1375
1441
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
1376
1442
|
const [filePreview, setFilePreview] = useState(null);
|
|
1443
|
+
const [expandedMessages, setExpandedMessages] = useState(new Set());
|
|
1377
1444
|
const containerRef = useRef(null);
|
|
1378
1445
|
const fileInputRef = useRef(null);
|
|
1379
1446
|
// Close dropdown and upload menu when clicking outside
|
|
@@ -1456,6 +1523,19 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
|
|
|
1456
1523
|
fileInputRef.current.value = "";
|
|
1457
1524
|
}
|
|
1458
1525
|
};
|
|
1526
|
+
// Toggle message expansion
|
|
1527
|
+
const toggleMessageExpansion = useCallback((messageId) => {
|
|
1528
|
+
setExpandedMessages((prev) => {
|
|
1529
|
+
const newSet = new Set(prev);
|
|
1530
|
+
if (newSet.has(messageId)) {
|
|
1531
|
+
newSet.delete(messageId);
|
|
1532
|
+
}
|
|
1533
|
+
else {
|
|
1534
|
+
newSet.add(messageId);
|
|
1535
|
+
}
|
|
1536
|
+
return newSet;
|
|
1537
|
+
});
|
|
1538
|
+
}, []);
|
|
1459
1539
|
const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
1460
1540
|
e.preventDefault();
|
|
1461
1541
|
if ((!inputValue.trim() && !selectedFile) || isLoading)
|
|
@@ -1482,7 +1562,8 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
|
|
|
1482
1562
|
// Get only assistant messages (not system messages)
|
|
1483
1563
|
const displayMessages = messages
|
|
1484
1564
|
.filter((msg) => msg.role === "assistant")
|
|
1485
|
-
.slice(-maxResults)
|
|
1565
|
+
.slice(-maxResults)
|
|
1566
|
+
.reverse();
|
|
1486
1567
|
return (React.createElement("div", { ref: containerRef, style: {
|
|
1487
1568
|
position: "relative",
|
|
1488
1569
|
width,
|
|
@@ -1654,12 +1735,12 @@ function ReactBridgeSearch({ onIntentDetected, currentContext, placeholder = "Se
|
|
|
1654
1735
|
borderBottom: `1px solid ${theme.colors.border}`,
|
|
1655
1736
|
fontSize: theme.fontSizes.sm,
|
|
1656
1737
|
color: theme.colors.text,
|
|
1657
|
-
cursor: "pointer",
|
|
1658
1738
|
}, onMouseEnter: (e) => {
|
|
1659
1739
|
e.currentTarget.style.backgroundColor = theme.colors.surface;
|
|
1660
1740
|
}, onMouseLeave: (e) => {
|
|
1661
1741
|
e.currentTarget.style.backgroundColor = theme.colors.background;
|
|
1662
|
-
} },
|
|
1742
|
+
} },
|
|
1743
|
+
React.createElement(SearchResultItem, { content: message.content, theme: theme, isExpanded: expandedMessages.has(message.id), onToggleExpand: () => toggleMessageExpansion(message.id) }))))))));
|
|
1663
1744
|
}
|
|
1664
1745
|
|
|
1665
1746
|
const darkTheme = {
|