Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 1x 1x 1x 6x 6x 6x 6x 6x 6x 6x 3x 3x 3x 2x 2x 2x 3x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x | import { useEffect } from 'react';
// Constants
import { CHATBOT_MESSAGES } from '@shared/constants';
/**
* Interrupted Message when user cancels action
*/
type InterruptedMessageProps = {
message?: string;
className?: string;
};
export const InterruptedMessage = ({
message = CHATBOT_MESSAGES.INTERRUPTED,
className = '',
}: InterruptedMessageProps) => {
useEffect(() => {
const interruptedMsgs = document?.querySelectorAll('.interrupted-msg');
let count = 0;
interruptedMsgs.forEach((msg, index) => {
if (msg.innerHTML.trim() === CHATBOT_MESSAGES.FURTHER_ACTION) {
count++;
if (count > 1 && !msg.classList.contains('hidden')) {
interruptedMsgs[index]?.classList.add('hidden');
msg.parentElement?.classList.add('hidden');
}
}
});
}, [message]);
return (
<>
{message && (
<div
className={`relative py-2.5 px-[15px] rounded-lg w-fit max-w-cb-message-box text-3xs leading-5 border shadow-sm border-primary-700 text-primary-700 dark:text-background dark:bg-secondary-900 dark:border-secondary-900 ${className}`}
>
{message}
</div>
)}
</>
);
};
|