mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-12 02:38:15 +00:00
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:
327
src/components/call-desk/call-widget.tsx
Normal file
327
src/components/call-desk/call-widget.tsx
Normal file
@@ -0,0 +1,327 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Phone01,
|
||||
PhoneIncoming01,
|
||||
PhoneOutgoing01,
|
||||
PhoneHangUp,
|
||||
PhoneX,
|
||||
MicrophoneOff01,
|
||||
Microphone01,
|
||||
PauseCircle,
|
||||
CheckCircle,
|
||||
Save01,
|
||||
} from '@untitledui/icons';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
import { TextArea } from '@/components/base/textarea/textarea';
|
||||
import { useSip } from '@/providers/sip-provider';
|
||||
import { cx } from '@/utils/cx';
|
||||
import type { CallDisposition } from '@/types/entities';
|
||||
|
||||
const formatDuration = (seconds: number): string => {
|
||||
const m = Math.floor(seconds / 60)
|
||||
.toString()
|
||||
.padStart(2, '0');
|
||||
const s = (seconds % 60).toString().padStart(2, '0');
|
||||
return `${m}:${s}`;
|
||||
};
|
||||
|
||||
const statusDotColor: Record<string, string> = {
|
||||
registered: 'bg-success-500',
|
||||
connecting: 'bg-warning-500',
|
||||
disconnected: 'bg-quaternary',
|
||||
error: 'bg-error-500',
|
||||
};
|
||||
|
||||
const statusLabel: Record<string, string> = {
|
||||
registered: 'Ready',
|
||||
connecting: 'Connecting...',
|
||||
disconnected: 'Offline',
|
||||
error: 'Error',
|
||||
};
|
||||
|
||||
const dispositionOptions: Array<{
|
||||
value: CallDisposition;
|
||||
label: string;
|
||||
activeClass: string;
|
||||
defaultClass: string;
|
||||
}> = [
|
||||
{
|
||||
value: 'APPOINTMENT_BOOKED',
|
||||
label: 'Appt Booked',
|
||||
activeClass: 'bg-success-solid text-white ring-transparent',
|
||||
defaultClass: 'bg-success-primary text-success-primary border-success',
|
||||
},
|
||||
{
|
||||
value: 'FOLLOW_UP_SCHEDULED',
|
||||
label: 'Follow-up',
|
||||
activeClass: 'bg-brand-solid text-white ring-transparent',
|
||||
defaultClass: 'bg-brand-primary text-brand-secondary border-brand',
|
||||
},
|
||||
{
|
||||
value: 'INFO_PROVIDED',
|
||||
label: 'Info Given',
|
||||
activeClass: 'bg-utility-blue-light-600 text-white ring-transparent',
|
||||
defaultClass: 'bg-utility-blue-light-50 text-utility-blue-light-700 border-utility-blue-light-200',
|
||||
},
|
||||
{
|
||||
value: 'NO_ANSWER',
|
||||
label: 'No Answer',
|
||||
activeClass: 'bg-warning-solid text-white ring-transparent',
|
||||
defaultClass: 'bg-warning-primary text-warning-primary border-warning',
|
||||
},
|
||||
{
|
||||
value: 'WRONG_NUMBER',
|
||||
label: 'Wrong #',
|
||||
activeClass: 'bg-secondary-solid text-white ring-transparent',
|
||||
defaultClass: 'bg-secondary text-secondary border-secondary',
|
||||
},
|
||||
{
|
||||
value: 'CALLBACK_REQUESTED',
|
||||
label: 'Not Interested',
|
||||
activeClass: 'bg-error-solid text-white ring-transparent',
|
||||
defaultClass: 'bg-error-primary text-error-primary border-error',
|
||||
},
|
||||
];
|
||||
|
||||
export const CallWidget = () => {
|
||||
const {
|
||||
connectionStatus,
|
||||
callState,
|
||||
callerNumber,
|
||||
isMuted,
|
||||
isOnHold,
|
||||
callDuration,
|
||||
answer,
|
||||
hangup,
|
||||
toggleMute,
|
||||
toggleHold,
|
||||
} = useSip();
|
||||
|
||||
const [disposition, setDisposition] = useState<CallDisposition | null>(null);
|
||||
const [notes, setNotes] = useState('');
|
||||
const [lastDuration, setLastDuration] = useState(0);
|
||||
|
||||
// Capture duration right before call ends so we can display it in the ended state
|
||||
useEffect(() => {
|
||||
if (callState === 'active' && callDuration > 0) {
|
||||
setLastDuration(callDuration);
|
||||
}
|
||||
}, [callState, callDuration]);
|
||||
|
||||
// Reset disposition/notes when returning to idle
|
||||
useEffect(() => {
|
||||
if (callState === 'idle') {
|
||||
setDisposition(null);
|
||||
setNotes('');
|
||||
}
|
||||
}, [callState]);
|
||||
|
||||
const handleSaveAndClose = () => {
|
||||
// TODO: Wire to BFF to create Call record + update Lead
|
||||
hangup();
|
||||
setDisposition(null);
|
||||
setNotes('');
|
||||
};
|
||||
|
||||
const dotColor = statusDotColor[connectionStatus] ?? 'bg-quaternary';
|
||||
const label = statusLabel[connectionStatus] ?? connectionStatus;
|
||||
|
||||
// Idle: collapsed pill
|
||||
if (callState === 'idle') {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'fixed bottom-6 right-6 z-50',
|
||||
'inline-flex items-center gap-2 rounded-full border border-secondary bg-primary px-4 py-2.5 shadow-lg',
|
||||
'transition-all duration-300',
|
||||
)}
|
||||
>
|
||||
<span className={cx('size-2.5 shrink-0 rounded-full', dotColor)} />
|
||||
<span className="text-sm font-semibold text-secondary">{label}</span>
|
||||
<span className="text-sm text-tertiary">Helix Phone</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Ringing inbound
|
||||
if (callState === 'ringing-in') {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'fixed bottom-6 right-6 z-50 w-80',
|
||||
'flex flex-col items-center gap-5 rounded-2xl border border-secondary bg-primary p-6 shadow-2xl',
|
||||
'transition-all duration-300',
|
||||
)}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 animate-ping rounded-full bg-brand-solid opacity-20" />
|
||||
<div className="relative animate-bounce">
|
||||
<PhoneIncoming01 className="size-10 text-fg-brand-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">
|
||||
Incoming Call
|
||||
</span>
|
||||
<span className="text-lg font-bold text-primary">{callerNumber ?? 'Unknown'}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button size="md" color="primary" iconLeading={Phone01} onClick={answer}>
|
||||
Answer
|
||||
</Button>
|
||||
<Button size="md" color="primary-destructive" iconLeading={PhoneX} onClick={hangup}>
|
||||
Decline
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Ringing outbound
|
||||
if (callState === 'ringing-out') {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'fixed bottom-6 right-6 z-50 w-80',
|
||||
'flex flex-col items-center gap-5 rounded-2xl border border-secondary bg-primary p-6 shadow-2xl',
|
||||
'transition-all duration-300',
|
||||
)}
|
||||
>
|
||||
<PhoneOutgoing01 className="size-10 animate-pulse text-fg-brand-primary" />
|
||||
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">
|
||||
Calling...
|
||||
</span>
|
||||
<span className="text-lg font-bold text-primary">{callerNumber ?? 'Unknown'}</span>
|
||||
</div>
|
||||
|
||||
<Button size="md" color="primary-destructive" iconLeading={PhoneHangUp} onClick={hangup}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Active call (full widget)
|
||||
if (callState === 'active') {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'fixed bottom-6 right-6 z-50 w-80',
|
||||
'flex flex-col gap-4 rounded-2xl border border-secondary bg-primary p-5 shadow-2xl',
|
||||
'transition-all duration-300',
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone01 className="size-4 text-fg-success-primary" />
|
||||
<span className="text-sm font-semibold text-primary">Active Call</span>
|
||||
</div>
|
||||
<span className="font-mono text-sm font-bold tabular-nums text-brand-secondary">
|
||||
{formatDuration(callDuration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Caller number */}
|
||||
<span className="text-lg font-bold text-primary">{callerNumber ?? 'Unknown'}</span>
|
||||
|
||||
{/* Call controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
color={isMuted ? 'primary' : 'secondary'}
|
||||
iconLeading={isMuted ? MicrophoneOff01 : Microphone01}
|
||||
onClick={toggleMute}
|
||||
>
|
||||
{isMuted ? 'Unmute' : 'Mute'}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
color={isOnHold ? 'primary' : 'secondary'}
|
||||
iconLeading={PauseCircle}
|
||||
onClick={toggleHold}
|
||||
>
|
||||
{isOnHold ? 'Resume' : 'Hold'}
|
||||
</Button>
|
||||
<Button size="sm" color="primary-destructive" iconLeading={PhoneHangUp} onClick={hangup}>
|
||||
End
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-secondary" />
|
||||
|
||||
{/* Disposition */}
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-secondary">Disposition</span>
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
{dispositionOptions.map((opt) => {
|
||||
const isSelected = disposition === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => setDisposition(opt.value)}
|
||||
className={cx(
|
||||
'cursor-pointer rounded-lg border px-2.5 py-1.5 text-xs font-semibold transition duration-100 ease-linear',
|
||||
isSelected ? cx(opt.activeClass, 'ring-2 ring-brand') : opt.defaultClass,
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
placeholder="Add notes..."
|
||||
value={notes}
|
||||
onChange={(value) => setNotes(value)}
|
||||
rows={2}
|
||||
textAreaClassName="text-xs"
|
||||
/>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
color="primary"
|
||||
iconLeading={Save01}
|
||||
isDisabled={disposition === null}
|
||||
onClick={handleSaveAndClose}
|
||||
className="w-full"
|
||||
>
|
||||
Save & Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Ended / Failed
|
||||
if (callState === 'ended' || callState === 'failed') {
|
||||
const isEnded = callState === 'ended';
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'fixed bottom-6 right-6 z-50 w-80',
|
||||
'flex flex-col items-center gap-2 rounded-2xl border border-secondary bg-primary p-5 shadow-2xl',
|
||||
'transition-all duration-300',
|
||||
)}
|
||||
>
|
||||
<CheckCircle
|
||||
className={cx('size-8', isEnded ? 'text-fg-success-primary' : 'text-fg-error-primary')}
|
||||
/>
|
||||
<span className="text-sm font-semibold text-primary">
|
||||
{isEnded ? 'Call Ended' : 'Call Failed'}
|
||||
{lastDuration > 0 && ` \u00B7 ${formatDuration(lastDuration)}`}
|
||||
</span>
|
||||
<span className="text-xs text-tertiary">auto-closing...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
Reference in New Issue
Block a user