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