@botonic/react
Version:
Build Chatbots using React
80 lines • 4.61 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { EventAction } from '@botonic/core';
import { useContext, useEffect, useRef, useState } from 'react';
import { WebchatContext } from '../../webchat/context';
import { getAiAgentEventConfig, getBotActionEventConfig, getConditionalChannelEventConfig, getConditionalCountryEventConfig, getConditionalCustomEventConfig, getConditionalQueueStatusEventConfig, getFallbackEventConfig, getHandoffSuccessEventConfig, getKeywordEventConfig, getKnowledgeBaseEventConfig, getRedirectFlowEventConfig, getSmartIntentEventConfig, getWebviewActionTriggeredEventConfig, } from './events';
import { useLastLabelPosition } from './hooks/use-last-label-position';
import { CaretDownSvg, CaretUpSvg } from './icons';
import { StyledDebugArrow, StyledDebugContainer, StyledDebugContent, StyledDebugContentWrapper, StyledDebugHeader, StyledDebugIcon, StyledDebugTitle, } from './styles';
const getEventConfig = (debugEvent) => {
switch (debugEvent.action) {
case EventAction.Keyword:
return getKeywordEventConfig(debugEvent);
case EventAction.IntentSmart:
return getSmartIntentEventConfig(debugEvent);
case EventAction.HandoffSuccess:
return getHandoffSuccessEventConfig(debugEvent);
case EventAction.AiAgent:
return getAiAgentEventConfig(debugEvent);
case EventAction.Knowledgebase:
return getKnowledgeBaseEventConfig(debugEvent);
case EventAction.Fallback:
return getFallbackEventConfig(debugEvent);
case EventAction.BotAction:
return getBotActionEventConfig(debugEvent);
case EventAction.ConditionalChannel:
return getConditionalChannelEventConfig(debugEvent);
case EventAction.ConditionalCountry:
return getConditionalCountryEventConfig(debugEvent);
case EventAction.ConditionalCustom:
return getConditionalCustomEventConfig(debugEvent);
case EventAction.ConditionalQueueStatus:
return getConditionalQueueStatusEventConfig(debugEvent);
case EventAction.RedirectFlow:
return getRedirectFlowEventConfig(debugEvent);
case EventAction.WebviewActionTriggered:
return getWebviewActionTriggeredEventConfig(debugEvent);
default:
return undefined;
}
};
export const DebugMessage = ({ debugEvent, messageId }) => {
var _a;
const [isExpanded, setIsExpanded] = useState(false);
const wrapperRef = useRef(null);
const { previewUtils } = useContext(WebchatContext);
const eventConfig = getEventConfig(debugEvent);
useLastLabelPosition({
wrapperRef,
isExpanded,
debugEvent,
isCollapsible: (_a = eventConfig === null || eventConfig === void 0 ? void 0 : eventConfig.collapsible) !== null && _a !== void 0 ? _a : false,
});
useEffect(() => {
var _a;
if (isExpanded) {
(_a = previewUtils === null || previewUtils === void 0 ? void 0 : previewUtils.trackPreviewEventOpened) === null || _a === void 0 ? void 0 : _a.call(previewUtils, { 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 (_jsxs(StyledDebugContainer, Object.assign({ className: containerClassName, onClick: collapsible ? handleClick : undefined }, { children: [_jsxs(StyledDebugHeader, { children: [_jsx(StyledDebugIcon, { children: icon }), _jsx(StyledDebugTitle, { children: title }), collapsible && (_jsx(StyledDebugArrow, { children: isExpanded ? _jsx(CaretUpSvg, {}) : _jsx(CaretDownSvg, {}) }))] }), Component && (_jsx(StyledDebugContent, Object.assign({ style: { display: isExpanded ? 'block' : 'none' } }, { children: _jsx(StyledDebugContentWrapper, Object.assign({ ref: wrapperRef }, { children: _jsx(Component, Object.assign({}, debugEvent, { messageId: messageId })) })) })))] })));
};
//# sourceMappingURL=debug-message.js.map