reactbridge-sdk 0.1.16 → 0.1.18
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 +206 -88
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +206 -88
- 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,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,cAAc,EACf,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ReactBridgeChatbox.d.ts","sourceRoot":"","sources":["../../src/components/ReactBridgeChatbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,cAAc,EACf,MAAM,UAAU,CAAC;AA+IlB,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,qBAmyBzB"}
|
package/dist/index.esm.js
CHANGED
|
@@ -77,7 +77,7 @@ class ReactBridgeAPI {
|
|
|
77
77
|
if (request.userRecentActivity)
|
|
78
78
|
formData.append('userRecentActivity', request.userRecentActivity);
|
|
79
79
|
if (request.interfaceState)
|
|
80
|
-
formData.append(
|
|
80
|
+
formData.append("InterfaceStateJson", JSON.stringify(request.interfaceState));
|
|
81
81
|
if (request.sessionId)
|
|
82
82
|
formData.append('sessionId', request.sessionId);
|
|
83
83
|
if (request.modalityHint)
|
|
@@ -96,12 +96,14 @@ class ReactBridgeAPI {
|
|
|
96
96
|
headers['Content-Type'] = 'application/json';
|
|
97
97
|
body = JSON.stringify(request);
|
|
98
98
|
}
|
|
99
|
+
// console.log('Sending request to ReactBridge API:', { url, headers, body, timeoutMs });
|
|
99
100
|
const response = yield fetch(url, {
|
|
100
101
|
method: 'POST',
|
|
101
102
|
headers,
|
|
102
103
|
body,
|
|
103
104
|
signal,
|
|
104
105
|
});
|
|
106
|
+
// console.log('Received response from ReactBridge API:', response);
|
|
105
107
|
// Clear any manual timeout timer if set
|
|
106
108
|
if (timeoutId) {
|
|
107
109
|
clearTimeout(timeoutId);
|
|
@@ -528,6 +530,59 @@ const PHOTO_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2
|
|
|
528
530
|
// File Icon SVG
|
|
529
531
|
const FILE_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
|
|
530
532
|
React.createElement("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" })));
|
|
533
|
+
// Typing Indicator Component
|
|
534
|
+
const TypingIndicator = ({ theme }) => (React.createElement("div", { style: {
|
|
535
|
+
display: "flex",
|
|
536
|
+
justifyContent: "flex-start",
|
|
537
|
+
marginBottom: theme.spacing.md,
|
|
538
|
+
paddingLeft: theme.spacing.md,
|
|
539
|
+
} },
|
|
540
|
+
React.createElement("div", { style: {
|
|
541
|
+
display: "flex",
|
|
542
|
+
alignItems: "center",
|
|
543
|
+
gap: "4px",
|
|
544
|
+
padding: theme.spacing.sm,
|
|
545
|
+
backgroundColor: theme.colors.surface,
|
|
546
|
+
borderRadius: theme.borderRadius,
|
|
547
|
+
boxShadow: theme.boxShadow,
|
|
548
|
+
maxWidth: "70%",
|
|
549
|
+
} },
|
|
550
|
+
React.createElement("div", { style: {
|
|
551
|
+
width: "8px",
|
|
552
|
+
height: "8px",
|
|
553
|
+
borderRadius: "50%",
|
|
554
|
+
backgroundColor: theme.colors.primary,
|
|
555
|
+
animation: "typing-dot 1.4s infinite ease-in-out",
|
|
556
|
+
animationDelay: "0s",
|
|
557
|
+
} }),
|
|
558
|
+
React.createElement("div", { style: {
|
|
559
|
+
width: "8px",
|
|
560
|
+
height: "8px",
|
|
561
|
+
borderRadius: "50%",
|
|
562
|
+
backgroundColor: theme.colors.primary,
|
|
563
|
+
animation: "typing-dot 1.4s infinite ease-in-out",
|
|
564
|
+
animationDelay: "0.2s",
|
|
565
|
+
} }),
|
|
566
|
+
React.createElement("div", { style: {
|
|
567
|
+
width: "8px",
|
|
568
|
+
height: "8px",
|
|
569
|
+
borderRadius: "50%",
|
|
570
|
+
backgroundColor: theme.colors.primary,
|
|
571
|
+
animation: "typing-dot 1.4s infinite ease-in-out",
|
|
572
|
+
animationDelay: "0.4s",
|
|
573
|
+
} }),
|
|
574
|
+
React.createElement("style", null, `
|
|
575
|
+
@keyframes typing-dot {
|
|
576
|
+
0%, 60%, 100% {
|
|
577
|
+
transform: translateY(0);
|
|
578
|
+
opacity: 0.4;
|
|
579
|
+
}
|
|
580
|
+
30% {
|
|
581
|
+
transform: translateY(-10px);
|
|
582
|
+
opacity: 1;
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
`))));
|
|
531
586
|
// Default styling constants for the widget wrapper
|
|
532
587
|
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";
|
|
533
588
|
function ReactBridgeChatbox({ onIntentDetected, currentContext, placeholder = "Type your message...", height = "500px", width = "100%", theme: themeOverride, renderMessage, onError,
|
|
@@ -541,7 +596,7 @@ toggleIcon = MESSAGE_ICON_SVG, // <<< NOW USES THE PURE SVG CONSTANT
|
|
|
541
596
|
toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat assistant", }) {
|
|
542
597
|
const { theme: contextTheme } = useReactBridgeContext();
|
|
543
598
|
const theme = Object.assign(Object.assign({}, contextTheme), themeOverride);
|
|
544
|
-
const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput } = useReactBridge({
|
|
599
|
+
const { messages, isLoading, sendChatQuery, isListening, startVoiceInput, stopVoiceInput, } = useReactBridge({
|
|
545
600
|
onIntentDetected,
|
|
546
601
|
currentContext,
|
|
547
602
|
onError,
|
|
@@ -570,15 +625,16 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
570
625
|
// Close upload menu and widget when clicking outside
|
|
571
626
|
useEffect(() => {
|
|
572
627
|
const handleClickOutside = (event) => {
|
|
573
|
-
if (containerRef.current &&
|
|
628
|
+
if (containerRef.current &&
|
|
629
|
+
!containerRef.current.contains(event.target)) {
|
|
574
630
|
setIsUploadMenuOpen(false);
|
|
575
631
|
if (isOpen) {
|
|
576
632
|
setIsOpen(false);
|
|
577
633
|
}
|
|
578
634
|
}
|
|
579
635
|
};
|
|
580
|
-
document.addEventListener(
|
|
581
|
-
return () => document.removeEventListener(
|
|
636
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
637
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
582
638
|
}, [isUploadMenuOpen, isOpen]);
|
|
583
639
|
const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
584
640
|
e.preventDefault();
|
|
@@ -588,10 +644,10 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
588
644
|
setInputValue("");
|
|
589
645
|
// Handle multimodal request
|
|
590
646
|
if (selectedFile && filePreview) {
|
|
591
|
-
if (filePreview.type ===
|
|
647
|
+
if (filePreview.type === "image") {
|
|
592
648
|
yield sendChatQuery({ image: selectedFile, query });
|
|
593
649
|
}
|
|
594
|
-
else if (filePreview.type ===
|
|
650
|
+
else if (filePreview.type === "document") {
|
|
595
651
|
yield sendChatQuery({ document: selectedFile, query });
|
|
596
652
|
}
|
|
597
653
|
}
|
|
@@ -604,9 +660,14 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
604
660
|
});
|
|
605
661
|
// File validation and handling
|
|
606
662
|
const validateAndSetFile = (file, type) => {
|
|
607
|
-
const imageTypes = [
|
|
608
|
-
const documentTypes = [
|
|
609
|
-
|
|
663
|
+
const imageTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
|
|
664
|
+
const documentTypes = [
|
|
665
|
+
"application/pdf",
|
|
666
|
+
"application/msword",
|
|
667
|
+
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
668
|
+
"text/plain",
|
|
669
|
+
];
|
|
670
|
+
const allowedTypes = type === "image" ? imageTypes : documentTypes;
|
|
610
671
|
if (!allowedTypes.includes(file.type)) {
|
|
611
672
|
if (onError) {
|
|
612
673
|
onError(new Error(`Invalid file type. Please select a valid ${type} file.`));
|
|
@@ -614,20 +675,23 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
614
675
|
return false;
|
|
615
676
|
}
|
|
616
677
|
setSelectedFile(file);
|
|
617
|
-
if (type ===
|
|
678
|
+
if (type === "image") {
|
|
618
679
|
const url = URL.createObjectURL(file);
|
|
619
|
-
setFilePreview({ type:
|
|
680
|
+
setFilePreview({ type: "image", url, name: file.name });
|
|
620
681
|
}
|
|
621
682
|
else {
|
|
622
|
-
setFilePreview({ type:
|
|
683
|
+
setFilePreview({ type: "document", name: file.name });
|
|
623
684
|
}
|
|
624
685
|
setIsUploadMenuOpen(false);
|
|
625
686
|
return true;
|
|
626
687
|
};
|
|
627
688
|
const handleFileSelect = (type) => {
|
|
628
|
-
const input = document.createElement(
|
|
629
|
-
input.type =
|
|
630
|
-
input.accept =
|
|
689
|
+
const input = document.createElement("input");
|
|
690
|
+
input.type = "file";
|
|
691
|
+
input.accept =
|
|
692
|
+
type === "image"
|
|
693
|
+
? "image/png,image/jpeg,image/jpg,image/webp"
|
|
694
|
+
: "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain";
|
|
631
695
|
input.onchange = (e) => {
|
|
632
696
|
var _a;
|
|
633
697
|
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
@@ -686,14 +750,21 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
686
750
|
overflowY: "auto",
|
|
687
751
|
padding: theme.spacing.md,
|
|
688
752
|
} },
|
|
689
|
-
messages.map((message) => renderMessage
|
|
753
|
+
messages.map((message) => renderMessage
|
|
754
|
+
? renderMessage(message)
|
|
755
|
+
: defaultRenderMessage(message)),
|
|
756
|
+
isLoading && React.createElement(TypingIndicator, { theme: theme }),
|
|
690
757
|
React.createElement("div", { ref: messagesEndRef })),
|
|
691
758
|
React.createElement("form", { onSubmit: handleSubmit, style: {
|
|
692
759
|
padding: theme.spacing.md,
|
|
693
760
|
borderTop: `1px solid ${theme.colors.border}`,
|
|
694
761
|
backgroundColor: theme.colors.surface,
|
|
695
762
|
} },
|
|
696
|
-
React.createElement("div", { style: {
|
|
763
|
+
React.createElement("div", { style: {
|
|
764
|
+
display: "flex",
|
|
765
|
+
gap: theme.spacing.sm,
|
|
766
|
+
alignItems: "center",
|
|
767
|
+
} },
|
|
697
768
|
React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
|
|
698
769
|
flex: 1,
|
|
699
770
|
padding: theme.spacing.sm,
|
|
@@ -719,39 +790,39 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
719
790
|
height: "40px",
|
|
720
791
|
} }, PLUS_ICON_SVG$1),
|
|
721
792
|
isUploadMenuOpen && (React.createElement("div", { style: {
|
|
722
|
-
position:
|
|
723
|
-
bottom:
|
|
724
|
-
right:
|
|
793
|
+
position: "absolute",
|
|
794
|
+
bottom: "60px",
|
|
795
|
+
right: "10px",
|
|
725
796
|
backgroundColor: theme.colors.background,
|
|
726
797
|
border: `1px solid ${theme.colors.border}`,
|
|
727
798
|
borderRadius: theme.borderRadius,
|
|
728
799
|
boxShadow: theme.boxShadow,
|
|
729
800
|
zIndex: 1000,
|
|
730
|
-
minWidth:
|
|
801
|
+
minWidth: "150px",
|
|
731
802
|
} },
|
|
732
|
-
React.createElement("button", { onClick: () => handleFileSelect(
|
|
733
|
-
width:
|
|
803
|
+
React.createElement("button", { onClick: () => handleFileSelect("image"), style: {
|
|
804
|
+
width: "100%",
|
|
734
805
|
padding: theme.spacing.md,
|
|
735
|
-
border:
|
|
736
|
-
backgroundColor:
|
|
806
|
+
border: "none",
|
|
807
|
+
backgroundColor: "transparent",
|
|
737
808
|
color: theme.colors.text,
|
|
738
|
-
cursor:
|
|
739
|
-
display:
|
|
740
|
-
alignItems:
|
|
809
|
+
cursor: "pointer",
|
|
810
|
+
display: "flex",
|
|
811
|
+
alignItems: "center",
|
|
741
812
|
gap: theme.spacing.sm,
|
|
742
813
|
borderRadius: `${theme.borderRadius} ${theme.borderRadius} 0 0`,
|
|
743
814
|
} },
|
|
744
815
|
PHOTO_ICON_SVG,
|
|
745
816
|
"Upload Image"),
|
|
746
|
-
React.createElement("button", { onClick: () => handleFileSelect(
|
|
747
|
-
width:
|
|
817
|
+
React.createElement("button", { onClick: () => handleFileSelect("document"), style: {
|
|
818
|
+
width: "100%",
|
|
748
819
|
padding: theme.spacing.md,
|
|
749
|
-
border:
|
|
750
|
-
backgroundColor:
|
|
820
|
+
border: "none",
|
|
821
|
+
backgroundColor: "transparent",
|
|
751
822
|
color: theme.colors.text,
|
|
752
|
-
cursor:
|
|
753
|
-
display:
|
|
754
|
-
alignItems:
|
|
823
|
+
cursor: "pointer",
|
|
824
|
+
display: "flex",
|
|
825
|
+
alignItems: "center",
|
|
755
826
|
gap: theme.spacing.sm,
|
|
756
827
|
borderRadius: `0 0 ${theme.borderRadius} ${theme.borderRadius}`,
|
|
757
828
|
borderTop: `1px solid ${theme.colors.border}`,
|
|
@@ -760,7 +831,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
760
831
|
"Upload Document"))),
|
|
761
832
|
React.createElement("button", { type: "button", onClick: isListening ? stopVoiceInput : startVoiceInput, disabled: isLoading, title: isListening ? "Stop recording" : "Start voice input", style: {
|
|
762
833
|
padding: theme.spacing.sm,
|
|
763
|
-
backgroundColor: isListening
|
|
834
|
+
backgroundColor: isListening
|
|
835
|
+
? theme.colors.error
|
|
836
|
+
: theme.colors.secondary,
|
|
764
837
|
color: "#ffffff",
|
|
765
838
|
border: "none",
|
|
766
839
|
borderRadius: theme.borderRadius,
|
|
@@ -779,7 +852,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
779
852
|
color: "#ffffff",
|
|
780
853
|
border: "none",
|
|
781
854
|
borderRadius: theme.borderRadius,
|
|
782
|
-
cursor: isLoading || (!inputValue.trim() && !selectedFile)
|
|
855
|
+
cursor: isLoading || (!inputValue.trim() && !selectedFile)
|
|
856
|
+
? "not-allowed"
|
|
857
|
+
: "pointer",
|
|
783
858
|
opacity: isLoading || (!inputValue.trim() && !selectedFile) ? 0.5 : 1,
|
|
784
859
|
} }, isLoading ? "Sending..." : "Send")),
|
|
785
860
|
filePreview && (React.createElement("div", { style: {
|
|
@@ -788,24 +863,36 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
788
863
|
backgroundColor: theme.colors.surface,
|
|
789
864
|
border: `1px solid ${theme.colors.border}`,
|
|
790
865
|
borderRadius: theme.borderRadius,
|
|
791
|
-
display:
|
|
792
|
-
alignItems:
|
|
866
|
+
display: "flex",
|
|
867
|
+
alignItems: "center",
|
|
793
868
|
gap: theme.spacing.sm,
|
|
794
869
|
} },
|
|
795
|
-
filePreview.type ===
|
|
796
|
-
width:
|
|
797
|
-
height:
|
|
798
|
-
objectFit:
|
|
870
|
+
filePreview.type === "image" && filePreview.url ? (React.createElement("img", { src: filePreview.url, alt: "Preview", style: {
|
|
871
|
+
width: "40px",
|
|
872
|
+
height: "40px",
|
|
873
|
+
objectFit: "cover",
|
|
799
874
|
borderRadius: theme.borderRadius,
|
|
800
|
-
} })) : (React.createElement("div", { style: {
|
|
801
|
-
|
|
875
|
+
} })) : (React.createElement("div", { style: {
|
|
876
|
+
width: "40px",
|
|
877
|
+
height: "40px",
|
|
878
|
+
backgroundColor: theme.colors.secondary,
|
|
879
|
+
borderRadius: theme.borderRadius,
|
|
880
|
+
display: "flex",
|
|
881
|
+
alignItems: "center",
|
|
882
|
+
justifyContent: "center",
|
|
883
|
+
} }, FILE_ICON_SVG)),
|
|
884
|
+
React.createElement("div", { style: {
|
|
885
|
+
flex: 1,
|
|
886
|
+
fontSize: theme.fontSizes.sm,
|
|
887
|
+
color: theme.colors.text,
|
|
888
|
+
} }, filePreview.name),
|
|
802
889
|
React.createElement("button", { type: "button", onClick: removeFile, style: {
|
|
803
|
-
padding:
|
|
804
|
-
backgroundColor:
|
|
805
|
-
border:
|
|
890
|
+
padding: "4px",
|
|
891
|
+
backgroundColor: "transparent",
|
|
892
|
+
border: "none",
|
|
806
893
|
color: theme.colors.error,
|
|
807
|
-
cursor:
|
|
808
|
-
fontSize:
|
|
894
|
+
cursor: "pointer",
|
|
895
|
+
fontSize: "18px",
|
|
809
896
|
}, title: "Remove file" }, "\u00D7"))))));
|
|
810
897
|
}
|
|
811
898
|
// --- RENDER LOGIC FOR 'STANDARD' MODE (Widget Behavior) ---
|
|
@@ -822,7 +909,10 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
822
909
|
return (React.createElement("button", { className: toggleButtonClass, onClick: () => setIsOpen(true), title: toggleButtonTitle, style: Object.assign(Object.assign(Object.assign({
|
|
823
910
|
// Apply widget-specific fixed positioning
|
|
824
911
|
position: "fixed", zIndex: 40 }, togglePositionClass), { backgroundColor: finalHeaderBgColor }), (toggleButtonClass === defaultToggleButtonClass && {
|
|
825
|
-
width:
|
|
912
|
+
width: "56px",
|
|
913
|
+
height: "56px",
|
|
914
|
+
borderRadius: "50%",
|
|
915
|
+
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
826
916
|
})) }, toggleIcon));
|
|
827
917
|
}
|
|
828
918
|
// Render the full widget when open
|
|
@@ -841,7 +931,11 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
841
931
|
fontWeight: "bold",
|
|
842
932
|
fontSize: theme.fontSizes.md,
|
|
843
933
|
} },
|
|
844
|
-
titleIcon && (React.createElement("span", { style: {
|
|
934
|
+
titleIcon && (React.createElement("span", { style: {
|
|
935
|
+
marginRight: theme.spacing.sm,
|
|
936
|
+
display: "flex",
|
|
937
|
+
alignItems: "center",
|
|
938
|
+
} }, titleIcon)),
|
|
845
939
|
titleText),
|
|
846
940
|
React.createElement("button", { onClick: () => setIsOpen(false), style: {
|
|
847
941
|
background: "none",
|
|
@@ -859,13 +953,18 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
859
953
|
backgroundColor: theme.colors.background,
|
|
860
954
|
} },
|
|
861
955
|
messages.map((message) => renderMessage ? renderMessage(message) : defaultRenderMessage(message)),
|
|
956
|
+
isLoading && React.createElement(TypingIndicator, { theme: theme }),
|
|
862
957
|
React.createElement("div", { ref: messagesEndRef })),
|
|
863
958
|
React.createElement("form", { onSubmit: handleSubmit, style: {
|
|
864
959
|
padding: theme.spacing.md,
|
|
865
960
|
borderTop: `1px solid ${theme.colors.border}`,
|
|
866
961
|
backgroundColor: theme.colors.surface,
|
|
867
962
|
} },
|
|
868
|
-
React.createElement("div", { style: {
|
|
963
|
+
React.createElement("div", { style: {
|
|
964
|
+
display: "flex",
|
|
965
|
+
gap: theme.spacing.sm,
|
|
966
|
+
alignItems: "center",
|
|
967
|
+
} },
|
|
869
968
|
React.createElement("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: isLoading, style: {
|
|
870
969
|
flex: 1,
|
|
871
970
|
padding: theme.spacing.sm,
|
|
@@ -878,8 +977,7 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
878
977
|
} }),
|
|
879
978
|
React.createElement("button", { type: "button", onClick: () => setIsUploadMenuOpen(!isUploadMenuOpen), disabled: isLoading, title: "Attach file", style: {
|
|
880
979
|
padding: theme.spacing.sm,
|
|
881
|
-
|
|
882
|
-
color: "#ffffff",
|
|
980
|
+
color: theme.colors.border,
|
|
883
981
|
border: "none",
|
|
884
982
|
borderRadius: theme.borderRadius,
|
|
885
983
|
cursor: isLoading ? "not-allowed" : "pointer",
|
|
@@ -891,39 +989,45 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
891
989
|
height: "40px",
|
|
892
990
|
} }, PLUS_ICON_SVG$1),
|
|
893
991
|
isUploadMenuOpen && (React.createElement("div", { style: {
|
|
894
|
-
position:
|
|
895
|
-
bottom:
|
|
896
|
-
right:
|
|
992
|
+
position: "absolute",
|
|
993
|
+
bottom: "60px",
|
|
994
|
+
right: "10px",
|
|
897
995
|
backgroundColor: theme.colors.background,
|
|
898
996
|
border: `1px solid ${theme.colors.border}`,
|
|
899
997
|
borderRadius: theme.borderRadius,
|
|
900
998
|
boxShadow: theme.boxShadow,
|
|
901
999
|
zIndex: 1000,
|
|
902
|
-
minWidth:
|
|
1000
|
+
minWidth: "150px",
|
|
903
1001
|
} },
|
|
904
|
-
React.createElement("button", { onClick: () =>
|
|
905
|
-
|
|
1002
|
+
React.createElement("button", { onClick: (e) => {
|
|
1003
|
+
e.preventDefault();
|
|
1004
|
+
handleFileSelect("image");
|
|
1005
|
+
}, style: {
|
|
1006
|
+
width: "100%",
|
|
906
1007
|
padding: theme.spacing.md,
|
|
907
|
-
border:
|
|
908
|
-
backgroundColor:
|
|
1008
|
+
border: "none",
|
|
1009
|
+
backgroundColor: "transparent",
|
|
909
1010
|
color: theme.colors.text,
|
|
910
|
-
cursor:
|
|
911
|
-
display:
|
|
912
|
-
alignItems:
|
|
1011
|
+
cursor: "pointer",
|
|
1012
|
+
display: "flex",
|
|
1013
|
+
alignItems: "center",
|
|
913
1014
|
gap: theme.spacing.sm,
|
|
914
1015
|
borderRadius: `${theme.borderRadius} ${theme.borderRadius} 0 0`,
|
|
915
1016
|
} },
|
|
916
1017
|
PHOTO_ICON_SVG,
|
|
917
1018
|
"Upload Image"),
|
|
918
|
-
React.createElement("button", { onClick: () =>
|
|
919
|
-
|
|
1019
|
+
React.createElement("button", { onClick: (e) => {
|
|
1020
|
+
e.preventDefault();
|
|
1021
|
+
handleFileSelect("document");
|
|
1022
|
+
}, style: {
|
|
1023
|
+
width: "100%",
|
|
920
1024
|
padding: theme.spacing.md,
|
|
921
|
-
border:
|
|
922
|
-
backgroundColor:
|
|
1025
|
+
border: "none",
|
|
1026
|
+
backgroundColor: "transparent",
|
|
923
1027
|
color: theme.colors.text,
|
|
924
|
-
cursor:
|
|
925
|
-
display:
|
|
926
|
-
alignItems:
|
|
1028
|
+
cursor: "pointer",
|
|
1029
|
+
display: "flex",
|
|
1030
|
+
alignItems: "center",
|
|
927
1031
|
gap: theme.spacing.sm,
|
|
928
1032
|
borderRadius: `0 0 ${theme.borderRadius} ${theme.borderRadius}`,
|
|
929
1033
|
borderTop: `1px solid ${theme.colors.border}`,
|
|
@@ -950,7 +1054,9 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
950
1054
|
color: theme.colors.background,
|
|
951
1055
|
border: "none",
|
|
952
1056
|
borderRadius: theme.borderRadius,
|
|
953
|
-
cursor: isLoading || (!inputValue.trim() && !selectedFile)
|
|
1057
|
+
cursor: isLoading || (!inputValue.trim() && !selectedFile)
|
|
1058
|
+
? "not-allowed"
|
|
1059
|
+
: "pointer",
|
|
954
1060
|
opacity: isLoading || (!inputValue.trim() && !selectedFile) ? 0.5 : 1,
|
|
955
1061
|
} }, isLoading ? "Sending..." : "Send")),
|
|
956
1062
|
filePreview && (React.createElement("div", { style: {
|
|
@@ -959,24 +1065,36 @@ toggleButtonClass = defaultToggleButtonClass, toggleButtonTitle = "Open chat ass
|
|
|
959
1065
|
backgroundColor: theme.colors.surface,
|
|
960
1066
|
border: `1px solid ${theme.colors.border}`,
|
|
961
1067
|
borderRadius: theme.borderRadius,
|
|
962
|
-
display:
|
|
963
|
-
alignItems:
|
|
1068
|
+
display: "flex",
|
|
1069
|
+
alignItems: "center",
|
|
964
1070
|
gap: theme.spacing.sm,
|
|
965
1071
|
} },
|
|
966
|
-
filePreview.type ===
|
|
967
|
-
width:
|
|
968
|
-
height:
|
|
969
|
-
objectFit:
|
|
1072
|
+
filePreview.type === "image" && filePreview.url ? (React.createElement("img", { src: filePreview.url, alt: "Preview", style: {
|
|
1073
|
+
width: "40px",
|
|
1074
|
+
height: "40px",
|
|
1075
|
+
objectFit: "cover",
|
|
970
1076
|
borderRadius: theme.borderRadius,
|
|
971
|
-
} })) : (React.createElement("div", { style: {
|
|
972
|
-
|
|
1077
|
+
} })) : (React.createElement("div", { style: {
|
|
1078
|
+
width: "40px",
|
|
1079
|
+
height: "40px",
|
|
1080
|
+
backgroundColor: theme.colors.secondary,
|
|
1081
|
+
borderRadius: theme.borderRadius,
|
|
1082
|
+
display: "flex",
|
|
1083
|
+
alignItems: "center",
|
|
1084
|
+
justifyContent: "center",
|
|
1085
|
+
} }, FILE_ICON_SVG)),
|
|
1086
|
+
React.createElement("div", { style: {
|
|
1087
|
+
flex: 1,
|
|
1088
|
+
fontSize: theme.fontSizes.sm,
|
|
1089
|
+
color: theme.colors.text,
|
|
1090
|
+
} }, filePreview.name),
|
|
973
1091
|
React.createElement("button", { type: "button", onClick: removeFile, style: {
|
|
974
|
-
padding:
|
|
975
|
-
backgroundColor:
|
|
976
|
-
border:
|
|
1092
|
+
padding: "4px",
|
|
1093
|
+
backgroundColor: "transparent",
|
|
1094
|
+
border: "none",
|
|
977
1095
|
color: theme.colors.error,
|
|
978
|
-
cursor:
|
|
979
|
-
fontSize:
|
|
1096
|
+
cursor: "pointer",
|
|
1097
|
+
fontSize: "18px",
|
|
980
1098
|
}, title: "Remove file" }, "\u00D7"))))));
|
|
981
1099
|
}
|
|
982
1100
|
|