pager-widget 1.0.3 → 1.0.4
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 +1 -1
- package/dist/index.js +4 -4
- package/dist/react-parcel.9f367d21.css +2 -18
- package/dist/react-parcel.9f367d21.css.map +1 -1
- package/dist/react-parcel.js +119 -214
- package/dist/react-parcel.js.map +1 -1
- package/out/AgentFeedbackButtonWrapper.js +15 -0
- package/out/App.js +28 -0
- package/out/BotMain.js +91 -0
- package/out/ButtonsWrapper.js +29 -0
- package/out/ChatPage.js +9 -0
- package/out/ChatPageContent.js +131 -0
- package/out/ChatPageHeader.js +267 -0
- package/out/ChatPageInput.js +29 -0
- package/out/ChatWidget.js +17 -0
- package/out/Consent.js +66 -0
- package/out/CountryDropdown.js +31 -0
- package/out/Form.js +238 -0
- package/out/HomePage.js +11 -0
- package/out/HomePageContent.js +32 -0
- package/out/HomePageFooter.js +87 -0
- package/out/HomePageHeader.js +66 -0
- package/out/InputField.js +80 -0
- package/out/Markdown.js +126 -0
- package/out/Message.js +197 -0
- package/out/MessagesT.js +2 -0
- package/out/NewRecentMessagePage.js +525 -0
- package/out/NewRecentMessageTab.js +23 -0
- package/out/ReceivedMessage.js +211 -0
- package/out/RecentMessageDetail.js +178 -0
- package/out/RecentMessageList.js +112 -0
- package/out/RecentMessageListCard.js +20 -0
- package/out/RecentMessageListHeader.js +156 -0
- package/out/RecentMessagePage.js +183 -0
- package/out/RecentMessageTab.js +35 -0
- package/out/WidgetMessage.js +14 -0
- package/out/WidgetToggleButton.js +191 -0
- package/out/WidgetType.js +2 -0
- package/out/assets/icons/pikaicons-react.js +17475 -0
- package/out/components/ConsentForm.js +7 -0
- package/out/components/CustomTooltip.js +34 -0
- package/out/hooks/useChatHistoryExists.js +32 -0
- package/out/hooks/useChatHistoryListExist.js +81 -0
- package/out/hooks/useChatScroll.js +14 -0
- package/out/hooks/useCurrentConversationExists.js +88 -0
- package/out/hooks/useInitialMessage.js +33 -0
- package/out/hooks/useMessage.js +230 -0
- package/out/hooks/useMessageReceiver.js +183 -0
- package/out/hooks/usePopupAnimation.js +20 -0
- package/out/hooks/useSocket.js +19 -0
- package/out/hooks/useSocketContext.js +81 -0
- package/out/hooks/useWidgetDimension.js +41 -0
- package/out/hooks/useWidgetToggle.js +22 -0
- package/out/index.js +31 -0
- package/out/markdown/CodeCopy.js +22 -0
- package/out/markdown/CodeHighlight.js +58 -0
- package/out/markdown/PagerMarkdown.js +36 -0
- package/out/markdown/pager_md.js +152 -0
- package/out/onscreenNotificationPopup.js +23 -0
- package/out/socket.js +11 -0
- package/out/utils/checkConversationExit.js +24 -0
- package/out/utils/convertTime.js +43 -0
- package/out/utils/sendInitialMessage.js +82 -0
- package/out/widget.js +21 -0
- package/out/widgetConfigStore.js +205 -0
- package/out/widgetConfigStore2.js +569 -0
- package/out/widgetControlstore.js +23 -0
- package/out/widgetStateHandler.js +106 -0
- package/out/widgetStore.js +171 -0
- package/out/widgetUserStore.js +47 -0
- package/package.json +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AgentFeedbackButtonWrapper = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const AgentFeedbackButtonWrapper = ({ sendMessage, buttons, }) => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttons.map((button, i) => {
|
|
7
|
+
if (button.label === 'Satisfied') {
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)("button", { className: "flex cursor-pointer !h-7 w-max border border-slate-300 leading-5 px-3.5 py-1.5 font-medium text-slate-700 items-center text-sm justify-center bg-white rounded-lg hover:border-[#4b2fff]", onClick: () => sendMessage('#satisfied'), children: button.label }, i));
|
|
9
|
+
}
|
|
10
|
+
else if (button.label === 'Not Satisfied') {
|
|
11
|
+
return ((0, jsx_runtime_1.jsx)("button", { className: "flex cursor-pointer !h-7 w-max border border-slate-300 leading-5 px-3.5 py-1.5 font-medium text-slate-700 items-center text-sm justify-center bg-white rounded-lg hover:border-[#4b2fff]", onClick: () => sendMessage('#not_satisfied'), children: button.label }, i));
|
|
12
|
+
}
|
|
13
|
+
}) }));
|
|
14
|
+
};
|
|
15
|
+
exports.AgentFeedbackButtonWrapper = AgentFeedbackButtonWrapper;
|
package/out/App.js
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.App = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const widget_1 = require("./widget");
|
|
6
|
+
const widgetConfigStore2_1 = require("./widgetConfigStore2");
|
|
7
|
+
const widgetUserStore_1 = require("./widgetUserStore");
|
|
8
|
+
const widgetStore_1 = require("./widgetStore");
|
|
9
|
+
const App = (config) => {
|
|
10
|
+
(0, widgetConfigStore2_1.useWidgetInitializer)({
|
|
11
|
+
endpoint: config.endpoint,
|
|
12
|
+
widget_id: config.widget_id,
|
|
13
|
+
}, true);
|
|
14
|
+
(0, widgetStore_1.useInspectConversation)(true);
|
|
15
|
+
(0, widgetUserStore_1.userDetailInitializer)(config, true);
|
|
16
|
+
widgetStore_1.widgetStore.send({
|
|
17
|
+
type: 'updateUserDetails',
|
|
18
|
+
user_details: {
|
|
19
|
+
SYS_FirstName: config.userDetails?.SYS_FirstName ?? '',
|
|
20
|
+
SYS_UserEmail: config.userDetails?.SYS_UserEmail ?? '',
|
|
21
|
+
SYS_LastName: config.userDetails?.SYS_LastName ?? '',
|
|
22
|
+
SYS_Location: config.userDetails?.SYS_Location ?? '',
|
|
23
|
+
SYS_Timezone: config.userDetails?.SYS_Timezone ?? '',
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "fixed bottom-0 right-4 pager-widget-root z-[99999999999999]", children: (0, jsx_runtime_1.jsx)("div", { className: "pager-widget-root", children: (0, jsx_runtime_1.jsx)(widget_1.Widget, { ...config }) }) }));
|
|
27
|
+
};
|
|
28
|
+
exports.App = App;
|
package/out/BotMain.js
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TabType = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const HomePage_1 = require("./HomePage");
|
|
7
|
+
const ChatPage_1 = require("./ChatPage");
|
|
8
|
+
const RecentMessagePage_1 = require("./RecentMessagePage");
|
|
9
|
+
const RecentMessageList_1 = require("./RecentMessageList");
|
|
10
|
+
const RecentMessageDetail_1 = require("./RecentMessageDetail");
|
|
11
|
+
const widgetStore_1 = require("./widgetStore");
|
|
12
|
+
const widget_1 = require("./widget");
|
|
13
|
+
const useCurrentConversationExists_1 = require("./hooks/useCurrentConversationExists");
|
|
14
|
+
const useSocketContext_1 = require("./hooks/useSocketContext");
|
|
15
|
+
const NewRecentMessagePage_1 = require("./NewRecentMessagePage");
|
|
16
|
+
const widgetConfigStore2_1 = require("./widgetConfigStore2");
|
|
17
|
+
const usePopupAnimation_1 = require("./hooks/usePopupAnimation");
|
|
18
|
+
const useWidgetDimension_1 = require("./hooks/useWidgetDimension");
|
|
19
|
+
var TabType;
|
|
20
|
+
(function (TabType) {
|
|
21
|
+
TabType["HOME"] = "home";
|
|
22
|
+
TabType["CHAT"] = "chat";
|
|
23
|
+
TabType["RECENT_MESSAGE"] = "recentMessage";
|
|
24
|
+
TabType["RECENT_MESSAGE_LIST"] = "recentMessageList";
|
|
25
|
+
TabType["RECENT_MESSAGE_DETAIL"] = "recentMessageDetail";
|
|
26
|
+
TabType["NEW_RECENT_MESSAGE"] = "newRecentMessage";
|
|
27
|
+
})(TabType || (exports.TabType = TabType = {}));
|
|
28
|
+
const BotMain = ({ toggleWidget, widgetToggleState, widgetConfig, }) => {
|
|
29
|
+
const isExpanded = (0, widgetStore_1.useIsWidgetExpanded)();
|
|
30
|
+
const switchTab = (0, widgetStore_1.useSelectTab)();
|
|
31
|
+
const { connected } = (0, useSocketContext_1.useSocketV2)();
|
|
32
|
+
const widget = (0, widgetConfigStore2_1.useWidgetData)();
|
|
33
|
+
const widgetData = (0, widgetConfigStore2_1.widgetHasData)(widget) ? widget.data : null;
|
|
34
|
+
const { recentConversation } = (0, useCurrentConversationExists_1.useCurrentConversationExist)(widgetConfig.widget_id);
|
|
35
|
+
const initialMessage = (0, react_1.useContext)(widget_1.MyContext);
|
|
36
|
+
const messageResponse = recentConversation != null
|
|
37
|
+
? recentConversation.events.filter((e) => e.type === 'received' || e.type === 'sent')
|
|
38
|
+
: [];
|
|
39
|
+
const { isPopUpOpened, removeAnimation } = (0, usePopupAnimation_1.usePopupAnimation)(widgetToggleState === 'OPEN');
|
|
40
|
+
const { divRef, height, viewportHeight, computeDynamicMinHeight } = (0, useWidgetDimension_1.useWidgetDimension)();
|
|
41
|
+
const widths = height * (5.6 / 10);
|
|
42
|
+
const widgetWidth = () => {
|
|
43
|
+
switch (isExpanded) {
|
|
44
|
+
case widgetStore_1.WidgetExpandType.EXPANDED:
|
|
45
|
+
return { width: '50vw' };
|
|
46
|
+
case widgetStore_1.WidgetExpandType.DEFAULT:
|
|
47
|
+
return { width: `${widths}px` };
|
|
48
|
+
case widgetStore_1.WidgetExpandType.FULLSCREEN:
|
|
49
|
+
return { width: '95vw', maxWidth: '95vw' };
|
|
50
|
+
default:
|
|
51
|
+
return { width: '400px' };
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const widgetHeight = () => {
|
|
55
|
+
switch (widgetConfig?.widget_size) {
|
|
56
|
+
case 'small':
|
|
57
|
+
return 'h-[58vh]';
|
|
58
|
+
case 'medium':
|
|
59
|
+
return 'h-[64vh]';
|
|
60
|
+
case 'large':
|
|
61
|
+
return 'h-[70vh]';
|
|
62
|
+
default:
|
|
63
|
+
return 'h-[64vh]';
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
if (!connected) {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
const commonPanelClasses = 'flex w-full h-full flex-col overflow-hidden rounded-[22px] bg-white shadow-lg';
|
|
70
|
+
const hasWidgetData = widget.status !== 'NOT_STARTED' && widgetData !== undefined;
|
|
71
|
+
(0, react_1.useEffect)(() => {
|
|
72
|
+
widgetStore_1.widgetStore.trigger.selectTab({
|
|
73
|
+
tab: initialMessage?.initialUserMessage &&
|
|
74
|
+
widgetData?.widget_starter_flow_enabled
|
|
75
|
+
? TabType.CHAT
|
|
76
|
+
: widgetData?.open_homeby_default &&
|
|
77
|
+
initialMessage?.initialUserMessage === null
|
|
78
|
+
? TabType.HOME
|
|
79
|
+
: switchTab,
|
|
80
|
+
});
|
|
81
|
+
}, []);
|
|
82
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: divRef, className: `${isExpanded === widgetStore_1.WidgetExpandType.FULLSCREEN
|
|
83
|
+
? 'w-[calc(100vw-80px)]'
|
|
84
|
+
: ''} flex absolute ${isExpanded !== widgetStore_1.WidgetExpandType.DEFAULT
|
|
85
|
+
? 'maximize-height'
|
|
86
|
+
: widgetHeight()} overflow-hidden min-w-[400px] right-5 bottom-20 flex-col items-end gap-5 justify-center bg-white box-shadow-widget widget-expand-animation rounded-[22px] ${!removeAnimation && 'chat-popup'} ${isPopUpOpened && 'active'}`, style: {
|
|
87
|
+
...widgetWidth(),
|
|
88
|
+
minHeight: `${computeDynamicMinHeight(viewportHeight)}px`,
|
|
89
|
+
}, children: [switchTab === TabType.CHAT && ((0, jsx_runtime_1.jsx)("div", { className: `${commonPanelClasses} animate-slide-in-left-slow`, children: (0, jsx_runtime_1.jsx)(ChatPage_1.ChatPage, { toggleWidget: toggleWidget, isExpanded: isExpanded, recentConversation: messageResponse }) })), switchTab === TabType.HOME && ((0, jsx_runtime_1.jsx)("div", { className: `${commonPanelClasses} animate-slide-in-right-slow`, children: (0, jsx_runtime_1.jsx)(HomePage_1.HomePage, { toggleWidget: toggleWidget, switchTab: switchTab, isExpanded: isExpanded }) })), switchTab === TabType.RECENT_MESSAGE && ((0, jsx_runtime_1.jsx)("div", { className: commonPanelClasses, children: (0, jsx_runtime_1.jsx)(RecentMessagePage_1.RecentMessagePage, { toggleWidget: toggleWidget, isExpanded: isExpanded }) })), switchTab === TabType.RECENT_MESSAGE_LIST && ((0, jsx_runtime_1.jsx)("div", { className: commonPanelClasses, children: (0, jsx_runtime_1.jsx)(RecentMessageList_1.RecentMessageList, { toggleWidget: toggleWidget, isExpanded: isExpanded, switchTab: switchTab }) })), switchTab === TabType.RECENT_MESSAGE_DETAIL && ((0, jsx_runtime_1.jsx)("div", { className: commonPanelClasses, children: (0, jsx_runtime_1.jsx)(RecentMessageDetail_1.RecentMessageDetail, { isExpanded: isExpanded }) })), switchTab === TabType.NEW_RECENT_MESSAGE && ((0, jsx_runtime_1.jsx)(NewRecentMessagePage_1.NewRecentMessagePage, { toggleWidget: toggleWidget, isExpanded: isExpanded }))] }));
|
|
90
|
+
};
|
|
91
|
+
exports.default = BotMain;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AiFeedbackButtonsWrapper = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
|
|
6
|
+
const AiFeedbackButtonsWrapper = ({ event_id, buttons, sendFeedback, sendMessage, }) => {
|
|
7
|
+
const handleSatisfiedFeedback = () => {
|
|
8
|
+
sendFeedback('satisfied', event_id);
|
|
9
|
+
};
|
|
10
|
+
const handleNotSatisfiedFeedback = () => {
|
|
11
|
+
sendFeedback('not_satisfied', event_id);
|
|
12
|
+
};
|
|
13
|
+
const handoverToLiveAgent = () => {
|
|
14
|
+
// sendFeedback('#liveagent')
|
|
15
|
+
sendMessage('#liveagent');
|
|
16
|
+
};
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttons.map((button, i) => {
|
|
18
|
+
if (button.label === 'Satisfied') {
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)("button", { className: "inline-flex cursor-pointer items-center justify-center p-1 bg-zinc-100 rounded-full hover:bg-zinc-200 h-6 w-6", onClick: handleSatisfiedFeedback, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiThumbReactionLikeStroke, { className: "w-3.5 h-3.5" }) }, i));
|
|
20
|
+
}
|
|
21
|
+
else if (button.label === 'Not Satisfied') {
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)("button", { className: "inline-flex cursor-pointer items-center justify-center p-1 bg-zinc-100 rounded-full hover:bg-zinc-200 h-6 w-6", onClick: handleNotSatisfiedFeedback, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiThumbReactionDislikeStroke, { className: "w-3.5 h-3.5" }) }, i));
|
|
23
|
+
}
|
|
24
|
+
else if (button.label === 'Hand over to Live agent') {
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)("button", { className: "inline-flex cursor-pointer items-center justify-center p-1 bg-zinc-100 rounded-full hover:bg-zinc-200 h-6 w-6", onClick: handoverToLiveAgent, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiUserSpeakingStroke, { className: "w-3.5 h-3.5" }) }, i));
|
|
26
|
+
}
|
|
27
|
+
}) }));
|
|
28
|
+
};
|
|
29
|
+
exports.AiFeedbackButtonsWrapper = AiFeedbackButtonsWrapper;
|
package/out/ChatPage.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ChatPage = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const ChatPageContent_1 = require("./ChatPageContent");
|
|
6
|
+
const ChatPage = ({ toggleWidget, isExpanded, recentConversation, }) => {
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ChatPageContent_1.ChatPageContent, { toggleWidget: toggleWidget, isExpanded: isExpanded, recentConversation: recentConversation }) }));
|
|
8
|
+
};
|
|
9
|
+
exports.ChatPage = ChatPage;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.ChatPageContent = void 0;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const widgetConfigStore2_1 = require("./widgetConfigStore2");
|
|
40
|
+
const Consent_1 = require("./Consent");
|
|
41
|
+
const Form_1 = require("./Form");
|
|
42
|
+
const WidgetMessage_1 = require("./WidgetMessage");
|
|
43
|
+
const ChatPageInput_1 = require("./ChatPageInput");
|
|
44
|
+
const useMessage_1 = require("./hooks/useMessage");
|
|
45
|
+
const onscreenNotificationPopup_1 = require("./onscreenNotificationPopup");
|
|
46
|
+
const ChatPageHeader_1 = require("./ChatPageHeader");
|
|
47
|
+
const widgetStore_1 = require("./widgetStore");
|
|
48
|
+
const uuid_1 = require("uuid");
|
|
49
|
+
const ChatPageContent = ({ toggleWidget, isExpanded, recentConversation, }) => {
|
|
50
|
+
const widget = (0, widgetConfigStore2_1.useWidgetData)();
|
|
51
|
+
const user1Details = (0, widgetStore_1.useUserDetails)();
|
|
52
|
+
const isChatExit = (0, widgetStore_1.useChatExit)();
|
|
53
|
+
const containerEl = (0, react_1.useRef)(null);
|
|
54
|
+
const [showTyping, setShowTyping] = react_1.default.useState(false);
|
|
55
|
+
const initialContext = (defaultContextVariables) => ({
|
|
56
|
+
context: { ...defaultContextVariables },
|
|
57
|
+
system: {
|
|
58
|
+
conversationId: (0, uuid_1.v4)(),
|
|
59
|
+
stack: [],
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
console.log('DEBUG ::: recentConversation', recentConversation);
|
|
63
|
+
const { messages, setMessages, sendMessage, typing, sendFeedback, restart, exit, agentStatus, } = (0, useMessage_1.useMessages)({
|
|
64
|
+
widget_id: widget.config.widget_id,
|
|
65
|
+
endpoint: widget.config.endpoint,
|
|
66
|
+
context: initialContext(user1Details),
|
|
67
|
+
userDetails: user1Details,
|
|
68
|
+
// recentConversation: [],
|
|
69
|
+
recentConversation: recentConversation,
|
|
70
|
+
});
|
|
71
|
+
const conversationId = messages[0]?.message?.system?.conversationId;
|
|
72
|
+
(0, react_1.useEffect)(() => {
|
|
73
|
+
if (typing !== true) {
|
|
74
|
+
setShowTyping(false);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
setTimeout(() => {
|
|
78
|
+
setShowTyping(true);
|
|
79
|
+
}, 500);
|
|
80
|
+
}
|
|
81
|
+
}, [typing]);
|
|
82
|
+
(0, react_1.useEffect)(() => {
|
|
83
|
+
if (widget.status === 'NO_CONSENT_NEEDED') {
|
|
84
|
+
widgetConfigStore2_1.widgetFetchStore2.trigger.processMessage();
|
|
85
|
+
}
|
|
86
|
+
}, [widget.status]);
|
|
87
|
+
// Only scroll to bottom when messages change, not when typing indicator changes
|
|
88
|
+
const prevMessagesLength = (0, react_1.useRef)(messages.length);
|
|
89
|
+
(0, react_1.useEffect)(() => {
|
|
90
|
+
if (containerEl.current &&
|
|
91
|
+
(messages.length > prevMessagesLength.current ||
|
|
92
|
+
(typing && showTyping))) {
|
|
93
|
+
containerEl.current.scrollTo({
|
|
94
|
+
top: containerEl.current.scrollHeight,
|
|
95
|
+
behavior: 'smooth',
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
prevMessagesLength.current = messages.length;
|
|
99
|
+
}, [messages, typing, showTyping]);
|
|
100
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChatPageHeader_1.ChatPageHeader, { toggleWidget: toggleWidget, isExpanded: isExpanded, restart: restart, exit: exit }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col chat-area-height justify-between h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: `flex flex-col items-start gap-4 relative h-full overflow-y-scroll w-full ${isChatExit && 'pb-7'} `, ref: containerEl, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-4 relative self-stretch w-full pt-3 ", children: [(widget?.data?.onscreen_notification ||
|
|
101
|
+
widget?.data?.operating_hours_message) && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-4 relative self-stretch w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-4 relative self-stretch w-full", children: [widget?.data?.operating_hours_message && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2.5 px-5 py-0 relative self-stretch w-full", children: (0, jsx_runtime_1.jsx)("p", { className: "relative flex-1 mt-[-1.00px] font-regular text-[#62748e] text-xs text-center tracking-[0] leading-[18px]", children: widget?.data
|
|
102
|
+
?.operating_hours_message }) })), (0, jsx_runtime_1.jsx)(onscreenNotificationPopup_1.OnScreenNotificationPopup, {})] }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-4 relative self-stretch w-full", children: [widget.status === 'CONSENT_NEEDED' ? ((0, jsx_runtime_1.jsx)(Consent_1.Consent, {})) : null, conversationId && ((0, jsx_runtime_1.jsx)(Form_1.Form, { conversationId: conversationId })), widget.status === 'ALLOW_MESSAGE' ||
|
|
103
|
+
widget.status === 'SESSION_EXITED' ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(WidgetMessage_1.WidgetMessage, { messages: messages, typing: typing, sendFeedback: sendFeedback, sendMessage: sendMessage, setMessages: setMessages }) })) : null, showTyping && typing && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full h-5", children: (0, jsx_runtime_1.jsx)("div", { className: "items-start gap-1.5 self-stretch w-full flex flex-col relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-start gap-1 relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-[auto] h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-auto h-6 text-white" }) }), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col bg-zinc-100 items-start gap-2.5 px-2.5 py-2.5 relative rounded-lg max-w-[80%]", children: (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm text-[#020618] w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "three-dot-typing", children: (0, jsx_runtime_1.jsxs)("div", { className: "typing-dots", children: [(0, jsx_runtime_1.jsx)("div", { className: "dot" }), (0, jsx_runtime_1.jsx)("div", { className: "dot" }), (0, jsx_runtime_1.jsx)("div", { className: "dot" })] }) }) }) })] }) }) })), agentStatus !== null &&
|
|
104
|
+
widget.status === 'ALLOW_MESSAGE' && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 px-5 py-0 relative self-stretch w-full h-5", children: (0, jsx_runtime_1.jsx)("div", { className: "items-start gap-1.5 self-stretch w-full flex flex-col relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-start gap-1 relative w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-[auto] h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data
|
|
105
|
+
?.logo_url, className: "w-auto h-6 text-white" }) }), (0, jsx_runtime_1.jsx)("div", { className: "ml-0.5 w-auto flex-col bg-zinc-100 gap-2.5 px-2 inline-flex items-center justify-center !h-6 relative rounded-md animated-gradient-bg-thought", children: (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-xs text-black font-regular w-full whitespace-nowrap", children: agentStatus ===
|
|
106
|
+
'thinking'
|
|
107
|
+
? 'Thinking...'
|
|
108
|
+
: agentStatus ===
|
|
109
|
+
'finalizing_output'
|
|
110
|
+
? 'Preparing response...'
|
|
111
|
+
: agentStatus ===
|
|
112
|
+
'progress_done'
|
|
113
|
+
? 'Almost done...'
|
|
114
|
+
: agentStatus ===
|
|
115
|
+
'searching_kb'
|
|
116
|
+
? 'Searching knowledge...'
|
|
117
|
+
: agentStatus ===
|
|
118
|
+
'action_detected'
|
|
119
|
+
? 'Processing your request...'
|
|
120
|
+
: agentStatus ===
|
|
121
|
+
'validating_input_for_action'
|
|
122
|
+
? 'Validating...'
|
|
123
|
+
: agentStatus ===
|
|
124
|
+
'executing_action'
|
|
125
|
+
? 'Executing....'
|
|
126
|
+
: agentStatus ===
|
|
127
|
+
'analysing_response'
|
|
128
|
+
? 'Generating response...'
|
|
129
|
+
: null }) })] }) }) }))] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col justify-end ${widget.status !== 'ALLOW_MESSAGE' && isChatExit == false ? 'h-12' : widget.status == 'ALLOW_MESSAGE' && isChatExit ? 'h-[50px]' : 'h-[126px]'}`, children: [isChatExit == false ? ((0, jsx_runtime_1.jsx)(ChatPageInput_1.ChatPageInput, { sendMessage: sendMessage })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 !bg-white z-10", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center justify-center gap-8 w-full overflow-hidden border border-zinc-100 !bg-white", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-4 py-2 w-full bg-white", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-1.5 flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center w-full gap-1.5", children: (0, jsx_runtime_1.jsx)("span", { className: "font-text-xs-regular text-[#1d293d] text-xs tracking-[0px] leading-[18px] whitespace-nowrap", children: "Your conversation has ended" }) }) }) }) }) }) })), widget?.data?.custom_branding == false ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-2.5 bg-zinc-100", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center justify-center gap-8 w-full rounded-[10px] overflow-hidden border-none", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-4 py-2 w-full bg-zinc-100", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-1.5 flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center w-full gap-1.5 pb-0.5", children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "16", viewBox: "0 0 22 16", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M20.5751 1.50389L20.5502 1.47323C19.8159 0.667319 18.8275 0.160706 17.7631 0.0468283C17.0872 -0.00719091 14.7045 -0.00427096 11.894 0.00594889H11.1962C10.1158 0.0103288 8.89086 0.0147087 8.16379 0.00594889H8.14336C7.48345 0.00594889 6.8469 0.0964675 6.25122 0.274585C5.65555 0.452702 5.12412 0.714038 4.67445 1.04983C4.36493 1.28051 4.09484 1.54769 3.86854 1.84406C3.82182 1.87472 3.77656 1.90684 3.73276 1.94042C3.43055 2.16526 3.16191 2.42951 2.93124 2.72735C2.8889 2.75655 2.84802 2.78721 2.79838 2.8237C2.28301 3.20914 1.87859 3.68801 1.59828 4.24864C1.31796 4.80197 1.1632 5.43268 1.13692 6.12033C1.12816 6.31451 1.03619 7.42993 0.896028 8.95853C0.73981 10.6725 0.574833 12.3617 0.446355 13.5925L0.420075 13.8465C0.409855 13.9429 0.399636 14.0378 0.392336 14.1312L0.301817 15.0583C0.294517 15.1196 0.290137 15.178 0.282837 15.251L0.263858 15.4467C0.263858 15.4598 0.260938 15.4744 0.256558 15.5036L0.252178 15.5532C0.249258 15.5708 0.246338 15.6043 0.246338 15.6438C0.246338 15.6832 0.250718 15.7211 0.258018 15.7518C0.263858 15.7781 0.281377 15.8598 0.344156 15.9182C0.396716 15.9708 0.466794 16 0.541253 16C0.560233 16 0.580673 15.9985 0.593812 15.9956C0.605492 15.9956 0.617172 15.9912 0.628852 15.9883C0.675571 15.9723 0.719371 15.946 0.76025 15.9109C0.77485 15.8993 0.787989 15.8861 0.809889 15.8657C0.827409 15.8511 0.842009 15.8365 0.850769 15.8277L2.42608 14.3765C2.42608 14.3765 2.4363 14.3663 2.44068 14.3604L2.64508 14.1706C2.76918 14.0539 2.89182 13.9371 3.01592 13.8217C3.08307 13.7589 3.15023 13.6976 3.21885 13.6319C3.25535 13.5983 3.29039 13.5662 3.32543 13.5326L4.44377 12.4771C4.49049 12.4318 4.53721 12.388 4.58977 12.3398L5.4059 11.5675C5.45116 11.5252 5.49642 11.4828 5.54022 11.4405C5.60008 11.385 5.65993 11.3281 5.71979 11.2726L5.81177 11.185C5.86433 11.1339 5.91689 11.0843 6.04537 10.9631L6.15633 10.8594C7.02209 10.8536 8.83538 10.8536 11.1378 10.858H11.4341C13.1233 10.8594 14.484 10.8609 15.3323 10.858C16.0462 10.8521 16.7222 10.6959 17.3398 10.3922C17.9486 10.0959 18.4698 9.67684 18.8873 9.14687C19.2406 8.89867 19.5575 8.59938 19.8261 8.2592C20.4991 7.78617 21.032 7.12918 21.3708 6.35977C22.0891 4.71876 21.7825 2.8602 20.5721 1.50827L20.5751 1.50389ZM3.72838 2.67917C3.96344 2.56675 4.21602 2.46893 4.47881 2.39009C4.89345 2.26599 5.33728 2.1857 5.80009 2.15358C5.95193 2.14336 6.10961 2.13752 6.26874 2.13752H6.28626C6.97829 2.14336 8.10394 2.14044 9.29382 2.13752H10.0194C12.3014 2.12876 15.1425 2.11854 15.8564 2.17548C16.3791 2.23241 16.8784 2.39009 17.3412 2.64413C17.7354 2.85874 18.0931 3.14052 18.4099 3.48507C18.4143 3.49091 18.4187 3.49675 18.4231 3.50259C18.699 3.80773 18.9297 4.14936 19.1078 4.51436C19.4027 5.12171 19.5458 5.79476 19.521 6.46343C19.502 6.9861 19.3837 7.49855 19.172 7.98327C19.1078 8.12488 19.045 8.25044 18.9793 8.3687C18.8742 8.55558 18.7559 8.73515 18.6245 8.90305C18.2391 9.39798 17.7544 9.79072 17.185 10.0681C16.6141 10.3484 15.9907 10.493 15.3323 10.4973C14.4621 10.5003 13.0036 10.4988 11.4371 10.4973H11.1407C8.8237 10.493 7.00311 10.493 6.14611 10.4988C6.09209 10.4988 6.03807 10.5105 5.99135 10.5338C5.97529 10.5411 5.96069 10.5514 5.94901 10.563L5.80447 10.6988C5.67307 10.8229 5.62051 10.8726 5.56942 10.9222L5.47014 11.0156C5.41466 11.0682 5.35918 11.1208 5.29786 11.1762C5.25406 11.2186 5.21172 11.2595 5.165 11.3018L4.34741 12.0756C4.29777 12.1208 4.24814 12.1676 4.19996 12.2143L3.10497 13.2479C3.06409 13.2874 3.02175 13.3268 2.9692 13.375C2.90496 13.4363 2.84072 13.4961 2.77502 13.556C2.64216 13.6801 2.51222 13.8027 2.38082 13.9268L2.18373 14.1093C2.18373 14.1093 2.17497 14.1195 2.17059 14.1239L0.609872 15.5635V15.5489C0.615712 15.5255 0.617172 15.4992 0.620092 15.47L0.639072 15.2788C0.644912 15.2175 0.649292 15.1576 0.656592 15.0934L0.74711 14.1633C0.75587 14.0685 0.76463 13.9765 0.77485 13.883L0.801129 13.629C0.929607 12.4026 1.09312 10.712 1.2508 8.98919C1.37928 7.59053 1.48294 6.36269 1.49316 6.13201C1.51798 5.49546 1.6596 4.91439 1.91655 4.40632C2.17205 3.89679 2.54434 3.45733 3.02467 3.09818C3.06701 3.06752 3.10935 3.0354 3.15461 3.00474C3.33419 2.8821 3.52691 2.77261 3.72838 2.67771V2.67917ZM19.8787 6.47365C19.9049 5.7495 19.7502 5.01805 19.429 4.35814C19.2392 3.96687 18.9924 3.60187 18.7063 3.28506L18.6756 3.24564C18.334 2.87188 17.9427 2.56383 17.5135 2.33023C17.0113 2.0543 16.4652 1.88202 15.89 1.81924C15.4418 1.78274 14.2402 1.77252 12.6591 1.77252C11.8605 1.77252 10.964 1.77544 10.0209 1.77836H9.29528C8.64559 1.78128 7.94334 1.7842 7.33015 1.7842C6.93303 1.7842 6.57388 1.7842 6.29064 1.78128H6.2702C6.10377 1.78128 5.93879 1.78712 5.77819 1.79734C5.2891 1.83092 4.81899 1.9156 4.37953 2.047C4.2642 2.08204 4.14886 2.12 4.0379 2.16088C4.05688 2.14774 4.07586 2.1346 4.0963 2.12146C4.48027 1.85866 4.92411 1.65134 5.41612 1.50535C5.97529 1.33891 6.58264 1.25423 7.22211 1.25423C8.0908 1.26153 9.65443 1.25715 10.5085 1.25277H11.1494C13.5935 1.24547 16.1221 1.23817 16.7952 1.29365C17.2872 1.34475 17.7631 1.48929 18.2084 1.72288C18.6348 1.9448 19.0173 2.24117 19.3428 2.59595C19.3487 2.60471 19.3545 2.61201 19.3604 2.61931C19.6567 2.9478 19.8991 3.3128 20.0801 3.70407C20.1736 3.90555 20.2509 4.11578 20.3108 4.32748C20.5707 5.24727 20.5006 6.20647 20.1079 7.1029C20.0728 7.1832 20.0349 7.2635 19.9955 7.34234C19.9152 7.49855 19.8246 7.65185 19.7254 7.79931C19.6757 7.87231 19.6232 7.94531 19.5691 8.01538C19.5575 8.03144 19.5443 8.0475 19.5312 8.06356C19.7443 7.55549 19.8626 7.02114 19.883 6.47657L19.8787 6.47365ZM20.4013 3.55515C20.2071 3.13614 19.9502 2.74633 19.6348 2.39447L19.61 2.36381C19.2509 1.97108 18.8333 1.64842 18.3705 1.40607C17.8843 1.15203 17.3646 0.995813 16.8229 0.938874C16.1309 0.880475 13.5964 0.889235 11.1451 0.896535H10.5041C8.99306 0.903835 7.85866 0.905295 7.22211 0.899455H7.20313C6.5403 0.899455 5.90229 0.988514 5.311 1.16663C5.20588 1.19875 5.092 1.23671 4.96644 1.28343L4.95914 1.28635C5.36064 1.00019 5.82929 0.775357 6.35488 0.617679C6.91697 0.449782 7.51849 0.363643 8.14482 0.363643H8.16233C8.89086 0.372403 10.1172 0.368023 11.2005 0.363643H11.9218C14.1935 0.354883 17.0229 0.344664 17.7325 0.401603C18.7048 0.505261 19.6115 0.970994 20.2816 1.70536C20.2874 1.71412 20.2933 1.72288 20.2991 1.72872C21.4248 2.977 21.7124 4.69394 21.0481 6.21085C20.8933 6.56417 20.6948 6.88828 20.4583 7.18174C20.9576 6.00062 20.9371 4.71438 20.3999 3.55515H20.4013Z", fill: "#1D293D" }), (0, jsx_runtime_1.jsx)("path", { d: "M2.33722 6.16568C2.3197 6.65039 1.92697 11.042 1.70067 12.9809C1.69191 13.0553 1.73133 13.1269 1.79849 13.1604C1.82331 13.1721 1.85105 13.1794 1.87879 13.1794C1.92405 13.1794 1.96785 13.1619 2.00143 13.1312L3.08473 12.1092C3.16357 12.0348 3.24241 11.9603 3.32417 11.88L3.36213 11.8435C3.46871 11.7413 3.57674 11.6391 3.68478 11.5384L3.70668 11.518C3.84684 11.3836 3.98554 11.2522 4.11694 11.1281C4.12278 11.1238 4.12862 11.1194 4.14176 11.1077C4.18993 11.061 4.23811 11.0157 4.28921 10.9675C4.45419 10.8099 4.61625 10.6566 4.77247 10.5091C4.79875 10.4858 4.82356 10.4624 4.84838 10.4376L4.87758 10.4084C4.90386 10.385 4.93014 10.3602 4.95496 10.3354L4.9827 10.3091C5.02066 10.2755 5.0557 10.2419 5.08928 10.2098C5.17688 10.1281 5.26302 10.0463 5.34916 9.966L5.50975 9.81416C5.51705 9.80686 5.52435 9.79956 5.53019 9.79226L5.55793 9.76744C5.63239 9.69737 5.73313 9.65795 5.84117 9.65649C6.12732 9.65357 6.66898 9.65065 7.36247 9.64919C8.45307 9.64773 9.92035 9.64919 11.357 9.65065C11.9439 9.65065 12.5191 9.65065 13.052 9.65211C14.0097 9.65211 14.8302 9.65211 15.3325 9.65065C15.9661 9.68423 16.6421 9.46815 17.2334 9.04622C17.4232 8.9119 17.6042 8.75276 17.7721 8.5761C17.8758 8.46515 17.9721 8.34835 18.0597 8.22863L18.0714 8.21987L18.0758 8.20673C18.1094 8.16147 18.1415 8.11475 18.1721 8.06657C18.2437 7.95561 18.3108 7.83735 18.3707 7.71326C18.3897 7.67384 18.4101 7.63296 18.4276 7.59354C18.6014 7.2008 18.689 6.79931 18.689 6.39782C18.689 6.30146 18.6846 6.21094 18.6758 6.13502C18.5955 4.56555 17.3005 3.16689 15.788 3.01651H15.7851C15.3354 2.98585 14.3295 2.97271 12.6184 2.97271C11.7351 2.97271 10.7759 2.97709 9.86195 2.98001H9.77289C8.50855 2.98439 7.08945 2.98877 6.23536 2.98001C5.67619 2.92307 5.0922 3.00483 4.54617 3.21653C4.32279 3.30267 4.1038 3.41362 3.90232 3.54356L3.88626 3.55378C3.73588 3.64868 3.58842 3.75964 3.44681 3.88374C3.30373 4.00783 3.16941 4.14653 3.04823 4.29545C2.82778 4.56847 2.6555 4.86484 2.5387 5.17582C2.41752 5.48971 2.35036 5.82259 2.33576 6.16568H2.33722ZM3.09787 8.37171L3.00735 8.39069L2.95625 8.93234L3.04385 8.9411L2.95479 8.95278C2.83362 10.2419 2.7212 11.334 2.6409 12.0363L2.10801 12.5385C2.34306 10.3967 2.67594 6.63725 2.692 6.17882C2.70368 5.87661 2.76354 5.58169 2.87157 5.30283C2.97523 5.0269 3.12853 4.7641 3.32563 4.52029C3.36067 4.47795 3.39717 4.43561 3.43367 4.39473C3.33585 4.68088 3.28037 4.97726 3.27015 5.28239C3.25993 5.53497 3.14605 6.88837 3.00881 8.36441L3.09641 8.37317L3.09787 8.37171ZM3.49645 6.94823L3.59572 5.76711C3.6074 5.60797 3.61762 5.48241 3.622 5.39335C3.62492 5.35393 3.62638 5.31889 3.62784 5.29407C3.64098 4.9101 3.73442 4.54073 3.90232 4.19617C3.9359 4.12755 3.9724 4.06039 4.01036 3.99615C4.01766 3.98447 4.02496 3.97279 4.03226 3.96257L4.05854 3.9217C4.07752 3.89104 4.09796 3.86038 4.1184 3.83118L4.13008 3.82388C4.17679 3.79468 4.22351 3.7684 4.27023 3.74212C4.28483 3.73482 4.29797 3.72606 4.31257 3.71876C4.25563 3.93922 4.22205 4.16405 4.21329 4.39181C4.19577 4.86776 3.81034 9.19367 3.58258 11.1457L3.44097 11.2814C3.33293 11.3822 3.22489 11.4844 3.11685 11.588L3.08035 11.6231C3.06867 11.6348 3.05553 11.6464 3.04385 11.6581C3.18839 10.3354 3.37381 8.37609 3.49791 6.94969L3.49645 6.94823ZM6.3288 9.04038L6.44414 8.93234C6.45144 8.92504 6.45874 8.91774 6.46458 8.90898L6.48064 8.89438C6.56094 8.81846 6.6646 8.77612 6.77263 8.7732C7.5143 8.76444 10.005 8.7659 12.2052 8.76736H13.9864C14.9441 8.76882 15.7646 8.76882 16.2669 8.76736C16.334 8.77028 16.3997 8.77028 16.4669 8.76882L16.5326 8.7659C16.5764 8.76298 16.6216 8.76006 16.6742 8.75422C16.699 8.7513 16.7224 8.74984 16.7457 8.74546C16.7837 8.73962 16.8217 8.73378 16.8596 8.72648C16.9253 8.7148 16.9896 8.7002 17.0553 8.68414L17.1064 8.671C17.1239 8.66662 17.1399 8.66224 17.1575 8.6564C17.1137 8.69144 17.0699 8.72356 17.0261 8.75422C16.5399 9.10169 15.9763 9.29441 15.442 9.29441H15.4391C15.4245 9.29441 15.4113 9.29441 15.3938 9.29441H15.3325C14.8288 9.29441 14.0097 9.29441 13.052 9.29441C12.5191 9.29295 11.9439 9.29295 11.3555 9.29295C9.91889 9.29149 8.45161 9.29003 7.35955 9.29149C6.81497 9.29295 6.36238 9.29441 6.05287 9.29733C6.1463 9.20973 6.23682 9.12505 6.32588 9.04038H6.3288ZM17.8101 7.96437L17.7984 7.98189C17.7794 7.99357 17.7604 8.00379 17.7414 8.01547L17.6947 8.04321C17.6787 8.05343 17.6626 8.06219 17.6465 8.07095C17.6217 8.08409 17.5969 8.09723 17.5721 8.10891L17.5166 8.13665C17.5005 8.14541 17.4845 8.15271 17.4684 8.16147C17.4436 8.17315 17.4202 8.18337 17.3954 8.19359L17.337 8.21841C17.321 8.22571 17.3049 8.23301 17.2889 8.23885C17.2626 8.24907 17.2378 8.25783 17.2115 8.26659L17.156 8.28557C17.1399 8.29141 17.1239 8.29725 17.1078 8.30163C17.0815 8.30893 17.0567 8.31623 17.0304 8.32353L16.9706 8.33959C16.956 8.34397 16.9399 8.34835 16.9253 8.35127C16.8961 8.35857 16.8669 8.36295 16.8377 8.36879L16.7837 8.37901C16.7706 8.38193 16.756 8.38485 16.7428 8.38631C16.7063 8.39215 16.6698 8.39507 16.6333 8.39945L16.591 8.40383C16.5808 8.40383 16.5705 8.40675 16.5603 8.40675C16.499 8.41113 16.4391 8.41405 16.3778 8.41405C16.3457 8.41405 16.3165 8.41405 16.2683 8.41259C15.7646 8.41405 14.9441 8.41405 13.9878 8.41405H12.2607C10.2211 8.41113 7.93332 8.40821 6.99017 8.41551L7.38728 8.04175C7.38728 8.04175 7.39896 8.02861 7.4048 8.02277L7.4267 8.00233C7.50408 7.92787 7.60774 7.88553 7.71724 7.88407C8.47205 7.87239 11.0606 7.87531 13.233 7.87823H14.9281C15.8858 7.87969 16.7063 7.87969 17.2115 7.87823C17.4363 7.88845 17.6743 7.86655 17.9108 7.81399C17.905 7.82275 17.8991 7.83297 17.8933 7.84173C17.867 7.88261 17.8393 7.92349 17.8101 7.96437ZM17.2086 7.52054C16.7049 7.522 15.8858 7.522 14.9281 7.52054H13.233C11.0679 7.51762 8.48227 7.5147 7.70994 7.52638C7.50992 7.5293 7.32305 7.60522 7.18289 7.741L7.14201 7.7775C7.13471 7.7848 7.12741 7.7921 7.12157 7.80086L6.79745 8.10599C6.61496 8.27681 6.42808 8.45346 6.23828 8.6345L6.20908 8.66224L6.19156 8.6783C6.04703 8.81408 5.90395 8.95132 5.75649 9.09148L5.68349 9.16009C5.56231 9.27543 5.43968 9.39077 5.31704 9.50757L5.25572 9.56597C5.23674 9.58349 5.21776 9.60101 5.2017 9.61853L5.10534 9.71051C5.02066 9.7908 4.93598 9.8711 4.84692 9.95286C4.81334 9.98498 4.77977 10.0156 4.74181 10.0507L4.70823 10.0828C4.68633 10.1047 4.66297 10.1266 4.63669 10.15L4.59581 10.1894C4.57537 10.2084 4.55493 10.2288 4.53157 10.2492C4.37243 10.3996 4.20891 10.5544 4.0454 10.7106C4.02496 10.7296 4.00452 10.7485 3.98554 10.7675C4.22059 8.62866 4.55347 4.8663 4.57099 4.40641C4.58121 4.10711 4.64253 3.81074 4.75203 3.52458C5.12578 3.39026 5.51121 3.32164 5.89811 3.32164C6.00177 3.32164 6.10105 3.32602 6.22076 3.3377H6.24266C7.07777 3.34646 8.44723 3.34354 9.77727 3.3377H9.86633C10.7803 3.33478 11.7395 3.3304 12.6228 3.3304C14.3266 3.3304 15.3237 3.34354 15.7603 3.37274C17.102 3.5056 18.2524 4.7568 18.324 6.16714C18.3313 6.23722 18.3357 6.31606 18.3357 6.39928C18.3357 6.72339 18.267 7.05335 18.1327 7.38038C17.8261 7.4855 17.5166 7.53368 17.2115 7.52054H17.2086Z", fill: "#1D293D" })] }), (0, jsx_runtime_1.jsx)("span", { className: "font-text-xs-regular text-[#1d293d] text-xs tracking-[0px] leading-[18px] whitespace-nowrap", children: "Powered by pagergpt" })] }) }) }) }) }) })) : null] })] })] }));
|
|
130
|
+
};
|
|
131
|
+
exports.ChatPageContent = ChatPageContent;
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.ChatPageHeader = void 0;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
|
|
40
|
+
const widgetConfigStore2_1 = require("./widgetConfigStore2");
|
|
41
|
+
const BotMain_1 = require("./BotMain");
|
|
42
|
+
const widgetStore_1 = require("./widgetStore");
|
|
43
|
+
const ChatPageHeader = ({ toggleWidget, isExpanded, restart, exit, }) => {
|
|
44
|
+
const widget = (0, widgetConfigStore2_1.useWidgetData)();
|
|
45
|
+
const [isMenuOpen, setIsMenuOpen] = react_1.default.useState(false);
|
|
46
|
+
const [showMenu, setShowMenu] = react_1.default.useState(false);
|
|
47
|
+
const ref = react_1.default.useRef(null);
|
|
48
|
+
const expandRef = react_1.default.useRef(null);
|
|
49
|
+
const [expandPopupOpen, setExpandPopupOpen] = react_1.default.useState(false);
|
|
50
|
+
const [showExpandPopUp, setShowExpandPopUp] = react_1.default.useState(false);
|
|
51
|
+
const handleRestartChat = () => {
|
|
52
|
+
// Step 1: Read current object from 'CONVERSATION'
|
|
53
|
+
const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
|
|
54
|
+
if (!raw) {
|
|
55
|
+
console.warn('No data found in CONVERSATION key');
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
try {
|
|
59
|
+
const currentData = JSON.parse(raw);
|
|
60
|
+
// Step 2: Get existing array from 'CONVERASATION_LIST'
|
|
61
|
+
const listRaw = localStorage.getItem(`CONVERSATION_LIST::${widget.data.id}`);
|
|
62
|
+
const currentList = listRaw ? JSON.parse(listRaw) : [];
|
|
63
|
+
// Step 3: Append the current object
|
|
64
|
+
currentList.push(currentData);
|
|
65
|
+
// Step 4: Save back to CONVERSATION_LIST'
|
|
66
|
+
localStorage.setItem(`CONVERSATION_LIST::${widget.data.id}`, JSON.stringify(currentList));
|
|
67
|
+
localStorage.removeItem(`CONVERSATION::${widget.data.id}`);
|
|
68
|
+
localStorage.removeItem('CURRENT_CONVERSATION');
|
|
69
|
+
// Step 5: Perform other exit actions
|
|
70
|
+
restart();
|
|
71
|
+
// widgetFetchStore2.trigger.exitConversation()
|
|
72
|
+
// Optional: Also update widget state
|
|
73
|
+
// widgetStore.send({ type: 'handleExitChatState', value: true })
|
|
74
|
+
}
|
|
75
|
+
catch (error) {
|
|
76
|
+
console.error('Failed to parse localStorage data:', error);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const handleExitChat = () => {
|
|
80
|
+
console.log('exit triggering');
|
|
81
|
+
exit();
|
|
82
|
+
};
|
|
83
|
+
const menuItems = [
|
|
84
|
+
{
|
|
85
|
+
id: 1,
|
|
86
|
+
icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiRefreshSolid, { className: "w-[14px] h-[14px] text-slate-600" })),
|
|
87
|
+
label: 'Restart chat',
|
|
88
|
+
selected: true,
|
|
89
|
+
onClick: () => {
|
|
90
|
+
handleRestartChat();
|
|
91
|
+
setIsMenuOpen(false);
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
id: 2,
|
|
96
|
+
icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiStopBigStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
|
|
97
|
+
label: 'Exit chat',
|
|
98
|
+
selected: false,
|
|
99
|
+
onClick: () => {
|
|
100
|
+
handleExitChat();
|
|
101
|
+
setIsMenuOpen(false);
|
|
102
|
+
// handleBackButtonClick()
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
];
|
|
106
|
+
const expandMenuItems = [
|
|
107
|
+
{
|
|
108
|
+
id: 1,
|
|
109
|
+
icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiPhoneStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
|
|
110
|
+
label: 'Default mode',
|
|
111
|
+
selected: isExpanded === widgetStore_1.WidgetExpandType.DEFAULT,
|
|
112
|
+
onClick: () => {
|
|
113
|
+
widgetStore_1.widgetStore.trigger.expandWidget({
|
|
114
|
+
expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
|
|
115
|
+
});
|
|
116
|
+
setExpandPopupOpen(false);
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
id: 2,
|
|
121
|
+
icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiTabletStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
|
|
122
|
+
label: 'Expanded mode',
|
|
123
|
+
selected: isExpanded === widgetStore_1.WidgetExpandType.EXPANDED,
|
|
124
|
+
onClick: () => {
|
|
125
|
+
widgetStore_1.widgetStore.trigger.expandWidget({
|
|
126
|
+
expanded_size: widgetStore_1.WidgetExpandType.EXPANDED,
|
|
127
|
+
});
|
|
128
|
+
setExpandPopupOpen(false);
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
id: 3,
|
|
133
|
+
icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSpatialCurvedScreenStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
|
|
134
|
+
label: 'Full screen mode',
|
|
135
|
+
selected: isExpanded === widgetStore_1.WidgetExpandType.FULLSCREEN,
|
|
136
|
+
onClick: () => {
|
|
137
|
+
widgetStore_1.widgetStore.trigger.expandWidget({
|
|
138
|
+
expanded_size: widgetStore_1.WidgetExpandType.FULLSCREEN,
|
|
139
|
+
});
|
|
140
|
+
setExpandPopupOpen(false);
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
];
|
|
144
|
+
const selectedExpandItem = expandMenuItems.find((item) => {
|
|
145
|
+
return item.selected ? item.icon : null;
|
|
146
|
+
});
|
|
147
|
+
(0, react_1.useEffect)(() => {
|
|
148
|
+
function handleClick(event) {
|
|
149
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
150
|
+
setIsMenuOpen(false);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
if (isMenuOpen) {
|
|
154
|
+
document.addEventListener('mousedown', handleClick);
|
|
155
|
+
}
|
|
156
|
+
return () => {
|
|
157
|
+
document.removeEventListener('mousedown', handleClick);
|
|
158
|
+
};
|
|
159
|
+
}, [isMenuOpen]);
|
|
160
|
+
(0, react_1.useEffect)(() => {
|
|
161
|
+
function handleClick(event) {
|
|
162
|
+
if (expandRef.current &&
|
|
163
|
+
!expandRef.current.contains(event.target)) {
|
|
164
|
+
setExpandPopupOpen(false);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
if (expandPopupOpen) {
|
|
168
|
+
document.addEventListener('mousedown', handleClick);
|
|
169
|
+
}
|
|
170
|
+
return () => {
|
|
171
|
+
document.removeEventListener('mousedown', handleClick);
|
|
172
|
+
};
|
|
173
|
+
}, [expandPopupOpen]);
|
|
174
|
+
react_1.default.useEffect(() => {
|
|
175
|
+
if (isMenuOpen) {
|
|
176
|
+
setShowMenu(true);
|
|
177
|
+
}
|
|
178
|
+
else if (showMenu) {
|
|
179
|
+
const timeout = setTimeout(() => setShowMenu(false), 140);
|
|
180
|
+
return () => clearTimeout(timeout);
|
|
181
|
+
}
|
|
182
|
+
}, [isMenuOpen, showMenu]);
|
|
183
|
+
react_1.default.useEffect(() => {
|
|
184
|
+
if (expandPopupOpen) {
|
|
185
|
+
setShowExpandPopUp(true);
|
|
186
|
+
}
|
|
187
|
+
else if (showExpandPopUp) {
|
|
188
|
+
const timeout = setTimeout(() => setShowExpandPopUp(false), 140);
|
|
189
|
+
return () => clearTimeout(timeout);
|
|
190
|
+
}
|
|
191
|
+
}, [expandPopupOpen, showExpandPopUp]);
|
|
192
|
+
const handleBackButtonClick = () => {
|
|
193
|
+
if (isExpanded !== widgetStore_1.WidgetExpandType.DEFAULT) {
|
|
194
|
+
widgetStore_1.widgetStore.trigger.expandWidget({
|
|
195
|
+
expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
|
|
196
|
+
});
|
|
197
|
+
setTimeout(() => {
|
|
198
|
+
widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
|
|
199
|
+
}, 300);
|
|
200
|
+
widgetStore_1.widgetStore.trigger.handleExitChatState({ value: false });
|
|
201
|
+
}
|
|
202
|
+
else {
|
|
203
|
+
widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
|
|
204
|
+
widgetStore_1.widgetStore.send({ type: 'handleExitChatState', value: false });
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
return ((0, jsx_runtime_1.jsxs)("header", { className: "flex items-center px-0 py-[15px] border-b border-zinc-300 w-full justify-between h-[60px] bg-white rounded-t-[22px]", "data-model-id": "10445:55564", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-5 py-0 w-full", children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center justify-center gap-2.5 p-0 cursor-pointer hover:bg-slate-100 rounded-xl overflow-hidden", onClick: handleBackButtonClick, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronLeftStroke, { className: "w-6 h-6 cursor-pointer" }) }), (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-[30px]", src: widget?.data?.logo_url }), (0, jsx_runtime_1.jsx)("span", { className: "flex flex-col items-start flex-1 grow", children: (0, jsx_runtime_1.jsx)("span", { className: "flex flex-col items-start gap-[18px] flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("h1", { className: "w-fit mt-[-1.00px] font-text-md-medium font-[number:var(--text-md-medium-font-weight)] text-[#020618] text-[length:var(--text-md-medium-font-size)] tracking-[var(--text-md-medium-letter-spacing)] leading-[var(--text-md-medium-line-height)] whitespace-nowrap [font-style:var(--text-md-medium-font-style)]", children: widget?.data?.name }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-5 py-0 w-max justify-end", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: ref, children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-1 cursor-pointer hover:bg-slate-100 rounded-lg overflow-hidden", onClick: () => setIsMenuOpen(!isMenuOpen), children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiThreeDotsMenuVerticalStroke, { className: "w-[16px] h-[16px]" }) }) }), showMenu && ((0, jsx_runtime_1.jsxs)("nav", { className: `flex flex-col w-[126px] h-max absolute items-start gap-1 p-1 right-0 bg-white rounded-lg overflow-hidden border border-solid border-slate-200 z-50`, style: {
|
|
208
|
+
animation: isMenuOpen
|
|
209
|
+
? 'popin 0.18s cubic-bezier(0.4,0,0.2,1)'
|
|
210
|
+
: 'popout 0.14s cubic-bezier(0.4,0,0.2,1)',
|
|
211
|
+
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
212
|
+
@keyframes popin {
|
|
213
|
+
0% {
|
|
214
|
+
opacity: 0;
|
|
215
|
+
transform: scale(0.95) translateY(-8px);
|
|
216
|
+
}
|
|
217
|
+
100% {
|
|
218
|
+
opacity: 1;
|
|
219
|
+
transform: scale(1) translateY(0);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
@keyframes popout {
|
|
223
|
+
0% {
|
|
224
|
+
opacity: 1;
|
|
225
|
+
transform: scale(1) translateY(0);
|
|
226
|
+
}
|
|
227
|
+
100% {
|
|
228
|
+
opacity: 0;
|
|
229
|
+
transform: scale(0.95) translateY(-8px);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
` }), menuItems.map((item) => ((0, jsx_runtime_1.jsxs)("button", { className: `flex items-center gap-1.5 pl-2 pr-3 py-1.5 relative self-stretch w-full cursor-pointer
|
|
233
|
+
hover:bg-slate-100 rounded-md overflow-hidden`, onClick: item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5 flex-[0_0_auto]", children: item.icon }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start justify-center gap-2 flex-1 self-stretch grow", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "w-fit whitespace-nowrap text-xs font-medium text-[#020618]", children: item.label }) }) }) })] }, item.id)))] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: expandRef, children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-1 cursor-pointer hover:bg-slate-100 rounded-lg overflow-hidden", onClick: () => setExpandPopupOpen(!expandPopupOpen), children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: selectedExpandItem
|
|
234
|
+
? selectedExpandItem.icon
|
|
235
|
+
: null }) }), showExpandPopUp && ((0, jsx_runtime_1.jsxs)("nav", { className: `flex flex-col w-[148px] h-max absolute items-start gap-1 p-1 right-0 bg-white rounded-lg overflow-hidden border border-solid border-slate-200 z-50`, style: {
|
|
236
|
+
animation: expandPopupOpen
|
|
237
|
+
? 'popin 0.18s cubic-bezier(0.4,0,0.2,1)'
|
|
238
|
+
: 'popout 0.14s cubic-bezier(0.4,0,0.2,1)',
|
|
239
|
+
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
240
|
+
@keyframes popin {
|
|
241
|
+
0% {
|
|
242
|
+
opacity: 0;
|
|
243
|
+
transform: scale(0.95) translateY(-8px);
|
|
244
|
+
}
|
|
245
|
+
100% {
|
|
246
|
+
opacity: 1;
|
|
247
|
+
transform: scale(1) translateY(0);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
@keyframes popout {
|
|
251
|
+
0% {
|
|
252
|
+
opacity: 1;
|
|
253
|
+
transform: scale(1) translateY(0);
|
|
254
|
+
}
|
|
255
|
+
100% {
|
|
256
|
+
opacity: 0;
|
|
257
|
+
transform: scale(0.95) translateY(-8px);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
` }), expandMenuItems.map((item) => ((0, jsx_runtime_1.jsxs)("button", { className: `flex items-center gap-1.5 pl-2 pr-3 py-1.5 relative self-stretch w-full cursor-pointer
|
|
261
|
+
hover:bg-slate-100 rounded-md overflow-hidden`, style: {
|
|
262
|
+
backgroundColor: item.selected
|
|
263
|
+
? '#f0f0f0'
|
|
264
|
+
: '',
|
|
265
|
+
}, onClick: item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5 flex-[0_0_auto]", children: item.icon }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start justify-center gap-2 flex-1 self-stretch grow", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "w-fit whitespace-nowrap text-xs font-medium text-[#020618]", children: item.label }) }) }) })] }, item.id)))] }))] }), (0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-1 cursor-pointer hover:bg-slate-100 rounded-lg overflow-hidden", onClick: toggleWidget, children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiMultipleCrossCancelDefaultStroke, { className: "w-[18px] h-[18px]" }) }) })] })] }));
|
|
266
|
+
};
|
|
267
|
+
exports.ChatPageHeader = ChatPageHeader;
|