@mahatisystems/mahati-ui-components 5.3.2 → 6.0.0
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/index.css +337 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +22 -1
- package/dist/index.d.ts +22 -1
- package/dist/index.js +525 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +518 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -895,4 +895,25 @@ interface MahatiNotificationCardProps {
|
|
|
895
895
|
}
|
|
896
896
|
declare const MahatiNotificationCard: ({ title, testId, description, time, iconSrc, avatarSrc, badgeIconSrc, badgeType, primaryActionText, onPrimaryAction, secondaryActionText, onSecondaryAction, onClose, }: MahatiNotificationCardProps) => react_jsx_runtime.JSX.Element;
|
|
897
897
|
|
|
898
|
-
|
|
898
|
+
type Props = {
|
|
899
|
+
isOpen: boolean;
|
|
900
|
+
onClose: () => void;
|
|
901
|
+
onSubmit?: (data: {
|
|
902
|
+
rating: number;
|
|
903
|
+
feedback: string;
|
|
904
|
+
}) => void;
|
|
905
|
+
maxChars?: number;
|
|
906
|
+
title?: string;
|
|
907
|
+
ratingType?: "emoji" | "star";
|
|
908
|
+
optionalRating?: boolean;
|
|
909
|
+
};
|
|
910
|
+
declare function AdvancedFeedbackModal({ isOpen, onClose, onSubmit, maxChars, title, ratingType, optionalRating, }: Props): react_jsx_runtime.JSX.Element;
|
|
911
|
+
|
|
912
|
+
interface MahatiChatbotProps {
|
|
913
|
+
isOpen: boolean;
|
|
914
|
+
onClose: () => void;
|
|
915
|
+
title?: string;
|
|
916
|
+
}
|
|
917
|
+
declare function Chatbot({ isOpen, onClose }: MahatiChatbotProps): React__default.ReactPortal | null;
|
|
918
|
+
|
|
919
|
+
export { Accordion, type AccordionProps, type AvatarOption, type CalendarDate, type CalendarDateRange, type CalendarProps, type CalendarTime, CardOverlayLoader, CardWithLoading, CircularSpinner, DEFAULT_ACTIVITY_OPTIONS, DEFAULT_STATUS_OPTIONS, type FieldSize, Filter$1 as Filter, type FilterValues, LoadingDots, LoadingDotsLinear, MahatiActivity, type MahatiActivityProps, Chatbot as MahatiAdvancedChatbotModal, AdvancedFeedbackModal as MahatiAdvancedFeedbackModal, AsyncDropdown as MahatiAsyncDropdown, AvatarDropdown as MahatiAvatarDropdown, AvatarMultiSelectDropdown as MahatiAvatarMultiSelectDropdown, Button as MahatiButton, Calendar as MahatiCalendar, MahatiCameraAccessModal, Card as MahatiCard, CascadingDropdown as MahatiCascadingDropdown, MahatiChartAnalyticsWidget, ConfettiExplosion as MahatiConfettiExplosion, Dropdown as MahatiDropdown, FormContainer as MahatiFormContainer, GroupedDropdown as MahatiGroupedDropdown, Input as MahatiInput, MahatiLocationAccessModal, MahatiMicrophoneAccessModal, Modal as MahatiModal, MultiSelectDropdown as MahatiMultiSelectDropdown, MahatiNotificationCard, MahatiPromotionModal as MahatiPromotionModal_V1, MahatiPromotionModalV2Modal as MahatiPromotionModal_V2, MahatiPromotionModalV3Modal as MahatiPromotionModal_V3, RealisticConfetti as MahatiRealisticConfetti, MahatiSearch, type MahatiSearchProps, SearchableDropdown as MahatiSearchableDropdown, MahatiStatus, type MahatiStatusProps, TabbedInterface as MahatiTabbedInterface, Table as MahatiTable, TableWithTab as MahatiTableWithTab, TexttoAudio as MahatiTexttoAudio, ToastMessage as MahatiToastMessage, Tooltip as MahatiTooltip, type SelectOption, Spinner };
|
package/dist/index.d.ts
CHANGED
|
@@ -895,4 +895,25 @@ interface MahatiNotificationCardProps {
|
|
|
895
895
|
}
|
|
896
896
|
declare const MahatiNotificationCard: ({ title, testId, description, time, iconSrc, avatarSrc, badgeIconSrc, badgeType, primaryActionText, onPrimaryAction, secondaryActionText, onSecondaryAction, onClose, }: MahatiNotificationCardProps) => react_jsx_runtime.JSX.Element;
|
|
897
897
|
|
|
898
|
-
|
|
898
|
+
type Props = {
|
|
899
|
+
isOpen: boolean;
|
|
900
|
+
onClose: () => void;
|
|
901
|
+
onSubmit?: (data: {
|
|
902
|
+
rating: number;
|
|
903
|
+
feedback: string;
|
|
904
|
+
}) => void;
|
|
905
|
+
maxChars?: number;
|
|
906
|
+
title?: string;
|
|
907
|
+
ratingType?: "emoji" | "star";
|
|
908
|
+
optionalRating?: boolean;
|
|
909
|
+
};
|
|
910
|
+
declare function AdvancedFeedbackModal({ isOpen, onClose, onSubmit, maxChars, title, ratingType, optionalRating, }: Props): react_jsx_runtime.JSX.Element;
|
|
911
|
+
|
|
912
|
+
interface MahatiChatbotProps {
|
|
913
|
+
isOpen: boolean;
|
|
914
|
+
onClose: () => void;
|
|
915
|
+
title?: string;
|
|
916
|
+
}
|
|
917
|
+
declare function Chatbot({ isOpen, onClose }: MahatiChatbotProps): React__default.ReactPortal | null;
|
|
918
|
+
|
|
919
|
+
export { Accordion, type AccordionProps, type AvatarOption, type CalendarDate, type CalendarDateRange, type CalendarProps, type CalendarTime, CardOverlayLoader, CardWithLoading, CircularSpinner, DEFAULT_ACTIVITY_OPTIONS, DEFAULT_STATUS_OPTIONS, type FieldSize, Filter$1 as Filter, type FilterValues, LoadingDots, LoadingDotsLinear, MahatiActivity, type MahatiActivityProps, Chatbot as MahatiAdvancedChatbotModal, AdvancedFeedbackModal as MahatiAdvancedFeedbackModal, AsyncDropdown as MahatiAsyncDropdown, AvatarDropdown as MahatiAvatarDropdown, AvatarMultiSelectDropdown as MahatiAvatarMultiSelectDropdown, Button as MahatiButton, Calendar as MahatiCalendar, MahatiCameraAccessModal, Card as MahatiCard, CascadingDropdown as MahatiCascadingDropdown, MahatiChartAnalyticsWidget, ConfettiExplosion as MahatiConfettiExplosion, Dropdown as MahatiDropdown, FormContainer as MahatiFormContainer, GroupedDropdown as MahatiGroupedDropdown, Input as MahatiInput, MahatiLocationAccessModal, MahatiMicrophoneAccessModal, Modal as MahatiModal, MultiSelectDropdown as MahatiMultiSelectDropdown, MahatiNotificationCard, MahatiPromotionModal as MahatiPromotionModal_V1, MahatiPromotionModalV2Modal as MahatiPromotionModal_V2, MahatiPromotionModalV3Modal as MahatiPromotionModal_V3, RealisticConfetti as MahatiRealisticConfetti, MahatiSearch, type MahatiSearchProps, SearchableDropdown as MahatiSearchableDropdown, MahatiStatus, type MahatiStatusProps, TabbedInterface as MahatiTabbedInterface, Table as MahatiTable, TableWithTab as MahatiTableWithTab, TexttoAudio as MahatiTexttoAudio, ToastMessage as MahatiToastMessage, Tooltip as MahatiTooltip, type SelectOption, Spinner };
|
package/dist/index.js
CHANGED
|
@@ -415,6 +415,12 @@ __export(index_exports, {
|
|
|
415
415
|
MahatiActivity: function MahatiActivity1() {
|
|
416
416
|
return MahatiActivity;
|
|
417
417
|
},
|
|
418
|
+
MahatiAdvancedChatbotModal: function MahatiAdvancedChatbotModal1() {
|
|
419
|
+
return Chatbot;
|
|
420
|
+
},
|
|
421
|
+
MahatiAdvancedFeedbackModal: function MahatiAdvancedFeedbackModal1() {
|
|
422
|
+
return AdvancedFeedbackModal;
|
|
423
|
+
},
|
|
418
424
|
MahatiAsyncDropdown: function MahatiAsyncDropdown1() {
|
|
419
425
|
return AsyncDropdown;
|
|
420
426
|
},
|
|
@@ -13182,7 +13188,7 @@ var MahatiPromotionModalV3Modal = function MahatiPromotionModalV3Modal(param) {
|
|
|
13182
13188
|
onClick: function onClick(e) {
|
|
13183
13189
|
return e.stopPropagation();
|
|
13184
13190
|
},
|
|
13185
|
-
className: "w-
|
|
13191
|
+
className: "relative w-[420px] max-w-[90%] rounded-[16px] bg-white p-6 text-center shadow-[0_10px_30px_rgba(0,0,0,0.2)] border border-[#CFE8DC]",
|
|
13186
13192
|
children: [
|
|
13187
13193
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", {
|
|
13188
13194
|
onClick: onClose,
|
|
@@ -13312,6 +13318,522 @@ var MahatiNotificationCard = function MahatiNotificationCard(param) {
|
|
|
13312
13318
|
]
|
|
13313
13319
|
});
|
|
13314
13320
|
};
|
|
13321
|
+
// src/components/AdvancedFeedbackModal.tsx
|
|
13322
|
+
var import_react25 = require("react");
|
|
13323
|
+
var import_lucide_react7 = require("lucide-react");
|
|
13324
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
13325
|
+
var ratings = [
|
|
13326
|
+
{
|
|
13327
|
+
id: 1,
|
|
13328
|
+
label: "Terrible",
|
|
13329
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.Angry, {
|
|
13330
|
+
size: 34
|
|
13331
|
+
})
|
|
13332
|
+
},
|
|
13333
|
+
{
|
|
13334
|
+
id: 2,
|
|
13335
|
+
label: "Bad",
|
|
13336
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.Frown, {
|
|
13337
|
+
size: 34
|
|
13338
|
+
})
|
|
13339
|
+
},
|
|
13340
|
+
{
|
|
13341
|
+
id: 3,
|
|
13342
|
+
label: "Okay",
|
|
13343
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.Meh, {
|
|
13344
|
+
size: 34
|
|
13345
|
+
})
|
|
13346
|
+
},
|
|
13347
|
+
{
|
|
13348
|
+
id: 4,
|
|
13349
|
+
label: "Good",
|
|
13350
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.Smile, {
|
|
13351
|
+
size: 34
|
|
13352
|
+
})
|
|
13353
|
+
},
|
|
13354
|
+
{
|
|
13355
|
+
id: 5,
|
|
13356
|
+
label: "Amazing",
|
|
13357
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.Laugh, {
|
|
13358
|
+
size: 34
|
|
13359
|
+
})
|
|
13360
|
+
}
|
|
13361
|
+
];
|
|
13362
|
+
function AdvancedFeedbackModal(param) {
|
|
13363
|
+
var isOpen = param.isOpen, onClose = param.onClose, onSubmit = param.onSubmit, _param_maxChars = param.maxChars, maxChars = _param_maxChars === void 0 ? 200 : _param_maxChars, _param_title = param.title, title = _param_title === void 0 ? "Share Your Feedback" : _param_title, _param_ratingType = param.ratingType, ratingType = _param_ratingType === void 0 ? "emoji" : _param_ratingType, _param_optionalRating = param.optionalRating, optionalRating = _param_optionalRating === void 0 ? false : _param_optionalRating;
|
|
13364
|
+
var _ref = _sliced_to_array((0, import_react25.useState)("rating"), 2), step = _ref[0], setStep = _ref[1];
|
|
13365
|
+
var _ref1 = _sliced_to_array((0, import_react25.useState)(null), 2), rating = _ref1[0], setRating = _ref1[1];
|
|
13366
|
+
var _ref2 = _sliced_to_array((0, import_react25.useState)(""), 2), message = _ref2[0], setMessage = _ref2[1];
|
|
13367
|
+
var _ref3 = _sliced_to_array((0, import_react25.useState)(false), 2), showConfirm = _ref3[0], setShowConfirm = _ref3[1];
|
|
13368
|
+
var _ref4 = _sliced_to_array((0, import_react25.useState)(false), 2), showForm = _ref4[0], setShowForm = _ref4[1];
|
|
13369
|
+
var _ref5 = _sliced_to_array((0, import_react25.useState)(null), 2), emojiRating = _ref5[0], setEmojiRating = _ref5[1];
|
|
13370
|
+
var remaining = maxChars - message.length;
|
|
13371
|
+
var isValid = optionalRating ? message.trim().length > 0 : rating !== null && message.trim().length > 0;
|
|
13372
|
+
var handleSubmit = function handleSubmit() {
|
|
13373
|
+
if (!optionalRating && !rating) return;
|
|
13374
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
|
|
13375
|
+
rating: rating !== null && rating !== void 0 ? rating : 0,
|
|
13376
|
+
feedback: message
|
|
13377
|
+
});
|
|
13378
|
+
setStep("success");
|
|
13379
|
+
};
|
|
13380
|
+
var resetAndClose = function resetAndClose() {
|
|
13381
|
+
setStep("rating");
|
|
13382
|
+
setRating(null);
|
|
13383
|
+
setMessage("");
|
|
13384
|
+
onClose();
|
|
13385
|
+
};
|
|
13386
|
+
(0, import_react25.useEffect)(function() {
|
|
13387
|
+
if (isOpen) {
|
|
13388
|
+
setStep("rating");
|
|
13389
|
+
setRating(null);
|
|
13390
|
+
setShowConfirm(false);
|
|
13391
|
+
setEmojiRating(null);
|
|
13392
|
+
setShowForm(false);
|
|
13393
|
+
setMessage("");
|
|
13394
|
+
}
|
|
13395
|
+
}, [
|
|
13396
|
+
isOpen
|
|
13397
|
+
]);
|
|
13398
|
+
var words = title.trim().split(/\s+/);
|
|
13399
|
+
var mid = Math.floor(words.length / 2);
|
|
13400
|
+
var firstPart = words.slice(0, mid).join(" ");
|
|
13401
|
+
var secondPart = words.slice(mid).join(" ");
|
|
13402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13403
|
+
className: "fixed inset-0 z-[9999] flex items-center justify-center transition-opacity duration-300 ".concat(isOpen ? "opacity-100 visible" : "opacity-0 invisible", " bg-black/40 backdrop-blur-sm"),
|
|
13404
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13405
|
+
className: "w-full max-w-xl relative",
|
|
13406
|
+
children: [
|
|
13407
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13408
|
+
className: "absolute inset-0 opacity-[0.05] pointer-events-none",
|
|
13409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13410
|
+
className: "w-full h-full",
|
|
13411
|
+
style: {
|
|
13412
|
+
backgroundImage: "linear-gradient(#1761a3 1px, transparent 1px), linear-gradient(to right, #1761a3 1px, transparent 1px)",
|
|
13413
|
+
backgroundSize: "40px 40px"
|
|
13414
|
+
}
|
|
13415
|
+
})
|
|
13416
|
+
}),
|
|
13417
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13418
|
+
className: "w-full min-h-[430px] relative rounded-2xl p-[2px] bg-gradient-to-r from-[#16a34a]/50 via-transparent to-[#1761a3]/50 shadow-[0_10px_40px_rgba(23,97,163,0.15)]",
|
|
13419
|
+
children: [
|
|
13420
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13421
|
+
className: "absolute inset-0 rounded-2xl bg-gradient-to-r from-[#1761a3]/20 via-transparent to-[#16a34a]/20 blur-xl opacity-60"
|
|
13422
|
+
}),
|
|
13423
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13424
|
+
className: "relative overflow-hidden rounded-2xl bg-gradient-to-br from-white/90 to-white/70 backdrop-blur-xl border border-white/20 min-h-[430px]",
|
|
13425
|
+
children: [
|
|
13426
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", {
|
|
13427
|
+
onClick: resetAndClose,
|
|
13428
|
+
className: "absolute top-4 right-4 text-gray-500 hover:text-black z-10",
|
|
13429
|
+
children: "\u2715"
|
|
13430
|
+
}),
|
|
13431
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13432
|
+
className: "absolute -top-20 -left-20 w-60 h-60 bg-[#1761a3]/20 rounded-full blur-3xl"
|
|
13433
|
+
}),
|
|
13434
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13435
|
+
className: "absolute -bottom-20 -right-20 w-60 h-60 bg-[#1761a3]/20 rounded-full blur-3xl"
|
|
13436
|
+
}),
|
|
13437
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13438
|
+
className: "relative p-6 md:p-8 min-h-[350px] flex flex-col justify-start",
|
|
13439
|
+
children: [
|
|
13440
|
+
step !== "success" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, {
|
|
13441
|
+
children: [
|
|
13442
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("h2", {
|
|
13443
|
+
className: "text-2xl md:text-3xl font-bold text-center mb-6",
|
|
13444
|
+
children: [
|
|
13445
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", {
|
|
13446
|
+
className: "text-[#0f2a44]",
|
|
13447
|
+
children: firstPart
|
|
13448
|
+
}),
|
|
13449
|
+
" ",
|
|
13450
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", {
|
|
13451
|
+
className: "bg-gradient-to-r from-[#16a34a] to-[#1761a3] bg-clip-text text-transparent",
|
|
13452
|
+
children: secondPart
|
|
13453
|
+
})
|
|
13454
|
+
]
|
|
13455
|
+
}),
|
|
13456
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13457
|
+
className: "flex flex-col items-center gap-4 mb-6",
|
|
13458
|
+
children: [
|
|
13459
|
+
(ratingType === "star" || optionalRating) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13460
|
+
className: "flex justify-center gap-6 mb-6 w-full",
|
|
13461
|
+
children: [
|
|
13462
|
+
1,
|
|
13463
|
+
2,
|
|
13464
|
+
3,
|
|
13465
|
+
4,
|
|
13466
|
+
5
|
|
13467
|
+
].map(function(star) {
|
|
13468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", {
|
|
13469
|
+
onClick: function onClick() {
|
|
13470
|
+
setRating(star);
|
|
13471
|
+
},
|
|
13472
|
+
className: "transition-transform hover:scale-110",
|
|
13473
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13474
|
+
className: "w-8 h-8 bg-center bg-no-repeat transition-all duration-200 ".concat(star <= (rating || 0) ? "opacity-100 scale-110" : "opacity-70 hover:opacity-100"),
|
|
13475
|
+
style: {
|
|
13476
|
+
backgroundImage: "url(".concat(star <= (rating || 0) ? "/icons/yellowstaremoji.png" : "/icons/staremoji.png", ")"),
|
|
13477
|
+
backgroundSize: "contain"
|
|
13478
|
+
}
|
|
13479
|
+
})
|
|
13480
|
+
}, star);
|
|
13481
|
+
})
|
|
13482
|
+
}),
|
|
13483
|
+
(ratingType === "emoji" || rating !== null) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13484
|
+
className: "flex justify-center gap-4 mb-4 w-full",
|
|
13485
|
+
children: ratings.map(function(item) {
|
|
13486
|
+
var isActive = emojiRating === item.id;
|
|
13487
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("button", {
|
|
13488
|
+
onClick: function onClick() {
|
|
13489
|
+
setEmojiRating(item.id);
|
|
13490
|
+
setShowConfirm(true);
|
|
13491
|
+
},
|
|
13492
|
+
className: "flex flex-col items-center gap-1 flex-1 py-3 rounded-xl transition-all duration-300\n ".concat(isActive ? "bg-gradient-to-r from-[#16a34a] to-[#1761a3] text-white scale-105 shadow-md" : "text-gray-500 hover:bg-mahati-light"),
|
|
13493
|
+
children: [
|
|
13494
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13495
|
+
className: "".concat(isActive ? "scale-110 text-white" : "text-[#1761a3]"),
|
|
13496
|
+
children: item.icon
|
|
13497
|
+
}),
|
|
13498
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", {
|
|
13499
|
+
className: "text-xs font-medium",
|
|
13500
|
+
children: item.label
|
|
13501
|
+
})
|
|
13502
|
+
]
|
|
13503
|
+
}, item.id);
|
|
13504
|
+
})
|
|
13505
|
+
})
|
|
13506
|
+
]
|
|
13507
|
+
}),
|
|
13508
|
+
showConfirm && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13509
|
+
className: "text-center mt-4",
|
|
13510
|
+
children: [
|
|
13511
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", {
|
|
13512
|
+
className: "bg-gradient-to-r from-[#16a34a] to-[#1761a3] bg-clip-text text-transparent",
|
|
13513
|
+
children: "Would you like to give feedback?"
|
|
13514
|
+
}),
|
|
13515
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13516
|
+
className: "flex gap-4 justify-center mt-3",
|
|
13517
|
+
children: [
|
|
13518
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", {
|
|
13519
|
+
onClick: function onClick() {
|
|
13520
|
+
return setShowForm(true);
|
|
13521
|
+
},
|
|
13522
|
+
className: "px-6 py-2 rounded-xl text-white bg-gradient-to-r from-[#16a34a] to-[#1761a3]",
|
|
13523
|
+
children: "Yes"
|
|
13524
|
+
}),
|
|
13525
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", {
|
|
13526
|
+
onClick: function onClick() {
|
|
13527
|
+
return setStep("success");
|
|
13528
|
+
},
|
|
13529
|
+
className: "px-6 py-2 rounded-xl text-white bg-gradient-to-r from-[#16a34a] to-[#1761a3]",
|
|
13530
|
+
children: "No"
|
|
13531
|
+
})
|
|
13532
|
+
]
|
|
13533
|
+
})
|
|
13534
|
+
]
|
|
13535
|
+
}),
|
|
13536
|
+
showForm && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, {
|
|
13537
|
+
children: [
|
|
13538
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("textarea", {
|
|
13539
|
+
value: message,
|
|
13540
|
+
onChange: function onChange(e) {
|
|
13541
|
+
if (e.target.value.length <= maxChars) {
|
|
13542
|
+
setMessage(e.target.value);
|
|
13543
|
+
}
|
|
13544
|
+
},
|
|
13545
|
+
placeholder: "Tell us about your experience...",
|
|
13546
|
+
className: "w-full h-28 mt-4 rounded-xl border border-gray-300 p-4"
|
|
13547
|
+
}),
|
|
13548
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", {
|
|
13549
|
+
onClick: handleSubmit,
|
|
13550
|
+
disabled: !isValid,
|
|
13551
|
+
className: "w-full mt-4 py-3 rounded-xl font-medium transition-all duration-300\n ".concat(isValid ? "text-white bg-gradient-to-r from-[#16a34a] to-[#1761a3] hover:scale-[1.02] shadow-md" : "bg-gray-300 text-gray-500 cursor-not-allowed", "\n "),
|
|
13552
|
+
children: "Submit Feedback"
|
|
13553
|
+
})
|
|
13554
|
+
]
|
|
13555
|
+
})
|
|
13556
|
+
]
|
|
13557
|
+
}),
|
|
13558
|
+
step === "success" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13559
|
+
className: "flex flex-col items-center justify-center text-center h-full",
|
|
13560
|
+
children: [
|
|
13561
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", {
|
|
13562
|
+
className: "mb-4 text-[#16a34a] relative",
|
|
13563
|
+
children: [
|
|
13564
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {
|
|
13565
|
+
className: "absolute inset-0 bg-[#16a34a]/20 blur-xl rounded-full"
|
|
13566
|
+
}),
|
|
13567
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.CheckCircle2, {
|
|
13568
|
+
size: 56,
|
|
13569
|
+
className: "relative"
|
|
13570
|
+
})
|
|
13571
|
+
]
|
|
13572
|
+
}),
|
|
13573
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", {
|
|
13574
|
+
className: "text-2xl font-bold mb-2 bg-gradient-to-r from-[#16a34a] to-[#1761a3] bg-clip-text text-transparent",
|
|
13575
|
+
children: "Thank You!"
|
|
13576
|
+
}),
|
|
13577
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", {
|
|
13578
|
+
className: "text-black mb-4",
|
|
13579
|
+
children: "Your feedback has been successfully submitted."
|
|
13580
|
+
}),
|
|
13581
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", {
|
|
13582
|
+
onClick: resetAndClose,
|
|
13583
|
+
className: "px-5 py-2 rounded-lg bg-gray-200 hover:bg-gray-300",
|
|
13584
|
+
children: "Close"
|
|
13585
|
+
})
|
|
13586
|
+
]
|
|
13587
|
+
})
|
|
13588
|
+
]
|
|
13589
|
+
})
|
|
13590
|
+
]
|
|
13591
|
+
})
|
|
13592
|
+
]
|
|
13593
|
+
})
|
|
13594
|
+
]
|
|
13595
|
+
})
|
|
13596
|
+
});
|
|
13597
|
+
}
|
|
13598
|
+
// src/components/AdvancedChatbot.tsx
|
|
13599
|
+
var import_react26 = require("react");
|
|
13600
|
+
var import_react_dom4 = require("react-dom");
|
|
13601
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
13602
|
+
function Chatbot(param) {
|
|
13603
|
+
var isOpen = param.isOpen, onClose = param.onClose;
|
|
13604
|
+
var _ref = _sliced_to_array((0, import_react26.useState)("form"), 2), step = _ref[0], setStep = _ref[1];
|
|
13605
|
+
var _ref1 = _sliced_to_array((0, import_react26.useState)([
|
|
13606
|
+
{
|
|
13607
|
+
type: "bot",
|
|
13608
|
+
text: "Welcome! I'm your Mahati Virtual Assistant. How can I help you today?"
|
|
13609
|
+
}
|
|
13610
|
+
]), 2), messages = _ref1[0], setMessages = _ref1[1];
|
|
13611
|
+
var _ref2 = _sliced_to_array((0, import_react26.useState)(""), 2), input = _ref2[0], setInput = _ref2[1];
|
|
13612
|
+
(0, import_react26.useEffect)(function() {
|
|
13613
|
+
if (isOpen) {
|
|
13614
|
+
setStep("form");
|
|
13615
|
+
setMessages([
|
|
13616
|
+
{
|
|
13617
|
+
type: "bot",
|
|
13618
|
+
text: "Welcome! I'm your Mahati Virtual Assistant. How can I help you today?"
|
|
13619
|
+
}
|
|
13620
|
+
]);
|
|
13621
|
+
}
|
|
13622
|
+
}, [
|
|
13623
|
+
isOpen
|
|
13624
|
+
]);
|
|
13625
|
+
if (!isOpen) return null;
|
|
13626
|
+
var handleSend = function handleSend() {
|
|
13627
|
+
if (!input.trim()) return;
|
|
13628
|
+
setMessages(function(prev) {
|
|
13629
|
+
return _to_consumable_array(prev).concat([
|
|
13630
|
+
{
|
|
13631
|
+
type: "user",
|
|
13632
|
+
text: input
|
|
13633
|
+
}
|
|
13634
|
+
]);
|
|
13635
|
+
});
|
|
13636
|
+
setTimeout(function() {
|
|
13637
|
+
setMessages(function(prev) {
|
|
13638
|
+
return _to_consumable_array(prev).concat([
|
|
13639
|
+
{
|
|
13640
|
+
type: "bot",
|
|
13641
|
+
text: "Got it! Let me help you with that."
|
|
13642
|
+
}
|
|
13643
|
+
]);
|
|
13644
|
+
});
|
|
13645
|
+
}, 500);
|
|
13646
|
+
setInput("");
|
|
13647
|
+
};
|
|
13648
|
+
return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, {
|
|
13649
|
+
children: [
|
|
13650
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13651
|
+
onClick: onClose,
|
|
13652
|
+
className: "fixed inset-0 bg-black/30 backdrop-blur-[2px] z-40"
|
|
13653
|
+
}),
|
|
13654
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13655
|
+
className: "fixed bottom-6 right-6 w-[420px] h-[620px] bg-[#eef2f4] rounded-2xl shadow-2xl overflow-hidden flex flex-col z-[9999]",
|
|
13656
|
+
children: [
|
|
13657
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13658
|
+
className: "px-5 py-4 text-white flex justify-between items-center bg-gradient-to-r from-[#4daf83] to-[#1761a3]",
|
|
13659
|
+
children: [
|
|
13660
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13661
|
+
children: [
|
|
13662
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", {
|
|
13663
|
+
className: "text-md font-semibold",
|
|
13664
|
+
children: "Mahati Virtual Assistant"
|
|
13665
|
+
}),
|
|
13666
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", {
|
|
13667
|
+
className: "text-xs opacity-80",
|
|
13668
|
+
children: "Ask anything. We're here to help."
|
|
13669
|
+
})
|
|
13670
|
+
]
|
|
13671
|
+
}),
|
|
13672
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", {
|
|
13673
|
+
onClick: onClose,
|
|
13674
|
+
className: "w-9 h-9 rounded-full bg-white/20 flex items-center justify-center",
|
|
13675
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", {
|
|
13676
|
+
src: "/images/close-icon.png",
|
|
13677
|
+
className: "w-3 h-3"
|
|
13678
|
+
})
|
|
13679
|
+
})
|
|
13680
|
+
]
|
|
13681
|
+
}),
|
|
13682
|
+
step === "form" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13683
|
+
className: "flex flex-col h-full bg-[#f4f6f8]",
|
|
13684
|
+
children: [
|
|
13685
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13686
|
+
className: "flex-1 px-5 pt-6 pb-4",
|
|
13687
|
+
children: [
|
|
13688
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13689
|
+
className: "text-center mb-7",
|
|
13690
|
+
children: [
|
|
13691
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13692
|
+
className: "w-14 h-14 mx-auto mb-3 rounded-xl bg-gradient-to-br from-[#1761a3]/10 to-[#4daf83]/10 flex items-center justify-center shadow-sm",
|
|
13693
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", {
|
|
13694
|
+
src: "/images/Mahati-Logo-graphics.png",
|
|
13695
|
+
className: "w-9 h-9"
|
|
13696
|
+
})
|
|
13697
|
+
}),
|
|
13698
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", {
|
|
13699
|
+
className: "text-lg font-bold text-[#1f2d3d]",
|
|
13700
|
+
children: "Welcome to Mahati Assistant"
|
|
13701
|
+
}),
|
|
13702
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", {
|
|
13703
|
+
className: "text-xs text-gray-500",
|
|
13704
|
+
children: "Please enter your details to start the conversation"
|
|
13705
|
+
})
|
|
13706
|
+
]
|
|
13707
|
+
}),
|
|
13708
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13709
|
+
className: "space-y-5",
|
|
13710
|
+
children: [
|
|
13711
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", {
|
|
13712
|
+
className: "w-full px-4 py-2.5 rounded-lg border bg-gray-50",
|
|
13713
|
+
placeholder: "First Name"
|
|
13714
|
+
}),
|
|
13715
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", {
|
|
13716
|
+
className: "w-full px-4 py-2.5 rounded-lg border bg-gray-50",
|
|
13717
|
+
placeholder: "Last Name"
|
|
13718
|
+
}),
|
|
13719
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", {
|
|
13720
|
+
className: "w-full px-4 py-2.5 rounded-lg border bg-gray-50",
|
|
13721
|
+
placeholder: "Email"
|
|
13722
|
+
})
|
|
13723
|
+
]
|
|
13724
|
+
})
|
|
13725
|
+
]
|
|
13726
|
+
}),
|
|
13727
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13728
|
+
className: "px-5 pb-5 pt-3 bg-white border-t",
|
|
13729
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", {
|
|
13730
|
+
onClick: function onClick() {
|
|
13731
|
+
return setStep("chat");
|
|
13732
|
+
},
|
|
13733
|
+
className: "w-full py-3 text-white bg-gradient-to-r from-[#1761a3] to-[#4daf83] rounded-lg",
|
|
13734
|
+
children: "Start Conversation"
|
|
13735
|
+
})
|
|
13736
|
+
})
|
|
13737
|
+
]
|
|
13738
|
+
}),
|
|
13739
|
+
step === "chat" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13740
|
+
className: "flex flex-col flex-1 min-h-0",
|
|
13741
|
+
children: [
|
|
13742
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13743
|
+
className: "flex-1 overflow-y-auto px-5 py-5 space-y-6",
|
|
13744
|
+
children: messages.map(function(msg, i) {
|
|
13745
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13746
|
+
children: msg.type === "bot" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13747
|
+
className: "flex items-start gap-3",
|
|
13748
|
+
children: [
|
|
13749
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", {
|
|
13750
|
+
src: "/images/chatbot-icon.png",
|
|
13751
|
+
className: "w-7 h-7 mt-1"
|
|
13752
|
+
}),
|
|
13753
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13754
|
+
className: "px-4 py-3 max-w-[260px] rounded-[4px_16px_16px_16px] bg-gradient-to-br from-[#1761a3]/10 to-[#4daf83]/10 text-[#0f2a44] shadow-sm",
|
|
13755
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", {
|
|
13756
|
+
className: "text-sm text-[#2c3e50]",
|
|
13757
|
+
children: msg.text
|
|
13758
|
+
})
|
|
13759
|
+
})
|
|
13760
|
+
]
|
|
13761
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13762
|
+
className: "flex justify-end items-start gap-3",
|
|
13763
|
+
children: [
|
|
13764
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13765
|
+
className: "bg-gradient-to-r from-[#4daf83] to-[#1761a3] text-white px-4 py-3 rounded-[16px_4px_16px_16px] max-w-[220px] shadow-md",
|
|
13766
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", {
|
|
13767
|
+
className: "text-sm",
|
|
13768
|
+
children: msg.text
|
|
13769
|
+
})
|
|
13770
|
+
}),
|
|
13771
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13772
|
+
className: "w-10 h-10 rounded-full bg-[#d9e2e7] flex items-center justify-center",
|
|
13773
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", {
|
|
13774
|
+
src: "/images/user-icon.png",
|
|
13775
|
+
className: "w-4 h-4"
|
|
13776
|
+
})
|
|
13777
|
+
})
|
|
13778
|
+
]
|
|
13779
|
+
})
|
|
13780
|
+
}, i);
|
|
13781
|
+
})
|
|
13782
|
+
}),
|
|
13783
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13784
|
+
className: "flex justify-center py-3 bg-[#eef2f4] border-t border-[#e4ddd2]",
|
|
13785
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", {
|
|
13786
|
+
className: "px-5 py-2 text-xs rounded-full border border-[#1761a3]/40 text-[#1761a3] font-semibold bg-white shadow-sm flex items-center gap-2",
|
|
13787
|
+
children: [
|
|
13788
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", {
|
|
13789
|
+
src: "/images/save-icon.png",
|
|
13790
|
+
className: "w-4 h-4"
|
|
13791
|
+
}),
|
|
13792
|
+
"Save Conversation"
|
|
13793
|
+
]
|
|
13794
|
+
})
|
|
13795
|
+
}),
|
|
13796
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13797
|
+
className: "px-4 py-3 bg-white border-t flex items-center gap-3 shadow-[0_-4px_20px_rgba(0,0,0,0.05)]",
|
|
13798
|
+
children: [
|
|
13799
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", {
|
|
13800
|
+
className: "flex-1 flex items-center px-4 py-1 rounded-full border border-gray-300 bg-gray-50",
|
|
13801
|
+
children: [
|
|
13802
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", {
|
|
13803
|
+
type: "text",
|
|
13804
|
+
value: input,
|
|
13805
|
+
onChange: function onChange(e) {
|
|
13806
|
+
return setInput(e.target.value);
|
|
13807
|
+
},
|
|
13808
|
+
placeholder: "Type your message...",
|
|
13809
|
+
className: "flex-1 bg-transparent text-sm outline-none"
|
|
13810
|
+
}),
|
|
13811
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", {
|
|
13812
|
+
className: "p-2 rounded-full hover:bg-gray-200 cursor-pointer",
|
|
13813
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", {
|
|
13814
|
+
src: "/images/attach-icon.png",
|
|
13815
|
+
className: "w-4 h-4 opacity-60"
|
|
13816
|
+
})
|
|
13817
|
+
})
|
|
13818
|
+
]
|
|
13819
|
+
}),
|
|
13820
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", {
|
|
13821
|
+
onClick: handleSend,
|
|
13822
|
+
className: "w-11 h-11 rounded-full bg-gradient-to-r from-[#4daf83] to-[#1761a3] flex items-center justify-center",
|
|
13823
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", {
|
|
13824
|
+
src: "/images/send-icon.png",
|
|
13825
|
+
className: "w-4 h-4"
|
|
13826
|
+
})
|
|
13827
|
+
})
|
|
13828
|
+
]
|
|
13829
|
+
})
|
|
13830
|
+
]
|
|
13831
|
+
})
|
|
13832
|
+
]
|
|
13833
|
+
})
|
|
13834
|
+
]
|
|
13835
|
+
}), document.body);
|
|
13836
|
+
}
|
|
13315
13837
|
// Annotate the CommonJS export names for ESM import in node:
|
|
13316
13838
|
0 && (module.exports = {
|
|
13317
13839
|
Accordion: Accordion,
|
|
@@ -13324,6 +13846,8 @@ var MahatiNotificationCard = function MahatiNotificationCard(param) {
|
|
|
13324
13846
|
LoadingDots: LoadingDots,
|
|
13325
13847
|
LoadingDotsLinear: LoadingDotsLinear,
|
|
13326
13848
|
MahatiActivity: MahatiActivity,
|
|
13849
|
+
MahatiAdvancedChatbotModal: MahatiAdvancedChatbotModal,
|
|
13850
|
+
MahatiAdvancedFeedbackModal: MahatiAdvancedFeedbackModal,
|
|
13327
13851
|
MahatiAsyncDropdown: MahatiAsyncDropdown,
|
|
13328
13852
|
MahatiAvatarDropdown: MahatiAvatarDropdown,
|
|
13329
13853
|
MahatiAvatarMultiSelectDropdown: MahatiAvatarMultiSelectDropdown,
|