reactbridge-sdk 0.2.14 → 0.2.16
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,
|
|
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,qBA+3BzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalyticsWidget.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"AnalyticsWidget.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAyB/D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoF1D,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -731,6 +731,38 @@ const TypingIndicator = ({ theme }) => (React.createElement("div", { style: {
|
|
|
731
731
|
}
|
|
732
732
|
}
|
|
733
733
|
`))));
|
|
734
|
+
// Expandable Message Component with Show More functionality
|
|
735
|
+
const ExpandableMessage = ({ content, isUser, theme, isExpanded, onToggleExpand, }) => {
|
|
736
|
+
const characterLimit = 300;
|
|
737
|
+
const isLongMessage = content.length > characterLimit;
|
|
738
|
+
const displayText = isExpanded ? content : content.substring(0, characterLimit);
|
|
739
|
+
return (React.createElement("div", { style: {
|
|
740
|
+
maxWidth: "70%",
|
|
741
|
+
padding: theme.spacing.md,
|
|
742
|
+
borderRadius: theme.borderRadius,
|
|
743
|
+
backgroundColor: isUser
|
|
744
|
+
? theme.colors.primary
|
|
745
|
+
: theme.colors.surface,
|
|
746
|
+
color: isUser ? "#ffffff" : theme.colors.text,
|
|
747
|
+
fontSize: theme.fontSizes.md,
|
|
748
|
+
boxShadow: theme.boxShadow,
|
|
749
|
+
wordWrap: "break-word",
|
|
750
|
+
whiteSpace: "pre-wrap",
|
|
751
|
+
overflowWrap: "break-word",
|
|
752
|
+
} },
|
|
753
|
+
React.createElement("div", { style: { marginBottom: isLongMessage && !isExpanded ? "8px" : "0" } }, displayText),
|
|
754
|
+
isLongMessage && (React.createElement("button", { onClick: onToggleExpand, style: {
|
|
755
|
+
background: "none",
|
|
756
|
+
border: "none",
|
|
757
|
+
color: isUser ? "#ffffff" : theme.colors.primary,
|
|
758
|
+
cursor: "pointer",
|
|
759
|
+
textDecoration: "underline",
|
|
760
|
+
padding: "0",
|
|
761
|
+
marginTop: isExpanded ? "8px" : "0",
|
|
762
|
+
fontSize: theme.fontSizes.sm,
|
|
763
|
+
fontWeight: "bold",
|
|
764
|
+
} }, isExpanded ? "Show less" : "Show more..."))));
|
|
765
|
+
};
|
|
734
766
|
// Default styling constants for the widget wrapper
|
|
735
767
|
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";
|
|
736
768
|
function ReactBridgeChatbox({ onIntentDetected, currentContext, placeholder = "Type your message...", height = "500px", width = "100%", theme: themeOverride, renderMessage, onError,
|
|
@@ -760,7 +792,12 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
760
792
|
const [isUploadMenuOpen, setIsUploadMenuOpen] = useState(false);
|
|
761
793
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
762
794
|
const [filePreview, setFilePreview] = useState(null);
|
|
795
|
+
// Track expanded messages by ID
|
|
796
|
+
const [expandedMessages, setExpandedMessages] = useState(new Set());
|
|
797
|
+
// Track textarea height
|
|
798
|
+
const [textareaHeight, setTextareaHeight] = useState(40);
|
|
763
799
|
const messagesEndRef = useRef(null);
|
|
800
|
+
const textareaRef = useRef(null);
|
|
764
801
|
const containerRef = useRef(null);
|
|
765
802
|
// Fallback styles for header
|
|
766
803
|
const finalHeaderBgColor = headerBgColor || theme.colors.primary;
|
|
@@ -770,26 +807,89 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
770
807
|
var _a;
|
|
771
808
|
(_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
|
|
772
809
|
}, [messages]);
|
|
810
|
+
// Auto-scroll to bottom when widget opens
|
|
811
|
+
useEffect(() => {
|
|
812
|
+
if (isOpen && renderMode === "standard") {
|
|
813
|
+
setTimeout(() => {
|
|
814
|
+
var _a;
|
|
815
|
+
(_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
|
|
816
|
+
}, 100);
|
|
817
|
+
}
|
|
818
|
+
}, [isOpen, renderMode]);
|
|
819
|
+
// Handle textarea height adjustment
|
|
820
|
+
const handleTextareaChange = useCallback((e) => {
|
|
821
|
+
const textarea = e.target;
|
|
822
|
+
setInputValue(textarea.value);
|
|
823
|
+
// Reset height to calculate scroll height
|
|
824
|
+
textarea.style.height = "auto";
|
|
825
|
+
const scrollHeight = textarea.scrollHeight;
|
|
826
|
+
const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
|
|
827
|
+
const maxHeight = lineHeight * 3; // 3 lines max
|
|
828
|
+
if (scrollHeight <= maxHeight) {
|
|
829
|
+
textarea.style.height = scrollHeight + "px";
|
|
830
|
+
setTextareaHeight(scrollHeight);
|
|
831
|
+
}
|
|
832
|
+
else {
|
|
833
|
+
textarea.style.height = maxHeight + "px";
|
|
834
|
+
textarea.style.overflowY = "auto";
|
|
835
|
+
setTextareaHeight(maxHeight);
|
|
836
|
+
}
|
|
837
|
+
}, []);
|
|
838
|
+
// Handle key down for Shift+Enter and Enter submission
|
|
839
|
+
const handleKeyDown = useCallback((e) => {
|
|
840
|
+
if (e.key === "Enter") {
|
|
841
|
+
if (e.shiftKey) {
|
|
842
|
+
// Shift+Enter: Allow new line (default behavior)
|
|
843
|
+
return;
|
|
844
|
+
}
|
|
845
|
+
else {
|
|
846
|
+
// Enter alone: Submit
|
|
847
|
+
e.preventDefault();
|
|
848
|
+
const form = e.currentTarget.closest("form");
|
|
849
|
+
if (form) {
|
|
850
|
+
form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
|
|
851
|
+
}
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
}, []);
|
|
855
|
+
// Toggle message expansion
|
|
856
|
+
const toggleMessageExpansion = (messageId) => {
|
|
857
|
+
setExpandedMessages((prev) => {
|
|
858
|
+
const newSet = new Set(prev);
|
|
859
|
+
if (newSet.has(messageId)) {
|
|
860
|
+
newSet.delete(messageId);
|
|
861
|
+
}
|
|
862
|
+
else {
|
|
863
|
+
newSet.add(messageId);
|
|
864
|
+
}
|
|
865
|
+
return newSet;
|
|
866
|
+
});
|
|
867
|
+
};
|
|
773
868
|
// Close upload menu and widget when clicking outside
|
|
774
869
|
useEffect(() => {
|
|
775
870
|
const handleClickOutside = (event) => {
|
|
776
871
|
if (containerRef.current &&
|
|
777
872
|
!containerRef.current.contains(event.target)) {
|
|
778
873
|
setIsUploadMenuOpen(false);
|
|
779
|
-
if (isOpen) {
|
|
874
|
+
if (isOpen && renderMode === "standard") {
|
|
780
875
|
setIsOpen(false);
|
|
781
876
|
}
|
|
782
877
|
}
|
|
783
878
|
};
|
|
784
879
|
document.addEventListener("mousedown", handleClickOutside);
|
|
785
880
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
786
|
-
}, [isUploadMenuOpen, isOpen]);
|
|
881
|
+
}, [isUploadMenuOpen, isOpen, renderMode]);
|
|
787
882
|
const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
788
883
|
e.preventDefault();
|
|
789
884
|
if ((!inputValue.trim() && !selectedFile) || isLoading)
|
|
790
885
|
return;
|
|
791
886
|
const query = inputValue.trim();
|
|
792
887
|
setInputValue("");
|
|
888
|
+
setTextareaHeight(40);
|
|
889
|
+
if (textareaRef.current) {
|
|
890
|
+
textareaRef.current.style.height = "auto";
|
|
891
|
+
textareaRef.current.style.overflowY = "hidden";
|
|
892
|
+
}
|
|
793
893
|
// Handle multimodal request
|
|
794
894
|
if (selectedFile && filePreview) {
|
|
795
895
|
if (filePreview.type === "image") {
|
|
@@ -862,22 +962,13 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
862
962
|
// Don't render system messages in UI
|
|
863
963
|
if (isSystem)
|
|
864
964
|
return null;
|
|
965
|
+
const isExpanded = expandedMessages.has(message.id);
|
|
865
966
|
return (React.createElement("div", { key: message.id, style: {
|
|
866
967
|
display: "flex",
|
|
867
968
|
justifyContent: isUser ? "flex-end" : "flex-start",
|
|
868
969
|
marginBottom: theme.spacing.md,
|
|
869
970
|
} },
|
|
870
|
-
React.createElement(
|
|
871
|
-
maxWidth: "70%",
|
|
872
|
-
padding: theme.spacing.md,
|
|
873
|
-
borderRadius: theme.borderRadius,
|
|
874
|
-
backgroundColor: isUser
|
|
875
|
-
? theme.colors.primary
|
|
876
|
-
: theme.colors.surface,
|
|
877
|
-
color: isUser ? "#ffffff" : theme.colors.text,
|
|
878
|
-
fontSize: theme.fontSizes.md,
|
|
879
|
-
boxShadow: theme.boxShadow,
|
|
880
|
-
} }, message.content)));
|
|
971
|
+
React.createElement(ExpandableMessage, { content: message.content, isUser: isUser, theme: theme, isExpanded: isExpanded, onToggleExpand: () => toggleMessageExpansion(message.id) })));
|
|
881
972
|
};
|
|
882
973
|
// --- RENDER LOGIC FOR 'BASIC' MODE (Original Behavior) ---
|
|
883
974
|
if (renderMode === "basic") {
|
|
@@ -911,9 +1002,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
911
1002
|
React.createElement("div", { style: {
|
|
912
1003
|
display: "flex",
|
|
913
1004
|
gap: theme.spacing.sm,
|
|
914
|
-
alignItems: "
|
|
1005
|
+
alignItems: "flex-end",
|
|
915
1006
|
} },
|
|
916
|
-
React.createElement("
|
|
1007
|
+
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
|
|
917
1008
|
flex: 1,
|
|
918
1009
|
padding: theme.spacing.sm,
|
|
919
1010
|
fontSize: theme.fontSizes.md,
|
|
@@ -922,6 +1013,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
922
1013
|
backgroundColor: theme.colors.background,
|
|
923
1014
|
color: theme.colors.text,
|
|
924
1015
|
outline: "none",
|
|
1016
|
+
fontFamily: "inherit",
|
|
1017
|
+
resize: "none",
|
|
1018
|
+
minHeight: "40px",
|
|
1019
|
+
maxHeight: "120px",
|
|
1020
|
+
height: `${textareaHeight}px`,
|
|
925
1021
|
} }),
|
|
926
1022
|
React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
|
|
927
1023
|
padding: theme.spacing.sm,
|
|
@@ -1112,9 +1208,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1112
1208
|
React.createElement("div", { style: {
|
|
1113
1209
|
display: "flex",
|
|
1114
1210
|
gap: theme.spacing.sm,
|
|
1115
|
-
alignItems: "
|
|
1211
|
+
alignItems: "flex-end",
|
|
1116
1212
|
} },
|
|
1117
|
-
React.createElement("
|
|
1213
|
+
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
|
|
1118
1214
|
flex: 1,
|
|
1119
1215
|
padding: theme.spacing.sm,
|
|
1120
1216
|
fontSize: theme.fontSizes.md,
|
|
@@ -1123,6 +1219,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1123
1219
|
backgroundColor: theme.colors.background,
|
|
1124
1220
|
color: theme.colors.text,
|
|
1125
1221
|
outline: "none",
|
|
1222
|
+
fontFamily: "inherit",
|
|
1223
|
+
resize: "none",
|
|
1224
|
+
minHeight: "40px",
|
|
1225
|
+
maxHeight: "120px",
|
|
1226
|
+
height: `${textareaHeight}px`,
|
|
1126
1227
|
} }),
|
|
1127
1228
|
React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
|
|
1128
1229
|
padding: theme.spacing.sm,
|
|
@@ -2304,8 +2405,9 @@ const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirecti
|
|
|
2304
2405
|
};
|
|
2305
2406
|
|
|
2306
2407
|
// Analytics Icon SVG
|
|
2307
|
-
const ANALYTICS_ICON_SVG = (React.createElement(
|
|
2308
|
-
React.createElement("
|
|
2408
|
+
const ANALYTICS_ICON_SVG = (React.createElement(React.Fragment, null,
|
|
2409
|
+
React.createElement("svg", { width: "36", height: "36", viewBox: "0 0 40 40", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
|
|
2410
|
+
React.createElement("path", { d: "M10 10 L 35 20 L 10 30 L 15 20 Z", fill: "currentColor" }))));
|
|
2309
2411
|
const AnalyticsWidget = ({ position = "bottom-right", theme: customTheme, onDirectiveAction, }) => {
|
|
2310
2412
|
const { theme: contextTheme } = useReactBridgeContext();
|
|
2311
2413
|
const theme = customTheme || contextTheme;
|