fix: enquiry in post-call, appointment skip button, AI scroll containment

- Enquiry button + form available during disposition stage (not just active call)
- Skip & Return to Worklist button on post-call appointment booking
- AI chat scroll uses parentElement.scrollTop instead of scrollIntoView

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-24 08:11:22 +05:30
parent 3afa4f20b2
commit 938f2a84d8
2 changed files with 36 additions and 13 deletions

View File

@@ -208,7 +208,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
);
}
// Appointment booking after disposition
// Appointment booking after disposition — auto-return when form closes
if (postCallStage === 'appointment') {
return (
<>
@@ -216,6 +216,9 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
<FontAwesomeIcon icon={faCalendarPlus} className="size-6 text-fg-brand-primary mb-2" />
<p className="text-sm font-semibold text-brand-secondary">Booking Appointment</p>
<p className="text-xs text-tertiary mt-1">for {fullName || phoneDisplay}</p>
<Button size="sm" color="secondary" className="mt-2" onClick={() => setPostCallStage('done')}>
Skip & Return to Worklist
</Button>
</div>
<AppointmentForm
isOpen={appointmentOpen}
@@ -233,20 +236,36 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
);
}
// Disposition form
// Disposition form + enquiry access
return (
<div className="rounded-xl border border-secondary bg-primary p-4">
<div className="flex items-center gap-2 mb-3">
<div className="flex size-8 items-center justify-center rounded-full bg-secondary">
<FontAwesomeIcon icon={faPhoneHangup} className="size-3.5 text-fg-quaternary" />
</div>
<div>
<p className="text-sm font-semibold text-primary">Call Ended {fullName || phoneDisplay}</p>
<p className="text-xs text-tertiary">{formatDuration(callDuration)} · Log this call</p>
<>
<div className="rounded-xl border border-secondary bg-primary p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className="flex size-8 items-center justify-center rounded-full bg-secondary">
<FontAwesomeIcon icon={faPhoneHangup} className="size-3.5 text-fg-quaternary" />
</div>
<div>
<p className="text-sm font-semibold text-primary">Call Ended {fullName || phoneDisplay}</p>
<p className="text-xs text-tertiary">{formatDuration(callDuration)} · Log this call</p>
</div>
</div>
<Button size="sm" color="secondary"
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
onClick={() => setEnquiryOpen(!enquiryOpen)}>Enquiry</Button>
</div>
<DispositionForm onSubmit={handleDisposition} defaultDisposition={appointmentBookedDuringCall ? 'APPOINTMENT_BOOKED' : null} />
</div>
<DispositionForm onSubmit={handleDisposition} defaultDisposition={appointmentBookedDuringCall ? 'APPOINTMENT_BOOKED' : null} />
</div>
<EnquiryForm
isOpen={enquiryOpen}
onOpenChange={setEnquiryOpen}
callerPhone={callerPhone}
onSaved={() => {
setEnquiryOpen(false);
notify.success('Enquiry Logged');
}}
/>
</>
);
}

View File

@@ -45,7 +45,11 @@ export const AiChatPanel = ({ callerContext, role = 'cc-agent' }: AiChatPanelPro
const inputRef = useRef<HTMLInputElement>(null);
const scrollToBottom = useCallback(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
// Scroll within the messages container only — don't scroll the parent panel
const el = messagesEndRef.current;
if (el?.parentElement) {
el.parentElement.scrollTop = el.parentElement.scrollHeight;
}
}, []);
useEffect(() => {