@botonic/react
Version:
Build Chatbots using React
82 lines • 4.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DebugMessage = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const context_1 = require("../../webchat/context");
const events_1 = require("./events");
const use_last_label_position_1 = require("./hooks/use-last-label-position");
const icons_1 = require("./icons");
const styles_1 = require("./styles");
const getEventConfig = (debugEvent) => {
switch (debugEvent.action) {
case core_1.EventAction.Keyword:
return (0, events_1.getKeywordEventConfig)(debugEvent);
case core_1.EventAction.IntentSmart:
return (0, events_1.getSmartIntentEventConfig)(debugEvent);
case core_1.EventAction.HandoffSuccess:
return (0, events_1.getHandoffSuccessEventConfig)(debugEvent);
case core_1.EventAction.AiAgent:
return (0, events_1.getAiAgentEventConfig)(debugEvent);
case core_1.EventAction.Knowledgebase:
return (0, events_1.getKnowledgeBaseEventConfig)(debugEvent);
case core_1.EventAction.Fallback:
return (0, events_1.getFallbackEventConfig)(debugEvent);
case core_1.EventAction.BotAction:
return (0, events_1.getBotActionEventConfig)(debugEvent);
case core_1.EventAction.ConditionalChannel:
return (0, events_1.getConditionalChannelEventConfig)(debugEvent);
case core_1.EventAction.ConditionalCountry:
return (0, events_1.getConditionalCountryEventConfig)(debugEvent);
case core_1.EventAction.ConditionalCustom:
return (0, events_1.getConditionalCustomEventConfig)(debugEvent);
case core_1.EventAction.ConditionalQueueStatus:
return (0, events_1.getConditionalQueueStatusEventConfig)(debugEvent);
case core_1.EventAction.RedirectFlow:
return (0, events_1.getRedirectFlowEventConfig)(debugEvent);
case core_1.EventAction.WebviewActionTriggered:
return (0, events_1.getWebviewActionTriggeredEventConfig)(debugEvent);
default:
return undefined;
}
};
const DebugMessage = ({ debugEvent, messageId }) => {
const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
const wrapperRef = (0, react_1.useRef)(null);
const { previewUtils } = (0, react_1.useContext)(context_1.WebchatContext);
const eventConfig = getEventConfig(debugEvent);
(0, use_last_label_position_1.useLastLabelPosition)({
wrapperRef,
isExpanded,
debugEvent,
isCollapsible: eventConfig?.collapsible ?? false,
});
(0, react_1.useEffect)(() => {
if (isExpanded) {
previewUtils?.trackPreviewEventOpened?.({ action: debugEvent.action });
}
}, [previewUtils, isExpanded, debugEvent]);
if (!eventConfig) {
return null;
}
const { title, icon, component, collapsible } = eventConfig;
// eslint-disable-next-line @typescript-eslint/naming-convention
const Component = component;
const handleClick = (e) => {
if (collapsible) {
const target = e.target;
const isButton = target.closest('button, a, [role="button"]');
if (!isButton) {
e.stopPropagation();
setIsExpanded(!isExpanded);
}
}
};
const containerClassName = collapsible
? `collapsible${isExpanded ? ' expanded' : ''}`
: '';
return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDebugContainer, { className: containerClassName, onClick: collapsible ? handleClick : undefined, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDebugHeader, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledDebugIcon, { children: icon }), (0, jsx_runtime_1.jsx)(styles_1.StyledDebugTitle, { children: title }), collapsible && ((0, jsx_runtime_1.jsx)(styles_1.StyledDebugArrow, { children: isExpanded ? (0, jsx_runtime_1.jsx)(icons_1.CaretUpSvg, {}) : (0, jsx_runtime_1.jsx)(icons_1.CaretDownSvg, {}) }))] }), Component && ((0, jsx_runtime_1.jsx)(styles_1.StyledDebugContent, { style: { display: isExpanded ? 'block' : 'none' }, children: (0, jsx_runtime_1.jsx)(styles_1.StyledDebugContentWrapper, { ref: wrapperRef, children: (0, jsx_runtime_1.jsx)(Component, { ...debugEvent, messageId: messageId }) }) }))] }));
};
exports.DebugMessage = DebugMessage;
//# sourceMappingURL=debug-message.js.map