feat: two-phase resolve with streaming ticket notes generation

ConcludeSessionModal now resolves instantly (Phase 1) then streams ticket notes via SSE (Phase 2), with skeleton loading and fallback. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-28 23:08:25 +00:00
parent bcab8158ab
commit 5e04aad16f
2 changed files with 108 additions and 38 deletions
--- a/frontend/src/components/assistant/ConcludeSessionModal.tsx
+++ b/frontend/src/components/assistant/ConcludeSessionModal.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import {
  X,
  CheckCircle2,
@@ -10,9 +10,11 @@ import {
  RefreshCw,
  ClipboardList,
  Sparkles,
+  AlertTriangle,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
+import { aiSessionsApi } from '@/api/aiSessions'

 type ConclusionOutcome = 'resolved' | 'escalated' | 'paused'

@@ -22,6 +24,7 @@ interface ConcludeSessionModalProps {
  onConclude: (outcome: ConclusionOutcome, notes: string) => Promise<string>
  onResumeNew: (summary: string) => void
  chatTitle: string
+  sessionId: string | null
 }

 const OUTCOMES: { value: ConclusionOutcome; label: string; description: string; icon: typeof CheckCircle2; color: string; bg: string; border: string }[] = [
@@ -62,6 +65,7 @@ export function ConcludeSessionModal({
  onConclude,
  onResumeNew,
  chatTitle,
+  sessionId,
 }: ConcludeSessionModalProps) {
  const [step, setStep] = useState<ModalStep>('select-outcome')
  const [outcome, setOutcome] = useState<ConclusionOutcome | null>(null)
@@ -70,6 +74,9 @@ export function ConcludeSessionModal({
  const [generating, setGenerating] = useState(false)
  const [copied, setCopied] = useState(false)
  const [error, setError] = useState<string | null>(null)
+  const [streaming, setStreaming] = useState(false)
+  const [streamError, setStreamError] = useState<string | null>(null)
+  const summaryRef = useRef('')

  // Reset state when modal opens
  useEffect(() => {
@@ -81,6 +88,9 @@ export function ConcludeSessionModal({
      setGenerating(false)
      setCopied(false)
      setError(null)
+      setStreaming(false)
+      setStreamError(null)
+      summaryRef.current = ''
    }
  }, [isOpen])

@@ -95,12 +105,50 @@ export function ConcludeSessionModal({
    setError(null)

    try {
-      const result = await onConclude(outcome, notes)
-      setSummary(result)
+      // Phase 1: Resolve/escalate/pause the session (fast)
+      await onConclude(outcome, notes)
+
+      // Phase 2: Transition to summary step immediately
      setStep('summary')
+      setGenerating(false)
+
+      // For resolved sessions, stream ticket notes
+      if (outcome === 'resolved' && sessionId) {
+        setStreaming(true)
+        setStreamError(null)
+        summaryRef.current = ''
+
+        aiSessionsApi.streamDocumentation(
+          sessionId,
+          (chunk) => {
+            summaryRef.current += chunk
+            setSummary(summaryRef.current)
+          },
+          () => {
+            setStreaming(false)
+          },
+          (err) => {
+            setStreaming(false)
+            setStreamError(err)
+            // Try non-streaming fallback
+            aiSessionsApi.getDocumentation(sessionId).then((doc) => {
+              const fallback = `## Problem Summary\n${doc.problem_summary}\n\n## Steps Taken\n${doc.diagnostic_steps.map(s => `- ${s.description}`).join('\n')}\n\n## Resolution\n${doc.resolution_summary || 'See conversation'}\n\n## Next Steps\nNone`
+              setSummary(fallback)
+              setStreamError(null)
+            }).catch(() => {
+              if (!summaryRef.current) {
+                setSummary('Documentation generation failed. You can copy the conversation from the chat.')
+              }
+            })
+          },
+        )
+      } else if (outcome === 'escalated') {
+        setSummary('Session escalated. Ticket notes will be generated when the session is resolved.')
+      } else {
+        setSummary('Session paused. Progress saved — you can resume anytime.')
+      }
    } catch {
-      setError('Failed to generate summary. Please try again.')
-    } finally {
+      setError('Failed to conclude session. Please try again.')
      setGenerating(false)
    }
  }
@@ -306,7 +354,7 @@ export function ConcludeSessionModal({
                </div>
              )}

-              {/* Generated summary */}
+              {/* Generated ticket notes */}
              <div
                className="rounded-xl border p-5 bg-card"
                style={{ borderColor: 'var(--color-border-default)' }}
@@ -314,12 +362,33 @@ export function ConcludeSessionModal({
                <div className="flex items-center justify-between mb-3">
                  <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
                    <Sparkles size={10} className="text-primary" />
-                    Generated Ticket Notes
+                    Ticket Notes
                  </span>
+                  {streaming && (
+                    <Loader2 size={14} className="animate-spin text-primary" />
+                  )}
                </div>
-                <div className="prose-sm text-foreground">
-                  <MarkdownContent content={summary} className="text-[0.8125rem] leading-relaxed" />
-                </div>
+
+                {/* Streaming content or skeleton */}
+                {summary ? (
+                  <div className="prose-sm text-foreground">
+                    <MarkdownContent content={summary} className="text-[0.8125rem] leading-relaxed" />
+                  </div>
+                ) : streaming ? (
+                  <div className="space-y-3 animate-pulse">
+                    <div className="h-4 bg-elevated rounded w-1/3" />
+                    <div className="h-3 bg-elevated rounded w-full" />
+                    <div className="h-3 bg-elevated rounded w-5/6" />
+                    <div className="h-4 bg-elevated rounded w-1/4 mt-4" />
+                    <div className="h-3 bg-elevated rounded w-full" />
+                    <div className="h-3 bg-elevated rounded w-4/5" />
+                  </div>
+                ) : streamError ? (
+                  <div className="flex items-center gap-2 text-sm text-amber-400">
+                    <AlertTriangle size={14} />
+                    {streamError}
+                  </div>
+                ) : null}
              </div>
            </div>
          )}
@@ -384,27 +453,29 @@ export function ConcludeSessionModal({
                )}
              </div>
              <div className="flex items-center gap-2">
-                <button
-                  onClick={handleCopy}
-                  className={cn(
-                    'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all',
-                    copied
-                      ? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
-                      : 'bg-primary text-white hover:brightness-110 active:scale-[0.98]'
-                  )}
-                >
-                  {copied ? (
-                    <>
-                      <Check size={15} />
-                      Copied!
-                    </>
-                  ) : (
-                    <>
-                      <Copy size={15} />
-                      Copy to Clipboard
-                    </>
-                  )}
-                </button>
+                {summary && !streaming && (
+                  <button
+                    onClick={handleCopy}
+                    className={cn(
+                      'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all',
+                      copied
+                        ? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
+                        : 'bg-primary text-white hover:brightness-110 active:scale-[0.98]'
+                    )}
+                  >
+                    {copied ? (
+                      <>
+                        <Check size={15} />
+                        Copied!
+                      </>
+                    ) : (
+                      <>
+                        <Copy size={15} />
+                        Copy to Clipboard
+                      </>
+                    )}
+                  </button>
+                )}
                <button
                  onClick={onClose}
                  className="px-4 py-2.5 rounded-lg text-sm text-muted-foreground hover:text-foreground bg-input border border-border hover:border-border-hover transition-all"
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -396,21 +396,19 @@ export default function AssistantChatPage() {
  const handleConclude = async (outcome: ConclusionOutcome, _notes: string): Promise<string> => {
    if (!activeChatId) throw new Error('No active chat')

-    // Map conclusion outcomes to ai_sessions actions
    if (outcome === 'resolved') {
-      const result = await aiSessionsApi.resolveSession(activeChatId, {
+      await aiSessionsApi.resolveSession(activeChatId, {
        resolution_summary: _notes || 'Resolved via assistant chat',
      })
-      return result.documentation?.problem_summary || 'Session resolved'
+      return activeChatId
    } else if (outcome === 'escalated') {
-      const result = await aiSessionsApi.escalateSession(activeChatId, {
+      await aiSessionsApi.escalateSession(activeChatId, {
        escalation_reason: _notes || 'Escalated from assistant chat',
      })
-      return result.documentation?.problem_summary || 'Session escalated'
+      return activeChatId
    } else {
-      // paused
      await aiSessionsApi.pauseSession(activeChatId)
-      return 'Session paused'
+      return activeChatId
    }
  }

@@ -830,6 +828,7 @@ export default function AssistantChatPage() {
        onConclude={handleConclude}
        onResumeNew={handleResumeNew}
        chatTitle={chats.find(c => c.id === activeChatId)?.title ?? 'Chat'}
+        sessionId={activeChatId}
      />
    </div>
    </>