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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 1x 1x 1x 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 2x 1x 1x 2x 2x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 7x 7x 7x 7x 7x 5x 5x 5x 5x 2x 2x 2x 2x 7x 8x 8x 8x 8x 8x 8x 8x 8x 8x 1x | // Constants
import { COPILOT_LABEL } from '@shared/constants';
// Icons
import {
CloseIcon,
ExpandIcon,
MinimizeIcon,
ResetIcon,
} from '../icons/reacts';
import { ChatMode } from '@/providers/chatbot';
interface CustomChatHeaderProps {
chatBotMode: ChatMode;
onSwitchMode: () => void;
onClose: () => void;
onReset?: () => void;
isDesktop?: boolean;
isUltraLarge?: boolean;
}
const CustomChatHeader = ({
chatBotMode,
onSwitchMode,
onClose,
onReset,
isDesktop = false,
isUltraLarge = false,
}: CustomChatHeaderProps) => {
const { TITLE } = COPILOT_LABEL;
const handleClose = () => {
// If in sidebar mode, switch to popup first, then close
if (chatBotMode === ChatMode.SIDEBAR) {
onSwitchMode();
}
onClose();
};
return (
<div className="flex items-center justify-between px-6 bg-primary-700 h-14">
{/* Title */}
<div className="text-background font-medium tracking-[5px]">{TITLE}</div>
<div className="chatbot-controls flex items-center gap-1.5">
<button
aria-label="Close chat button"
className="w-6 h-6.25"
onClick={onReset}
>
<ResetIcon
aria-label="Reset chatbot"
className="text-white"
strokeWidth={1.5}
fill={'white'}
/>
</button>
{/* Visible only on ≥1536px screens */}
{isDesktop && isUltraLarge && (
<button
aria-label="Switch mode button"
className="w-6 h-6.25"
onClick={onSwitchMode}
>
{chatBotMode === ChatMode.POPUP ? (
<ExpandIcon
aria-label="Expand to sidebar"
className="text-white"
/>
) : (
<MinimizeIcon
aria-label="Minimize to popup"
className="text-white"
/>
)}
</button>
)}
{/* Close button */}
<button
aria-label="Close chat button"
className="w-6 h-6.25"
onClick={handleClose}
>
<CloseIcon className="stroke-white" strokeWidth={1.5} />
</button>
</div>
</div>
);
};
export default CustomChatHeader;
|