reactbridge-sdk 0.2.13 → 0.2.15
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.
- package/dist/components/ReactBridgeChatbox.d.ts.map +1 -1
- package/dist/index.esm.js +123 -18
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +123 -18
- package/dist/index.js.map +1 -1
- package/dist/utils/api.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -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"}
|
package/dist/index.esm.js
CHANGED
|
@@ -130,7 +130,11 @@ class ReactBridgeAPI {
|
|
|
130
130
|
// Pass the FULL ToolResult object to the orchestrator, not just the summary
|
|
131
131
|
// The orchestrator needs: status, result_items, and detailed_data for sequential execution
|
|
132
132
|
const toolResultJson = JSON.stringify(toolResult, null, 2);
|
|
133
|
-
const request = Object.assign(Object.assign({}, originalRequest), { sessionId, query: `[Tool Result] ${toolResultJson}
|
|
133
|
+
const request = Object.assign(Object.assign({}, originalRequest), { sessionId, query: `[Tool Result] ${toolResultJson}`,
|
|
134
|
+
// CRITICAL: Remove document/image from subsequent requests
|
|
135
|
+
// If we keep them, the orchestrator will reprocess the PDF on every tool result
|
|
136
|
+
// This causes sequential execution to restart instead of continuing
|
|
137
|
+
document: undefined, image: undefined, modalityHint: undefined });
|
|
134
138
|
return this.sendMessage(request);
|
|
135
139
|
});
|
|
136
140
|
}
|
|
@@ -727,6 +731,38 @@ const TypingIndicator = ({ theme }) => (React.createElement("div", { style: {
|
|
|
727
731
|
}
|
|
728
732
|
}
|
|
729
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
|
+
};
|
|
730
766
|
// Default styling constants for the widget wrapper
|
|
731
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";
|
|
732
768
|
function ReactBridgeChatbox({ onIntentDetected, currentContext, placeholder = "Type your message...", height = "500px", width = "100%", theme: themeOverride, renderMessage, onError,
|
|
@@ -756,7 +792,12 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
756
792
|
const [isUploadMenuOpen, setIsUploadMenuOpen] = useState(false);
|
|
757
793
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
758
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);
|
|
759
799
|
const messagesEndRef = useRef(null);
|
|
800
|
+
const textareaRef = useRef(null);
|
|
760
801
|
const containerRef = useRef(null);
|
|
761
802
|
// Fallback styles for header
|
|
762
803
|
const finalHeaderBgColor = headerBgColor || theme.colors.primary;
|
|
@@ -766,26 +807,89 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
766
807
|
var _a;
|
|
767
808
|
(_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
|
|
768
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
|
+
};
|
|
769
868
|
// Close upload menu and widget when clicking outside
|
|
770
869
|
useEffect(() => {
|
|
771
870
|
const handleClickOutside = (event) => {
|
|
772
871
|
if (containerRef.current &&
|
|
773
872
|
!containerRef.current.contains(event.target)) {
|
|
774
873
|
setIsUploadMenuOpen(false);
|
|
775
|
-
if (isOpen) {
|
|
874
|
+
if (isOpen && renderMode === "standard") {
|
|
776
875
|
setIsOpen(false);
|
|
777
876
|
}
|
|
778
877
|
}
|
|
779
878
|
};
|
|
780
879
|
document.addEventListener("mousedown", handleClickOutside);
|
|
781
880
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
782
|
-
}, [isUploadMenuOpen, isOpen]);
|
|
881
|
+
}, [isUploadMenuOpen, isOpen, renderMode]);
|
|
783
882
|
const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
784
883
|
e.preventDefault();
|
|
785
884
|
if ((!inputValue.trim() && !selectedFile) || isLoading)
|
|
786
885
|
return;
|
|
787
886
|
const query = inputValue.trim();
|
|
788
887
|
setInputValue("");
|
|
888
|
+
setTextareaHeight(40);
|
|
889
|
+
if (textareaRef.current) {
|
|
890
|
+
textareaRef.current.style.height = "auto";
|
|
891
|
+
textareaRef.current.style.overflowY = "hidden";
|
|
892
|
+
}
|
|
789
893
|
// Handle multimodal request
|
|
790
894
|
if (selectedFile && filePreview) {
|
|
791
895
|
if (filePreview.type === "image") {
|
|
@@ -858,22 +962,13 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
858
962
|
// Don't render system messages in UI
|
|
859
963
|
if (isSystem)
|
|
860
964
|
return null;
|
|
965
|
+
const isExpanded = expandedMessages.has(message.id);
|
|
861
966
|
return (React.createElement("div", { key: message.id, style: {
|
|
862
967
|
display: "flex",
|
|
863
968
|
justifyContent: isUser ? "flex-end" : "flex-start",
|
|
864
969
|
marginBottom: theme.spacing.md,
|
|
865
970
|
} },
|
|
866
|
-
React.createElement(
|
|
867
|
-
maxWidth: "70%",
|
|
868
|
-
padding: theme.spacing.md,
|
|
869
|
-
borderRadius: theme.borderRadius,
|
|
870
|
-
backgroundColor: isUser
|
|
871
|
-
? theme.colors.primary
|
|
872
|
-
: theme.colors.surface,
|
|
873
|
-
color: isUser ? "#ffffff" : theme.colors.text,
|
|
874
|
-
fontSize: theme.fontSizes.md,
|
|
875
|
-
boxShadow: theme.boxShadow,
|
|
876
|
-
} }, message.content)));
|
|
971
|
+
React.createElement(ExpandableMessage, { content: message.content, isUser: isUser, theme: theme, isExpanded: isExpanded, onToggleExpand: () => toggleMessageExpansion(message.id) })));
|
|
877
972
|
};
|
|
878
973
|
// --- RENDER LOGIC FOR 'BASIC' MODE (Original Behavior) ---
|
|
879
974
|
if (renderMode === "basic") {
|
|
@@ -907,9 +1002,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
907
1002
|
React.createElement("div", { style: {
|
|
908
1003
|
display: "flex",
|
|
909
1004
|
gap: theme.spacing.sm,
|
|
910
|
-
alignItems: "
|
|
1005
|
+
alignItems: "flex-end",
|
|
911
1006
|
} },
|
|
912
|
-
React.createElement("
|
|
1007
|
+
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
|
|
913
1008
|
flex: 1,
|
|
914
1009
|
padding: theme.spacing.sm,
|
|
915
1010
|
fontSize: theme.fontSizes.md,
|
|
@@ -918,6 +1013,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
918
1013
|
backgroundColor: theme.colors.background,
|
|
919
1014
|
color: theme.colors.text,
|
|
920
1015
|
outline: "none",
|
|
1016
|
+
fontFamily: "inherit",
|
|
1017
|
+
resize: "none",
|
|
1018
|
+
minHeight: "40px",
|
|
1019
|
+
maxHeight: "120px",
|
|
1020
|
+
height: `${textareaHeight}px`,
|
|
921
1021
|
} }),
|
|
922
1022
|
React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
|
|
923
1023
|
padding: theme.spacing.sm,
|
|
@@ -1108,9 +1208,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1108
1208
|
React.createElement("div", { style: {
|
|
1109
1209
|
display: "flex",
|
|
1110
1210
|
gap: theme.spacing.sm,
|
|
1111
|
-
alignItems: "
|
|
1211
|
+
alignItems: "flex-end",
|
|
1112
1212
|
} },
|
|
1113
|
-
React.createElement("
|
|
1213
|
+
React.createElement("textarea", { ref: textareaRef, value: inputValue, onChange: handleTextareaChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading, style: {
|
|
1114
1214
|
flex: 1,
|
|
1115
1215
|
padding: theme.spacing.sm,
|
|
1116
1216
|
fontSize: theme.fontSizes.md,
|
|
@@ -1119,6 +1219,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
1119
1219
|
backgroundColor: theme.colors.background,
|
|
1120
1220
|
color: theme.colors.text,
|
|
1121
1221
|
outline: "none",
|
|
1222
|
+
fontFamily: "inherit",
|
|
1223
|
+
resize: "none",
|
|
1224
|
+
minHeight: "40px",
|
|
1225
|
+
maxHeight: "120px",
|
|
1226
|
+
height: `${textareaHeight}px`,
|
|
1122
1227
|
} }),
|
|
1123
1228
|
React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
|
|
1124
1229
|
padding: theme.spacing.sm,
|