Michael Chihlas
0d1b305619
Bundles four fixes from the live debugging session: 1. AssistantChatPage: replace urlSessionId === activeChatId gate with a loadedChatIdsRef. After8914391made activeChatId initialize from urlSessionId, the gate short-circuited fresh mounts and selectChat never fired. Symptom: senior picks up an escalation, lands on a blank chat surface with no conversation history and no sidebar entry. Fix also adds loadChats() in handleStartHere so the picked-up session appears in the sidebar (its escalated_to_id is null pre-claim, so listSessions doesn't return it until claim_session sets it). 2. config: bump ESCALATION_AI_ASSESSMENT_TIMEOUT_SECONDS 15s → 45s. Sonnet was hitting tail latency at 15s in the field, leaving the magic-moment placeholder permanent. Background-task architecture (e8ba74e) means this no longer blocks the user; it's just the budget before publishing has_assessment=false. NOTE: live test still shows assessment not populating — see HANDOFF for the consolidation plan that supersedes this. 3. Enter-to-submit: chat-input convention (Enter submits, Shift+Enter inserts newline) on the escalate-flow forms. RichTextInput gains an optional onSubmit prop; EscalateModal wires it to handleSubmit; ConcludeSessionModal gets the same handler on its plain textarea. 4. PendingEscalations: each row is now expandable. Click row body to reveal the engineer's escalation reason, step count on record, confidence tier, and PSA ticket number. Pick Up still clicks through directly. Single-expand-at-a-time keeps the dashboard compact. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { AlertTriangle, Loader2 } from 'lucide-react'
|
|
import { Modal } from '@/components/common/Modal'
|
|
import { RichTextInput } from '@/components/common/RichTextInput'
|
|
import type { EscalateSessionRequest } from '@/types/ai-session'
|
|
import type { FileUploadResponse } from '@/types/upload'
|
|
|
|
interface EscalateModalProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
onEscalate: (data: EscalateSessionRequest) => Promise<unknown>
|
|
isProcessing: boolean
|
|
hasPsaTicket: boolean
|
|
sessionId?: string
|
|
}
|
|
|
|
export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaTicket, sessionId }: EscalateModalProps) {
|
|
const [reason, setReason] = useState('')
|
|
const [, setEscalateUploads] = useState<FileUploadResponse[]>([])
|
|
|
|
const handleSubmit = async () => {
|
|
if (!reason.trim() || reason.trim().length < 5) return
|
|
await onEscalate({ escalation_reason: reason.trim() })
|
|
setReason('')
|
|
onClose()
|
|
}
|
|
|
|
const handleClose = () => {
|
|
if (!isProcessing) {
|
|
setReason('')
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={open} onClose={handleClose} title="Escalate Session" size="sm">
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-3 rounded-xl border border-warning/20 bg-warning/5 p-3">
|
|
<AlertTriangle size={16} className="text-warning shrink-0 mt-0.5" />
|
|
<p className="text-sm text-warning">
|
|
This will mark the session as requesting escalation. Team members will see it in their escalation queue and can pick it up with full context.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1.5 block text-sm font-medium text-foreground">
|
|
Why are you escalating?
|
|
</label>
|
|
<RichTextInput
|
|
value={reason}
|
|
onChange={setReason}
|
|
onFilesChange={setEscalateUploads}
|
|
sessionId={sessionId}
|
|
placeholder="e.g. I've exhausted all networking diagnostics and suspect this is a firewall policy issue that requires senior admin access..."
|
|
rows={4}
|
|
onSubmit={handleSubmit}
|
|
/>
|
|
<p className="mt-1 text-[0.625rem] text-text-muted">
|
|
Minimum 5 characters. This will be shown to the engineer who picks up.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col-reverse gap-2 sm:flex-row">
|
|
<button
|
|
onClick={handleClose}
|
|
disabled={isProcessing}
|
|
className="flex-1 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 min-h-[44px] text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!reason.trim() || reason.trim().length < 5 || isProcessing}
|
|
className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-warning px-4 py-2.5 min-h-[44px] text-sm font-semibold text-white hover:bg-warning active:scale-[0.98] disabled:opacity-40 transition-all"
|
|
>
|
|
{isProcessing ? (
|
|
<Loader2 size={14} className="animate-spin" />
|
|
) : (
|
|
<AlertTriangle size={14} />
|
|
)}
|
|
{hasPsaTicket ? 'Escalate & Update Ticket' : 'Escalate'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|