feat: AI chat conclusion + survey completion & management (#95)
* fix: increase assistant chat input height from 1 to 3 rows Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Anthropic prompt caching to assistant chat Cache the static system prompt and conversation history prefix across turns, reducing input token costs by ~80% on multi-turn conversations. RAG context is intentionally uncached since it changes per query. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Microsoft Learn MCP integration + refine assistant system prompt - Integrate Microsoft Learn MCP server via Anthropic's MCP connector for real-time documentation lookups (docs search, fetch, code samples) - Refine system prompt: clear persona, structured answer guidelines, when to use RAG flows vs Microsoft Learn, guardrails against fabrication - Add ENABLE_MCP_MICROSOFT_LEARN config toggle (default: True) - Fix bugs from prior edit: wrong MCP URL, broken indentation, undefined usage/token variables, NOT_GIVEN for disabled MCP params - Log MCP tool usage and cache performance Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: AI chat session conclusion + survey completion & management AI Assistant - Conclude Session: - 3-step modal: select outcome (resolved/escalated/paused), add notes, AI-generated summary - AI generates structured ticket notes from conversation transcript (PSA-ready format) - Copy to clipboard for pasting into ticketing systems - "Resume in New Chat" for paused sessions (pre-loads context into new chat) - Backend: POST /chats/{id}/conclude endpoint, conclusion_summary/outcome/concluded_at fields - Migration 048: add conclusion fields to assistant_chats Survey Completion Flow: - Email-to-self option after submission (branded HTML email with formatted responses) - Finish button navigates to /survey/thank-you page - Thank you page with close-window message and feedback email callout - Already-submitted state updated with same messaging - Backend: POST /survey/email-copy public endpoint Survey Admin Management: - Read/unread indicators (cyan dot, bold name, auto-mark on expand) - Unread count stat card - Per-row context menu: mark read/unread, archive/unarchive, delete - Bulk actions bar: select all, mark read/unread, archive, delete - Show Archived toggle to filter archived responses - Backend: 7 new admin endpoints (read, unread, archive, unarchive, delete, bulk) - Migration 049: add is_read, archived_at to survey_responses Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: initialize VerifyEmailPage state from token to avoid setState in effect Moves the no-token error case from useEffect into initial state to satisfy the react-hooks/set-state-in-effect ESLint rule. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #95.
This commit is contained in:
chihlasm
421
frontend/src/components/assistant/ConcludeSessionModal.tsx
Normal file
421
frontend/src/components/assistant/ConcludeSessionModal.tsx
Normal file
@@ -0,0 +1,421 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
X,
|
||||
CheckCircle2,
|
||||
ArrowUpRight,
|
||||
Pause,
|
||||
Loader2,
|
||||
Copy,
|
||||
Check,
|
||||
RefreshCw,
|
||||
ClipboardList,
|
||||
Sparkles,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { MarkdownContent } from '@/components/ui/MarkdownContent'
|
||||
|
||||
type ConclusionOutcome = 'resolved' | 'escalated' | 'paused'
|
||||
|
||||
interface ConcludeSessionModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onConclude: (outcome: ConclusionOutcome, notes: string) => Promise<string>
|
||||
onResumeNew: (summary: string) => void
|
||||
chatTitle: string
|
||||
}
|
||||
|
||||
const OUTCOMES: { value: ConclusionOutcome; label: string; description: string; icon: typeof CheckCircle2; color: string; bg: string; border: string }[] = [
|
||||
{
|
||||
value: 'resolved',
|
||||
label: 'Resolved',
|
||||
description: 'Issue has been fixed or answered',
|
||||
icon: CheckCircle2,
|
||||
color: 'text-emerald-400',
|
||||
bg: 'bg-emerald-400/10',
|
||||
border: 'border-emerald-400/30',
|
||||
},
|
||||
{
|
||||
value: 'escalated',
|
||||
label: 'Escalate',
|
||||
description: 'Needs to be handed off or escalated',
|
||||
icon: ArrowUpRight,
|
||||
color: 'text-amber-400',
|
||||
bg: 'bg-amber-400/10',
|
||||
border: 'border-amber-400/30',
|
||||
},
|
||||
{
|
||||
value: 'paused',
|
||||
label: 'Paused',
|
||||
description: 'Continuing later — saving progress',
|
||||
icon: Pause,
|
||||
color: 'text-blue-400',
|
||||
bg: 'bg-blue-400/10',
|
||||
border: 'border-blue-400/30',
|
||||
},
|
||||
]
|
||||
|
||||
type ModalStep = 'select-outcome' | 'add-notes' | 'summary'
|
||||
|
||||
export function ConcludeSessionModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConclude,
|
||||
onResumeNew,
|
||||
chatTitle,
|
||||
}: ConcludeSessionModalProps) {
|
||||
const [step, setStep] = useState<ModalStep>('select-outcome')
|
||||
const [outcome, setOutcome] = useState<ConclusionOutcome | null>(null)
|
||||
const [notes, setNotes] = useState('')
|
||||
const [summary, setSummary] = useState('')
|
||||
const [generating, setGenerating] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Reset state when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setStep('select-outcome')
|
||||
setOutcome(null)
|
||||
setNotes('')
|
||||
setSummary('')
|
||||
setGenerating(false)
|
||||
setCopied(false)
|
||||
setError(null)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const handleOutcomeSelect = (selected: ConclusionOutcome) => {
|
||||
setOutcome(selected)
|
||||
setStep('add-notes')
|
||||
}
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!outcome) return
|
||||
setGenerating(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const result = await onConclude(outcome, notes)
|
||||
setSummary(result)
|
||||
setStep('summary')
|
||||
} catch {
|
||||
setError('Failed to generate summary. Please try again.')
|
||||
} finally {
|
||||
setGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(summary)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch {
|
||||
// Fallback
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = summary
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResumeNew = () => {
|
||||
onResumeNew(summary)
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const selectedOutcome = OUTCOMES.find(o => o.value === outcome)
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="relative w-full max-w-2xl mx-4 glass-card-static overflow-hidden animate-in fade-in zoom-in-95 duration-200"
|
||||
style={{
|
||||
maxHeight: 'calc(100vh - 4rem)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="flex items-center justify-between px-6 py-4 border-b shrink-0"
|
||||
style={{ borderColor: 'var(--glass-border)' }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<ClipboardList size={18} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-base font-heading font-semibold text-foreground">
|
||||
Conclude Session
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground truncate max-w-[300px]">
|
||||
{chatTitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-lg hover:bg-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Step indicator */}
|
||||
<div
|
||||
className="px-6 py-3 border-b shrink-0 flex items-center gap-2"
|
||||
style={{ borderColor: 'var(--glass-border)' }}
|
||||
>
|
||||
{(['select-outcome', 'add-notes', 'summary'] as ModalStep[]).map((s, i) => (
|
||||
<div key={s} className="flex items-center gap-2">
|
||||
{i > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-px',
|
||||
step === s || (i === 1 && step === 'summary') || (i === 2 && step === 'summary')
|
||||
? 'bg-primary/40'
|
||||
: 'bg-[rgba(255,255,255,0.06)]'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-label font-medium transition-colors',
|
||||
step === s
|
||||
? 'bg-gradient-brand text-[#101114]'
|
||||
: (i < ['select-outcome', 'add-notes', 'summary'].indexOf(step))
|
||||
? 'bg-primary/20 text-primary'
|
||||
: 'bg-[rgba(255,255,255,0.06)] text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs font-label',
|
||||
step === s ? 'text-foreground' : 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{s === 'select-outcome' ? 'Outcome' : s === 'add-notes' ? 'Notes' : 'Summary'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">
|
||||
{/* Step 1: Select Outcome */}
|
||||
{step === 'select-outcome' && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
How did this session end?
|
||||
</p>
|
||||
{OUTCOMES.map(o => {
|
||||
const Icon = o.icon
|
||||
return (
|
||||
<button
|
||||
key={o.value}
|
||||
onClick={() => handleOutcomeSelect(o.value)}
|
||||
className={cn(
|
||||
'w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left',
|
||||
'hover:scale-[1.01] active:scale-[0.99]',
|
||||
'bg-[rgba(255,255,255,0.02)] border-[rgba(255,255,255,0.06)]',
|
||||
'hover:border-[rgba(255,255,255,0.12)] hover:bg-[rgba(255,255,255,0.04)]'
|
||||
)}
|
||||
>
|
||||
<div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', o.bg)}>
|
||||
<Icon size={20} className={o.color} />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-semibold text-foreground block">{o.label}</span>
|
||||
<span className="text-xs text-muted-foreground">{o.description}</span>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Add Notes */}
|
||||
{step === 'add-notes' && selectedOutcome && (
|
||||
<div className="space-y-4">
|
||||
{/* Selected outcome badge */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={cn('px-3 py-1.5 rounded-lg flex items-center gap-2 text-xs font-label', selectedOutcome.bg, selectedOutcome.border, 'border')}>
|
||||
<selectedOutcome.icon size={14} className={selectedOutcome.color} />
|
||||
<span className={selectedOutcome.color}>{selectedOutcome.label}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setStep('select-outcome')}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground block mb-2">
|
||||
Additional Notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
placeholder={
|
||||
outcome === 'resolved'
|
||||
? 'Any additional context about the resolution...'
|
||||
: outcome === 'escalated'
|
||||
? 'Reason for escalation, who to assign to...'
|
||||
: 'What still needs to be done, where you left off...'
|
||||
}
|
||||
rows={4}
|
||||
className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
|
||||
style={{ borderColor: 'var(--glass-border)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-rose-400 bg-rose-400/10 border border-rose-400/20 rounded-lg px-4 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Summary */}
|
||||
{step === 'summary' && (
|
||||
<div className="space-y-4">
|
||||
{/* Outcome badge */}
|
||||
{selectedOutcome && (
|
||||
<div className={cn('px-3 py-1.5 rounded-lg inline-flex items-center gap-2 text-xs font-label', selectedOutcome.bg, selectedOutcome.border, 'border')}>
|
||||
<selectedOutcome.icon size={14} className={selectedOutcome.color} />
|
||||
<span className={selectedOutcome.color}>{selectedOutcome.label}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Generated summary */}
|
||||
<div
|
||||
className="rounded-xl border p-5 bg-[rgba(255,255,255,0.02)]"
|
||||
style={{ borderColor: 'var(--glass-border)' }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1.5">
|
||||
<Sparkles size={10} className="text-primary" />
|
||||
Generated Ticket Notes
|
||||
</span>
|
||||
</div>
|
||||
<div className="prose-sm text-foreground">
|
||||
<MarkdownContent content={summary} className="text-[0.8125rem] leading-relaxed" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer actions */}
|
||||
<div
|
||||
className="px-6 py-4 border-t shrink-0 flex items-center justify-between gap-3"
|
||||
style={{ borderColor: 'var(--glass-border)' }}
|
||||
>
|
||||
{step === 'select-outcome' && (
|
||||
<>
|
||||
<div />
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] transition-all"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 'add-notes' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setStep('select-outcome')}
|
||||
className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] transition-all"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
className="flex items-center gap-2 bg-gradient-brand text-[#101114] font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
|
||||
>
|
||||
{generating ? (
|
||||
<>
|
||||
<Loader2 size={15} className="animate-spin" />
|
||||
Generating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles size={15} />
|
||||
Generate Summary
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 'summary' && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
{outcome === 'paused' && (
|
||||
<button
|
||||
onClick={handleResumeNew}
|
||||
className="flex items-center gap-2 px-4 py-2.5 rounded-[10px] text-sm font-medium text-blue-400 bg-blue-400/10 border border-blue-400/20 hover:bg-blue-400/15 transition-all"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
Resume in New Chat
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-2.5 rounded-[10px] text-sm font-semibold transition-all',
|
||||
copied
|
||||
? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
|
||||
: 'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97]'
|
||||
)}
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check size={15} />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy size={15} />
|
||||
Copy to Clipboard
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2.5 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] transition-all"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user