feat: add floating call widget with SIP controls, click-to-call, and SIP provider

Introduce a shared SipProvider context so all components use the same SIP
connection. Add a floating CallWidget (idle pill, ringing, active with
disposition, ended states) visible for CC agents on every page. Add a
ClickToCallButton for the worklist. Wire SIP status badge and worklist
into the call-desk page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-17 18:08:46 +05:30
parent d5feaab75a
commit b2cc3d7012
5 changed files with 454 additions and 11 deletions

View File

@@ -0,0 +1,25 @@
import { Phone01 } from '@untitledui/icons';
import { Button } from '@/components/base/buttons/button';
import { useSip } from '@/providers/sip-provider';
interface ClickToCallButtonProps {
phoneNumber: string;
label?: string;
size?: 'sm' | 'md';
}
export const ClickToCallButton = ({ phoneNumber, label, size = 'sm' }: ClickToCallButtonProps) => {
const { makeCall, isRegistered, isInCall } = useSip();
return (
<Button
size={size}
color="primary"
iconLeading={Phone01}
onClick={() => makeCall(phoneNumber)}
isDisabled={!isRegistered || isInCall || phoneNumber === ''}
>
{label ?? 'Call'}
</Button>
);
};