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,26 @@
import { createContext, useContext, useEffect, type PropsWithChildren } from 'react';
import { useSipPhone } from '@/hooks/use-sip-phone';
type SipContextType = ReturnType<typeof useSipPhone>;
const SipContext = createContext<SipContextType | null>(null);
export const SipProvider = ({ children }: PropsWithChildren) => {
const sipPhone = useSipPhone();
// Auto-connect on mount
useEffect(() => {
sipPhone.connect();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <SipContext.Provider value={sipPhone}>{children}</SipContext.Provider>;
};
export const useSip = (): SipContextType => {
const ctx = useContext(SipContext);
if (ctx === null) {
throw new Error('useSip must be used within a SipProvider');
}
return ctx;
};